/* Help center page frame: the content width, the header with its search,
   the footer and the help center home (/napoveda). Linked by
   layouts/help_center only, after help_center.css (article bodies and their
   components), so the app never downloads it.

   Same rules as help_center.css: plain CSS served by Propshaft as written
   (no @apply, no theme(), no nesting), colours from the token custom
   properties of app/assets/tailwind/application.css, everything inside
   @layer components so utilities in the views still win. Hover and focus
   colours are written here because the colour tokens are not Tailwind theme
   colours (hover:bg-muted and friends compile to nothing). */
@layer components {
  /* -- Content width ------------------------------------------------------- */
  /* One width for the header, every page and the footer, so they line up:
     80rem minus the gutters, i.e. 1216px of content from 1280px up - the
     article page's three columns (article list, a 42rem text column, the
     reading rail). */
  .help-container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 40rem) {
    .help-container {
      padding-inline: 1.5rem;
    }
  }
  @media (min-width: 64rem) {
    .help-container {
      padding-inline: 2rem;
    }
  }

  /* -- Search field -------------------------------------------------------- */
  /* The label-less field of layouts/help_center/_header_search (compact, in
     the header) and of the home page (.help-search-hero). The input carries
     no border of its own; the field draws it, so the icon and the "/" hint
     sit inside. */
  .help-search {
    position: relative;
  }
  .help-search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.375rem 0 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-control);
    background-color: hsl(var(--muted) / .6);
    color: hsl(var(--muted-foreground));
    cursor: text;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
  }
  .help-search-field:hover {
    border-color: hsl(var(--muted-foreground) / .35);
  }
  .help-search-field:focus-within {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--card));
    box-shadow: 0 0 0 3px hsl(var(--primary) / .15);
  }
  .help-search-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }
  .help-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
  }
  /* Darker than --muted-foreground, which misses 4.5:1 on the tinted field. */
  .help-search-input::placeholder {
    color: hsl(var(--foreground) / .65);
    opacity: 1;
  }
  /* The field shows the focus (border and ring); the input inside it does
     not draw the help center's outline a second time. */
  .help-search-input:focus,
  .help-search-input:focus-visible {
    outline: none;
  }
  .help-search-input::-webkit-search-decoration,
  .help-search-input::-webkit-search-cancel-button {
    appearance: none;
  }

  /* The "/" shortcut hint. Useless once the field has focus (a "/" typed
     then is a slash) and on a touch screen without a keyboard. */
  .help-kbd {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.3rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--card));
    box-shadow: inset 0 -1px 0 hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1;
  }
  .help-search-field:focus-within .help-kbd {
    visibility: hidden;
  }
  @media (hover: none) {
    .help-kbd {
      display: none;
    }
  }

  /* The home page's field: taller, white, the body text size. */
  .help-search-hero .help-search-field {
    gap: 0.75rem;
    height: 3.5rem;
    padding: 0 0.875rem 0 1.125rem;
    border-color: hsl(var(--muted-foreground) / .3);
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -12px rgba(15, 23, 42, .18);
  }
  .help-search-hero .help-search-field:focus-within {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary) / .15), 0 8px 20px -12px rgba(15, 23, 42, .18);
  }
  .help-search-hero .help-search-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .help-search-hero .help-search-input {
    font-size: 1.0625rem;
  }

  /* -- Results dropdown of the header search (help-search controller) ------ */
  .help-search-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 50;
    width: max(100%, 28rem);
    max-width: calc(100vw - 2rem);
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    padding: 0.375rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06);
  }
  .help-search-group + .help-search-group {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid hsl(var(--border));
  }
  .help-search-group-label {
    padding: 0.5rem 0.625rem 0.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .help-search-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
  }
  .help-search-option:hover,
  .help-search-option[aria-selected="true"] {
    background-color: hsl(var(--primary) / .08);
  }
  .help-search-option[aria-selected="true"] .help-search-option-title {
    color: hsl(var(--primary));
  }
  .help-search-option-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--muted) / .6);
    color: hsl(var(--foreground));
  }
  .help-search-option-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
  }
  /* Darker than --muted-foreground, which misses 4.5:1 on the tint of the
     active result. */
  .help-search-option-text,
  .help-search-option-meta {
    color: hsl(var(--foreground) / .72);
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .help-search-option-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .help-search-option-meta {
    flex-shrink: 0;
    padding-top: 0.125rem;
  }
  .help-search-all {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.625rem;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 600;
  }
  .help-search-all:hover,
  .help-search-all[aria-selected="true"] {
    background-color: hsl(var(--primary) / .08);
    border-radius: 0.5rem;
  }
  .help-search-message {
    padding: 0.75rem 0.625rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* -- Tinted surfaces ---------------------------------------------------- */
  /* The home page's search band, the sign-up box and the footer share one
     light tint. --muted-foreground on it misses 4.5:1 (4.4:1), so secondary
     text there takes this darker grey instead - a text-muted-foreground
     utility would win over it (utilities layer), so use the class alone. */
  .help-tint-muted {
    color: hsl(var(--foreground) / .72);
  }

  /* -- Home page ----------------------------------------------------------- */
  /* Colours below the hero are sampled from the mockup of #437 and written
     as they are, not snapped to the nearest token:
       #141821 headings and article titles    #565b64 descriptions, tile glyph
       #2f333c category navigation links      #7d8188 counts, reading time
       #e2e5e9 hairlines, tile border         #f6f8fa tile, row hover
       #ecf4ff / #2242a2 badge, glossary link */
  .help-hero {
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / .6);
  }

  /* The bar under the hero (index/_category_nav): the category navigation,
     wrapping onto more lines on a phone, or what a query found in its place.
     No line of its own; the first section below draws the hairline. */
  .help-index-bar {
    padding-top: 2.75rem;
    padding-bottom: 1.5rem;
  }
  .help-category-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
  }
  .help-category-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2f333c;
    font-size: 0.90625rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .help-category-link:hover .help-category-title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .help-category-count {
    color: #7d8188;
    font-size: 0.78125rem;
    font-weight: 400;
  }
  .help-category-total,
  .help-index-meta {
    color: #7d8188;
    font-size: 0.90625rem;
    line-height: 1.5;
  }

  /* A block of the list at full width: a category section (index/_category),
     the glossary preview and the two search-empty blocks. Each draws the
     hairline on its own top, so the lines stay right while a search hides
     sections. */
  .help-index-section {
    padding-block: 2.25rem;
    border-top: 1px solid #e2e5e9;
  }
  /* The category heading with its description on one line; on a narrow
     screen the description drops below. */
  .help-index-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
  }
  .help-index-section-title {
    color: #141821;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .help-index-section-text {
    color: #565b64;
    font-size: 0.84375rem;
    line-height: 1.5;
  }

  /* The articles of a category: one column on a phone, two equal columns
     from md, filled row by row. The items' padding carries the hover tint
     past the text and the negative margin takes it back, so the tile lines
     up with the heading and the last item with the section's padding. The
     column gap plus the padding of two items is the 2rem of white between
     the columns. */
  .help-article-grid {
    display: grid;
    column-gap: 0.5rem;
    margin: 0.5rem -0.75rem -0.75rem;
  }
  @media (min-width: 48rem) {
    .help-article-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* An article item, no card: the icon tile, the title (+ badge) over the
     summary, the reading time on the right. The whole item is the link;
     hover only tints its background. */
  .help-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    color: #141821;
    transition: background-color .15s;
  }
  .help-row:hover {
    background-color: #f6f8fa;
  }
  /* The help center's focus ring rounds to 0.25rem; the item keeps its shape. */
  .help-row:focus-visible {
    border-radius: 0.625rem;
  }
  .help-row-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e2e5e9;
    border-radius: 0.625rem;
    background-color: #f6f8fa;
    color: #565b64;
  }
  .help-row-body {
    flex: 1;
    min-width: 0;
  }
  .help-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
  }
  /* At most two lines. The reading time shares its line height, so it sits
     level with the first line. */
  .help-row-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #141821;
    font-size: 0.96875rem;
    font-weight: 700;
    line-height: 1.3125rem;
  }
  .help-row-time {
    flex-shrink: 0;
    color: #7d8188;
    font-size: 0.78125rem;
    line-height: 1.3125rem;
    white-space: nowrap;
  }
  .help-row-summary {
    margin-top: 0.125rem;
    color: #565b64;
    font-size: 0.84375rem;
    line-height: 1.5;
  }
  /* One line on a wide screen, as many as it takes on a phone. */
  @media (min-width: 48rem) {
    .help-row-summary {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .help-row-hint {
    margin-top: 0.25rem;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .help-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0.0625rem 0.4375rem;
    border-radius: 9999px;
    background-color: #ecf4ff;
    color: #2242a2;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 0.9375rem;
    white-space: nowrap;
  }

  /* The glossary preview (index/_glossary_preview), 2rem more room above
     it than between categories. Its heading, text and link sit in a 15rem
     column beside the terms from lg and above them below that, where the
     three columns of terms would get too narrow beside it. Both keep their
     own height: terms stretched to the text block would push the hairline
     of a lone term a search found down. */
  .help-glossary-preview {
    display: grid;
    align-items: start;
    row-gap: 1rem;
    margin-top: 2rem;
  }
  @media (min-width: 64rem) {
    .help-glossary-preview {
      grid-template-columns: 15rem minmax(0, 1fr);
      column-gap: 1.5rem;
    }
  }
  .help-glossary-preview-text {
    margin-top: 0.25rem;
    color: #565b64;
    font-size: 0.84375rem;
    line-height: 1.55;
  }

  /* The key terms: one column on a phone, three equal columns from md,
     filled row by row, a dashed hairline under each. */
  .help-term-grid {
    display: grid;
    column-gap: 1.75rem;
  }
  @media (min-width: 48rem) {
    .help-term-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .help-term-item {
    padding-block: 0.75rem;
    border-bottom: 1px dashed #e2e5e9;
  }
  .help-term-name {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .help-term-link {
    color: #141821;
    font-weight: 600;
  }
  .help-term-link:hover {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .help-term-short {
    color: #565b64;
    font-size: 0.84375rem;
    line-height: 1.5;
  }
  /* One line on a wide screen, as many as it takes on a phone. */
  @media (min-width: 48rem) {
    .help-term-short {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* "Celý slovník ->" under the glossary preview's text. */
  .help-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #2242a2;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .help-link-arrow:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* The sign-up box (components of _signup_cta): copy on the left, the two
     buttons on the right; stacked on a phone. */
  .help-signup {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--muted) / .6);
  }
  @media (min-width: 48rem) {
    .help-signup {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 1.75rem;
    }
  }

  /* -- Footer -------------------------------------------------------------- */
  .help-footer {
    border-top: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / .6);
  }
  .help-footer .help-nav-link {
    color: hsl(var(--foreground) / .72);
  }
  .help-footer .help-nav-link:hover {
    color: hsl(var(--foreground));
  }
}