/*
 * The new-agent / new-project flow, in Military Terminal (issue #984
 * restyle: "select provider", "where should it live", "name this
 * project" and "select a folder").
 *
 * COPIED, NOT INVENTED. Every screen's title strip and footer buttons are
 * `client/css/text-prompt-modal.css`'s own recipe
 * (`.text-prompt-modal__head` / `__verb`, the shared `.modal-btn-secondary`
 * / `.modal-btn-confirm`) - the same reuse `LayoutNameModal.svelte` and
 * `AllDownModal.svelte` already make by wearing `overlayClass="text-prompt-
 * modal"`. This file supplies only what that recipe does not, because
 * nothing else in the app already draws it:
 *
 *   - these screens' own widths. text-prompt-modal's 380px cap fits one
 *     field; the provider list and the folder browser both carry a
 *     scrollable list and need more room.
 *   - the provider list's compact single-line rows and tracked-caps group
 *     headings (`client/js/providers.js`).
 *   - the folder browser's path bar and its quiet icon up/home buttons
 *     (`client/js/folder-picker-modal.js`), replacing the emoji pair
 *     (up-arrow, house) it drew before.
 *
 * EVERY COLOUR IS AN --oc-* TOKEN, same reasoning as text-prompt-modal.css:
 * a dialog is app chrome, appended to <body> outside the chrome
 * re-theming list, so it never reads a --color-* (session-theme) name -
 * unlike the un-restyled rules this replaces, which read --color-fg-muted
 * and --color-border and so silently stopped following the theme when
 * every OTHER dialog was moved onto --oc-* in the original re-skin.
 */

/* ---- widths -----------------------------------------------------------
 * text-prompt-modal's own .modal-content rule caps at 380px, sized for a
 * single field. `.na-flow` restores the plain chassis's ~500px for a
 * screen that carries a list instead (the provider picker, the folder
 * step); the folder BROWSER needs still more room for its path bar and
 * multi-column-wide entries, so `.folder-picker-modal` gets its own,
 * wider figure - unchanged from the width it already had before this
 * restyle. Both are three classes deep on purpose, so neither has to
 * fight text-prompt-modal.css's own two-class rule on specificity. */
.text-prompt-modal.na-flow .modal-content {
    max-width: 500px;
}

.text-prompt-modal .modal-content.folder-picker-modal {
    max-width: 640px;
}

/* ---- screen 1: select provider -----------------------------------------
 * ONE COMPACT LINE PER ROW: a fixed-width marker, the label (ellipsised,
 * never wrapped past the row), and - for a wrapper that accepts a model -
 * the "models ›" sub-link flush right on the SAME line, never pushed to
 * one of its own. */
.na-flow .provider-family-heading {
    color: var(--oc-text-muted);
    font-size: var(--oc-fs-micro, 10px);
    font-weight: 400;
    letter-spacing: var(--oc-tracking-label, 0.6px);
    text-transform: uppercase;
    padding: 8px 12px 6px;
    border-top: var(--oc-border, 1px) solid var(--oc-line-faint);
    margin-top: 2px;
}

.na-flow .provider-family-heading:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 2px;
}

.na-flow .folder-picker-item {
    padding: 7px 12px;
    font-size: 13px;
    gap: 8px;
}

/* A fixed-width marker column, so a long label's ellipsis never pushes
   the icon out from under the row above it - the "lone » on its own
   line" the un-restyled rule let happen at a narrow width. */
.na-flow .folder-picker-icon {
    width: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.na-flow .provider-item-remove {
    border-color: var(--oc-line-rule);
    color: var(--oc-text-muted);
}

.na-flow .provider-item-remove:hover {
    background: color-mix(in srgb, var(--oc-coral) 16%, transparent);
    border-color: var(--oc-coral);
    color: var(--oc-coral);
}

.na-flow .provider-add-input {
    background: var(--oc-ground-field);
    border: var(--oc-border, 1px) solid var(--oc-line-rule);
    color: var(--oc-text-primary);
    border-radius: var(--oc-radius-sm);
}

.na-flow .provider-add-input:focus {
    outline: none;
    border-color: var(--oc-line-rule);
    box-shadow: none;
}

.na-flow .provider-local-status {
    padding: 24px;
    text-align: center;
    color: var(--oc-text-secondary);
    font-size: 13px;
}

/* ---- screen 4: select a folder -----------------------------------------
 * THE PATH BAR CARRIES ITS OWN NAV, quiet icon buttons rather than the
 * emoji-labelled pair the picker drew before (up-arrow "up", house
 * "home"): a folder picker is app chrome, so its glyphs are the same
 * stroke-line family the config editor tree already draws
 * (session-status-ui.js's folderIconSvg/homeIconSvg/chevronUpIconSvg),
 * never a platform emoji that renders a different picture on every OS. */
.folder-picker-pathbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.folder-picker-pathbar .folder-picker-path {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.folder-picker-navbtn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: var(--oc-border, 1px) solid var(--oc-line-panel);
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-secondary);
    cursor: pointer;
    transition: background var(--oc-motion, 150ms) ease, border-color var(--oc-motion, 150ms) ease,
        color var(--oc-motion, 150ms) ease;
    padding: 0;
}

.folder-picker-navbtn:hover:not(:disabled) {
    background: var(--oc-ground-hover);
    border-color: var(--oc-line-rule);
    color: var(--oc-text-primary);
}

.folder-picker-navbtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.folder-picker-navbtn svg {
    display: block;
}

/* A folder row's icon: the shared stroke-line glyph, never the platform
   folder emoji it replaced. */
.folder-picker-list .folder-picker-icon svg {
    display: block;
    color: var(--oc-text-muted);
}

/* ---- the folder browser's rows are the File view's rows ----------------
 * Each row also wears `.config-editor-toggle` / `.config-editor-node-name`
 * (config-editor.css): 24px tall, 12px mono, 14px icon inline before the
 * name, ellipsis on a long name, the same hover. The rules below only undo
 * the picker's own older row box (padding, border, size) and restate the
 * File view's inset ring for the keyboard-selected row. Three classes
 * deep so they beat `.folder-picker-item` wherever the sheets load. */
.folder-picker-list {
    overflow-x: hidden;
    padding: 4px;
}

.folder-picker-list .folder-picker-item.config-editor-toggle {
    /* grid, not flex: a 1fr track with a 0 minimum is what makes a long
       name ellipsise instead of widening the row (measured: the flex
       version left the name at its full content width). */
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    box-sizing: border-box;
    padding: 0 6px 0 4px;
    gap: 4px;
    font-size: 12px;
    border-bottom: none;
    box-shadow: none;
}

.folder-picker-list .folder-picker-item.config-editor-toggle:hover {
    color: var(--oc-text-primary);
}

.folder-picker-list .folder-picker-item.folder-picker-item-active {
    background: var(--oc-orange-tint);
    color: var(--oc-orange);
    box-shadow: inset 0 0 0 1px var(--oc-orange);
}