/* input(1737,1): run-time error CSS1019: Unexpected token, found '}' */
/* ─────────────────────────────────────────────────────────────
   Saved subjects — My people / pets / vehicles / properties.

   Ported from the client-app design system (screens-subjects.jsx). The
   artboards are mobile-first; this widens to the account container above the
   narrow breakpoint, matching the other account siblings.

   Every colour here is an existing --rr- token. One deliberate deviation from
   the design: the runner badge uses ink on the warm tint rather than warm-on-
   warm, which does not reach WCAG AA at 11px. Ink on --rr-accent is 8.7:1.
   ───────────────────────────────────────────────────────────── */

.subj-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.subj-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.25rem;
}

/* ---- Card ------------------------------------------------------------- */

.subj-card {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 14px;
    padding: 14px;
}

.subj-card__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.subj-card__body {
    flex: 1;
    min-width: 0;
}

/* The body's lines STACK: name, then each meta line, then the price line. The Razor card writes
   them as <div>s, but booking-v2-step4.js builds its cards (the pre-step, the picker rows) from
   <span>s, which run inline — the pre-step printed "MyselfRon P." with no space (owner
   2026-10-15). One rule for every card, so no surface depends on its own element choice. */
.subj-card__body > .subj-card__name,
.subj-card__body > .subj-card__meta {
    display: block;
}

.subj-card__name {
    font-family: var(--rr-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* The price-driving line sits closest to the name and carries the most
   weight; everything after it is supporting detail. */
.subj-card__meta {
    font-family: var(--rr-font);
    font-size: 12px;
    font-weight: 400;
    color: var(--rr-slate);
    margin-top: 1px;
    line-height: 1.4;
}

.subj-card__meta--lead {
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-ink);
    margin-top: 3px;
}

.subj-card__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.subj-flag {
    background: var(--rr-canvas);
    border: 1px solid var(--rr-line);
    border-radius: 6px;
    padding: 2px 7px;
    font-family: var(--rr-font);
    font-size: 11px;
    color: var(--rr-slate);
    flex-shrink: 0;
    white-space: nowrap;
}

.subj-card__note {
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    margin-top: 7px;
    line-height: 1.45;
}

.subj-card__note i {
    margin-right: 5px;
}

/* ---- Photo ------------------------------------------------------------ */

/* The striped ground reads as "a photo belongs here" at any size; the type
   glyph keeps the card legible before one is uploaded. */
.subj-photo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
    position: relative;
    background: repeating-linear-gradient(135deg, var(--rr-primary-light) 0 5px, #F3FBFD 5px 10px);
    border: 1px solid var(--rr-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-photo i {
    font-size: 21px;
    color: var(--rr-cyan-dark);
}

.subj-photo--sm {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.subj-photo--sm i {
    font-size: 15px;
}

/* An uploaded photo fills the frame; the kind glyph yields to it (the swatch
   dot paints above — it is a locator, not decoration). */
.subj-photo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Author display beats the UA's [hidden] rule — same trap as .subj-sheet. */
.subj-photo__img[hidden] {
    display: none;
}

/* How a runner picks the car out of a driveway. Omitted entirely when the
   free-text colour matches nothing — a missing dot is correct, a wrong dot
   sends someone to the wrong car. */
.subj-photo__swatch {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--rr-paper);
    box-shadow: 0 1px 3px rgba(10, 69, 92, 0.25);
}

/* ---- Badges ----------------------------------------------------------- */

.subj-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--rr-accent);
    color: var(--rr-ink);
    border-radius: 6px;
    padding: 1px 5px;
    font-family: var(--rr-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-left: 6px;
}

.subj-badge i {
    font-size: 8px;
}

/* Author display beats the UA's [hidden] rule — without this the form's badge
   preview renders as an empty accent pill (stray tag icon) before any badge is
   chosen. Same trap as .subj-sheet. */
.subj-badge[hidden] {
    display: none;
}

.subj-you {
    background: var(--rr-cyan);
    color: var(--rr-ink);
    border-radius: 9999px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Row action ------------------------------------------------------- */

.subj-action {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--rr-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.subj-action:hover,
.subj-action:focus-visible {
    background: var(--rr-canvas);
    color: var(--rr-ink);
}

/* ---- Add ------------------------------------------------------------- */

.subj-add {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    margin-top: 10px;
    background: transparent;
    border: 1.5px dashed var(--rr-cyan-light);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--rr-cyan-dark);
    font-family: var(--rr-font);
    font-weight: 700;
    font-size: 14px;
    min-height: 44px;
    cursor: pointer;
}

.subj-add:hover,
.subj-add:focus-visible {
    background: var(--rr-primary-light);
}

/* ---- Empty state ------------------------------------------------------ */

.subj-empty {
    padding: 10px 0 0;
}

.subj-empty__hero {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
}

.subj-empty__glyph {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin: 0 auto 14px;
    background: repeating-linear-gradient(135deg, var(--rr-primary-light) 0 6px, #F3FBFD 6px 12px);
    border: 1px solid var(--rr-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-empty__glyph i {
    font-size: 30px;
    color: var(--rr-cyan-dark);
}

.subj-empty__head {
    margin: 0;
    font-family: var(--rr-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--rr-ink);
    line-height: 1.2;
}

.subj-empty__body {
    margin: 8px 0 0;
    font-family: var(--rr-font);
    font-size: 13px;
    color: var(--rr-slate);
    line-height: 1.55;
}

.subj-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.subj-benefit {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 12px 13px;
}

.subj-benefit__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    background: var(--rr-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-benefit__icon i {
    font-size: 14px;
    color: var(--rr-cyan-dark);
}

.subj-benefit__title {
    display: block;
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-benefit__sub {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 2px;
    line-height: 1.45;
}

/* ---- Archived --------------------------------------------------------- */

.subj-archived {
    margin-top: 18px;
}

.subj-archived__toggle {
    width: 100%;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

.subj-archived__toggle[aria-expanded="true"] {
    border-radius: 12px 12px 0 0;
}

.subj-archived__label {
    flex: 1;
    text-align: left;
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-ink);
}

.subj-archived__panel {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 12px;
}

.subj-archived__row {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 8px 0;
}

.subj-archived__row .subj-photo {
    opacity: 0.5;
}

.subj-archived__name {
    display: block;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-archived__meta,
.subj-archived__when {
    display: block;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    margin-top: 1px;
}

.subj-archived__when {
    font-size: 11px;
}

/* ---- Privacy note ----------------------------------------------------- */

.subj-privacy {
    margin-top: 20px;
    padding: 12px 14px;
    background: var(--rr-cream);
    border: 1px dashed var(--rr-line);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.subj-privacy i {
    color: var(--rr-cyan-dark);
    font-size: 15px;
    margin-top: 1px;
}

.subj-privacy span {
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

/* ---- Account-root nav group ------------------------------------------- */

.subj-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subj-nav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 44px;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    text-decoration: none;
}

.subj-nav-row:first-child {
    border-radius: 12px 12px 0 0;
}

.subj-nav-row:last-child {
    border-radius: 0 0 12px 12px;
}

.subj-nav-row + .subj-nav-row {
    border-top: none;
}

.subj-nav-row:hover,
.subj-nav-row:focus-visible {
    background: var(--rr-canvas);
}

.subj-nav-row__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--rr-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-nav-row__icon i {
    font-size: 15px;
    color: var(--rr-cyan-dark);
}

.subj-nav-row__label {
    display: block;
    font-family: var(--rr-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-ink);
}

.subj-nav-row__sub {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 1px;
}

/* First run: one card that makes the pitch, in place of four empty rows. */
.subj-firstrun {
    display: block;
    background: var(--rr-paper);
    border: 1.5px solid var(--rr-cyan-light);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    text-decoration: none;
}

.subj-firstrun__glyphs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.subj-firstrun__glyph {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--rr-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-firstrun__glyph i {
    font-size: 15px;
    color: var(--rr-cyan-dark);
}

.subj-firstrun__head {
    font-family: var(--rr-font);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--rr-ink);
}

.subj-firstrun__body {
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
    margin-top: 3px;
    line-height: 1.5;
}

.subj-firstrun__cta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-cyan-dark);
}

.subj-group-label {
    font-family: var(--rr-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rr-slate);
    margin: 20px 0 8px;
}

/* ═══════════════════════════════════════════════════════════════
   ADD / EDIT FORM

   Built out of taps: chips and tiles wherever the value is an enum. Every
   control holds the 44px floor, including the inline ones that change a band
   that prices the job.
   ═══════════════════════════════════════════════════════════════ */

.subj-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-cyan-dark);
    text-decoration: none;
}

.subj-back:hover {
    text-decoration: underline;
}

.subj-section-label {
    font-family: var(--rr-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rr-slate);
    margin: 20px 0 8px;
}

.subj-section-help {
    margin: -2px 0 10px;
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

.subj-note {
    margin: 8px 2px 0;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    line-height: 1.5;
}

.subj-field {
    margin-top: 12px;
}

.subj-label {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-ink);
    margin-bottom: 5px;
}

.subj-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--rr-line);
    border-radius: 10px;
    background: var(--rr-paper);
    font-family: var(--rr-font);
    font-size: 14px;
    color: var(--rr-ink);
}

.subj-input:focus-visible {
    outline: 2px solid var(--rr-cyan);
    outline-offset: 1px;
    border-color: var(--rr-cyan);
}

.subj-input--mono {
    font-family: var(--rr-mono);
    letter-spacing: 0.04em;
}

.subj-textarea {
    min-height: 84px;
    resize: vertical;
    line-height: 1.5;
}

.subj-help {
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    margin-top: 6px;
    line-height: 1.45;
}

.subj-help i {
    margin-right: 4px;
    color: var(--rr-cyan-dark);
}

.subj-two {
    display: flex;
    gap: 8px;
}

.subj-two > .subj-field {
    flex: 1;
    min-width: 0;
}

.subj-field--narrow {
    flex: 0 0 96px !important;
}

.subj-reassure {
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.subj-reassure i {
    font-size: 13px;
    color: var(--rr-cyan-dark);
    margin-top: 2px;
}

.subj-reassure span {
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

/* ---- Chips + tiles ---------------------------------------------------- */

.subj-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subj-chip {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 10px;
    padding: 9px 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--rr-ink);
    cursor: pointer;
}

.subj-chip[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 1.5px solid var(--rr-cyan);
    font-weight: 700;
    color: var(--rr-cyan-dark);
}

.subj-chip--wide {
    flex: 1 1 auto;
}

.subj-chip__sub {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--rr-slate);
}

.subj-chip[aria-pressed="true"] .subj-chip__sub {
    color: var(--rr-cyan-dark);
}

.subj-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.subj-tile {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 12px 10px;
    min-height: 76px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.subj-tile[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 1.5px solid var(--rr-cyan);
}

.subj-tile i {
    font-size: 19px;
    color: var(--rr-slate);
}

.subj-tile[aria-pressed="true"] i {
    color: var(--rr-cyan-dark);
}

.subj-tile__title {
    font-family: var(--rr-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--rr-ink);
    text-align: center;
    line-height: 1.25;
}

.subj-tile[aria-pressed="true"] .subj-tile__title {
    color: var(--rr-cyan-dark);
}

.subj-tile__sub {
    font-family: var(--rr-font);
    font-size: 10.5px;
    color: var(--rr-slate);
    text-align: center;
}

/* ---- Pet weight + band ------------------------------------------------- */

.subj-weightrow {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.subj-field--weight {
    width: 116px;
    flex-shrink: 0;
    margin-top: 0;
}

.subj-input-wrap {
    position: relative;
}

.subj-input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-slate);
    pointer-events: none;
}

.subj-bandpanel {
    flex: 1;
    background: var(--rr-primary-light);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 52px;
}

.subj-bandpanel__kicker {
    font-family: var(--rr-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rr-cyan-dark);
}

.subj-bandpanel__value {
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
    margin-top: 2px;
}

.subj-inlineaction {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--rr-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rr-cyan-dark);
    cursor: pointer;
}

.subj-inlineaction:hover {
    text-decoration: underline;
}

/* Now that the pick button actually does something, it holds the 44px floor
   (rr-btn--sm alone is ~34px). */
.subj-photopick .rr-btn {
    min-height: 44px;
}

/* "Remove photo" sits beside the pick button, on the .subj-inlineaction 44px
   floor. Hidden (with the [hidden] guard) until there is a photo to remove. */
.subj-photoremove {
    margin-left: 10px;
}

.subj-photoremove[hidden] {
    display: none;
}

/* ---- VIN --------------------------------------------------------------- */

.subj-vin {
    margin-top: 20px;
    background: var(--rr-paper);
    border: 1.5px solid var(--rr-cyan-light);
    border-radius: 14px;
    padding: 14px;
}

.subj-vin__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.subj-vin__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--rr-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-vin__icon i {
    font-size: 16px;
    color: var(--rr-cyan-dark);
}

.subj-vin__title {
    display: block;
    font-family: var(--rr-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-vin__body {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 2px;
    line-height: 1.45;
}

.subj-vin__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.subj-vin__entry {
    margin-top: 10px;
}

.subj-vin__result {
    margin-top: 10px;
    font-family: var(--rr-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rr-slate);
}

.subj-vin__result--ok {
    color: var(--rr-success);
}

.subj-vin__result--warn {
    color: var(--rr-danger);
}

/* ---- VIN scanner dialog ------------------------------------------------- */

/* Centered, not a bottom sheet: the camera frame wants the middle of the
   screen where hands naturally hold a phone up to a door jamb. */
.subj-scan {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Author display beats the UA's [hidden] rule — same trap as .subj-sheet. */
.subj-scan[hidden] {
    display: none;
}

.subj-scan__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 69, 92, 0.55);
}

.subj-scan__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--rr-paper);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 32px rgba(10, 69, 92, 0.22);
}

.subj-scan__title {
    margin: 0;
    font-family: var(--rr-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-scan__hint {
    margin: 6px 0 12px;
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

.subj-scan__frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--rr-ink-deeper);
    aspect-ratio: 4 / 3;
}

.subj-scan__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.subj-scan__status {
    min-height: 18px;
    margin-top: 10px;
    font-family: var(--rr-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-slate);
}

.subj-scan__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.subj-scan__actions .rr-btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
}

/* The VIN card's Scan/Type pair are primary routes into the flow — same floor. */
.subj-vin__actions .rr-btn {
    min-height: 44px;
}

/* "Scan it" ships hidden until the browser proves it can scan; .rr-btn's own
   display would otherwise defeat the [hidden] attribute (the .subj-sheet trap)
   and show the dead button on Safari/Firefox. */
.subj-vin__actions .rr-btn[hidden] {
    display: none;
}

/* ---- Address picker ---------------------------------------------------- */

.subj-addrlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subj-addr {
    width: 100%;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 12px 13px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

.subj-addr[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 1.5px solid var(--rr-cyan);
}

.subj-addr__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--rr-canvas);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-addr[aria-pressed="true"] .subj-addr__icon {
    background: var(--rr-paper);
}

.subj-addr__icon i {
    font-size: 15px;
    color: var(--rr-slate);
}

.subj-addr[aria-pressed="true"] .subj-addr__icon i {
    color: var(--rr-cyan-dark);
}

.subj-addr__label {
    display: block;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-addr__default {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rr-cyan-dark);
    background: var(--rr-primary-light);
    border-radius: 9999px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.subj-addr__line {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 1px;
}

.subj-addr__check {
    font-size: 17px;
    color: var(--rr-cyan-dark);
    opacity: 0;
}

.subj-addr[aria-pressed="true"] .subj-addr__check {
    opacity: 1;
}

.subj-emptyaddr {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: var(--rr-cream);
    border: 1px dashed var(--rr-line);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

.subj-emptyaddr i {
    color: var(--rr-cyan-dark);
    margin-top: 2px;
}

/* ---- Steppers ---------------------------------------------------------- */

.subj-steppers {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 4px 14px;
}

.subj-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.subj-stepper + .subj-stepper {
    border-top: 1px solid var(--rr-line);
}

.subj-stepper__label {
    flex: 1;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rr-ink);
}

.subj-stepper__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.subj-stepper__btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--rr-line);
    background: var(--rr-paper);
    border-radius: 10px;
    color: var(--rr-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.subj-stepper__btn--add {
    background: var(--rr-primary-light);
    border-color: var(--rr-cyan-light);
    color: var(--rr-cyan-dark);
}

.subj-stepper__value {
    min-width: 32px;
    text-align: center;
    font-family: var(--rr-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--rr-ink);
}

/* Never answered: a muted dash, not a confident black "0". Zero is a real answer here and
   prices differently from "did not say", so the two must not look alike. The attribute is
   dropped by subject-form.js the moment either button is tapped. */
.subj-stepper[data-unset] .subj-stepper__value {
    color: var(--rr-slate);
    font-weight: 600;
}

/* ---- Job-card preview -------------------------------------------------- */

.subj-jobcard {
    margin-top: 12px;
    background: var(--rr-ink-deeper);
    border-radius: 12px;
    padding: 12px;
}

.subj-jobcard__kicker {
    font-family: var(--rr-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rr-cyan-light);
}

.subj-jobcard__row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
}

.subj-jobcard__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.subj-jobcard__icon i {
    font-size: 13px;
    color: #fff;
}

.subj-jobcard__line {
    display: block;
    font-family: var(--rr-font);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

.subj-jobcard__sub {
    display: block;
    font-family: var(--rr-font);
    font-size: 11px;
    color: var(--rr-cyan-light);
    margin-top: 1px;
}

/* ---- More details ------------------------------------------------------ */

.subj-more {
    width: 100%;
    margin-top: 18px;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 13px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.subj-more i:first-child {
    font-size: 16px;
    color: var(--rr-cyan-dark);
}

.subj-more__head {
    display: block;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-cyan-dark);
}

.subj-more__sub {
    display: block;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    margin-top: 1px;
}

.subj-more__panel {
    margin-top: 4px;
    padding: 4px 0 0;
}

/* ---- Self banner, archive, CTA ----------------------------------------- */

.subj-selfnote,
.subj-photopick {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
}

.subj-photo--lg {
    width: 72px;
    height: 72px;
    border-radius: 18px;
}

.subj-photo--lg i {
    font-size: 27px;
}

.subj-selfnote__head {
    font-family: var(--rr-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-selfnote__body {
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 2px;
    line-height: 1.45;
}

.subj-locked {
    background: var(--rr-primary-light);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}

.subj-locked i {
    font-size: 16px;
    color: var(--rr-cyan-dark);
}

.subj-locked__label {
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
}

/* The Myself row's name: the same locked treatment, but a class of its own rather than a
   second .subj-locked — the relationship lock below it is addressed by that exact class. */
.subj-readonly {
    background: var(--rr-primary-light);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}

.subj-readonly i {
    font-size: 16px;
    color: var(--rr-cyan-dark);
}

.subj-readonly__value {
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subj-archive-block {
    margin-top: 22px;
}

.subj-archive-note {
    margin: 8px 2px 0;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
    text-align: center;
}

.subj-btn-full {
    width: 100%;
    justify-content: center;
}

.subj-cta {
    margin-top: 24px;
}

.subj-formerror {
    margin-top: 10px;
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-danger);
    text-align: center;
}

.subj-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.subj-swatch {
    width: 62px;
    min-height: 62px;
    background: none;
    border: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.subj-swatch__dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--rr-canvas);
    border: 1px solid var(--rr-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subj-swatch__dot i {
    font-size: 14px;
    color: var(--rr-slate);
}

.subj-swatch[aria-pressed="true"] .subj-swatch__dot {
    border: 2.5px solid var(--rr-cyan);
    box-shadow: 0 0 0 3px rgba(56, 195, 227, 0.22);
}

.subj-swatch__label {
    font-family: var(--rr-font);
    font-size: 11px;
    font-weight: 500;
    color: var(--rr-slate);
}

.subj-swatch[aria-pressed="true"] .subj-swatch__label {
    font-weight: 700;
    color: var(--rr-cyan-dark);
}

/* ═══════════════════════════════════════════════════════════════
   OVERFLOW MENU + ARCHIVE SHEET
   ═══════════════════════════════════════════════════════════════ */

.subj-menu {
    position: relative;
    flex-shrink: 0;
}

.subj-menu__panel {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 20;
    min-width: 170px;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(10, 69, 92, 0.16);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.subj-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    background: none;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rr-ink);
    cursor: pointer;
}

.subj-menu__item:hover,
.subj-menu__item:focus-visible {
    background: var(--rr-canvas);
}

.subj-menu__item i {
    font-size: 14px;
    color: var(--rr-slate);
}

/* ---- Sheet ------------------------------------------------------------- */

.subj-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* An author `display` beats the UA's `[hidden] { display: none }` (author origin
   wins over UA origin), so without this the closed sheet's scrim would sit over
   the whole page from load. */
.subj-sheet[hidden] {
    display: none;
}

body.subj-sheet-open {
    overflow: hidden;
}

.subj-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 69, 92, 0.55);
}

.subj-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--rr-paper);
    border-radius: 22px 22px 0 0;
    padding: 10px 20px 28px;
    box-shadow: 0 -8px 32px rgba(10, 69, 92, 0.22);
    max-height: 90vh;
    overflow-y: auto;
}

.subj-sheet__grab {
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: var(--rr-line);
    margin: 0 auto 16px;
}

.subj-sheet__head {
    display: flex;
    gap: 12px;
    align-items: center;
}

.subj-sheet__photo {
    width: 52px;
    height: 52px;
    border-radius: 13px;
}

.subj-sheet__photo i {
    font-size: 20px;
}

.subj-sheet__title {
    margin: 0;
    font-family: var(--rr-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-sheet__meta {
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
    margin-top: 2px;
}

.subj-sheet__list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subj-sheet__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.subj-sheet__item i {
    font-size: 14px;
    color: var(--rr-cyan-dark);
    margin-top: 2px;
}

.subj-sheet__item-title {
    display: block;
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-ink);
}

.subj-sheet__item-sub {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 1px;
    line-height: 1.45;
}

.subj-sheet__actions {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .subj-sheet__panel {
        animation: subj-sheet-in 180ms ease-out;
    }

    @keyframes subj-sheet-in {
        from { transform: translateY(12px); opacity: 0.6; }
        to { transform: translateY(0); opacity: 1; }
    }
}

/* Announced, never shown. Declared locally so the page does not depend on a
   Bootstrap utility being present in this bundle. */
.subj-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    .subj-page {
        padding: 1.25rem 1rem 3rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Booking (V090 item 4) — the OPTIONAL service row's subject band
   and its Change picker sheet. Ported from screens-subjects-booking.jsx
   (SubjectBand / PickerRow / Sheet). Loaded on /Order/Book alongside
   booking-flow-v2.css; every colour is an existing --rr- token except
   the flow's own V045 savings green #047857 (--rr-success is 4.13:1 on
   white and fails WCAG AA at these sizes — same precedent as the
   ink-on-accent badge deviation documented at the top of this file).
   ═══════════════════════════════════════════════════════════════ */

/* ---- Compact card (wired for the picker rows) -------------------------- */

/* The same subj-card skeleton at picker scale: 44px photo, one joined meta
   line. _SubjectCard.cshtml emits this modifier when Compact is set, and the
   JS-rendered picker rows emit the identical classes. */
.subj-card--compact {
    padding: 12px;
    border-radius: 12px;
}

.subj-card--compact .subj-card__row {
    gap: 11px;
    align-items: center;
}

.subj-card--compact .subj-photo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.subj-card--compact .subj-photo i {
    font-size: 17px;
}

.subj-card--compact .subj-card__name {
    font-size: 14px;
}

.subj-card--compact .subj-card__meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--rr-slate);
    margin-top: 2px;
}

/* ---- The subject band -------------------------------------------------- */

/* A FACE in a QUIET strip. Deliberately neutral in its default state — four
   rows must stay scannable, so the band is not tinted to be "discoverable".
   It turns cyan ONLY after the line has been reassigned: feedback, not
   decoration. */
.subj-band {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    min-height: 44px;
    border-radius: 9px;
    background: var(--rr-canvas);
    border: 1px solid var(--rr-line);
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    text-align: left;
    font-family: var(--rr-font);
}

.subj-band:hover,
.subj-band:focus-visible {
    border-color: var(--rr-cyan);
}

.subj-band--changed {
    background: var(--rr-primary-light);
    border-color: var(--rr-cyan-light);
}

.subj-band .subj-photo {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.subj-band .subj-photo i {
    font-size: 10px;
}

.subj-band .subj-photo__swatch {
    width: 12px;
    height: 12px;
}

.subj-band__text {
    flex: 1;
    min-width: 0;
}

.subj-band__for {
    font-size: 12.5px;
    color: var(--rr-slate);
}

.subj-band__name {
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-band__meta {
    display: block;
    font-size: 11px;
    color: var(--rr-slate);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subj-band__change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rr-cyan-dark);
}

.subj-band__change i {
    font-size: 10px;
}

/* The price move, announced ON the line that moved. Green only when the money
   went DOWN; an increase is announced just as plainly in ink. */
.subj-pricenote {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding-left: 2px;
    font-family: var(--rr-font);
    font-size: 11.5px;
    font-weight: 600;
    color: #047857;
}

.subj-pricenote i {
    font-size: 12px;
    flex-shrink: 0;
}

.subj-pricenote--up {
    color: var(--rr-ink);
}

/* "Total updated for Theo · was $64.00" on the subtotal bar. */
.subj-totalnote {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--rr-line);
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--rr-font);
    font-size: 12px;
    font-weight: 600;
    color: #047857;
}

.subj-totalnote i {
    font-size: 13px;
    flex-shrink: 0;
}

/* ---- "For someone else" ------------------------------------------------ */

/* Style-inert wrapper until the cart holds an Optional person-kind line; then
   the two dashed buttons sit side by side, stacked icon-over-label. */
.bk2-add-row--dual {
    display: flex;
    gap: 8px;
}

.bk2-add-row--dual .bk2-add-another {
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    min-height: 66px;
    padding: 12px 10px;
    font-size: 12.5px;
}

.bk2-add-row--dual .bk2-add-another i {
    font-size: 15px;
}

/* ---- Change picker sheet (extends the shared .subj-sheet block) -------- */

/* The picker variant: the body scrolls, the CTA footer stays pinned, so the
   panel swaps the archive sheet's padded scroll box for a flex column. */
.subj-sheet__panel--picker {
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
}

.subj-sheet__panel--picker .subj-sheet__grab {
    margin: 0 auto 12px;
    flex-shrink: 0;
}

.subj-sheet__body {
    padding: 0 18px 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Says out loud that this changes ONE line, not the order. */
.subj-sheet__context {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    background: var(--rr-canvas);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
}

.subj-sheet__context b {
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-sheet__context i {
    font-size: 12px;
    flex-shrink: 0;
}

.subj-sheet__rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}

.subj-sheet__form {
    margin-top: 12px;
}

.subj-sheet__condition-head {
    margin: 16px 0 0;
    font-family: var(--rr-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-sheet__condition-sub {
    margin: 3px 0 10px;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
}

.subj-sheet__privacy {
    margin: 14px 2px 0;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

.subj-sheet__privacy i {
    margin-right: 5px;
    color: var(--rr-cyan-dark);
}

.subj-sheet__footer {
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rr-line);
    flex-shrink: 0;
}

.subj-sheet__cta {
    width: 100%;
    min-height: 48px;
}

/* ---- Picker rows ------------------------------------------------------- */

/* A row is the compact subj-card as a <button>, plus a right rail carrying the
   price that choice produces BEFORE it is chosen, and a check on the current
   selection. */
.subj-pick {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.subj-pick .subj-card__name,
.subj-pick .subj-card__meta {
    display: block;
}

.subj-pick[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 1.5px solid var(--rr-cyan);
    padding: 11.5px;
}

.subj-pick__right {
    text-align: right;
    flex-shrink: 0;
}

.subj-pick__price {
    display: block;
    font-family: var(--rr-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-ink);
    font-variant-numeric: tabular-nums;
}

.subj-pick__tag {
    display: block;
    font-family: var(--rr-font);
    font-size: 10.5px;
    white-space: nowrap;
    font-weight: 700;
    color: #047857;
    margin-top: 1px;
}

.subj-pick__check {
    font-size: 19px;
    color: var(--rr-cyan-dark);
    flex-shrink: 0;
}

/* The dashed add row inherits .subj-add; the sheet's row gap owns spacing. */
.subj-pick-add {
    margin-top: 0;
    padding: 13px 12px;
    font-size: 13.5px;
}

/* "from" before a required-mode row's price: the number is the FLOOR across the
   catalog ("Services from $109.00"), not the price of one line. */
.subj-pick__from {
    font-weight: 600;
    font-size: 11px;
    color: var(--rr-slate);
    margin-right: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Booking (V090 item 5) — REQUIRED mode: the pre-step ahead of the
   service list and the pinned subject header. Ported from
   screens-subjects-booking.jsx (RequiredPreStepScreen /
   RequiredServiceListScreen). Same token rules as item 4 above.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Pre-step cards ---------------------------------------------------- */

.subj-prestep-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

/* The full-size subj-card as a pickable <button>. Selected doubles the border
   (2px cyan) like the design; padding shrinks 1px so the card never shifts. */
.subj-prestep-card {
    width: 100%;
    display: block;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.subj-prestep-card .subj-card__row {
    align-items: center;
    gap: 12px;
}

.subj-prestep-card[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 2px solid var(--rr-cyan);
    padding: 13px;
}

.subj-prestep-card .subj-card__meta {
    font-size: 12.5px;
    margin-top: 3px;
}

/* "Services from $109.00" — the server-quoted floor for this choice. */
.subj-prestep-from {
    display: block;
    font-family: var(--rr-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-cyan-dark);
    margin-top: 5px;
}

.subj-prestep-check {
    font-size: 22px;
    color: var(--rr-cyan-dark);
    flex-shrink: 0;
}

/* The pre-step's flex gap owns spacing; .subj-add's own top margin would
   double it. */
.subj-prestep-list .subj-add {
    margin-top: 0;
}

/* The "one question over a re-quote" note reuses the .subj-privacy shell. */
.subj-prestep-note {
    margin-top: 16px;
}

.subj-prestep-note[hidden] {
    display: none;
}

/* ---- Pinned subject header --------------------------------------------- */

/* Sticks directly under the live sticky chrome stack (--bk2-header-h is kept
   in sync by booking-v2-chrome.js) while the Required catalog is browsed.
   z-index below the booking header (20), above the service cards. */
.subj-pinned {
    position: sticky;
    top: var(--bk2-header-h, 65px);
    z-index: 4;
    background: var(--rr-paper);
    border-bottom: 1px solid var(--rr-line);
    padding: 10px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Author display beats the UA's [hidden] rule — same trap as .subj-sheet. */
.subj-pinned[hidden] {
    display: none;
}

.subj-pinned .subj-photo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.subj-pinned .subj-photo i {
    font-size: 14px;
}

.subj-pinned .subj-photo__swatch {
    width: 14px;
    height: 14px;
}

.subj-pinned__text {
    flex: 1;
    min-width: 0;
}

.subj-pinned__kicker {
    display: block;
    font-family: var(--rr-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rr-slate);
}

.subj-pinned__kicker[hidden] {
    display: none;
}

.subj-pinned__name {
    display: block;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An inline link that changes every price below it holds the 44px floor. */
.subj-pinned__change {
    background: none;
    border: 0;
    padding: 0 2px;
    min-height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-family: var(--rr-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rr-cyan-dark);
    cursor: pointer;
}

.subj-pinned__change:hover,
.subj-pinned__change:focus-visible {
    text-decoration: underline;
}

.subj-pinned__change i {
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   Booking (V090 item 6) — the per-visit condition question, the
   quick-add-inline form, and the guest surface. Ported from
   screens-subjects-booking.jsx (ConditionQuestionScreen /
   SubjectQuickAddScreen). Same token rules as items 4/5 above.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Per-visit condition ----------------------------------------------- */

/* The SAVED block: grey, flat and lock-iconed. It must never look like the
   interactive visit block below it — nothing here is part of today's
   question, and nothing asked below is written back to it. */
.subj-saved {
    background: var(--rr-canvas);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.subj-saved .subj-photo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.subj-saved .subj-photo i {
    font-size: 15px;
}

.subj-saved__body {
    flex: 1;
    min-width: 0;
}

.subj-saved__name {
    display: block;
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-saved__meta {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subj-saved__lock {
    font-size: 13px;
    color: var(--rr-slate);
    flex-shrink: 0;
}

/* "JUST FOR THIS VISIT" — the seam between the record and today. #B45309
   rather than --rr-warm (#E87533, 3.0:1): an 11px label must clear WCAG AA,
   and #B45309 holds 5.0:1 on white / 4.9:1 on --rr-canvas while keeping the
   warm hue (same precedent as booking-flow-v2's warm callout). */
.subj-visit-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 8px;
}

.subj-visit-divider__label {
    font-family: var(--rr-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B45309;
    white-space: nowrap;
    flex-shrink: 0;
}

.subj-visit-divider__rule {
    flex: 1;
    height: 1px;
    background: var(--rr-line);
}

.subj-cond-q {
    margin: 0 0 10px;
    font-family: var(--rr-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-cond-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* The visit block's options: white, interactive, priced. Selection doubles
   the border (1.5px cyan); padding shrinks .5px so the card never shifts. */
.subj-cond-card {
    width: 100%;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.subj-cond-card[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 1.5px solid var(--rr-cyan);
    padding: 12.5px;
}

.subj-cond-card__radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--rr-slate);
    background: #fff;
    box-sizing: border-box;
}

.subj-cond-card[aria-pressed="true"] .subj-cond-card__radio {
    border: 7px solid var(--rr-cyan-dark);
}

.subj-cond-card__body {
    flex: 1;
    min-width: 0;
}

.subj-cond-card__title {
    display: block;
    font-family: var(--rr-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-cond-card__sub {
    display: block;
    font-family: var(--rr-font);
    font-size: 12px;
    color: var(--rr-slate);
    margin-top: 2px;
    line-height: 1.4;
}

/* "+$15.00" in ink; "No extra" in the AA green the price notes already use. */
.subj-cond-card__price {
    font-family: var(--rr-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-ink);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.subj-cond-card__price--none {
    color: #047857;
}

/* "We do not save this to your Silverado. …" */
.subj-cond-note {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 2px;
}

.subj-cond-note i {
    font-size: 13px;
    color: var(--rr-slate);
    margin-top: 2px;
    flex-shrink: 0;
}

.subj-cond-note span {
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

/* The sheet's compact twin of the note. */
.subj-sheet__condition-note {
    margin: 10px 2px 0;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

/* Condition chips stack the level over its surcharge. */
.subj-chip--stack {
    flex-direction: column;
    gap: 1px;
}

/* ---- Quick-add form (the sheet's + the pre-step's) --------------------- */

.bk2-subject-form {
    margin-top: 4px;
}

/* .subj-back was written for <a>; the form's Back is a <button>. */
button.subj-back {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.subj-form-back {
    margin-bottom: 2px;
}

.subj-form-back i {
    font-size: 11px;
}

.subj-form-title {
    margin: 4px 0 0;
    font-family: var(--rr-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-quickadd-sub {
    margin: 5px 0 0;
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

/* "Exact weight, breed, coat and a note … can go on Bella's profile later."
   The argument that the short form is safe to finish. */
.subj-quickadd-later {
    margin: 10px 2px 0;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

.bk2-subject-login-prompt {
    margin-bottom: 14px;
}

/* The guest note: cream, plain words, no wall. */
.subj-guestnote {
    margin-top: 12px;
    background: var(--rr-cream);
    border: 1px solid var(--rr-line);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.subj-guestnote i {
    font-size: 14px;
    color: var(--rr-cyan-dark);
    margin-top: 1px;
    flex-shrink: 0;
}

.subj-guestnote span {
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
    line-height: 1.5;
}

/* The keep-it offer. A real <label> wrapping a real checkbox — the whole row
   is the 44px tap target. */
.subj-keep {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 44px;
    margin-top: 14px;
    padding: 4px 2px;
    cursor: pointer;
}

.subj-keep input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--rr-cyan-dark);
    cursor: pointer;
}

.subj-keep span {
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-ink);
    line-height: 1.5;
}

/* The four priced size tiles — "Large · 50–89 lb · $95.00". */
.subj-quickadd-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.subj-sizetile {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    padding: 11px 12px;
    min-height: 62px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.subj-sizetile[aria-pressed="true"] {
    background: var(--rr-primary-light);
    border: 1.5px solid var(--rr-cyan);
    padding: 10.5px 11.5px;
}

.subj-sizetile__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.subj-sizetile__title {
    font-family: var(--rr-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rr-ink);
}

.subj-sizetile[aria-pressed="true"] .subj-sizetile__title {
    color: var(--rr-cyan-dark);
}

.subj-sizetile__range {
    font-family: var(--rr-font);
    font-size: 11px;
    color: var(--rr-slate);
    white-space: nowrap;
    flex-shrink: 0;
}

.subj-sizetile__price {
    display: block;
    font-family: var(--rr-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rr-ink);
    margin-top: 3px;
    min-height: 15px;
    font-variant-numeric: tabular-nums;
}

.subj-sizetile__from {
    font-weight: 600;
    font-size: 10.5px;
    color: var(--rr-slate);
}

/* ---- After the cart: review, sidebar, and history fragments (item 7) --- */

/* The review/pay per-line row's left column: name over the who-fragment.
   The row itself reuses .bk2-pay-breakdown__row for alignment with the
   money rows around it. */
.subj-payline__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.subj-payline__name {
    font-weight: 600;
}

/* "For Theo · 25 min · Child rate · Normal condition" — the design's review
   sub-line: quiet slate under the name, never a colour of its own. */
.subj-payline__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--rr-slate);
}

.subj-payline__meta i {
    font-size: 11px;
    color: var(--rr-cyan-dark);
    flex-shrink: 0;
}

/* "Three services, two people" inside the breakdown card — the design's
   SubjLabel, with the card already providing the top spacing. */
.subj-paylabel {
    margin: 0 0 8px;
}

/* The section label on a detail-page card (sits tight under the card h2). */
.subj-section-label--card {
    margin: -6px 0 10px;
}

/* "Theo’s job card carries SEN-SKIN" — informational, after the totals. */
.subj-jobcard-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 2px;
    font-family: var(--rr-font);
    font-size: 11.5px;
    color: var(--rr-slate);
}

.subj-jobcard-note > i {
    font-size: 12px;
    color: var(--rr-warm);
    flex-shrink: 0;
}

/* The settled-surface twin of the band's "For …" line (order detail): a
   small kind icon and the snapshot fragment, rendered ONLY when the line
   carries one. Plain slate text — history states a fact, it sells nothing. */
.subj-hist {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 2px;
    font-family: var(--rr-font);
    font-size: 12.5px;
    color: var(--rr-slate);
}

.subj-hist i {
    font-size: 11px;
    color: var(--rr-cyan-dark);
    flex-shrink: 0;
}