/* ==========================================================================
   THE A1 PROPOSAL ROWS (Steven 2026-09-29, "A1 Essential")

   The open proposals on a want's Plan tab, one compact row each, like store
   search results. THE DESIGN IS THE PAGE: /static/har/proposal-six-20260929/
   (its style.css, A1 rules). Ruling: protocol/proposal-rows-spec-2026-09-29.md.
   Markup: proposal_row_a1 in templates/feed/_want_cards.html; the list and
   its Sort select in templates/feed/_wd_region_plans.html; sorting in
   static/js/pages/proposal-rows.js.

   Tokens only (the golden rule): the preview's 9-11px labels print at the
   smallest text token, --text-xs. The row reads its own width through a
   container query, because the want page is a drawer and is narrower than
   the window on a desktop.
   ========================================================================== */

.prow-board {
    container-type: inline-size;
    display: grid;
    gap: var(--space-4);
    font-family: var(--font-heading);
    color: var(--text-primary);
}

/* THE DESIGN'S TYPE. The ruled A1 page is drawn in the site's heading face,
   Plus Jakarta Sans (the family tokens.css names in --font-heading). On the
   Plan tab the interface standard (components/interface-standards.css)
   points --font-heading at the system stack inside .boh-interface and sets
   the family on every element, so the token cannot carry it into the rows:
   the family is named here once, with the interface stack behind it. The
   questions modal and the Passport dialog inside a row keep the interface
   type (they are not in this list). The class twice is the weight the old
   body:has(.prow-board) gave it, without a :has() whose "*" made every
   :has() change on the page restyle all of <body> (fluid-fast lane,
   2026-10-14). */
body .prow-board.prow-board :is(.prow-tools, .prow-identity, .prow-offer,
    .prow-metrics, .prow-timing, .prow-choose, .prow-details > summary,
    .prow-details__body),
body .prow-board.prow-board :is(.prow-tools, .prow-identity, .prow-offer,
    .prow-metrics, .prow-timing, .prow-details > summary,
    .prow-details__body) * {
    font-family: 'Plus Jakarta Sans', var(--interface-font, var(--font-sans));
}

/* ---- Above the list: the count, the one line, the Sort select ---------- */
.prow-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}
.prow-tools__count {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.prow-tools__count b {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
}
.prow-tools__count span {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.prow-tools__sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    font-size: var(--text-xs);
    white-space: nowrap;
}
.prow-tools__sort select {
    background: var(--surface-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--text-xs);
    color: var(--text-primary);
}

/* ---- The list and one row ---------------------------------------------- */
.prow-list {
    display: grid;
    gap: var(--space-4);
}
.prow {
    background: var(--surface-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    display: grid;
    gap: var(--space-3) var(--space-6);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'identity metrics'
        'offer    metrics'
        'timing   actions'
        'details  details';
    transition: border-color 0.15s;
}
/* display:grid would otherwise beat the [hidden] fold past 20. */
.prow[hidden] { display: none; }
.prow:hover { border-color: var(--color-gray-300); }
/* A failed or rejected bid, should one ever reach this list. */
.prow.proposal-card--failed { opacity: 0.5; }

.prow button,
.prow summary { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prow button:focus-visible,
.prow summary:focus-visible,
.prow-tools__sort select:focus-visible {
    outline: 2px solid var(--highlight-purple);
    outline-offset: 2px;
}

/* The approach strip: kept out of sight on A1, exactly as the ruled page
   keeps it; the same three words print as .prow-approach under the title. */
.prow-strip { display: none; }

/* ---- Identity: face, agent, BUSINESS, intelligence --------------------- */
.prow-identity {
    grid-area: identity;
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
}
/* One button over the whole block (Steven 2026-09-29): it opens the Agent
   Passport. Only as wide as what it holds, so the click lands on the
   identity and not on the empty cell beside it. */
.prow-identity--open {
    justify-self: start;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* The want page's walk-button treatment (components/walk-buttons.css)
   paints every button black on hover and focus. The old card's Passport
   opener is exempt there by its class (.pcard-ob-agent__profile, "so the
   identity beneath remains readable"); this opener is exempt here, for the
   same reason. Keyboard focus keeps that sheet's ring (and .prow
   button:focus-visible below where the sheet is not loaded). The selector
   out-ranks the sheet's, which carries !important. */
.want-detail .prow-board .prow .prow-identity.prow-identity--open[data-agent-passport-open]:is(:hover, :focus-visible, :active) {
    background: none !important;
    color: inherit !important;
    border-color: transparent !important;
    transform: none !important;
}
.prow-face {
    width: var(--space-12);
    height: var(--space-12);
    flex: none;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-black);
}
.prow-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prow-identity__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}
.prow-agent {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.prow-business {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.prow-business--unstated { color: var(--text-secondary); }
.prow-tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--highlight-purple);
    background: var(--color-purple-100);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}
.prow-model {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.prow-model small { font-size: var(--text-xs); }
.prow-model__logo {
    width: var(--space-3);
    height: var(--space-3);
    min-width: var(--space-3);
    flex: 0 0 var(--space-3);
    object-fit: contain;
}

/* ---- The offer: promise, title, approach, record ----------------------- */
.prow-offer {
    grid-area: offer;
    min-width: 0;
}
.prow-promise {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--highlight-purple);
}
.prow-title {
    margin: 0;
    font-family: inherit;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.prow-approach {
    margin: var(--space-2) 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.prow-record {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.prow-record b {
    color: var(--text-primary);
    font-weight: var(--font-bold);
}

/* ---- Three numbers: forecast, price, your part ------------------------- */
.prow-metrics {
    grid-area: metrics;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    align-self: center;
}
.prow-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.prow-metric small {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}
.prow-metric strong {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-primary);
}
.prow-metric em {
    font-size: var(--text-base);
    font-style: normal;
    letter-spacing: var(--tracking-normal);
}
.prow-metric--forecast strong { color: var(--highlight-purple); }
.prow-metric strong.prow-metric__words {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-normal);
    white-space: normal;
}
.prow-metric--effort strong {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-snug);
}
.prow-metric--effort em { font-size: var(--text-xs); }

/* ---- Timing line ------------------------------------------------------- */
.prow-timing {
    grid-area: timing;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.prow-timing span + span {
    border-left: 1px solid var(--color-gray-300);
    padding-left: var(--space-3);
}

/* ---- Choose (no Pass on the row, Steven 2026-09-29) --------------------- */
.prow-actions {
    grid-area: actions;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}
.prow-choose {
    min-height: calc(var(--space-10) + var(--space-1));
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--highlight-purple);
    color: var(--color-white);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    overflow-wrap: anywhere;
}
.prow-choose:hover { background: var(--color-purple-700); }
/* The shared select gate. Closed, it is only the questions modal (which
   opens in the top layer), so it takes no room on the row. An old-shape bid
   carries its readings radios here, and then the gate takes a full line
   above the buttons. */
.prow-gate {
    order: -1;
    flex: 1 1 100%;
    text-align: left;
}
.prow-gate:not(:has(.proposal-readings)) {
    position: absolute;
    width: 0;
    height: 0;
}
.prow-gate .pcard-ob-finalist-gate { margin: 0; }

/* ---- View proposal ----------------------------------------------------- */
.prow-details {
    grid-area: details;
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-3);
}
.prow-details > summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--space-8);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}
.prow-details > summary::-webkit-details-marker { display: none; }
.prow-details__body {
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.prow-details__body p { margin: 0 0 var(--space-2); }
.prow-details__body h4 {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.prow-details__body ul {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-5);
}

/* ---- The fold past 20 -------------------------------------------------- */
.prow-board > [data-prow-more] { justify-self: center; }

/* ---- Narrow: one column, the preview's phone layout -------------------- */
@container (max-width: 600px) {
    .prow {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'identity'
            'offer'
            'metrics'
            'timing'
            'actions'
            'details';
        padding: var(--space-5);
        gap: var(--space-4);
    }
    .prow-metrics { justify-content: space-between; }
    .prow-choose { flex: 1; }
    .prow-tools { align-items: flex-start; }
    /* The select speaks for itself on a phone, as on the preview. */
    .prow-tools__sort-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prow { transition: none; }
}

/* ── A READY-MADE TARGET'S PRODUCT PAGE (COO hands 2026-10-12): the want page
   drawn for a ready-made target (targets/_ready_pdp_region.html) adds its
   picture, pitch and what you get; the proposal row's Get this and pay line.
   Design tokens only, phone first. ───────────────────────────────────────── */
.ready-pdp { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.ready-pdp__img { display: block; width: 100%; max-width: 28rem; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--radius-lg); object-fit: cover; background: var(--surface-secondary); }
.ready-pdp__pitch { margin: 0; color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.45; }
.ready-pdp__helped { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.ready-pdp__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: ready-pdp-step; }
.ready-pdp__step { display: grid; grid-template-columns: var(--size-8) minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; counter-increment: ready-pdp-step; }
.ready-pdp__step::before { content: counter(ready-pdp-step); grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: var(--size-8); height: var(--size-8); border-radius: var(--radius-full); background: var(--tb-brand-purple, var(--accent-tertiary)); color: var(--color-white); font-family: var(--font-heading); font-weight: 800; }
.ready-pdp__step strong { color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; }
.ready-pdp__step span { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.ready-pdp__sample { display: grid; gap: var(--space-2); }
.ready-pdp__sample audio { width: 100%; }
.ready-pdp__sample-title, .ready-pdp__note { margin: 0; }
a.prow-choose { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* A ready-made target's Get this is the purchase, a button in its form
   (Steven 2026-10-13); the form takes no box, so the button sits in the row
   where the link sat. */
.prow-get { display: contents; }
.prow-get .prow-choose { cursor: pointer; }
.prow-pay { flex-basis: 100%; margin: var(--space-2) 0 0; color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5; }

/* THE PRICE AT THE TOP of a PAID ready-made target's sheet and product page
   (Steven 2026-10-13 night: "If there is pricing, it needs to be at the top
   right here, like a slow delivery: pay on arrival"): the picture on the
   left, the price block on the right, side by side at phone width too
   (templates/targets/_ready_pdp_price.html). Design tokens only. */
.ready-pdp__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ready-pdp__top > .ready-pdp__img { max-width: none; margin: 0; }
.ready-pdp__top > .ready-price:only-child { grid-column: 1 / -1; }
.ready-price { display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.ready-price__amount { margin: 0; color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-tight); }
.ready-price__pay { margin: 0; color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); line-height: var(--leading-snug); }
.ready-price__terms { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.ready-price__help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.ready-price__contact { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--font-bold); line-height: var(--leading-snug); text-decoration: none; }
.ready-price__contact:hover { background: var(--bg-hover); }
.ready-price__contact:focus-visible, .ready-price__faq:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
.ready-price__faq { color: var(--text-link); font-size: var(--text-xs); font-weight: var(--font-bold); }