/* Settings layer — App Guide section (repo shortcut link + PDF library) */

/* .settings-layer-section is `display:flex; flex-direction:column;
   align-items:flex-start`, so by default its direct children size to
   their own content (shrink-to-fit) instead of the section's actual
   width -- invisible for short content, but a long repo URL or filename
   deep inside these three then has no width to wrap/ellipsis against and
   grows the whole chain wider than the section, poking out past its
   rounded border (the settings layer itself doesn't clip overflow-x).
   Stretch these specific children to the section's real width instead. */
#slAppGuideRepoLinkWrap,
#slAppGuideUploadWrap,
.sl-app-guide-doc-list {
    align-self: stretch;
    min-width: 0;
}

/* .sl-logo-row and .sl-company-form both set display:flex unconditionally,
   which (author stylesheet vs. UA stylesheet) beats the browser's default
   [hidden]{display:none} at equal specificity -- same pitfall already
   called out for .settings-layer-section elsewhere in overlays.css. Without
   this, toggling these two forms' hidden attribute updates the DOM
   property but the form stays visually on screen. */
#slAppGuideRepoLinkDisplay[hidden],
#slAppGuideRepoLinkForm[hidden],
#slAppGuideUploadForm[hidden] {
    display: none;
}

/* ── Repo link: read-only display + Edit-reveals-form toggle ── */
.sl-app-guide-repo-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sl-app-guide-repo-link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--fg-link);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-app-guide-repo-link:hover { text-decoration: underline; }

.sl-app-guide-doc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.sl-app-guide-doc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.sl-app-guide-doc-info {
    /* flex-basis 160px (not the default `auto`, which would size to the
       title's full intrinsic width) -- so a long unbroken filename can't
       force this item, and the actions group riding the same row, wider
       than the available space. Once space is genuinely too tight, the
       row wraps (see flex-wrap above) instead of squeezing the title
       down to a sliver. */
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sl-app-guide-doc-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-app-guide-doc-meta {
    font-size: var(--text-xs);
    color: var(--fg-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-app-guide-doc-actions {
    /* flex-shrink:0 is intentional and load-bearing here, unlike the
       overflow bug this group had before: .sl-app-guide-doc-row already
       wraps (see above), and .sl-app-guide-doc-info is the only sibling
       with flex-grow, so on any row wide enough for both, this group
       always gets its own full natural width, never squeezed. Without
       flex-shrink:0, a mid-width row (too narrow for both at full size,
       but wide enough that the row's own wrap doesn't trigger) would
       shrink this group in place instead, forcing Download/select/Delete
       to wrap into a cramped column beside a stretched title -- which is
       what flex-wrap below was meant to prevent, not cause. flex-wrap
       here is only a last-resort safety net for when this group, even
       alone on its own full-width wrapped row, still doesn't fit
       (~340px and narrower). */
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
}

.sl-app-guide-visibility-select {
    min-width: 0;
    max-width: 100%;
    padding: 3px var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-primary);
}

.sl-app-guide-delete-btn {
    color: var(--fg-danger);
    border-color: var(--color-danger);
}
.sl-app-guide-delete-btn:hover {
    background: var(--color-danger-light);
}