@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

/* one-web, assistant-web and sysadmin-web each hold a byte-identical copy of
   this file. one-web/assets/ is the source; the asset_parity tests in the other
   two fail if their copy drifts from it. Edit one-web's copy and mirror it.
   See docs/parked.md. */
:root {
  --ff-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ff-heading: "Sora", ui-sans-serif, system-ui, sans-serif;
  --ff-wordmark: var(--ff-heading);
  --ff-mono: "Spline Sans Mono", ui-monospace, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --white: #FFFFFF;
  --black: var(--gray-12);
  --warm-paper-gray: #F6F8F7;
  --near-black-teal: #121A18;

  --smito-teal-900:#0B3B39;
  --smito-teal-800:#0F4B48;
  --smito-teal-700:#135E5A;
  --smito-teal-600:#17756F;
  --smito-teal-500:#1E8C84;
  --smito-teal-300:#7FBFBA;
  --smito-teal-100:#DCEEEC;
  --smito-teal-50:#EFF7F6;

  --smito-gray-700:#45514F;
  --smito-gray-500:#5C6A68;
  --smito-gray-300:#B7C2C0;
  --smito-gray-200:#DCE3E1;
  --smito-gray-100:#ECF0EF;
  --smito-gray-50:#F6F8F7;

  --smito-amber-600:#C58527;
  --smito-amber-500:#E8A33D;
  --smito-amber-100:#FBF0DC;

  --smito-ink:#1E2423;
  --text-heading: var(--smito-ink);
  --border-strong: var(--smito-gray-300);
  --shadow-raise: 0 4px 16px rgba(15, 59, 57, .08);

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:24px;

  --color-base: var(--warm-paper-gray);
  --color-surface: var(--stone-0);
  --color-base-foreground: var(--smito-gray-700);
  --color-base-foreground-muted: var(--smito-gray-500);
  --form-accent-color: var(--smito-teal-500);

  --color-accent: var(--smito-teal-600);
  --color-accent-foreground: #FFFFFF;
  --color-secondary-accent: transparent;
  --color-secondary-accent-foreground: var(--color-base-foreground);

  --surface-card-light: #FFFFFF;
  --surface-card-dark: #1A2422;
  --surface-card: var(--surface-card-light);

  --surface-2: var(--smito-teal-50);
  --surface-3: var(--smito-teal-100);
  --surface-4: var(--smito-teal-300);

  --surface-hover:var(--smito-teal-50);

  --h-color: var(--text-heading);
  --nav-color: var(--surface-card);
  --app-header-height: 69px;
  --mobile-action-bar-height: 4.25rem;
  /* --nav-link-color: var(--white); */
  /* --nav-link-hover-color: var(--teal-6); */
  --input-border-color: var(--smito-gray-200);
  --input-focus-border-color: var(--smito-teal-500);
  --input-invalid-border-color: var(--color-error-foreground);
  --fieldset-border-color: var(--smito-gray-200);
  --table-border-color: var(--smito-gray-200);
  --box-border-color: var(--smito-gray-200);
  --link-color: var(--smito-link);
  --button-border: 1px solid;
  --button-primary-border-color: var(--color-accent);
  --button-secondary-border-color: var(--teal-6);
  --button-background-color: var(--teal-9);
  --button-font-size: var(--font-size-sm);
  --button-radius: var(--radius-md);
  --button-disabled-color: var(--gray-5);
  --color-active-tab: var(--teal-10);
  --menu-highlight-color: var(--teal-0);
  --row-odd-color: var(--stone-2);
  --row-even-color: var(--stone-1);
  --thead-color: transparent;
  --tfoot-color: var(--color-base);
  --label-color: var(--color-base-foreground-muted);

  --color-success: #E4F2EB;
  --color-success-foreground: #23664A;
  --color-info: var(--smito-gray-100);
  --color-info-foreground: var(--smito-gray-700);
  --color-warning: #FBF0DC;
  --color-warning-foreground: #96600F;
  --color-error: #F9E9E6;
  --color-error-foreground: #A84437;
}

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

    --smito-teal-800:#4CC2B6;
    --smito-teal-700:#38B0A4;
    --smito-teal-600:#279C90;
    --smito-teal-500:#45BDB1;
    --smito-teal-300:#3E6B66;
    --smito-teal-100:#1E3733;
    --smito-teal-50:#152623;

    --smito-gray-700:#C2CDCA;
    --smito-gray-500:#8CA09B;
    --smito-gray-300:#435350;
    --smito-gray-200:#2B3734;
    --smito-gray-100:#232D2A;
    --smito-gray-50:#121A18;

    --smito-amber-600:#F0B457;
    --smito-amber-100:#3A2E17;

    --smito-ink:#EDF2F1;
    --shadow-raise: 0 4px 16px rgba(0, 0, 0, .4);

    --color-base: var(--near-black-teal);
    --color-surface: var(--stone-12);
    --surface-card: var(--surface-card-dark);
    --color-base-foreground: var(--smito-gray-700);
    --form-accent-color: var(--cyan-6);
    --fieldset-border-color: var(--box-border-color);
    --box-border-color: var(--gray-8);
    --button-secondary-border-color: var(--teal-10);
    --color-active-tab: var(--teal-3);
    --color-accent-foreground: #0E1917;
    --color-secondary-accent-foreground: var(--color-base-foreground);
    --menu-highlight-color: var(--teal-12);
    --row-odd-color: var(--stone-11);
    --row-even-color: var(--stone-10);

    --color-success: #1B2F26;
    --color-success-foreground: #5BBF93;
    --color-warning: #332918;
    --color-warning-foreground: #E0A247;
    --color-error: #33201C;
    --color-error-foreground: #E07B6C;
  }
}

@media print {
  @page {
    margin: 0;
  }

  header,
  footer {
    display: none !important;
  }

  .buttons,
  .print-hidden {
    display: none !important;
  }
}

body {
  font-family: var(--ff-body);
  font-size: var(--font-size-base);
  background-color: var(--color-base);
  color: var(--color-base-foreground);
}

::placeholder {
  color: var(--gray-6);
}

.app-layout {
  display: flex;
  align-items: flex-start;
}

.app-layout > .wrapper {
  flex: 1;
  min-width: 0;
  /* .wrapper's own gutter is max-width: 100% - 1rem plus margin-inline: auto,
     which only yields one while that max-width binds. As a flex item beside the
     rail it never reaches it, so the gutter silently disappears whenever the
     rail is open. Cap and pad explicitly instead; 110rem mirrors the cap in
     --wrapper-max-width. */
  max-width: 110rem;
  padding-inline: var(--space-2);
}

.assistant-rail {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--box-border-color);
  display: flex;
  flex-direction: column;
  position: sticky;
  /* header {} above is also sticky (top: 0). Without offsetting by its
     height, height: 100vh runs that far past the viewport bottom whenever
     the rail's natural position (right below the header) hasn't been
     scrolled past yet — hiding the composer until the user scrolls down. */
  top: var(--app-header-height);
  height: calc(100vh - var(--app-header-height));
  overflow: hidden;
  background-color: var(--surface-card);
  /* No explicit z-index: on a short page the rail can run out of room in
     its containing block near the bottom and briefly detach, drifting its
     top above y:0. header {} (z-index: 10) must stay above it when that
     happens, so leave this at the default stacking level rather than
     competing with header {} for top billing. */
}

.assistant-rail.is-hidden {
  display: none;
}

#assistant-rail-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.assistant-rail-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--box-border-color);
  color: var(--smito-teal-700);
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: -0.01em;
}

.assistant-rail-header svg {
  flex-shrink: 0;
}

.assistant-rail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-base-foreground-muted);
  cursor: pointer;
}

.assistant-rail-close:hover {
  background-color: var(--smito-teal-50);
  color: var(--smito-teal-700);
}

.assistant-rail-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.assistant-rail-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.assistant-rail-empty p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-base-foreground-muted);
}

.assistant-rail-starters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.assistant-rail-starter {
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background-color: var(--surface-card);
  color: var(--color-base-foreground);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
}

.assistant-rail-starter:hover {
  background-color: var(--smito-teal-50);
  border-color: var(--smito-teal-500);
  color: var(--smito-teal-700);
}

/* The turbo-stream response only appends new messages — it never removes
   this server-rendered placeholder, so once a message exists, hide it. */
.assistant-rail-messages:has(.assistant-message) .assistant-rail-empty {
  display: none;
}

.assistant-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#assistant-rail-messages .assistant-message + .assistant-message {
  border-top: 1px solid var(--box-border-color);
  padding-top: var(--space-4);
}

.assistant-message-query {
  align-self: flex-end;
  max-width: 88%;
  padding: var(--space-2) var(--space-4);
  border-radius: 14px 14px 4px 14px;
  background-color: var(--smito-teal-100);
  color: var(--text-heading);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.assistant-message-understood {
  align-self: flex-start;
  max-width: 100%;
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-heading);
}

.assistant-message-response {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-base-foreground);
}

.assistant-result-card {
  display: block;
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  color: inherit;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.assistant-result-card:hover {
  border-color: var(--smito-teal-500);
  box-shadow: var(--shadow-raise);
}

.assistant-message-report {
  align-self: flex-end;
}

.assistant-message-report-button {
  border: none;
  background: transparent;
  padding: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-base-foreground);
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 180ms ease;
}

.assistant-message-report-button:hover {
  opacity: 1;
  text-decoration: underline;
}

.assistant-message-report-done {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-base-foreground);
  opacity: 0.75;
}

.assistant-rail-composer {
  flex-shrink: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--box-border-color);
}

.assistant-rail-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background-color: var(--color-base);
}

.assistant-rail-input-row input {
  border: none;
  background: transparent;
  height: 2rem;
  padding: 0;
}

.assistant-rail-input-row input:focus {
  outline: none;
}

.assistant-rail-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
  cursor: pointer;
}

.assistant-rail-send:hover {
  filter: brightness(110%);
}

.assistant-rail-send:disabled {
  background-color: var(--button-disabled-color);
  cursor: not-allowed;
}

/* form[aria-busy] button[type=submit] (main.css above) assumes a text
   button — it pads text left and pins the spinner to the right edge. Our
   send button is a fixed-size icon button, so re-center the spinner over
   the icon instead. */
.assistant-rail-composer form[aria-busy="true"] .assistant-rail-send {
  padding-inline-end: 0;
}

.assistant-rail-composer form[aria-busy="true"] .assistant-rail-send::after {
  right: 50%;
  margin-right: -0.45em;
}

.assistant-rail-composer form[aria-busy="true"] .assistant-rail-send svg {
  visibility: hidden;
}

@media screen and (max-width: 1023px) {
  .assistant-rail {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    height: auto;
    max-height: 80vh;
    border-left: none;
    border-top: 1px solid var(--box-border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 50;
  }
}

.assistant-rail-backdrop {
  display: none;
}

@media screen and (max-width: 1023px) {
  .assistant-rail-backdrop:not(.is-hidden) {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 45;
  }
}

poster-template-grid {
  display: block;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-min-width, 180px), 1fr));
  gap: var(--space-4);
}

/* A phone is too narrow for the desktop tile: 180px leaves room for one column,
   so a gallery becomes a single 428px-tall tile per row and you see one item at
   a time. Capping the track floor below half the width lands it on two. The cap
   is a max, so a consumer asking for smaller tiles still gets them. */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--gallery-min-width, 180px), 45%), 1fr));
  }
}

.gallery-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-base-foreground-muted);
}

.asset-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-base);
  color: currentColor;
  text-decoration: none;
}

.asset-card:hover {
  filter: brightness(110%);
}

.asset-card[hidden] {
  display: none;
}

.asset-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* min-height because the frame is a flex item of .asset-card, so its automatic
   minimum size is the intrinsic height of the image inside it - and that floor
   beats aspect-ratio. A 1080x1920 poster stretched the 3/4 frame to 170x290. */
.asset-card-preview {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--gallery-ratio, 3 / 4);
  border-radius: var(--radius-md);
  background-color: var(--smito-teal-100);
  color: var(--text-heading);
  text-align: center;
  padding: var(--space-2);
}

/* The frame is a fixed 3 / 4 while templates come in four orientations, so
   contain rather than cover - a landscape thumbnail letterboxes against the
   teal instead of being silently cropped. Revisit once real thumbnails exist
   and the frame can follow the template's own orientation. */
.asset-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.asset-card-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-round);
  background-color: var(--color-base);
  color: var(--color-base-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-wrap: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* --size-content-3 is open-props' 60ch reading measure. Prose stretched to a wide
   dialog's full width is unreadable however little of it there is. */
.poster-markup-notes {
  display: block;
  max-width: var(--size-content-3);
}

.asset-card-badge-accent {
  right: auto;
  left: var(--space-2);
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* Design systems are tiles rather than list rows, and each tile is a specimen:
   they differ mainly in colour and typeface, so the swatches get the room to
   carry that and the text renders in the system's own faces. */
.design-system-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

/* The tile paints itself in the design system's own Surface, so a card of
   Calm and a card of Studio do not share a background. The border stays the
   app's, so the grid still reads as a grid of this app's cards. */
.design-system-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--card-bg-light);
  color: var(--card-fg-light);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .design-system-card {
    background-color: var(--card-bg-dark);
    color: var(--card-fg-dark);
  }
}

.design-system-preview:has(#design-system-scheme-light:checked) .design-system-card {
  background-color: var(--card-bg-light);
  color: var(--card-fg-light);
}

.design-system-preview:has(#design-system-scheme-dark:checked) .design-system-card {
  background-color: var(--card-bg-dark);
  color: var(--card-fg-dark);
}

/* Trait pills tint from the card's own foreground rather than the app's grey,
   so they stay legible whatever surface the design system paints underneath. */
.design-system-card-traits .pill {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* h1-h4 carry the app's --h-color, so the specimen's heading has to opt back
   into the card's own foreground or it renders the app's ink on the design
   system's surface - invisible the moment the two schemes disagree. */
.design-system-card h3 {
  color: inherit;
}

.design-system-card:hover {
  filter: brightness(110%);
}

.design-system-card-swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

/* Each swatch carries both of the design system's schemes as custom properties;
   which one paints follows the viewer, until the preview's toggle forces one. */
.design-system-card-swatch {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: 12px;
  text-align: center;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--swatch-bg-light);
  color: var(--swatch-fg-light);
}

@media (prefers-color-scheme: dark) {
  .design-system-card-swatch {
    background-color: var(--swatch-bg-dark);
    color: var(--swatch-fg-dark);
  }
}

.design-system-preview:has(#design-system-scheme-light:checked) .design-system-card-swatch {
  background-color: var(--swatch-bg-light);
  color: var(--swatch-fg-light);
}

.design-system-preview:has(#design-system-scheme-dark:checked) .design-system-card-swatch {
  background-color: var(--swatch-bg-dark);
  color: var(--swatch-fg-dark);
}

.design-system-card-traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.design-system-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* A colour in a design system, shown as the colour itself. The background and
   foreground come from inline styles, because they are the data - only the
   shape belongs here. */
design-system-color-swatch button {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--ff-mono, monospace);
  font-size: var(--font-size-sm);
  text-align: center;
  cursor: pointer;
  background-color: var(--swatch-background);
  color: var(--swatch-foreground);
}

.design-system-swatches {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* A starter's palette, each swatch carrying the name of the role it fills.
   Unlabelled swatches show the hues and hide which one is the brand colour,
   which is the thing being chosen. */
.design-system-swatch-chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-wrap: nowrap;
}

header {
  padding: var(--space-4) var(--space-2);
  min-height: var(--app-header-height);
  background-color: var(--nav-color);
  border-bottom: 1px solid var(--box-border-color);
  color: var(--color-base-foreground);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-nav button {
  color: currentColor;
}

.app-nav button svg {
  display: block;
}

#assistant-toggle-button.active {
  color: var(--color-active-tab);
}

#launcher-toggle-button {
  background-color: var(--smito-teal-100);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  transition: background-color 0.15s ease;
}

#launcher-toggle-button:hover {
  background-color: var(--smito-teal-300);
}

.app-nav a {
  /* color: var(--nav-link-color); */
  color: currentColor;
  font-weight: 500;
  position: relative;
}

/*
.app-nav .header-logo a:hover,
.app-nav .right-items a:hover {
  color: var(--nav-link-hover-color);
}
*/

.nav-item a:after {
  content: '';
  height: 2px;
  width: 0;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  background-color: currentColor;
  transition: width 250ms ease-out;
}

.nav-item a:hover::after {
  width: 100%;
}

.nav-item a.active {
  color: var(--color-active-tab);
}

.nav-item a.active::after {
  width: 100%;
  background-color: var(--color-active-tab);
}

.app-nav .right-items {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.25rem;
}

.app-nav .right-items .organization {
  text-align: right;
}

.switcher-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.switcher-pill:hover {
  background-color: var(--surface-hover);
  border-color: var(--color-accent);
}

.switcher-pill svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.header-popover {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--smito-teal-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4);
  background-color: var(--surface-card);
  opacity: 0;
  transform: scale(0.96) translateY(0.5rem);
  transition:
    opacity 0.2s var(--ease-2),
    transform 0.2s var(--ease-2);
}

.header-popover:popover-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  .header-popover:popover-open {
    opacity: 0;
    transform: scale(0.96) translateY(0.5rem);
  }
}

.launcher-switcher {
  display: flex;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-4) 0;
}

.launcher-menu {
  width: min(calc(100vw - var(--space-4)), 150ch);
  padding: var(--space-4);
  background-color: var(--surface-card);
}

.launcher-menu-footer {
  margin-top: var(--space-4);
}

#launcher-menu-popover {
  position-area: bottom span-left;
  max-height: min(calc(100svh - var(--space-8)), 60rem);
  overflow-y: auto;
}

#profile-popover {
  position-area: bottom span-right;
  padding: var(--space-4);
  transform: translateX(1rem);
}

#profile-popover:popover-open {
  transform: translateX(0);
}

@starting-style {
  #profile-popover:popover-open {
    transform: translateX(1rem);
  }
}

@media screen and (min-width: 1280px) {
  #profile-popover {
    position-area: bottom span-left;
  }
}

main {
  min-height: calc(100svh - 10.5rem);
}

footer {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  flex-direction: column;
}

footer>div {
  font-size: var(--font-size-sm);
}

section {
  padding-block: var(--space-4);
}

dialog {
  min-width: 18rem;
  background-color: var(--color-base);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.app-nav .left-items {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header-logo {
  padding-right: 2rem;
}

.header-logo a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--ff-wordmark);
  font-weight: bold;
  font-size: var(--font-size-md);
  white-space: nowrap;
}

.header-logo img {
  display: block;
  width: 1.75rem;
  height: auto;
}

.nav-items-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-out;

  position: absolute;
  background-color: var(--nav-color);
  top: var(--app-header-height);
  left: 0;
  width: 100vw;
}

.nav-items {
  overflow: hidden;
  padding: 0 var(--space-4);
}

.nav-item {
   /*padding-block: var(--space-2);*/
}

@media screen and (min-width: 1280px) {
  .nav-items-wrapper {
    flex-grow: 1;
    display: block;
    position: static;
    width: auto;
  }

  .nav-items {
    height: auto;
    position: static;
    display: flex;
    gap: var(--space-4);
  }

  .nav-item {
    /* padding: var(--space-1); */
  }
}

v-menu-item,
assistant-starter {
  display: contents;
}

.page-heading-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-radius: var(--radius-lg);
}

@media screen and (min-width: 640px) {
  .page-heading-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.page-heading-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.page-heading-title h1 {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-xl);
}

.page-heading-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.page-heading-metric {
  text-align: left;
}

@media screen and (min-width: 640px) {
  .page-heading-metric {
    text-align: right;
  }
}

.page-heading-metric .label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smito-gray-300);
}

.page-heading-metric .value {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.detail-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-4);
}

.detail-page-main {
  min-width: 0;
}

.detail-page-rail {
  display: none;
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  --card-background-color: var(--color-base);
}

@media screen and (min-width: 1024px) {
  .detail-page-layout.has-rail {
    grid-template-columns: 1fr minmax(300px, 360px);
  }

  .detail-page-rail {
    display: block;
    position: sticky;
    top: 9rem;
  }
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-size-1) solid var(--box-border-color);
}

.page-header.is-sticky {
  position: sticky;
  top: var(--app-header-height);
  z-index: 2;
  background-color: var(--color-base);
  padding-block-start: var(--space-4);
}

.page-header-main {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.page-header-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-header-path {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}

.page-header-crumb {
  font-weight: 500;
  color: var(--color-base-foreground-muted);
  text-decoration: none;
}

.page-header-crumb:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-header-crumb.is-current {
  color: var(--color-base-foreground);
  font-weight: 600;
}

.page-header-crumb-separator {
  color: var(--color-base-foreground-muted);
}

.page-header-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-header-title-row h1 {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-header-qualifier {
  font-weight: 500;
  opacity: 0.72;
  margin-inline-end: var(--space-2);
}

.page-header-count {
  font-family: var(--ff-mono);
  font-size: var(--font-size-sm);
  color: var(--color-base-foreground-muted);
}

.page-header-stat {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
}

.page-header-stat .label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-base-foreground-muted);
}

.page-header-stat .value {
  margin-top: 0;
  font-family: var(--ff-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.page-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-2);
  margin-left: auto;
}

.page-header-stat + .page-header-actions {
  margin-left: var(--space-4);
}

.page-header-overflow {
  display: inline-flex;
}

.page-header-action {
  display: flex;
}

.page-header-overflow-popover,
.page-header-primary-popover {
  position-area: bottom span-left;
}

@media screen and (max-width: 1023px) {
  .page-header-action {
    display: none;
  }

  .page-header-main {
    flex-wrap: nowrap;
    align-items: center;
  }

  .page-header-main:has(.page-header-stat) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-header-main:has(.page-header-stat) .page-header-identity {
    grid-area: 1 / 1;
  }

  .page-header-main:has(.page-header-stat) .page-header-actions {
    grid-area: 1 / 2;
    margin-left: 0;
  }

  .page-header-stat {
    grid-area: 2 / 1 / 3 / -1;
    margin-left: 0;
    text-align: left;
  }

  .page-header-path {
    flex-wrap: nowrap;
  }

  .page-header-path > * {
    display: none;
  }

  .page-header-path > a.page-header-crumb:last-of-type {
    display: inline-flex;
    align-items: center;
  }

  .page-header-path > a.page-header-crumb:last-of-type::before {
    content: "\2039";
    margin-inline-end: var(--space-1);
  }

  .page-header-path:not(:has(a.page-header-crumb)) {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .page-header-actions:not(:has(.page-header-overflow-popover :is(a, button):not(.mobile-advanced-only))) .page-header-overflow {
    display: none;
  }
}

.page-menu {
  display: flex;
  gap: var(--space-2);
  background-color: var(--surface-card);
  position: sticky;
  top: var(--app-header-height);
  z-index: 2;
}

.page-menu:has(.button) {
  padding: var(--space-2);
  border: 1px solid var(--box-border-color);
}

@media screen and (min-width: 1024px) {
  .page-menu {
    align-items: center;
  }

  .page-menu:not(:has([popover] :is(a, button):not(.mobile-advanced-only))) .page-menu-advanced {
    display: none;
  }
}

.page-menu-items {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: auto;
  min-width: 0;
  flex: 1;
}

.page-menu-item {
  display: flex;
}

.page-menu-advanced {
  flex-shrink: 0;
  margin-left: auto;
}

.popup-menu .mobile-advanced-only {
  display: none;
}

@media screen and (max-width: 1023px) {
  .page-menu:has(.page-menu-advanced) .page-menu-items .page-menu-item:not(:has(.primary)) {
    display: none;
  }

  .popup-menu .mobile-advanced-only {
    display: block;
  }
}

.page-menu-advanced-popover {
  position-area: bottom span-left;
}

.context-menu {
  display: flex;
  gap: var(--space-1);
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  align-items: center;
}

.context-menu .button {
  padding: var(--space-1) var(--space-4);
}

.context-menu-advanced-popover {
  position-area: bottom span-left;
}

:where(textarea, select, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"])) {
  background-color: var(--surface-card);
  border: var(--border-size-1) solid var(--input-border-color);
  border-radius: var(--radius-2);
  padding: .2rem .5rem;
  width: 100%;
  height: 2rem;
}

:where(textarea:invalid, select:invalid, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]):invalid) {
  border-color: var(--input-invalid-border-color);
}

:where(textarea:focus, select:focus, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]):focus) {
  outline: 0;
  border-color: var(--input-focus-border-color);
}

:where(textarea) {
  resize: vertical;
  height: auto;
}

input[type="checkbox"] {
  width: auto;
  height: auto;
  accent-color: var(--color-accent);
}

input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only,
input[type="time"]:read-only {
  background-color: var(--surface-2);
}

label {
  font-size: var(--label-font-size, var(--font-size-xs));
  color: var(--label-color, var(--gray-6));
}

fieldset {
  border-width: 0;
  padding: 0;
}

fieldset.has-border {
  padding: var(--space-5) var(--space-4) var(--space-2) var(--space-4);
  background-color: var(--surface-card);

  legend {
    position: relative;
    top: var(--space-5);
    font-weight: 500;
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--form-accent-color);
  }
}

.summary-card {
  padding: var(--space-4);
  background-color: var(--surface-card);
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-lg);
}

fieldset,
input,
select,
textarea {
  /* margin-bottom: .25rem; */
}

iframe {
  width: 100%;
  height: calc(100% - 4.2rem);
}

.fields {
  display: grid;
	gap: var(--grid-gap);
}

/*
.summary.fields {
  grid-auto-rows: 1fr;
}
*/

.fields[data-columns="1"] {
  grid-template-columns: 1fr;
  grid-auto-flow: initial;
}

.fields[data-columns="2"] {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: initial;
}

.fields[data-columns="3"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: initial;
}

@media screen and (min-width: 1024px) {
  .fields[data-tablet-columns="2"] {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="3"] {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="4"] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="5"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="6"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }
}

.field {
  padding-block: var(--space-1);
}

.field.is-full-row {
  grid-column: 1 / -1;
}

.button {
  border: var(--button-border, none);
  border-radius: var(--radius-md);
  color: var(--color-accent-foreground);
  cursor: pointer;
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

#context-menu-advanced-button.button,
#page-menu-advanced-button.button {
  padding: .4rem var(--space-4);
}

.button:hover {
  filter: brightness(120%);
}

.button.has-popup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.button.primary {
  border: var(--button-primary-border, var(--button-border, none));
  background-color: var(--color-accent);
  border-color: var(--button-primary-border-color);
}

.button.secondary {
  border: var(--button-secondary-border, var(--button-border, none));
  background-color: var(--color-secondary-accent);
  border-color: var(--button-secondary-border-color);
  color: var(--color-secondary-accent-foreground, var(--color-base-foreground));
}

.button.secondary:hover,
.button.icon:hover {
  filter: brightness(120%);
}

.button.icon {
  color: var(--color-secondary-accent-foreground, var(--color-base-foreground));
  background-color: var(--color-secondary-accent);
}

.button.danger {
  background-color: inherit;
  border-color: var(--red-8);
  color: var(--red-8);
}

.button.danger:hover {
  filter: brightness(120%);
}

.button.light {
  border: none;
  background-color: inherit;
  color: var(--link-color);
  padding: 0 var(--space-1);
  text-transform: none;
}

.button.light:hover {
  filter: brightness(120%);
}

.button.icon {
  border: none;
  font-size: 0;
  background-color: inherit;
  color: var(--link-color);
}

.button:disabled {
  background-color: var(--button-disabled-color);
  cursor: not-allowed;
}

.button.secondary:disabled {
  background-color: inherit;
  color: var(--button-disabled-color);
}

form[aria-busy="true"] button[type="submit"] {
  position: relative;
  cursor: wait;
  pointer-events: none;
  padding-inline-end: calc(var(--space-4) + 1.2em);
}

form[aria-busy="true"] button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 0.9em;
  height: 0.9em;
  margin-top: -0.45em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-busy-spin 0.6s linear infinite;
}

@keyframes button-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

.dialog-close-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background-color: var(--red-8);
  color: var(--white);
  border: none;
  cursor: pointer;
  padding: .3rem var(--space-4);
}

.dialog-close-button:hover {
  filter: brightness(120%);
}

.buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.buttons.right {
  justify-content: right;
}

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

.buttons.reverse {
  flex-direction: row-reverse;
}

.buttons.search-buttons {
  border-top: 1px solid var(--box-border-color);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

h1,
h2,
h3,
h4 {
  font-family: var(--ff-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-block: var(--space-2);
  color: var(--h-color);
}

h1 {
  font-size: var(--font-size-xl);
  padding-block: var(--space-4);
}

h2 {
  font-size: var(--font-size-lg);
}

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

h4 {
  font-size: var(--font-size-base);
}

.dialog-title {
  font-weight: bold;
  font-family: var(--ff-heading);
  color: var(--h-color);
}

.dialog-content {
  margin-top: var(--space-5);
}

a {
  text-decoration: none;
  color: var(--link-color)
}

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

.table-wrapper {
  padding: var(--space-1) 0;
  overflow: auto;
  max-height: 80vh;
}

.table-wrapper.is-small {
  max-height: 30vh;
}

td,
th {
  /* border: var(--border-size-1) solid var(--table-border-color); */
  padding: var(--space-3) var(--space-4);
}

th {
  text-align: left;
}

thead {
  background-color: var(--thead-color);
}

tfoot {
  background-color: var(--tfoot-color);
}

table.list {
  font-size: var(--font-size-sm);
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-card) ;
}

table.list th,
table.list td {
  white-space: nowrap;
}

table.list td.text-right {
  font-family: var(--ff-mono);
}

table.list a {
  display: block;
}

table.list tbody tr,
table.list thead tr,
table.list tfoot tr {
  /*background-color: var(--row-background-color);*/
  border-bottom: 1px solid var(--box-border-color);
}

table.list caption.table-caption {
  font-size: var(--font-size-base);
  font-weight: 700;
  background-color: var(--surface-2);
  padding-block: var(--space-2);
}

table.list caption.no-rows-caption {
  caption-side: bottom;
  padding-block: var(--space-1);
}

.data-table thead th {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-base-foreground-muted);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table td.numeric {
  font-family: var(--ff-mono);
}

.data-table td.muted,
.data-table td.no-data {
  color: var(--color-base-foreground-muted);
}

.data-table tfoot tr {
  border-bottom: none;
  border-top: var(--border-size-2) solid var(--border-strong);
}

.data-table tfoot td {
  font-weight: 600;
}

table.cards-table thead {
  display: none;
}

table.cards-table tbody {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

table.cards-table tr {
  padding: 1rem;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  background-color: var(--surface-2);
}

table.cards-table td {
  display: block;
  padding: 0;
  border: none;
  text-align: left;
}

table.cards-table td::before {
  content: attr(data-label);
}

table.cards-table td.list-price {
  text-decoration: line-through;
}

table.summary {
  font-size: var(--font-size-sm);
  padding: var(--space-1) 0;
}

table.summary td {
  padding: .25rem 1rem;
}

form.small {
  max-width: var(--size-14);
  margin-inline: auto;
}

form.medium {
  max-width: 40rem;
  margin-inline: auto;
}

.message {
  color: var(--smito-gray-500);
  padding: var(--space-5);
}

.message.is-success {
  background-color: var(--color-success);
  color: var(--color-success-foreground);
}

.message.is-info {
  background-color: var(--color-info);
  color: var(--color-info-foreground);
}

.message.is-warning {
  background-color: var(--color-warning);
  color: var(--color-warning-foreground);
}

.message.is-error {
  background-color: var(--color-error);
  color: var(--color-error-foreground);
}

.confirmation-message {
  padding: var(--space-4) var(--space-5);
}

section.small {
  width: min(30rem, calc(100vw - 3rem));
  margin: 0 auto;
}

section.medium {
  width: min(50rem, calc(100vw - 3rem));
  margin: 0 auto;
}

section.large {
  width: min(80rem, calc(100vw - 3rem));
  margin: 0 auto;
}

.summary {
  font-size: var(--font-size-sm);
}

.highlights {
  font-size: var(--font-size-lg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.error {
  background-color: var(--red-1);
  padding: var(--space-2);
  border-left: 2px solid var(--red-9)
}

.menu-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 80vw), 1fr));
  gap: 1rem;
}

.menu-group-card {
  padding-bottom: 1rem;
  border-radius: var(--radius-3);
}

.menu-group-card .cards {
  padding-top: var(--space-2);
  border-top: 2px solid var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: bold;
}

.menu-card {
  --_card-background-color: var(--color-base);
  --_card-border-color: var(--box-border-color);
  --link-color: var(--color-base-foreground);
	padding: var(--space-4);
	background-color: var(--_card-background-color);
	border-radius: var(--rounded-corner-radius, var(--radius-2));
	overflow: hidden;
	position: relative;
  border: 1px solid var(--_card-border-color);
  border-radius: var(--radius-3);
}

.menu-card:hover {
  --_card-border-color: var(--color-accent);
  --link-color: var(--color-accent);
}

.menu-card-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu-card-footer p {
  font-size: var(--font-size-xs);
  font-weight: normal;
  color: var(--color-base-foreground-muted);
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-end: var(--space-4);
}

.radio-option:last-child {
  margin-inline-end: 0;
}

.radio-option.block {
  display: flex;
  margin-inline-end: 0;
}

.tabs {
  align-items: center;
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-size-1) solid var(--table-border-color);
  overflow-x: auto;
  margin-bottom: var(--space-2);
}

.tab {
  padding: var(--space-2) var(--space-4);
  text-wrap: nowrap;
}

a.tab {
  color: inherit;
  font-weight: 500;
}

a.tab.active {
  color: var(--color-active-tab);
}

.tab.active {
  border-bottom: var(--border-size-1) solid;
  border-color: var(--color-active-tab);
}

.pill-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background-color: var(--surface-2);
  border: var(--border-size-1) solid var(--table-border-color);
  border-radius: var(--radius-round);
  margin-bottom: var(--space-2);
  max-width: 100%;
  overflow-x: auto;
}

.pill-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-label {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-round);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-wrap: nowrap;
  color: inherit;
  cursor: pointer;
  user-select: none;
}

.pill-input:checked + .pill-label {
  background-color: var(--color-active-tab);
  color: var(--color-accent-foreground);
}

.pill-input:focus-visible + .pill-label {
  outline: 2px solid var(--color-active-tab);
  outline-offset: 2px;
}

.telegram-login-widget {
  height: 3rem;
  text-align: center;
  padding: 1rem;
}

.row-button {
  padding: .1rem var(--space-4);
}

ul.popup-menu {
  list-style: none;
}

.popup-menu {
  background-color: var(--color-base);
  color: var(--color-base-foreground);
  padding-left: 0;
  border: var(--border-size-1) solid var(--table-border-color);
  min-width: var(--size-14);
}

.popup-menu a {
  color: var(--color-base-foreground);
  display: block;
}

.popup-menu li a {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
}

.popup-menu li a:hover {
  background-color: var(--menu-highlight-color);
}

img.barcode {
  aspect-ratio: 2 / 1;
  min-width: 180px;
}

img.qr-code {
  max-width: min(100%, var(--size-14));
}

video.barcode-scanner-video {
  width: 100%;
  height: 10rem;
}

.generic-element-list {
  list-style: none;
  padding-left: 0;
}

.incoming-message {
  padding-right: 2rem;
}

.outgoing-message {
  padding-left: 2rem;
  text-align: right;
}

.message-timestamp {
  color: var(--color-base-foreground-muted);
}

/* Toasts are promoted to the top layer via the Popover API (see toast.js) so they render
   above an open dialog's backdrop. Neutralize the [popover] UA default styles that would
   otherwise fight Toastify's own positioning/appearance. :where() keeps this rule's
   specificity down to the attribute selector alone, so it never outranks Toastify's own
   single-class positioning rules (.toastify-center/-left/-right/-top/-bottom) - only `top`
   is reset here since that's the one side Toastify never sets itself for a bottom-gravity
   toast; left/right/bottom are left alone so Toastify's own positioning still wins. */
:where(.toastify)[popover] {
  top: auto;
  border: none;
  overflow: visible;
}

custom-page-section-entry-detail-panel {
  position: relative;
  display: block;
  border: var(--border-size-1) solid var(--table-border-color);
  border-radius: var(--radius-2);
  padding: var(--space-2);
  background-color: var(--surface-card);
  /* No margin-bottom here: the shadow-DOM original's :host rule had one, but
     reset.css's `* { margin: 0; }` always overrode it from the light-DOM side
     (a page's own styling of a shadow host wins over that host's internal
     :host styles regardless of specificity) - it was dead CSS. The real
     spacing between panels comes from each one's .py-2 wrapper div in
     custom-page-sections-tab.html. Re-adding it here would double up the gap. */
}

@media screen and (min-width: 1024px) {
  custom-page-section-entry-detail-panel .section-detail-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

custom-page-section-entry-detail-panel .button.primary,
custom-page-section-entry-detail-panel .button.secondary {
  padding: var(--space-1) var(--space-4);
}

generic-element-list-item {
  position: relative;
  display: block;
  padding: var(--space-4);
  background-color: var(--surface-2);
  /* No margin-bottom: same dead-CSS situation as custom-page-section-entry-
     detail-panel above - reset.css's `* { margin: 0; }` always overrode the
     shadow-DOM original's :host margin-bottom. The real spacing between
     items comes from .list-cards' border-bottom dividers (top level) or
     .grid's gap (nested children via .child-element-list). */
}

@media screen and (min-width: 1024px) {
  generic-element-list-item .generic-element-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

generic-element-list-item .button.primary,
generic-element-list-item .button.secondary {
  padding: var(--space-1) var(--space-4);
}

generic-element-list-item .child-element-list {
  border-left: 4px solid var(--sand-8);
  padding-left: var(--space-2);
  margin-top: var(--space-2);
}

.child-element-list generic-element-list-item {
  border: var(--border-size-1) solid var(--table-border-color);
}

/* .cards is a shared utility class (main.css/utils.css), so these height/scroll
   constraints for each picker's results list must stay scoped to their own tag -
   left unscoped they'd leak onto every .cards-classed element on the page. */
community-unit-picker .cards {
  max-height: var(--size-14);
  overflow-y: auto;
}

item-variant-picker {
  width: 100%;
}

item-variant-picker .cq-cards {
  max-height: min(var(--size-15), calc(100vh - 27rem));
  overflow-y: auto;
}

image-picker .cards {
  max-height: var(--size-15);
  max-width: 80rem;
  overflow-y: auto;
}

popup-menu-2 {
  display: block;
}

popup-menu-2 v-menu-item {
  display: contents;
}

popup-menu-2 .popover-menu {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 0;
}

popup-menu-2 .popover-menu.is-short {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1024px) {
  popup-menu-2 .popover-menu.is-long {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

popup-menu-2 .popover-menu a {
  color: var(--color-active-tab);
  display: block;
}

popup-menu-2 .popover-menu li a {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
}

popup-menu-2 .popover-menu li a:hover {
  background-color: var(--menu-highlight-color);
}

.poster-preview {
  container-type: inline-size;
  width: 100%;
  max-width: 420px;
  aspect-ratio: var(--poster-canvas-width) / var(--poster-canvas-height);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--box-border-color);
}

/* Two transforms, not one: the inline scale divides by a length, which a browser
   without css-values-4 drops at parse time, leaving this fixed fallback. */
.poster-preview-frame {
  display: block;
  border: 0;
  transform-origin: top left;
  transform: scale(var(--poster-preview-scale));
}

.queue-job-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.queue-job-strip-count {
  color: var(--color-base-foreground-muted);
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
}

.queue-job-strip-track {
  height: 6px;
  border-radius: var(--radius-round);
  background-color: var(--fieldset-border-color);
  overflow: hidden;
}

.queue-job-strip-bar {
  height: 100%;
  background-color: var(--color-accent);
  transition: width 0.4s var(--ease-2);
}

.poster-template-placeholders {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-base-foreground-muted);
}

.poster-template-markup {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  tab-size: 2;
}

.poster-template-preview:has(.poster-preview) {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--fieldset-border-color);
}

.poster-template-preview .poster-preview {
  margin: 0 auto;
  max-width: min(320px, calc(60vh * var(--poster-canvas-width) / var(--poster-canvas-height)));
}

.mobile-action-bar {
  display: none;
}

.mobile-action-sheet {
  display: none;
}

@media screen and (max-width: 767px) {
  .mobile-action-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    min-height: var(--mobile-action-bar-height);
    padding: var(--space-2) var(--space-4);
    background-color: var(--surface-card);
    border-top: 1px solid var(--box-border-color);
  }

  .mobile-action-bar-primary,
  .mobile-action-bar-secondary {
    flex: 1;
    min-width: 0;
  }

  .mobile-action-bar-primary .button,
  .mobile-action-bar-secondary .button {
    width: 100%;
    min-height: 2.875rem;
  }

  .mobile-action-sheet:popover-open {
    display: block;
  }

  .mobile-action-sheet {
    width: 100%;
    max-width: 100%;
    margin: 0 0 0 0;
    inset: auto 0 0 0;
    border: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-2) var(--space-2) var(--space-4);
    background-color: var(--surface-card);
    color: var(--color-base-foreground);
  }

  .mobile-action-sheet::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .mobile-action-sheet-grip {
    width: 2.25rem;
    height: 4px;
    margin: var(--space-1) auto var(--space-2);
    border-radius: var(--radius-round);
    background-color: var(--box-border-color);
  }

  .mobile-action-sheet-title {
    padding: 0 var(--space-4) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-base-foreground-muted);
  }

  .mobile-action-sheet .popup-menu :is(a, button) {
    min-height: 3rem;
  }

  body:has(.mobile-action-bar) .app-layout > .wrapper {
    padding-block-end: var(--mobile-action-bar-height);
  }

  body:has(.mobile-action-bar) .page-header-actions {
    display: none;
  }
}