/* Help center (/napoveda). Linked by layouts/help_center only, after the
   Tailwind bundle, so the app never downloads it. help_center_shell.css (the
   page frame: container, header, footer, search, the home page) comes after
   it; this file holds the article and glossary pages and the components of
   article bodies.

   Plain CSS, served by Propshaft as written: Tailwind does not process this
   file, so no @apply, no theme() and no nesting. Colours come from the token
   custom properties of app/assets/tailwind/application.css (hsl(var(--primary))
   and friends, defined on :root there); the radii (--radius-card, --radius-inset,
   --radius-control) are Tailwind @theme variables, which the bundle emits
   because the rounded-card / -inset / -control utilities are used in the app.
   The darker text tones of the tinted boxes (--help-*-strong) are mixed from
   the same tokens, so they follow a token change.

   Everything sits in @layer components. The layer order (theme, base,
   components, utilities) is fixed by the Tailwind bundle loaded first, so these
   rules beat the preflight resets of the base layer (list markers, heading
   sizes, link colours) but still lose to utilities: a component partial
   rendered inside an article (`hidden sm:flex`, `grid`, `mt-0`) keeps working.
   One exception, at the very end: the box of the image viewer's <dialog>,
   which has to beat the bundle's unlayered `dialog` rule.
   Hover and focus colours are hand-written because the colour tokens are not
   theme colours - `hover:bg-muted` & co. compile to nothing.

   Type sizes never go below what the help center had before the redesign
   (body 17 px, h2 24 px, callouts 16 px, tables 15 px, chrome 14 px); where
   the mockup's hierarchy asks for a step between two sizes, the step goes up.

   .help-prose styles the plain semantic HTML of an article body. Anything
   inside an element marked .not-prose (an HTML infographic, a widget) is left
   alone. */
@layer components {
  :root {
    /* Text on a light tint of its own colour (4.5:1 and more): the current
       article in the side list, the section being read, callout titles. */
    --help-primary-strong: color-mix(in srgb, hsl(var(--primary)) 75%, black);
    --help-warning-strong: color-mix(in srgb, hsl(var(--warning)) 50%, black);
    --help-success-strong: color-mix(in srgb, hsl(var(--success)) 60%, black);
    --help-destructive-strong: color-mix(in srgb, hsl(var(--destructive)) 70%, black);
    /* Between foreground and muted-foreground: the lead under a title. */
    --help-text-soft: hsl(var(--foreground) / .82);
    /* Numbers of sections, steps and keys. */
    --help-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .help-center :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: 0.25rem;
  }

  .help-skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 50;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-control);
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.875rem;
    font-weight: 600;
  }
  .help-skip-link:focus {
    top: 0.75rem;
  }

  .help-nav-link {
    color: hsl(var(--muted-foreground));
    transition: color .15s;
  }
  .help-nav-link:hover {
    color: hsl(var(--foreground));
  }

  .help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, opacity .15s;
  }
  .help-button svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
  .help-button-primary {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
  .help-button-primary:hover {
    opacity: .9;
  }
  /* Same weight as the outlined buttons of the app's page headers
     (.property-header-action). */
  .help-button-outline {
    background-color: hsl(var(--surface));
    border-color: hsl(var(--muted-foreground) / .3);
    color: hsl(var(--foreground));
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  }
  .help-button-outline:hover,
  .help-button-ghost:hover {
    background-color: hsl(var(--muted));
  }
  .help-button-ghost {
    color: hsl(var(--foreground));
  }
  /* button_to wraps its button in a <form>; keep it inline with the text. */
  .help-button-form {
    display: inline-block;
  }
  /* components/_app_link: leaves the help center for a screen of the app.
     Everything that stays in the help center is neutral (cards, the outlined
     buttons) and points "→"; this one is tinted in the app's blue, carries the
     app's window as a solid tile and points "↗". The text takes the darker
     primary tone, which keeps 4.5:1 on the tint. */
  .help-button-app {
    gap: 0.625rem;
    padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
    background-color: hsl(var(--primary) / .07);
    border-color: hsl(var(--primary) / .3);
    color: var(--help-primary-strong);
    transition: background-color .15s, border-color .15s;
  }
  .help-button-app:hover {
    background-color: hsl(var(--primary) / .12);
    border-color: hsl(var(--primary) / .5);
  }
  .help-button-app-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    /* Concentric with the button: its radius less the padding and border. */
    border-radius: calc(var(--radius-control) - 0.375rem);
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
  .help-button-app .help-button-app-arrow {
    margin-left: 0.125rem;
    transition: transform .15s;
  }
  .help-button-app:hover .help-button-app-arrow {
    transform: translate(1px, -1px);
  }
  @media (prefers-reduced-motion: reduce) {
    .help-button-app .help-button-app-arrow {
      transition: none;
    }
  }

  .help-card {
    display: block;
    height: 100%;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    background-color: hsl(var(--card));
    padding: 1.25rem 1.375rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    transition: border-color .15s, box-shadow .15s;
  }
  .help-card:hover {
    border-color: hsl(var(--primary) / .4);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  }
  .help-card-title {
    color: hsl(var(--foreground));
    transition: color .15s;
  }
  .help-card:hover .help-card-title {
    color: hsl(var(--primary));
  }

  .help-breadcrumb-link {
    color: hsl(var(--muted-foreground));
  }
  .help-breadcrumb-link:hover {
    color: hsl(var(--foreground));
    text-decoration: underline;
  }

  .help-cta {
    border: 1px solid hsl(var(--primary) / .2);
    border-radius: var(--radius-card);
    background-color: hsl(var(--primary) / .05);
  }

  /* Anchored blocks land below the sticky header (4rem), not under it. */
  .help-anchor {
    scroll-margin-top: 5rem;
  }

  /* -- Article page (help_articles/show) and glossary ---------------------- */
  /* Inside .help-container (help_center_shell.css: 1216 px of content from
     1280 px up). One column of text up to lg; from lg the reading rail joins
     on the right; from xl the list of all articles on the left. The text
     column is 40rem: about 72 characters a line at 17 px. */
  .help-page-frame {
    padding-block: 1.5rem 4rem;
  }
  .help-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
    margin-inline: auto;
  }
  .help-page-main {
    min-width: 0;
  }
  .help-page-nav,
  .help-page-rail {
    display: none;
  }
  @media (min-width: 64rem) {
    .help-page-frame {
      padding-block: 2rem 5rem;
    }
    .help-page {
      grid-template-columns: minmax(0, 40rem) minmax(0, 13rem);
      column-gap: 4rem;
      justify-content: center;
      max-width: none;
    }
    /* Sticky under the header, each rail on its own. */
    .help-page-rail {
      display: block;
      position: sticky;
      top: 6rem;
      align-self: start;
    }
  }
  @media (min-width: 80rem) {
    .help-page {
      grid-template-columns: minmax(0, 16rem) minmax(0, 40rem) minmax(0, 13rem);
      column-gap: 2.5rem;
      justify-content: space-between;
    }
    .help-page-nav {
      display: block;
      position: sticky;
      top: 6rem;
      align-self: start;
      max-height: calc(100vh - 7rem);
      overflow-y: auto;
    }
    .help-nav-disclosure {
      display: none;
    }
  }

  /* help_articles/_side_nav: every article by category, the current page on a
     light tint. */
  .help-side-nav-group + .help-side-nav-group {
    margin-top: 1.5rem;
  }
  .help-side-nav-label {
    margin-bottom: 0.375rem;
    padding-inline: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1rem;
    text-transform: uppercase;
  }
  .help-side-nav-list {
    display: grid;
    gap: 0.125rem;
  }
  .help-side-nav-link {
    display: block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: background-color .15s, color .15s;
  }
  .help-side-nav-link:hover {
    background-color: hsl(var(--muted));
  }
  .help-side-nav-link[aria-current="page"] {
    background-color: hsl(var(--primary) / .1);
    color: var(--help-primary-strong);
    font-weight: 600;
  }
  .help-side-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.75rem;
    padding-inline: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    transition: color .15s;
  }
  .help-side-nav-back:hover {
    color: hsl(var(--foreground));
  }
  .help-side-nav-back svg {
    width: 1rem;
    height: 1rem;
  }

  /* help_articles/_nav_disclosure: the same list, folded, below xl. */
  .help-nav-disclosure {
    margin-bottom: 1.25rem;
  }
  .help-nav-disclosure-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-control);
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: background-color .15s;
  }
  .help-nav-disclosure-toggle::-webkit-details-marker {
    display: none;
  }
  .help-nav-disclosure-toggle:hover {
    background-color: hsl(var(--muted));
  }
  .help-nav-disclosure-toggle svg {
    width: 1rem;
    height: 1rem;
    color: hsl(var(--muted-foreground));
  }
  .help-nav-disclosure-chevron {
    transition: transform .15s;
  }
  .help-nav-disclosure[open] .help-nav-disclosure-chevron {
    transform: rotate(180deg);
  }
  .help-nav-disclosure-panel {
    margin-top: 0.5rem;
    padding: 1rem 0.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  }
  .help-nav-disclosure-panel .help-side-nav-back {
    margin-top: 1.25rem;
  }

  /* Title, lead and meta line; a hairline under them. */
  .help-article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
  }
  .help-article-title {
    color: hsl(var(--foreground));
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }
  .help-lead {
    margin-top: 0.875rem;
    color: var(--help-text-soft);
    font-size: 1.125rem;
    line-height: 1.6;
  }
  .help-lead > p {
    margin: 0;
  }
  @media (min-width: 40rem) {
    .help-article-title {
      font-size: 2.5rem;
      line-height: 1.15;
    }
    .help-lead {
      font-size: 1.25rem;
    }
  }
  .help-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin-top: 1rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .help-article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .help-article-meta-item svg {
    width: 1rem;
    height: 1rem;
  }

  /* help_articles/_audio: the recording under the meta line, a neutral box
     in the callouts' language; the label reads a step stronger than the meta
     line and the browser's own player spans the text column. */
  .help-audio {
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--muted) / .4);
  }
  .help-audio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.375rem;
  }
  .help-audio-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--help-primary-strong);
  }
  .help-audio audio {
    display: block;
    width: 100%;
    margin-top: 0.625rem;
  }

  /* help_articles/_summary: "V tomto návodu", numbered sections in two
     columns filled top to bottom (1-3 left, 4-5 right), so an item that wraps
     only moves the items under it in its own column - a grid row would push
     the whole next row down and leave a hole beside the short item. A
     section with a hint takes a row of its own under the columns. Rows are
     spaced by padding, not a gap (columns have none) and not margins (the
     one at a column break would be cut off and the columns would not line
     up); the list's negative margin takes the outer half back. */
  .help-summary {
    --help-summary-line: 1.5rem;
    margin-bottom: 2.75rem;
    padding: 1.25rem 1.5rem 1.375rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    background-color: hsl(var(--muted) / .6);
  }
  .help-summary-title {
    margin-bottom: 0.875rem;
    color: var(--help-text-soft);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .help-summary-list {
    margin-block: -0.3125rem;
  }
  .help-summary-item {
    padding-block: 0.3125rem;
    break-inside: avoid;
  }
  @media (min-width: 40rem) {
    .help-summary-list {
      column-count: 2;
      column-gap: 2rem;
    }
    .help-summary-item:has(.help-summary-hint) {
      column-span: all;
    }
  }
  .help-summary-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 500;
    line-height: var(--help-summary-line);
  }
  .help-summary-link:hover .help-summary-label {
    color: var(--help-primary-strong);
  }
  .help-summary-item:has(.help-summary-hint) .help-summary-label {
    font-weight: 700;
  }
  .help-summary-hint {
    color: hsl(var(--muted-foreground));
    font-weight: 400;
  }
  /* Exactly one line of the label high and at the top of the item, so it
     sits on the first line whether the label wraps or not. */
  .help-summary-number {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: var(--help-summary-line);
    height: var(--help-summary-line);
    padding-inline: 0.25rem;
    border: 1px solid hsl(var(--primary) / .3);
    border-radius: 0.375rem;
    background-color: hsl(var(--card));
    color: var(--help-primary-strong);
    font-family: var(--help-font-mono);
    font-size: 0.8125rem;
    line-height: 1;
  }

  /* ArticleBodyPresenter: the number chip at the start of each <h2>, hanging
     in the heading's left padding so a second line aligns with the first.
     `top` centres the chip on the first line: (line box - chip) / 2, with the
     line box of the h2 below (1.5rem x 1.3, from sm 1.625rem x 1.3). */
  .help-prose :where(h2):has(> .help-section-number) {
    position: relative;
    padding-left: 2.75rem;
  }
  .help-section-number {
    position: absolute;
    left: 0;
    top: 0.1625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.625rem;
    padding-inline: 0.375rem;
    border-radius: 0.4375rem;
    background-color: hsl(var(--primary) / .1);
    color: var(--help-primary-strong);
    font-family: var(--help-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
  }
  @media (min-width: 40rem) {
    .help-section-number {
      top: 0.25rem;
    }
  }

  /* help_articles/_reading_rail: section links on a grey line, the one being
     read (aria-current="location", reading_rail_controller) in primary over
     it; then the progress bar, the minutes left and "Nahoru". */
  .help-rail-title {
    margin-bottom: 0.875rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1rem;
    text-transform: uppercase;
  }
  .help-rail-list {
    border-left: 2px solid hsl(var(--border));
  }
  .help-rail-link {
    display: block;
    margin-left: -2px;
    padding: 0.3125rem 0 0.3125rem 0.875rem;
    border-left: 2px solid transparent;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: color .15s, border-color .15s;
  }
  .help-rail-link:hover {
    color: hsl(var(--foreground));
  }
  .help-rail-link[aria-current="location"] {
    border-left-color: hsl(var(--primary));
    color: var(--help-primary-strong);
    font-weight: 600;
  }
  .help-rail-progress {
    margin-top: 1.25rem;
  }
  .help-rail-track {
    height: 0.25rem;
    overflow: hidden;
    border-radius: 9999px;
    background-color: hsl(var(--border));
  }
  .help-rail-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: hsl(var(--primary));
    transition: width .2s ease-out;
  }
  .help-rail-remaining {
    margin-top: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .help-rail-top {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    color: var(--help-text-soft);
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: color .15s;
  }
  .help-rail-top:hover {
    color: hsl(var(--foreground));
  }
  .help-rail-top svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .help-rail-bar,
    .help-nav-disclosure-chevron {
      transition: none;
    }
  }

  /* help_articles/_pager: back and forward at the end of an article. */
  .help-pager {
    display: grid;
    gap: 0.75rem;
    margin-top: 3.5rem;
  }
  @media (min-width: 40rem) {
    .help-pager {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
  }
  .help-pager-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    transition: border-color .15s, box-shadow .15s;
  }
  .help-pager-card:hover {
    border-color: hsl(var(--primary) / .4);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  }
  .help-pager-card-next {
    align-items: flex-end;
    text-align: right;
  }
  .help-pager-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .help-pager-label svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .help-pager-title {
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    transition: color .15s;
  }
  .help-pager-card:hover .help-pager-title {
    color: var(--help-primary-strong);
  }

  /* help_glossaries/show: the terms as a definition list on hairlines (the
     header's own hairline above the first one). */
  .help-glossary-entry {
    padding-block: 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
  }
  .help-glossary-entry:first-child {
    padding-top: 0;
  }
  .help-glossary-term {
    color: hsl(var(--foreground));
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .help-glossary-definition {
    margin-top: 0.25rem;
    color: hsl(var(--foreground));
    font-size: 1.0625rem;
    line-height: 1.7;
  }
  .help-glossary-more {
    margin-top: 0.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
  }
  .help-glossary-more a {
    color: hsl(var(--primary));
    font-weight: 500;
  }
  .help-glossary-more a:hover {
    text-decoration: underline;
  }
  /* The entry a term link (TermDecorator#link) landed on. The side shadows
     widen the tint past the text without moving it. */
  .help-glossary-entry:target {
    background-color: hsl(var(--primary) / .06);
    box-shadow: -0.75rem 0 0 hsl(var(--primary) / .06), 0.75rem 0 0 hsl(var(--primary) / .06);
  }

  /* -- Article body ------------------------------------------------------- */
  .help-prose {
    color: hsl(var(--foreground));
    font-size: 1.0625rem;
    line-height: 1.75;
  }
  .help-prose > :first-child {
    margin-top: 0;
  }
  .help-prose > :last-child {
    margin-bottom: 0;
  }
  .help-prose :where(p):not(:where(.not-prose, .not-prose *)) {
    margin: 1.1em 0;
  }
  .help-prose :where(h2, h3):not(:where(.not-prose, .not-prose *)) {
    scroll-margin-top: 5rem;
    color: hsl(var(--foreground));
    letter-spacing: -0.015em;
  }
  .help-prose :where(h2):not(:where(.not-prose, .not-prose *)) {
    margin: 2.5em 0 0.75em;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }
  @media (min-width: 40rem) {
    .help-prose :where(h2):not(:where(.not-prose, .not-prose *)) {
      font-size: 1.625rem;
    }
  }
  .help-prose :where(h3):not(:where(.not-prose, .not-prose *)) {
    margin: 2em 0 0.5em;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .help-prose :where(ul, ol):not(:where(.not-prose, .not-prose *)) {
    margin: 1.1em 0;
    padding-left: 1.5em;
  }
  .help-prose :where(ul):not(:where(.not-prose, .not-prose *)) {
    list-style: disc;
  }
  .help-prose :where(ol):not(:where(.not-prose, .not-prose *)) {
    list-style: decimal;
  }
  .help-prose :where(li):not(:where(.not-prose, .not-prose *)) {
    margin: 0.4em 0;
    padding-left: 0.25em;
  }
  .help-prose :where(li)::marker {
    color: hsl(var(--muted-foreground));
  }
  .help-prose :where(ol > li)::marker {
    font-weight: 600;
  }
  .help-prose :where(li > ul, li > ol):not(:where(.not-prose, .not-prose *)) {
    margin: 0.4em 0;
  }
  /* Links in running text: primary, underlined on hover and focus. The blue
     keeps 4.7:1 against the white ground and 3.6:1 against the text around
     it. */
  .help-prose :where(a):not(:where(.not-prose, .not-prose *, .help-button, .help-card)) {
    color: hsl(var(--primary));
    font-weight: 500;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  .help-prose :where(a):not(:where(.not-prose, .not-prose *, .help-button, .help-card)):hover,
  .help-prose :where(a):not(:where(.not-prose, .not-prose *, .help-button, .help-card)):focus-visible {
    text-decoration-line: underline;
  }
  .help-prose :where(strong):not(:where(.not-prose, .not-prose *)) {
    font-weight: 600;
    color: hsl(var(--foreground));
  }
  .help-prose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
    margin: 1.5em 0;
    padding-left: 1em;
    border-left: 3px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
  }
  .help-prose :where(hr):not(:where(.not-prose, .not-prose *)) {
    margin: 2.5em 0;
    border-top: 1px solid hsl(var(--border));
  }
  .help-prose :where(code):not(:where(.not-prose, .not-prose *)) {
    padding: 0.1em 0.35em;
    border-radius: 0.3rem;
    background-color: hsl(var(--muted));
    font-family: var(--help-font-mono);
    font-size: 0.875em;
  }
  /* A key on the keyboard: <kbd>⌘</kbd> <kbd>K</kbd>. White, so it reads on a
     tinted callout too. */
  .help-prose :where(kbd):not(:where(.not-prose, .not-prose *)) {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.4em;
    border: 1px solid hsl(var(--border));
    border-radius: 0.3rem;
    background-color: hsl(var(--card));
    box-shadow: inset 0 -1px 0 hsl(var(--border));
    color: hsl(var(--foreground));
    font-family: var(--help-font-mono);
    font-size: 0.8125em;
    line-height: 1.5;
    text-align: center;
  }

  /* A table scrolls sideways on a phone instead of widening the page; wrap a
     wide one in <div class="help-table">. Rows on hairlines in a rounded box,
     the header row tinted. */
  .help-prose :where(.help-table) {
    margin: 1.5em 0;
    overflow-x: auto;
  }
  .help-prose :where(table):not(:where(.not-prose, .not-prose *)) {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-inset);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .help-prose :where(.help-table > table) {
    margin: 0;
  }
  .help-prose :where(th, td):not(:where(.not-prose, .not-prose *)) {
    padding: 0.75rem 1rem;
    border-top: 1px solid hsl(var(--border));
    text-align: left;
    vertical-align: top;
  }
  .help-prose :where(tr:first-child > th, tr:first-child > td):not(:where(.not-prose, .not-prose *)) {
    border-top: 0;
  }
  .help-prose :where(th):not(:where(.not-prose, .not-prose *)) {
    font-weight: 600;
  }
  .help-prose :where(thead th):not(:where(.not-prose, .not-prose *)) {
    background-color: hsl(var(--muted) / .6);
  }
  .help-prose :where(thead + tbody tr:first-child > th, thead + tbody tr:first-child > td):not(:where(.not-prose, .not-prose *)) {
    border-top: 1px solid hsl(var(--border));
  }

  /* ScreenshotDecorator#figure: a bordered image that opens full size in the
     image viewer (help_articles/_lightbox below). */
  .help-prose :where(figure):not(:where(.not-prose, .not-prose *)) {
    margin: 2em 0;
  }
  .help-screenshot-link {
    display: block;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    cursor: zoom-in;
  }
  .help-screenshot-link img {
    display: block;
    width: 100%;
    height: auto;
  }
  .help-prose :where(figcaption):not(:where(.not-prose, .not-prose *)) {
    margin-top: 0.625rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
  }

  /* Whatever follows a heading sits right under it (the heading carries the
     space). After the element rules above, so it wins over their margins. */
  .help-prose :where(h2 + *, h3 + *):not(:where(.not-prose, .not-prose *)) {
    margin-top: 0;
  }

  /* A row of components/_app_link / _demo_button buttons. A <div>, never a <p>:
     the demo button renders a <form>, and a <p> cannot hold one (the parser
     closes the paragraph and the buttons fall apart). */
  .help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5em 0;
  }

  /* TermDecorator#link: a glossary link reads as a term, not as navigation -
     the text colour with a dotted underline and the definition as tooltip. */
  .help-prose :where(a.help-term) {
    color: inherit;
    font-weight: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: hsl(var(--muted-foreground));
    cursor: help;
  }
  .help-prose :where(a.help-term):hover {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
  }

  /* -- Components of article bodies (help_articles/components) ------------- */

  /* _callout: info blue, tip amber, warning red, success green. The icon and
     the title take the kind's darker tone; success is one line ("Hotovo. Od
     teď ...") in green. */
  .help-callout {
    display: flex;
    gap: 0.75rem;
    margin: 1.75em 0;
    padding: 1rem 1.25rem;
    border: 1px solid;
    border-radius: var(--radius-inset);
    font-size: 1rem;
    line-height: 1.65;
  }
  .help-callout-title {
    margin: 0 0 0.125rem;
    font-weight: 700;
  }
  .help-callout-body > :first-child {
    margin-top: 0;
  }
  .help-callout-body > :last-child {
    margin-bottom: 0;
  }
  .help-callout-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
  }
  .help-callout-info {
    background-color: hsl(var(--primary) / .08);
    border-color: hsl(var(--primary) / .25);
  }
  .help-callout-info .help-callout-icon,
  .help-callout-info .help-callout-title {
    color: var(--help-primary-strong);
  }
  .help-callout-tip {
    background-color: hsl(var(--warning) / .12);
    border-color: hsl(var(--warning) / .4);
  }
  .help-callout-tip .help-callout-icon,
  .help-callout-tip .help-callout-title {
    color: var(--help-warning-strong);
  }
  .help-callout-warning {
    background-color: hsl(var(--destructive) / .06);
    border-color: hsl(var(--destructive) / .3);
  }
  .help-callout-warning .help-callout-icon,
  .help-callout-warning .help-callout-title {
    color: var(--help-destructive-strong);
  }
  .help-callout-success {
    align-items: flex-start;
    padding-block: 0.875rem;
    background-color: hsl(var(--success) / .1);
    border-color: hsl(var(--success) / .2);
    color: var(--help-success-strong);
  }
  .help-callout-success .help-callout-title,
  .help-callout-success .help-callout-body,
  .help-callout-success .help-callout-body > p {
    display: inline;
    margin: 0;
  }
  .help-prose .help-callout-success strong {
    color: inherit;
  }

  /* _steps + _step: a numbered procedure, circles on a vertical line. The
     number is a counter (the <ol> already tells assistive technology the
     position); the second `content` hides it from them where supported. */
  .help-prose .help-steps {
    margin: 2em 0;
    padding: 0;
    list-style: none;
    counter-reset: help-step;
  }
  .help-prose .help-steps > .help-step {
    position: relative;
    margin: 0;
    padding: 0 0 2rem 3.25rem;
    counter-increment: help-step;
    scroll-margin-top: 5rem;
  }
  .help-prose .help-steps > .help-step:last-child {
    padding-bottom: 0;
  }
  .help-step::before {
    content: counter(help-step);
    content: counter(help-step) / "";
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
  }
  .help-step::after {
    content: "";
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.75rem;
    bottom: 0.5rem;
    border-left: 2px solid hsl(var(--border));
  }
  .help-step:last-child::after {
    display: none;
  }
  .help-prose .help-step-title {
    margin: 0 0 0.375rem;
    padding-top: 0.25rem;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .help-step-body > :first-child {
    margin-top: 0;
  }
  .help-step-body > :last-child {
    margin-bottom: 0;
  }
  .help-step-body > .help-actions {
    margin-top: 1rem;
  }

  /* _cards: small bordered cards in two columns, a bold title and one line. */
  .help-cards {
    display: grid;
    gap: 0.75rem;
    margin: 1.5em 0;
  }
  @media (min-width: 40rem) {
    .help-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .help-cards-item {
    padding: 0.875rem 1.125rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
  }
  .help-cards-title {
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .help-cards-text {
    margin-top: 0.125rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* _glossary_table: terms and their article text on hairlines, the term in
     a column of its own from sm. */
  .help-definitions {
    margin: 1.5em 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
  }
  .help-definitions-row {
    display: grid;
    gap: 0.25rem 1.5rem;
    padding: 0.875rem 1.25rem;
  }
  .help-definitions-row + .help-definitions-row {
    border-top: 1px solid hsl(var(--border));
  }
  @media (min-width: 40rem) {
    .help-definitions-row {
      grid-template-columns: 9.5rem minmax(0, 1fr);
      padding-block: 1rem;
    }
  }
  .help-definitions-term {
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
  }
  .help-definitions-text {
    color: hsl(var(--foreground));
    font-size: 1rem;
    line-height: 1.6;
  }
  .help-definitions-text strong {
    font-weight: 700;
  }

  /* components/_flow: three parties in a row with the arrows between them;
     stacked on a phone, where a left arrow points up and a right one down.
     A gap can carry arrows both ways, one .help-flow-direction each. */
  .help-flow {
    margin: 2em 0;
    padding: 1.25rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    background-color: hsl(var(--card));
  }
  .help-flow-row {
    display: grid;
    gap: 0.5rem;
  }
  .help-flow-party {
    padding: 0.875rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    text-align: center;
  }
  .help-flow-party-you {
    background-color: hsl(var(--primary) / .08);
    border-color: hsl(var(--primary) / .3);
  }
  .help-flow-name {
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .help-flow-text {
    margin-top: 0.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .help-flow-arrow {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: 0.125rem;
  }
  .help-flow-direction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
  }
  .help-flow-arrow svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: hsl(var(--success));
  }
  .help-flow-arrow-sideways {
    display: none;
  }
  .help-flow-label {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.35;
  }
  @media (min-width: 48rem) {
    .help-flow {
      padding: 1rem;
    }
    .help-flow-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 5.25rem) minmax(0, 1.2fr) minmax(0, 5.25rem) minmax(0, 1fr);
      align-items: center;
      gap: 0.375rem;
    }
    .help-flow-party {
      padding: 0.75rem 0.5rem;
    }
    .help-flow-direction {
      flex-direction: column;
      gap: 0.25rem;
    }
    .help-flow-arrow-stacked {
      display: none;
    }
    .help-flow-arrow-sideways {
      display: block;
    }
  }
  .help-flow-note {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px dashed hsl(var(--border));
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .help-flow-note strong {
    color: var(--help-success-strong);
    font-weight: 700;
  }

  /* components/_timeline: moments on one line, a dot each. Top to bottom on
     a phone, with the line running down from every dot but the last; from
     48rem left to right in equal columns, the line running right. A tone
     recolours the dot and the moment of one step (HelpCenter::Timeline). */
  .help-timeline {
    --help-timeline-dot: 0.875rem;
    --help-timeline-color: hsl(var(--primary));
    --help-timeline-when: var(--help-primary-strong);
    margin: 2em 0;
    padding: 1.25rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    background-color: hsl(var(--card));
  }
  .help-timeline-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .help-timeline-step {
    position: relative;
    padding: 0 0 1.25rem 1.875rem;
  }
  .help-timeline-step:last-child {
    padding-bottom: 0;
  }
  .help-timeline-step::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: var(--help-timeline-dot);
    height: var(--help-timeline-dot);
    border-radius: 9999px;
    background-color: var(--help-timeline-color);
    box-shadow: 0 0 0 3px hsl(var(--card)), 0 0 0 4px var(--help-timeline-color);
  }
  .help-timeline-step::after {
    content: "";
    position: absolute;
    top: calc(0.25rem + var(--help-timeline-dot) + 0.375rem);
    bottom: 0.125rem;
    left: calc(var(--help-timeline-dot) / 2 - 1px);
    width: 2px;
    background-color: hsl(var(--border));
  }
  .help-timeline-step:last-child::after {
    display: none;
  }
  .help-timeline-step-success {
    --help-timeline-color: hsl(var(--success));
    --help-timeline-when: var(--help-success-strong);
  }
  .help-timeline-step-warning {
    --help-timeline-color: hsl(var(--warning));
    --help-timeline-when: var(--help-warning-strong);
  }
  .help-timeline-step-danger {
    --help-timeline-color: hsl(var(--destructive));
    --help-timeline-when: var(--help-destructive-strong);
  }
  .help-timeline-when {
    color: var(--help-timeline-when);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .help-timeline-title {
    margin-top: 0.125rem;
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .help-timeline-text {
    margin-top: 0.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.5;
  }
  @media (min-width: 48rem) {
    .help-timeline-list {
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
    }
    .help-timeline-step,
    .help-timeline-step:last-child {
      padding: calc(var(--help-timeline-dot) + 0.875rem) 0.75rem 0 0;
    }
    .help-timeline-step::after {
      top: calc(0.25rem + var(--help-timeline-dot) / 2 - 1px);
      right: 0.375rem;
      bottom: auto;
      left: calc(var(--help-timeline-dot) + 0.625rem);
      width: auto;
      height: 2px;
    }
  }

  /* _commission_calculator: two inputs over a tinted band with the results.
     The input area is white on purpose: an unlayered `label` rule in
     application.css paints every label white. */
  .help-calc-heading {
    margin: 2em 0 0.75rem;
    color: hsl(var(--foreground));
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.4;
  }
  .help-calc {
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    background-color: hsl(var(--card));
  }
  .help-calc-inputs {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
  }
  @media (min-width: 40rem) {
    .help-calc-inputs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .help-calc-inputs[hidden] {
    display: none;
  }
  .help-calc-label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--help-text-soft);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }
  .help-calc-field {
    position: relative;
  }
  .help-calc-input {
    width: 100%;
    height: 3rem;
    padding: 0 3rem 0 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-control);
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }
  .help-calc-input:hover {
    border-color: hsl(var(--muted-foreground) / .4);
  }
  .help-calc-unit {
    position: absolute;
    inset-block: 0;
    right: 1rem;
    display: flex;
    align-items: center;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    pointer-events: none;
  }
  .help-calc-example {
    padding: 1.25rem 1.25rem 1rem;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    font-weight: 500;
  }
  .help-calc-example[hidden] {
    display: none;
  }
  .help-calc-results {
    display: grid;
    border-top: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / .6);
  }
  @media (min-width: 40rem) {
    .help-calc-results {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .help-calc-result + .help-calc-result {
      border-left: 1px solid hsl(var(--border));
    }
  }
  .help-calc-result {
    padding: 1rem 1.25rem;
  }
  .help-calc-result + .help-calc-result {
    border-top: 1px solid hsl(var(--border));
  }
  @media (min-width: 40rem) {
    .help-calc-result + .help-calc-result {
      border-top: 0;
    }
  }
  .help-calc-result-label {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .help-calc-result-value {
    margin-top: 0.25rem;
    color: hsl(var(--foreground));
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 2rem;
  }
  .help-calc-result-primary .help-calc-result-value {
    color: var(--help-primary-strong);
  }
  .help-calc-note {
    margin-top: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.55;
  }

  /* -- Image viewer (help_articles/_lightbox, help-lightbox controller) ----- */
  /* The look of the app's photo lightbox (.files-lightbox in
     application.css): the page dimmed almost to black, the image centred with
     a deep shadow, translucent round controls. The dialog's own box is at the
     end of this file, outside the layer. On a phone the arrows move down
     beside the caption, where they cover nothing of a screenshot. */
  body:has(.help-lightbox[open]) {
    overflow: hidden;
  }
  .help-lightbox::backdrop {
    background-color: hsl(var(--foreground) / .92);
  }
  .help-lightbox-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.25rem 1rem 0;
  }
  .help-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    box-shadow: 0 24px 80px rgb(0 0 0 / .45);
    opacity: 0;
    transition: opacity .15s ease-out;
  }
  .help-lightbox[data-loaded] .help-lightbox-image {
    opacity: 1;
  }
  .help-lightbox-spinner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: hsl(var(--background) / .85);
    pointer-events: none;
  }
  .help-lightbox-spinner svg {
    animation: help-lightbox-spin 1s linear infinite;
  }
  .help-lightbox[data-loaded] .help-lightbox-spinner {
    display: none;
  }
  @keyframes help-lightbox-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .help-lightbox-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-height: 5.25rem;
    padding: 1rem 4.25rem;
    text-align: center;
  }
  .help-lightbox-caption {
    max-width: 48rem;
    color: hsl(var(--background));
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
  }
  .help-lightbox-count {
    color: hsl(var(--background) / .72);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.25rem;
  }
  .help-lightbox-count[hidden] {
    display: none;
  }
  .help-lightbox-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid hsl(var(--background) / .18);
    background-color: hsl(var(--background) / .1);
    color: hsl(var(--background));
    cursor: pointer;
    transition: background-color .15s;
  }
  .help-lightbox-button:hover {
    background-color: hsl(var(--background) / .2);
  }
  .help-lightbox-button[hidden] {
    display: none;
  }
  /* The ring of .help-center :focus-visible in white (the blue one is too
     close to the dark ground), keeping the buttons' own radius, which that
     rule would square off. */
  .help-lightbox-button:focus-visible {
    outline-color: hsl(var(--background));
  }
  .help-lightbox-close,
  .help-lightbox-close:focus-visible {
    top: 1rem;
    right: 1rem;
    border-radius: 0.75rem;
  }
  .help-lightbox-arrow,
  .help-lightbox-arrow:focus-visible {
    border-radius: 9999px;
  }
  .help-lightbox-arrow {
    bottom: 1.25rem;
  }
  .help-lightbox-previous {
    left: 1rem;
  }
  .help-lightbox-next {
    right: 1rem;
  }
  @media (min-width: 48rem) {
    .help-lightbox-stage {
      padding: 4.5rem 5.5rem 0;
    }
    .help-lightbox-footer {
      padding-inline: 5.5rem;
    }
    .help-lightbox-arrow {
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
    }
    .help-lightbox-previous {
      left: 1.25rem;
    }
    .help-lightbox-next {
      right: 1.25rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .help-lightbox-image {
      transition: none;
    }
    .help-lightbox-spinner svg {
      animation-duration: 3s;
    }
  }
}

/* The image viewer's <dialog> itself, deliberately OUTSIDE @layer components:
   application.css (in the Tailwind bundle) sizes every dialog with an
   unlayered rule - `dialog { width: 80vw; max-width: 48rem; max-height: 90vh;
   box-shadow: 0 0 0 100vw ...; overflow-y: auto }` - and an unlayered rule
   beats every layered one whatever its specificity. Inside the layer this
   dialog rendered as a 48rem box with a second dim around it. Unlayered, the
   class selector outranks the element one. Answer every property of that
   rule here, nothing else. */
dialog.help-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  box-shadow: none;
  background-color: hsl(var(--foreground) / .92);
  color: hsl(var(--background));
}
dialog.help-lightbox[open] {
  display: flex;
  flex-direction: column;
}