/*
 * .ppx — the Pawprint picker. Shared stylesheet.
 *
 * Loaded by every page that mounts a picker: the two SSR functions
 * (api/post-a-request.js, api/directory.js) and the static
 * become-a-provider/index.html. Pairs with js/ppx.js — see that file for the
 * component contract.
 *
 * Colours resolve through var(--pp-*, fallback): the app tokens in
 * css/colors_and_type.css where a page loads them (every SSR page does), and
 * the marketing hexes otherwise. One component, both palettes, no fork.
 *
 * `/css/*` is served max-age=600, must-revalidate and this filename is not
 * content-hashed, so every page that links it carries a ?v= — bump ALL of them
 * together when this file changes (see CLAUDE.md § Cache-busting).
 */

/* Tokens go on every root the component creates, not just .ppx: the chip group
   replaces its select outright and the error notice is inserted as a SIBLING of
   the picker, so neither one is inside .ppx and neither would inherit a token
   declared only there. That bug is invisible in the resting state — an
   unresolved var() just leaves the property at its initial value — and only
   shows up when something needs the error colour. */
.ppx,
.ppx-chips,
.ppx-error,
.ppx-scrim {
    --ppx-card: var(--pp-card, #ffffff);
    --ppx-panel: var(--pp-bg, #ffffff);
    --ppx-border: var(--pp-border, rgba(26, 26, 46, 0.15));
    --ppx-ink: var(--pp-text, #1A1A2E);
    --ppx-ink2: var(--pp-text-secondary, #6B7280);
    --ppx-ink3: var(--pp-text-tertiary, rgba(26, 26, 46, 0.42));
    --ppx-brand: var(--pp-primary, #D4A843);
    --ppx-tick: var(--pp-action-gold, #c9a544);
    --ppx-hover: #f1ece4;
    --ppx-tile: #f1ebdd;
    --ppx-search: #edeae2;
    --ppx-pop: var(--pp-shadow-pop, 0 8px 28px rgba(56, 35, 18, 0.14));
    --ppx-error: #b3261e;
}
.ppx { position: relative; font-family: inherit; }
.ppx[data-open="true"] { z-index: 41; }
/* The native select never leaves the form — it stays the value of record and
   it is what submits — so it has to lose its box without leaving the DOM.
   The doubled class is deliberate. A page that styles its own fields outranks
   a single class: `.pp-dir-field select { width: 100%; min-height: 44px }` on
   /providers is (0,1,1) against our (0,1,0), so the select kept a full-size
   box while `clip` stopped it painting. In the chip form it also has no
   positioned ancestor, so `width: 100%` resolved against the VIEWPORT and
   handed the whole page 181px of horizontal scroll. (0,2,0) wins that fight;
   the max-* clamps hold even if something wins the next one. */
.ppx-native.ppx-native {
    position: absolute;
    width: 1px; height: 1px;
    min-width: 0; min-height: 0;
    max-width: 1px; max-height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Trigger ------------------------------------------------------ */
.ppx-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    background: var(--ppx-card);
    border: 1.5px solid var(--ppx-border);
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ppx-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms var(--pp-ease-out, ease-out), background 140ms var(--pp-ease-out, ease-out);
}
.ppx-trigger:hover { border-color: var(--ppx-ink3); background: var(--ppx-hover); }
.ppx-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ppx-brand) 62%, transparent);
    outline-offset: 1px;
    border-color: var(--ppx-ink3);
}
.ppx[data-open="true"] .ppx-trigger { border-color: var(--ppx-ink3); background: var(--ppx-hover); }
.ppx-trigger[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ppx[data-invalid="true"] .ppx-trigger { border-color: var(--ppx-error); }
.ppx-lead {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 9px;
    background: var(--ppx-tile);
    color: var(--ppx-ink2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppx-val {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ppx-val[data-placeholder="true"] { color: var(--ppx-ink3); font-weight: 500; }
.ppx-caret {
    flex: 0 0 auto;
    color: var(--ppx-ink3);
    transition: transform 180ms var(--pp-ease-out, ease-out);
}
.ppx[data-open="true"] .ppx-caret { transform: rotate(180deg); }

/* Panel -------------------------------------------------------- */
.ppx-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 248px;
    background: var(--ppx-panel);
    border: 1px solid var(--ppx-border);
    border-radius: 20px;
    box-shadow: var(--ppx-pop);
    padding: 8px;
    animation: ppxIn 200ms var(--pp-ease-out, ease-out);
}
.ppx-panel[hidden] { display: none; }
@keyframes ppxIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.ppx-list { max-height: 292px; overflow-y: auto; overscroll-behavior: contain; }
.ppx-list[hidden] { display: none; }
.ppx-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ppx-ink2);
    padding: 12px 12px 6px;
}
.ppx-group:first-child { padding-top: 6px; }
.ppx-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 13px;
    cursor: pointer;
    user-select: none;
    text-align: left;
}
.ppx-opt[data-active="true"] { background: var(--ppx-hover); }
.ppx-opt[hidden] { display: none; }
.ppx-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: var(--ppx-tile);
    color: var(--ppx-ink2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppx-icon[data-tint] { color: var(--pp-text, #382312); }
.ppx-text { flex: 1; min-width: 0; }
.ppx-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ppx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ppx-meta { display: block; font-size: 12.5px; color: var(--ppx-ink2); }
.ppx-tick { flex: 0 0 auto; color: var(--ppx-tick); opacity: 0; }
.ppx-opt[aria-selected="true"] .ppx-tick { opacity: 1; }
.ppx-opt[aria-selected="true"] .ppx-label { font-weight: 700; }

/* Finder search + empty state ---------------------------------- */
.ppx-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    margin: 2px 2px 6px;
    padding: 0 14px;
    background: var(--ppx-search);
    border-radius: 999px;
    color: var(--ppx-ink3);
}
.ppx-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--ppx-ink);
}
.ppx-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ppx-none {
    padding: 18px 12px;
    text-align: center;
    font-size: 13.5px;
    color: var(--ppx-ink2);
}
.ppx-none[hidden] { display: none; }

/* Chips -------------------------------------------------------- */
.ppx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ppx-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 15px 7px 8px;
    background: var(--ppx-card);
    border: 1.5px solid var(--ppx-border);
    border-radius: 999px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ppx-ink);
    cursor: pointer;
    transition: border-color 140ms var(--pp-ease-out, ease-out), background 140ms var(--pp-ease-out, ease-out);
}
.ppx-chip--plain { padding-left: 15px; }
.ppx-chip:hover { border-color: var(--ppx-ink3); }
.ppx-chip:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ppx-brand) 62%, transparent);
    outline-offset: 2px;
}
.ppx-chip[aria-checked="true"] {
    border-color: var(--ppx-ink);
    background: var(--ppx-hover);
    box-shadow: inset 0 0 0 1px var(--ppx-ink);
}
.ppx-chip-glyph {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-text, #382312);
}
/* Deliberately NO red outline on the chips when the group is unanswered. One
   control in a wrong state reads as an error (that is why the finder trigger
   goes red); six options outlined in red reads as "all six of these are wrong"
   when the actual state is "you have not picked one yet". The notice under the
   group says that, and focus lands there. */

/* Inline error notice ------------------------------------------ */
.ppx-error {
    margin: 7px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ppx-error);
}
.ppx-error[hidden] { display: none; }

/* Phone: the panel becomes the app's bottom sheet --------------- */
/* The scrim exists for the phone sheet: it dims the page and gives the sheet
   something to be dismissed against. On a desktop dropdown it must be INERT.
   A transparent full-viewport layer above the page swallows the first click
   on whatever the visitor actually wanted — click straight from an open picker
   into the next input and the picker closes but the input never focuses.
   Closing on an outside click is the document pointerdown listener's job, and
   that fires whether or not anything is painted over the page. */
.ppx-scrim {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
    pointer-events: none;
}
.ppx-scrim[hidden] { display: none; }
@media (max-width: 600px) {
    .ppx-scrim { background: rgba(24, 16, 8, 0.28); pointer-events: auto; }
}
@media (max-width: 600px) {
    .ppx[data-open="true"] .ppx-panel {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        width: 100%;
        min-width: 0;
        /* Bound the SHEET and let the list take what is left, rather than
           capping the list at a guessed vh: the fixed-position viewport and
           window.innerHeight disagree on a phone (URL bar, safe area), and a
           guess overshoots by exactly that difference and clips the last row. */
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        border-radius: 28px 28px 0 0;
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
        animation-name: ppxUp;
    }
    .ppx[data-open="true"] .ppx-search { flex: 0 0 auto; }
    .ppx[data-open="true"] .ppx-list { max-height: none; flex: 1 1 auto; min-height: 0; }
    @keyframes ppxUp {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .ppx-panel { animation: none; }
    .ppx-caret, .ppx-trigger, .ppx-chip { transition: none; }
}