@layer components {
  /* Welcome / landing page (home#index). Sits in the resource content column,
     to the right of the categories sidebar. */
  .welcome {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .welcome-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
  }

  .welcome-greeting {
    font-family: var(--font-brand, inherit);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--wine-deep);
    margin: 0;
  }

  .welcome-subtitle {
    font-size: 1.25rem;
    color: var(--wine);
    margin: 0;
  }

  .welcome-prompt {
    font-size: 1.15rem;
    color: var(--muted);
    margin: 0;
  }

  /* Search bar + primary "new note" action. */
  .welcome-actions-primary {
    display: flex;
    align-items: stretch;
    gap: 1rem;
  }

  .welcome-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0 1.5rem;
    text-align: left;
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--muted-2);
    font: inherit;
    font-size: 1.05rem;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .welcome-search:hover,
  .welcome-search:focus-visible {
    border-color: var(--wine);
    outline: none;
  }

  .welcome-search-icon {
    --icon-size: 1.4rem;
    color: var(--muted-2);
    flex-shrink: 0;
  }

  .welcome-new-note {
    flex-shrink: 0;
    justify-content: center;
    gap: 0.4rem;
    min-height: 3.4rem;
    padding: 0 1.75rem;
    border-radius: var(--radius-card);
    font-size: 1.05rem;
    font-weight: 600;
    --icon-size: 1.2rem;
  }

  /* Three secondary create buttons — same wine colour and hover as "Neue Notiz". */
  .welcome-actions-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .welcome-quick-action {
    justify-content: center;
    gap: 0.4rem;
    min-height: 3.4rem;
    border-radius: var(--radius-control);
    font-size: 1.05rem;
    font-weight: 600;
    --icon-size: 1.2rem;
  }

  .welcome-quick-action:hover {
    text-decoration: none;
  }

  /* Recently edited list. */
  .welcome-recent-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wine-deep);
    margin: 0 0 0.75rem;
  }

  .welcome-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .welcome-recent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--cream-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .welcome-recent-item:hover {
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    text-decoration: none;
  }

  .welcome-recent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background-color: var(--gold);
    color: var(--wine);
    --icon-size: 1.15rem;
    flex-shrink: 0;
  }

  .welcome-recent-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  .welcome-recent-type,
  .welcome-recent-date {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.9rem;
  }

  .welcome-recent-date {
    min-width: 6.5rem;
    text-align: right;
  }

  .welcome-recent-empty {
    color: var(--muted);
    margin: 0;
  }

  /* Sidebar hint callout. */
  .welcome-hint {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--wine);
    border-radius: var(--radius-card);
    color: #fff;
  }

  .welcome-hint-arrow {
    --icon-size: 1.5rem;
    color: var(--gold);
    flex-shrink: 0;
  }

  .welcome-hint-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
  }

  .welcome-hint-title {
    font-size: 1.05rem;
    font-weight: 700;
  }

  .welcome-hint-body {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
  }

  .welcome-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: var(--radius-control);
    background-color: var(--gold);
    color: var(--wine-deep);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    --icon-size: 1.15rem;
    transition: background-color 0.15s ease;
  }

  .welcome-hint-btn:hover {
    background-color: var(--gold-hover);
  }

  /* Corner sidebar toggle — pinned to the top-left of the content frame
     (position:relative), out of the centred welcome column's flow, mirroring
     where the toggle sits next to the title on the resource pages. Visibility
     is handled by .sidebar-toggle-btn (shown on wide screens). */
  .welcome-sidebar-toggle {
    position: absolute;
    top: 0.5rem;
    left: 0;
    z-index: 5;
  }

  /* The show/hide buttons mirror the sidebar's actual state, which lives as
     [data-sidebar] on .app-main and flips client-side without a re-render. */
  .welcome-hint-show { display: none; }

  .app-main[data-sidebar="hidden"] .welcome-hint-hide { display: none; }
  .app-main[data-sidebar="hidden"] .welcome-hint-show { display: inline-flex; }

  @media (max-width: 640px) {
    .welcome-actions-primary { flex-direction: column; }
    /* Both action groups are now single columns with a 1rem inner gap. Pull the
       secondary group up so the gap to "Neue Notiz" matches that 1rem instead of
       the 1.75rem gap the .welcome container puts between its sections. */
    .welcome-actions-secondary {
      grid-template-columns: 1fr;
      margin-top: -0.75rem;
    }
    .welcome-recent-type { display: none; }
    .welcome-recent-date { min-width: 0; }
    .welcome-hint { flex-wrap: wrap; }
  }

  /* Below the sidebar breakpoint the "hide the bar" hint is moot — the sidebar
     is force-collapsed and there is no bar to hide. */
  @media (max-width: 899px) {
    .welcome-hint { display: none; }
  }
}