/* ==================================================================
   APPDEF SWITCHER — page-level context bar
   --------------------------------------------------------------------
   Phase 2 chrome rewrite. Lifted from the design handoff's
   05-switcher/search-and-switcher.css with adjustments for:
     - Native <button> elements used as .adsw-anchor and .adsw-row
       (button reset to avoid user-agent styles fighting the chip look)
     - .adsw-cap-prompt (pinned-cap "Unpin one to pin {Name}" overlay)
     - .adsw-empty (empty / no-matches state inside the popover body)
   All tokens come from threshold-tokens.css per ADR-0035.
   ================================================================== */

/* ------------------------------------------------------------------
   Bar shell — anchors the chip in the AppDef context strip below
   the topbar. AppDefSwitcherBar mounts this wrapper conditionally
   per the current destination.
   ------------------------------------------------------------------ */
.adsw-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--th-chrome-subbar-h);
    padding: 0 24px;
    background: linear-gradient(to right,
        var(--th-marigold-soft) 0%,
        var(--th-marigold-soft) 8px,
        var(--th-paper-sunk) 8px);
    border-bottom: 1px solid var(--th-line);
    position: relative;
    /* flex: none so the bar holds its --subbar-h height inside .cc-main's flex
     * column. The form-builder/rules-editor rely on .cc-page being bounded by
     * (viewport - topbar - bar - footer); a shrinkable bar would put that bound
     * back in question. */
    flex: none;
}
.adsw-bar::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--th-marigold-deep);
}
.adsw-bar-label {
    font-family: var(--th-font-serif);
    font-style: italic;
    font-size: var(--th-size-13);
    color: var(--th-marigold-deep);
    font-weight: 500;
}

/* ------------------------------------------------------------------
   Trigger chip (anchor) — a <button> dressed as the design's
   .adsw-anchor card. Reset native button styles first.
   ------------------------------------------------------------------ */
button.adsw-anchor,
div.adsw-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    cursor: pointer;
    font: inherit;
    font-size: var(--th-size-14);
    color: var(--th-ink);
    min-width: 320px;
    text-align: left;
}
button.adsw-anchor:hover { border-color: var(--th-ink-4); }
button.adsw-anchor:focus-visible {
    outline: 2px solid var(--th-advant);
    outline-offset: 1px;
}
.adsw-anchor.is-open {
    border-color: var(--th-marigold-deep);
    box-shadow: 0 0 0 3px var(--th-marigold-soft);
}
.adsw-anchor .adsw-anchor-ico { color: var(--th-marigold-deep); }
.adsw-anchor-body { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.adsw-anchor-name { font-weight: 600; color: var(--th-ink); }
.adsw-anchor-meta {
    font-size: 11px;
    color: var(--th-ink-3);
    font-family: var(--th-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty / placeholder variant — used when visible AppDefs exist but
   none is active (Dashboard "All AppDefs" or onboarding state). */
.adsw-anchor.is-empty {
    background: transparent;
    border: 1px dashed var(--th-line-2);
    color: var(--th-ink-3);
    min-width: 240px;
}
.adsw-anchor.is-empty:hover { border-color: var(--th-ink-4); }
.adsw-anchor.is-empty .placeholder {
    font-family: var(--th-font-serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--th-ink-3);
    font-weight: 500;
}
.adsw-anchor.is-empty .hint {
    font-family: var(--th-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--th-ink-4);
}

/* Locked / display-only variant — single-AppDef tenants. */
.adsw-anchor.is-locked {
    cursor: default;
    background: var(--th-paper-2);
    border-color: var(--th-line);
    pointer-events: none;
}
.adsw-anchor.is-locked .locked-hint {
    margin-left: 10px;
    font-family: var(--th-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--th-ink-4);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Popover frame
   ------------------------------------------------------------------ */
.adsw-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 460px;
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line-2);
    border-radius: 10px;
    box-shadow:
        0 12px 36px oklch(20% 0.01 255 / 0.16),
        0 1px 0 oklch(20% 0.01 255 / 0.04);
    z-index: 30;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 460px;
}

.adsw-pop-search {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--th-line);
}
.adsw-pop-search i { color: var(--th-ink-3); }
.adsw-pop-search input {
    flex: 1;
    border: none; outline: none; background: transparent;
    font-family: var(--th-font-sans);
    font-size: 14px;
    color: var(--th-ink);
}
.adsw-pop-search input::placeholder { color: var(--th-ink-4); }
.adsw-pop-search .esc {
    font-family: var(--th-font-mono);
    font-size: 10px;
    color: var(--th-ink-4);
    border: 1px solid var(--th-line);
    background: var(--th-paper);
    border-radius: 3px;
    padding: 1px 5px;
}

.adsw-pop-body { flex: 1; overflow-y: auto; }

/* Group header — editorial italic label, mono meta */
.adsw-group {
    padding: 12px 14px 4px;
    display: flex; align-items: baseline; justify-content: space-between;
}
.adsw-group .label {
    font-family: var(--th-font-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--th-marigold-deep);
    font-weight: 500;
}
.adsw-group .meta {
    font-family: var(--th-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--th-ink-4);
}

/* ------------------------------------------------------------------
   Row — a <button> styled as the design's .adsw-row grid card.
   Button reset first to neutralize user-agent styles.
   ------------------------------------------------------------------ */
button.adsw-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    font: inherit;
    color: inherit;
    text-align: left;
}
button.adsw-row:hover { background: var(--th-paper-2); }
button.adsw-row:focus-visible {
    outline: 2px solid var(--th-advant);
    outline-offset: -2px;
}
.adsw-row.is-selected {
    background: var(--th-marigold-soft);
    border-left-color: var(--th-marigold-deep);
}
.adsw-row .check {
    color: var(--th-marigold-deep);
    width: 14px; height: 14px;
    display: grid; place-items: center;
}
/* Currently-editing annotation — pseudo carries the caption per the handoff. */
.adsw-row.is-current { background: var(--th-paper); }
.adsw-row.is-current::after {
    content: "Currently editing";
    font-family: var(--th-font-serif);
    font-style: italic;
    font-size: 11px;
    color: var(--th-marigold-deep);
}
.adsw-row .body { min-width: 0; display: flex; flex-direction: column; }
.adsw-row .name { font-size: var(--th-size-14); color: var(--th-ink); font-weight: 500; }
.adsw-row .meta {
    font-size: 11px;
    color: var(--th-ink-3);
    font-family: var(--th-font-mono);
    font-variant-numeric: tabular-nums;
    display: flex; gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adsw-row .meta-edited { color: var(--th-ink-4); }
.adsw-row .right {
    display: flex; gap: 8px; align-items: center;
}

/* Pin glyph — hover-only for unpinned rows, always visible for pinned. */
.adsw-row .pin {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: var(--th-radius-3);
    color: var(--th-ink-4);
    cursor: pointer;
    opacity: 0;
    transition: opacity 80ms ease;
}
.adsw-row:hover .pin,
.adsw-row .pin:focus-visible { opacity: 1; }
.adsw-row .pin:hover { background: var(--th-paper-2); color: var(--th-marigold-deep); }
.adsw-row.is-pinned .pin { color: var(--th-marigold-deep); opacity: 1; }

/* ------------------------------------------------------------------
   Empty / no-matches state
   ------------------------------------------------------------------ */
.adsw-empty {
    padding: 32px 16px; text-align: center; color: var(--th-ink-4);
}
.adsw-empty i { font-size: 22px; margin-bottom: 6px; }
.adsw-empty p { margin: 4px 0; font-size: 13px; }

/* ------------------------------------------------------------------
   Pinned-cap prompt — overlays the popover body when the user tries
   to pin a 6th AppDef. Verbatim copy from the Phase 2 brief.
   ------------------------------------------------------------------ */
.adsw-cap-prompt {
    margin: 8px 12px 4px;
    border: 1px solid var(--th-marigold);
    background: var(--th-marigold-soft);
    border-radius: var(--th-radius-5);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px;
    font-family: var(--th-font-sans);
    font-size: var(--th-size-13);
}
.adsw-cap-prompt .head {
    color: var(--th-marigold-deep);
    font-family: var(--th-font-serif);
    font-style: italic;
    font-size: 14px;
}
.adsw-cap-prompt .body { color: var(--th-ink-2); line-height: 1.5; font-size: 12.5px; }
.adsw-cap-prompt .cap-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    overflow: hidden;
}
button.cap-row {
    display: grid;
    grid-template-columns: 16px 1fr auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--th-line);
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
button.cap-row:last-child { border-bottom: 0; }
button.cap-row:hover { background: var(--th-paper-2); }
.cap-row .cap-row-star { color: var(--th-marigold-deep); }
.cap-row .cap-row-name { font-weight: 500; color: var(--th-ink); }
.cap-row .cap-row-key {
    font-family: var(--th-font-mono);
    font-size: 11px;
    color: var(--th-ink-4);
    letter-spacing: 0.04em;
}
.cap-row .cap-row-action {
    font-family: var(--th-font-serif);
    font-style: italic;
    font-size: 11.5px;
    color: var(--th-marigold-deep);
}
.adsw-cap-prompt .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.adsw-cap-prompt .cc-btn {
    font-family: var(--th-font-sans);
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: var(--th-radius-3);
    border: 1px solid var(--th-line-2);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
}
.adsw-cap-prompt .cc-btn.is-ghost { background: transparent; }
.adsw-cap-prompt .cc-btn:hover { background: var(--th-paper-2); color: var(--th-ink); }

/* ------------------------------------------------------------------
   Footer hints + manage link
   ------------------------------------------------------------------ */
.adsw-foot {
    border-top: 1px solid var(--th-line);
    display: flex; align-items: center;
    padding: 8px 14px;
    background: var(--th-paper-2);
    font-size: 11px;
    color: var(--th-ink-3);
    gap: 14px;
}
.adsw-foot .keys { display: inline-flex; gap: 6px; align-items: center; }
.adsw-foot kbd {
    font-family: var(--th-font-mono);
    font-size: 10px;
    color: var(--th-ink-2);
    border: 1px solid var(--th-line);
    background: var(--th-paper);
    border-radius: 3px;
    padding: 0 5px;
}
.adsw-foot .new {
    margin-left: auto;
    font-family: var(--th-font-sans);
    font-size: 12px;
    color: var(--th-advant-deep);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.adsw-foot .new:hover { text-decoration: underline; }