@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

/* AW Scout - card styles
   ================================================================
   Design system: OKLCH colours, warm-tinted neutrals, teal accent.

   Theme resolution order:
     No attribute         → follows prefers-color-scheme (system default)
     data-scout-theme="dark"  → forced dark  (set by content/index.js)
     data-scout-theme="light" → forced light (set by content/index.js)

   The dark vars repeat in :root and html[data-scout-theme="dark"]
   intentionally — the attribute selector has higher specificity than
   the media-query :root and needs its own declaration to override it.
   ================================================================ */

/* ================================================================
   Dark variables — base (dark is the primary use context)
   ================================================================ */

:root {
    /* Surfaces */
    --scout-bg:             oklch(13% 0.006 205);
    --scout-surface:        oklch(17% 0.006 205);
    --scout-surface-2:      oklch(22% 0.005 205);

    /* Borders */
    --scout-border:         oklch(28% 0.005 205);
    --scout-border-strong:  oklch(40% 0.005 205);

    /* Text — dark background needs higher lightness to compensate for
       the perceptual "lightness drain" of light text on dark surfaces. */
    --scout-text-1:         oklch(93% 0.004 205);
    --scout-text-2:         oklch(72% 0.005 205);
    --scout-text-3:         oklch(62% 0.004 205);

    /* Accent — blue-indigo, distinct from AW's purple and UKP sentiment colours */
    --scout-accent:         oklch(55% 0.17 265);

    /* Amber — warnings, screencap thumbnails */
    --scout-amber:          oklch(78% 0.17 75);

    /* UKP review sentiment — functionally fixed */
    --scout-positive:       oklch(72% 0.17 145);
    --scout-negative:       oklch(63% 0.19 25);
    --scout-review-neutral: oklch(83% 0.15 85);
    --scout-rate:           oklch(72% 0.17 145);

    /* Service tiles */
    --scout-svc-yes-bg:     oklch(20% 0.05 145);
    --scout-svc-yes-bd:     oklch(34% 0.09 145);
    --scout-svc-no-bg:      oklch(17% 0.03 25);
    --scout-svc-no-bd:      oklch(29% 0.06 25);

    /* Card chrome */
    --scout-card-radius:    8px;
    --scout-card-width:     280px;  /* legacy reference - card now fills the row */
    --scout-photo-col-w:    360px;
    --scout-card-shadow:    0 1px 4px oklch(0% 0 0 / 0.40),
                            0 6px 20px oklch(0% 0 0 / 0.45);
    --scout-card-shadow-hv: 0 2px 8px oklch(0% 0 0 / 0.50),
                            0 12px 32px oklch(0% 0 0 / 0.55);

}

/* ================================================================
   Light — system preference default (pre-JS state)
   ================================================================ */

@media (prefers-color-scheme: light) {
    :root {
        --scout-bg:             oklch(94% 0.004 205);
        --scout-surface:        oklch(99.5% 0.002 205);
        --scout-surface-2:      oklch(92% 0.004 205);
        --scout-border:         oklch(82% 0.006 205);
        --scout-border-strong:  oklch(68% 0.007 205);
        --scout-text-1:         oklch(16% 0.006 205);
        --scout-text-2:         oklch(42% 0.006 205);
        --scout-text-3:         oklch(60% 0.005 205);
        --scout-accent:         oklch(42% 0.18 265);
        --scout-amber:          oklch(60% 0.17 75);
        --scout-positive:       oklch(45% 0.18 145);
        --scout-negative:       oklch(50% 0.19 25);
        --scout-review-neutral: oklch(50% 0.16 85);
        --scout-rate:           oklch(45% 0.18 145);
        --scout-svc-yes-bg:     oklch(93% 0.04 145);
        --scout-svc-yes-bd:     oklch(76% 0.10 145);
        --scout-svc-no-bg:      oklch(95% 0.02 25);
        --scout-svc-no-bd:      oklch(82% 0.06 25);
        --scout-card-shadow:    0 1px 3px oklch(0% 0 0 / 0.08),
                                0 4px 16px oklch(0% 0 0 / 0.10);
        --scout-card-shadow-hv: 0 2px 6px oklch(0% 0 0 / 0.12),
                                0 8px 24px oklch(0% 0 0 / 0.15);
    }
}

/* ================================================================
   Explicit theme overrides — set by content/index.js
   Attribute selector (0,1,1) beats :root (0,1,0) and media-query :root.
   ================================================================ */

html[data-scout-theme="dark"] {
    --scout-bg:             oklch(13% 0.006 205);
    --scout-surface:        oklch(17% 0.006 205);
    --scout-surface-2:      oklch(22% 0.005 205);
    --scout-border:         oklch(28% 0.005 205);
    --scout-border-strong:  oklch(40% 0.005 205);
    --scout-text-1:         oklch(93% 0.004 205);
    --scout-text-2:         oklch(72% 0.005 205);
    --scout-text-3:         oklch(62% 0.004 205);
    --scout-accent:         oklch(55% 0.17 265);
    --scout-amber:          oklch(78% 0.17 75);
    --scout-positive:       oklch(72% 0.17 145);
    --scout-negative:       oklch(63% 0.19 25);
    --scout-review-neutral: oklch(83% 0.15 85);
    --scout-rate:           oklch(72% 0.17 145);
    --scout-svc-yes-bg:     oklch(20% 0.05 145);
    --scout-svc-yes-bd:     oklch(34% 0.09 145);
    --scout-svc-no-bg:      oklch(17% 0.03 25);
    --scout-svc-no-bd:      oklch(29% 0.06 25);
    --scout-card-shadow:    0 1px 4px oklch(0% 0 0 / 0.40),
                            0 6px 20px oklch(0% 0 0 / 0.45);
    --scout-card-shadow-hv: 0 2px 8px oklch(0% 0 0 / 0.50),
                            0 12px 32px oklch(0% 0 0 / 0.55);
}

html[data-scout-theme="light"] {
    --scout-bg:             oklch(94% 0.004 205);
    --scout-surface:        oklch(99.5% 0.002 205);
    --scout-surface-2:      oklch(92% 0.004 205);
    --scout-border:         oklch(82% 0.006 205);
    --scout-border-strong:  oklch(68% 0.007 205);
    --scout-text-1:         oklch(16% 0.006 205);
    --scout-text-2:         oklch(42% 0.006 205);
    --scout-text-3:         oklch(60% 0.005 205);
    --scout-accent:         oklch(42% 0.18 265);
    --scout-amber:          oklch(60% 0.17 75);
    --scout-positive:       oklch(45% 0.18 145);
    --scout-negative:       oklch(50% 0.19 25);
    --scout-review-neutral: oklch(50% 0.16 85);
    --scout-rate:           oklch(45% 0.18 145);
    --scout-svc-yes-bg:     oklch(93% 0.04 145);
    --scout-svc-yes-bd:     oklch(76% 0.10 145);
    --scout-svc-no-bg:      oklch(95% 0.02 25);
    --scout-svc-no-bd:      oklch(82% 0.06 25);
    --scout-card-shadow:    0 1px 3px oklch(0% 0 0 / 0.08),
                            0 4px 16px oklch(0% 0 0 / 0.10);
    --scout-card-shadow-hv: 0 2px 6px oklch(0% 0 0 / 0.12),
                            0 8px 24px oklch(0% 0 0 / 0.15);
}

/* ================================================================
   Results container - replaces the AW results table
   ================================================================ */

.scout-results {
    display:               grid;
    /* 2 columns when ≥1100px available, 1 column on narrower viewports */
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap:                   12px;
    padding:               8px 0;
}

/* On viewports wide enough for 2 columns, reserve that width unconditionally -
   including when there are 0-1 cards (e.g. an empty homepage tab) or cards are
   still trickling in. Without this, AW's own page (an auto-width, margin:auto-
   centered table) reflows and re-centers every time the grid's natural width
   changes - felt as the whole page, tab bar included, visibly jumping side to
   side while switching Scout tabs or while cards progressively load in. */
@media (min-width: 1100px) {
    .scout-results {
        min-width: 1052px; /* 2 * 520px column + 12px gap */
    }
}

/* ================================================================
   Card container
   ================================================================ */

.scout-card {
    display:        flex;
    flex-direction: column;
    width:          100%;
    background:     var(--scout-surface);
    border:         1px solid var(--scout-border);
    border-radius:  var(--scout-card-radius);
    box-shadow:     var(--scout-card-shadow);
    overflow:       hidden;
    vertical-align: top;
    transition:     transform 0.14s ease, box-shadow 0.14s ease;
    color:          var(--scout-text-1);
    /* A homepage tab can hold 150-180+ of these, each with a gallery strip of
       its own images - confirmed live: ~5,600 <img> elements and ~27,000 DOM
       nodes on one Featured tab. AW's own auto table-layout page (472 tables
       on that same load) already needs a full reflow on every width change;
       stacking that many complex flex/grid cards on top is what makes an
       interactive window drag-resize visibly lag behind the cursor - the
       browser can't lay out and paint all of it fast enough to keep up with
       a continuous stream of resize events, even though each individual
       resize's end state is already correct (confirmed live: a single
       instant resize reflows correctly with no code-level delay involved).
       content-visibility skips layout/paint for cards currently off-screen
       entirely, so only the handful actually in view cost anything during a
       drag. contain-intrinsic-height's `auto` keyword makes the browser
       remember each card's own real height once known (they vary card to
       card) and reuse that as its off-screen placeholder, falling back to
       500px (this tab's measured average) only before that's ever happened. */
    content-visibility:       auto;
    contain-intrinsic-height: auto 500px;
}

/* ================================================================
   Two-column top section: photo | info
   ================================================================ */

.scout-card__top {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
}

.scout-card__photo-col {
    flex-shrink: 0;
    width:       var(--scout-photo-col-w);
}

.scout-card__info-col {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    padding:        4px 0;
    overflow-x:     hidden;
    overflow-y:     visible;
}

/* ================================================================
   Bio - in the info column, below services
   ================================================================ */

.scout-card__bio {
    font-size:   12px;
    line-height: 1.5;
    color:       var(--scout-text-2);
    margin:      0;
    padding:     4px 12px 10px;
    max-height:  9em;
    overflow:    hidden;
    mask-image:  linear-gradient(to bottom, black 50%, transparent 92%);
    text-align:  center;
}

.scout-card__bio--empty {
    color:      var(--scout-text-3);
    font-style: italic;
    max-height: none;
    mask-image: none;
}

.scout-card:hover {
    transform:  translateY(-2px);
    box-shadow: var(--scout-card-shadow-hv);
}

.scout-card--restricted {
    opacity: 0.55;
}

/* ================================================================
   Photo area
   ================================================================ */

.scout-card__photo {
    position:   relative;
    width:      100%;
    height:     360px;
    overflow:   hidden;
    background: var(--scout-surface-2);
    flex-shrink: 0;
}

/* Blurred background fill — same image blurred and dimmed to fill
   letterbox/pillarbox gaps when aspect ratio doesn't match card. */
.scout-card__photo-bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center center;
    filter:              blur(14px) brightness(0.40);
    transform:           scale(1.08);
}

.scout-card__photo-link {
    display:  block;
    width:    100%;
    height:   100%;
    position: relative;
}

.scout-card__photo-link:focus-visible {
    outline:        2px solid var(--scout-accent);
    outline-offset: -2px;
}

.scout-card__photo-img {
    width:           100%;
    height:          100%;
    object-fit:      contain;
    object-position: center top;
    display:         block;
}

.scout-card__photo-img[src=""] {
    opacity: 0;
}

.scout-card__restricted-badge {
    position:       absolute;
    top:            8px;
    right:          8px;
    background:     color-mix(in oklch, var(--scout-negative) 16%, transparent);
    color:          var(--scout-negative);
    border:         1px solid color-mix(in oklch, var(--scout-negative) 28%, transparent);
    font-size:      10px;
    font-weight:    600;
    padding:        2px 7px;
    border-radius:  3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ================================================================
   Identity row: flag, nationality, name-link, verified, ratings,
                 available-today chip, notes link
   ================================================================ */

.scout-card__identity {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     12px 12px 6px;
    flex-wrap:   wrap;
}

.scout-card__flag {
    font-size:   18px;
    line-height: 1;
    flex-shrink: 0;
}

/* Name is now an anchor link */
.scout-card__name {
    font-size:       20px;
    font-weight:     700;
    color:           var(--scout-text-1);
    text-decoration: none;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    letter-spacing:  -0.02em;
}

.scout-card__name:hover {
    text-decoration: underline;
    color:           var(--scout-text-1);
}

/* Green "V" verified badge */
.scout-card__verified {
    font-size:      11px;
    font-weight:    700;
    color:          var(--scout-positive);
    background:     color-mix(in oklch, var(--scout-positive) 14%, transparent);
    border:         1px solid color-mix(in oklch, var(--scout-positive) 28%, transparent);
    padding:        1px 5px;
    border-radius:  3px;
    flex-shrink:    0;
    letter-spacing: 0.04em;
}

/* Ratings link — subtle star link */
.scout-card__ratings {
    font-size:       11px;
    font-weight:     500;
    color:           var(--scout-accent);
    text-decoration: none;
    flex-shrink:     0;
    opacity:         0.80;
    transition:      opacity 0.12s;
}

.scout-card__ratings:hover {
    opacity:         1;
    text-decoration: underline;
}

/* Nationality — now merged into descriptor; hidden from identity row */
.scout-card__nationality {
    display: none;
}

/* Descriptor: "British · Straight 25 year old Female" — subordinate to the name */
.scout-card__descriptor {
    font-size:      13px;
    font-weight:    500;
    color:          var(--scout-text-2);
    padding:        0 12px 10px;
    letter-spacing: 0;
    line-height:    1.3;
    text-align:     left;
}

/* Location — right side of meta row 1 */
.scout-card__location {
    font-size:     12px;
    color:         var(--scout-text-2);
    text-align:    right;
    flex:          1;
    min-width:     0;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* "Available today" green chip — right-justified in the identity row */
.scout-card__available {
    font-size:      11px;
    font-weight:    600;
    color:          var(--scout-positive);
    background:     color-mix(in oklch, var(--scout-positive) 14%, transparent);
    border:         1px solid color-mix(in oklch, var(--scout-positive) 28%, transparent);
    padding:        1px 6px;
    border-radius:  3px;
    flex-shrink:    0;
    letter-spacing: 0.02em;
    margin-left:    auto;
}

.scout-card__phone-badge {
    font-size:   14px;
    flex-shrink: 0;
    color:       var(--scout-accent);
}

/* Notes / Remove link (cloned from AW row) */
.scout-card__notes,
a.scout-card__notes {
    font-size:       11px;
    color:           var(--scout-text-3);
    text-decoration: none;
    flex-shrink:     0;
    transition:      color 0.12s;
}

.scout-card__notes:hover,
a.scout-card__notes:hover {
    color:           var(--scout-text-2);
    text-decoration: underline;
}

/* ================================================================
   Meta row: postcode, rate, last seen, member since
   ================================================================ */

.scout-card__meta {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding:        0 12px 14px;
}

.scout-card__meta-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             8px;
}

/* Small muted uppercase label — meta row, contact, UKP section headers */
.scout-card__meta-label {
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--scout-text-3);
    flex-shrink:    0;
}

/* Wrapper pairing a meta-label with its chip */
.scout-card__last-seen-wrap {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

/* Member since — right side of meta row 2 */
.scout-card__member-since-wrap {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

/* Member since plain text */
.scout-card__member-since {
    font-size:  11px;
    color:      var(--scout-text-2);
    flex-shrink: 0;
}

.scout-card__rate {
    font-size:      12px;
    font-weight:    600;
    color:          var(--scout-rate);
    letter-spacing: -0.01em;
    flex-shrink:    0;
}

.scout-card__last-seen {
    font-size:    11px;
    font-weight:  500;
    padding:      2px 6px;
    border-radius: 3px;
    letter-spacing: 0.01em;
}

.scout-card__last-seen--today {
    background: color-mix(in oklch, var(--scout-positive) 14%, transparent);
    color:      var(--scout-positive);
}

.scout-card__last-seen--recent {
    background: color-mix(in oklch, var(--scout-review-neutral) 14%, transparent);
    color:      var(--scout-review-neutral);
}

.scout-card__last-seen--old {
    background: color-mix(in oklch, var(--scout-text-2) 10%, transparent);
    color:      var(--scout-text-2);
}

/* ================================================================
   Contact block - phone, WhatsApp, phone history
   ================================================================ */

.scout-card__contact {
    padding:    0 12px 8px;
}

.scout-card__contact-label {
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--scout-text-3);
    margin-bottom:  4px;
}

.scout-card__contact-none {
    font-size:  12px;
    color:      var(--scout-text-3);
    font-style: italic;
}

.scout-card__contact-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.scout-card__contact-phone {
    font-size:       12px;
    font-weight:     600;
    color:           var(--scout-text-1);
    text-decoration: none;
    letter-spacing:  -0.01em;
}

.scout-card__contact-phone:hover {
    text-decoration: underline;
    color:           var(--scout-accent);
}

.scout-card__contact-wa {
    font-size:       11px;
    font-weight:     500;
    color:           var(--scout-accent);
    text-decoration: none;
    opacity:         0.85;
    transition:      opacity 0.12s;
}

.scout-card__contact-wa:hover {
    opacity: 1;
    text-decoration: underline;
}

.scout-card__contact-history {
    margin-top: 4px;
}

.scout-card__contact-prev {
    display:     block;
    font-size:   11px;
    color:       var(--scout-text-3);
    font-style:  italic;
    line-height: 1.5;
}

.scout-card__contact-cached {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.scout-card__contact-cached-label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.05em;
    color:          var(--scout-text-3);
    text-transform: uppercase;
    border:         1px solid var(--scout-border);
    border-radius:  3px;
    padding:        1px 4px;
    flex-shrink:    0;
}

.scout-contact-history-link {
    display:         block;
    margin-top:      4px;
    font-size:       11px;
    color:           var(--scout-text-2);
    cursor:          pointer;
    text-decoration: underline dotted;
}
.scout-contact-history-link:hover { color: var(--scout-text-1); }

/* Rate change arrow */
.scout-rate-change {
    font-size:   11px;
    font-weight: 600;
    margin-left: 4px;
}
.scout-rate-change--up   { color: #e05252; }
.scout-rate-change--down { color: #4caf82; }

/* Contact history overlay */
.scout-contact-overlay {
    position:   fixed;
    z-index:    2147483647;
    background: var(--scout-surface);
    border:     1px solid var(--scout-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding:    10px 12px;
    min-width:  220px;
    max-width:  300px;
}
.scout-contact-overlay__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       11px;
    font-weight:     600;
    color:           var(--scout-text-2);
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    margin-bottom:   8px;
}
.scout-contact-overlay__dismiss {
    cursor:      pointer;
    color:       var(--scout-text-3);
    font-size:   16px;
    line-height: 1;
    padding:     0 2px;
}
.scout-contact-overlay__dismiss:hover { color: var(--scout-text-1); }
.scout-contact-overlay__item {
    font-size:     12px;
    color:         var(--scout-text-1);
    margin-bottom: 4px;
    line-height:   1.4;
}
.scout-contact-overlay__date {
    color:       var(--scout-text-3);
    margin-left: 6px;
    font-size:   11px;
}

/* ================================================================
   Gallery strip
   ================================================================ */

.scout-card__gallery {
    display:          flex;
    gap:              6px;
    padding:          6px 8px;
    overflow-x:       auto;
    scrollbar-width:  thin;
    scrollbar-color:  var(--scout-border) transparent;
    scroll-snap-type: x mandatory;
    border-top:       1px solid var(--scout-border);
}

.scout-card__gallery:empty  { display: none; }
.scout-card__gallery::-webkit-scrollbar { height: 3px; }
.scout-card__gallery::-webkit-scrollbar-track { background: transparent; }
.scout-card__gallery::-webkit-scrollbar-thumb {
    background:    var(--scout-border);
    border-radius: 2px;
}

.scout-card__thumb {
    width:            72px;
    height:           72px;
    object-fit:       cover;
    object-position:  center top;
    border-radius:    5px;
    cursor:           pointer;
    flex-shrink:      0;
    border:           1px solid transparent;
    transition:       border-color 0.12s, transform 0.12s;
    scroll-snap-align: start;
    position:         relative;
}

.scout-card__thumb:hover {
    border-color: var(--scout-accent);
    transform:    scale(1.05);
    z-index:      1;
}

.scout-card__thumb:focus-visible {
    outline:        2px solid var(--scout-accent);
    outline-offset: 2px;
}

.scout-card__thumb--resolved {
    border-color: var(--scout-positive);
    box-shadow:   0 0 0 1.5px color-mix(in oklch, var(--scout-positive) 55%, transparent);
}

/* Screencap wrapper — carries flex sizing so the img inside can be 100%×100% */
.scout-card__thumb-wrap {
    position:         relative;
    width:            72px;
    height:           72px;
    flex-shrink:      0;
    border-radius:    5px;
    overflow:         hidden;
    scroll-snap-align: start;
    cursor:           pointer;
}

.scout-card__thumb-wrap .scout-card__thumb {
    width:         100%;
    height:        100%;
    border-radius: 0;
    flex-shrink:   unset;
    scroll-snap-align: unset;
}

/* Play icon overlay — sits above the screencap image, pointer-events off so hover fires on the img */
.scout-card__play-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    color:           oklch(100% 0 0 / 0.90);
    text-shadow:     0 1px 5px oklch(0% 0 0 / 0.70);
    background:      oklch(0% 0 0 / 0.22);
    pointer-events:  none;
    transition:      background 0.12s, color 0.12s;
}

.scout-card__thumb-wrap:hover .scout-card__play-overlay {
    background: oklch(0% 0 0 / 0.10);
    color:      oklch(100% 0 0 / 1);
}

/* Thumb type variants — subtle outlines to distinguish source */
.scout-card__thumb-wrap,
.scout-card__thumb--screencap {
    outline: 2px solid color-mix(in oklch, var(--scout-accent) 55%, transparent);
}

.scout-card__thumb--private {
    outline: 2px solid color-mix(in oklch, var(--scout-amber) 50%, transparent);
}

/* ================================================================
   Services row
   ================================================================ */

.scout-card__services {
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
    padding:   0 12px 8px;
}

.scout-card__svc {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          38px;
    border-radius:  5px;
    padding:        4px 2px 3px;
    border:         1px solid transparent;
}

.scout-card__svc--offered {
    background:   var(--scout-svc-yes-bg);
    border-color: var(--scout-svc-yes-bd);
    opacity:      1;
}

.scout-card__svc--missing {
    background:   var(--scout-svc-no-bg);
    border-color: var(--scout-svc-no-bd);
    opacity:      0.55;
    filter:       grayscale(0.6);
}

.scout-card__svc-emoji {
    font-size:   16px;
    line-height: 1;
}

.scout-card__svc-label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.02em;
    margin-top:     2px;
    text-align:     center;
    line-height:    1;
    color:          var(--scout-text-2);
}

/* ================================================================
   UKP block — shared styles applied to both card and profile panel
   ================================================================ */

.scout-card__ukp {
    padding:    8px 12px 10px;
    min-height: 38px;
    margin-top: auto;
}

/* Section header above the UKP counts/timeline */
.scout-card__ukp-label {
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--scout-text-3);
    margin-bottom:  4px;
}

.scout-card__ukp-link,
.scout-pp-ukp-link {
    display: block;
}

.scout-card__ukp-pending,
.scout-pp-loading {
    font-size:  12px;
    color:      var(--scout-text-3);
}

.scout-card__ukp-no-reviews,
.scout-pp-ukp-note {
    font-size:   12px;
    color:       var(--scout-text-3);
    font-style:  italic;
    text-decoration: none;
}

.scout-card__ukp-error,
.scout-pp-ukp-error {
    font-size:   12px;
    color:       var(--scout-text-3);
    font-style:  italic;
    text-decoration: none;
}

/* Counts row — shared between card and panel */
.scout-card__ukp-counts,
.scout-pp-ukp-counts {
    display:     flex;
    align-items: center;
    gap:         5px;
    flex-wrap:   wrap;
}

/* Sentiment badges — consolidated selectors */
.scout-card__ukp-pos,
.scout-pp-pos {
    background:   color-mix(in oklch, var(--scout-positive) 14%, transparent);
    color:        var(--scout-positive);
    font-size:    12px;
    font-weight:  600;
    padding:      2px 6px;
    border-radius: 4px;
}

.scout-card__ukp-neg,
.scout-pp-neg {
    background:   color-mix(in oklch, var(--scout-negative) 14%, transparent);
    color:        var(--scout-negative);
    font-size:    12px;
    font-weight:  600;
    padding:      2px 6px;
    border-radius: 4px;
}

.scout-card__ukp-neu,
.scout-pp-neu {
    background:   color-mix(in oklch, var(--scout-review-neutral) 12%, transparent);
    color:        var(--scout-review-neutral);
    font-size:    12px;
    font-weight:  600;
    padding:      2px 6px;
    border-radius: 4px;
}

/* Numeric rating display — replaces gradient-clip star approach */
.scout-card__rating,
.scout-pp-rating {
    font-size:    12px;
    font-weight:  600;
    color:        var(--scout-accent);
    margin-left:  auto;
    flex-shrink:  0;
    letter-spacing: -0.01em;
}

/* Timeline dots — consolidated selectors */
.scout-card__ukp-timeline,
.scout-pp-timeline {
    display:    flex;
    flex-wrap:  wrap;
    gap:        2px;
    margin-top: 5px;
}

.scout-card__ukp-dot,
.scout-pp-dot {
    display:       inline-block;
    width:         9px;
    height:        9px;
    border-radius: 2px;
    flex-shrink:   0;
}

.scout-card__ukp-dot--sm,
.scout-pp-dot--sm {
    width:  5px;
    height: 9px;
}

.scout-card__ukp-dot--positive,
.scout-pp-dot--positive { background: var(--scout-positive); }

.scout-card__ukp-dot--negative,
.scout-pp-dot--negative { background: var(--scout-negative); }

.scout-card__ukp-dot--neutral,
.scout-pp-dot--neutral  { background: var(--scout-review-neutral); }

/* New-review alert badge */
.scout-ukp-alert {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       2px 7px;
    border-radius: 10px;
    font-size:     11px;
    font-weight:   600;
    background:    color-mix(in oklch, var(--scout-amber) 14%, transparent);
    color:         var(--scout-amber);
    border:        1px solid color-mix(in oklch, var(--scout-amber) 28%, transparent);
    margin-bottom: 4px;
}

.scout-ukp-alert__detail {
    opacity:     0.85;
    font-weight: 400;
}

.scout-ukp-alert__dismiss {
    background:  none;
    border:      none;
    color:       inherit;
    cursor:      pointer;
    padding:     0 0 0 2px;
    font-size:   13px;
    line-height: 1;
    opacity:     0.55;
}
.scout-ukp-alert__dismiss:hover { opacity: 1; }

/* ================================================================
   Action buttons
   ================================================================ */

.scout-card__footer {
    display:     flex;
    align-items: stretch;
    gap:         8px;
    border-top:  1px solid var(--scout-border);
    padding:     8px 10px 10px;
}

.scout-card__actions {
    display: flex;
    gap:     5px;
    flex:    1;
}

.scout-card__action-btn {
    flex:           1;
    padding:        8px 6px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--scout-text-3);
    background:     transparent;
    border:         1px solid var(--scout-border);
    border-radius:  5px;
    text-align:     center;
    transition:     background 0.12s, color 0.12s, border-color 0.12s;
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.scout-card__action-btn:hover {
    background:   color-mix(in oklch, var(--scout-text-1) 6%, transparent);
    border-color: var(--scout-border-strong);
    color:        var(--scout-text-2);
}

.scout-card__action-btn--primary {
    color:        var(--scout-accent);
    border-color: color-mix(in oklch, var(--scout-accent) 35%, transparent);
    background:   color-mix(in oklch, var(--scout-accent) 8%, transparent);
}

.scout-card__action-btn--primary:hover {
    background:   color-mix(in oklch, var(--scout-accent) 15%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 55%, transparent);
    color:        var(--scout-accent);
}

.scout-card__action-btn:focus-visible {
    outline:        2px solid var(--scout-accent);
    outline-offset: 2px;
}

/* Pin button - fixed width, sits at the right end of the actions row */
.scout-card__pin-btn {
    flex:    0 0 auto;
    width:   38px;
    padding: 8px 0;
    opacity: 0.45;
    filter:  grayscale(1);
    transition: opacity 0.15s, filter 0.15s;
}

.scout-card__pin-btn:hover {
    opacity: 0.75;
    filter:  grayscale(0.3);
}

.scout-card__pin-btn--active {
    opacity: 1;
    filter:  grayscale(0) drop-shadow(0 0 4px oklch(55% 0.17 265 / 0.5));
}

.scout-card__pin-btn--active:hover {
    opacity: 1;
    filter:  grayscale(0) drop-shadow(0 0 6px oklch(55% 0.17 265 / 0.7));
}

/* ================================================================
   Lightbox
   ================================================================ */

.scout-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         2147483647;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      oklch(0% 0 0 / 0.90);
    opacity:         0;
    pointer-events:  none;
    cursor:          zoom-out;
    transition:      opacity 0.18s ease;
}

.scout-lightbox--visible {
    opacity:        1;
    pointer-events: auto;
}

.scout-lightbox__img {
    display:    block;
    max-width:  90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    cursor:     default;
}

/* Type badge — shown over image for screencaps (▶ Video clip) and private images (🔒 Private gallery) */
.scout-lightbox__type-badge {
    position:        absolute;
    top:             20px;
    left:            50%;
    transform:       translateX(-50%);
    background:      oklch(0% 0 0 / 0.62);
    color:           oklch(100% 0 0 / 0.92);
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    padding:         5px 14px;
    border-radius:   20px;
    pointer-events:  none;
    white-space:     nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.scout-lightbox__close {
    position:    absolute;
    top:         16px;
    right:       20px;
    background:  none;
    border:      none;
    color:       oklch(100% 0 0 / 0.75);
    font-size:   28px;
    line-height: 1;
    padding:     4px 8px;
    cursor:      pointer;
    transition:  color 0.1s;
}
.scout-lightbox__close:hover { color: oklch(100% 0 0 / 1); }

.scout-lightbox__prev,
.scout-lightbox__next {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    background:  oklch(100% 0 0 / 0.12);
    border:      none;
    color:       oklch(100% 0 0 / 0.80);
    font-size:   36px;
    line-height: 1;
    padding:     12px 16px;
    border-radius: 6px;
    cursor:      pointer;
    transition:  opacity 0.1s, background 0.1s;
}
.scout-lightbox__prev { left:  16px; }
.scout-lightbox__next { right: 16px; }
.scout-lightbox__prev:hover,
.scout-lightbox__next:hover {
    background: oklch(100% 0 0 / 0.22);
    color:      oklch(100% 0 0 / 1);
}

.scout-lightbox__toolbar {
    position:        absolute;
    bottom:          16px;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    align-items:     center;
    gap:             10px;
    background:      oklch(0% 0 0 / 0.50);
    border:          1px solid var(--scout-border);
    border-radius:   24px;
    padding:         5px 14px;
    white-space:     nowrap;
}

.scout-lightbox__play {
    background:  none;
    border:      none;
    color:       oklch(100% 0 0 / 0.80);
    font-size:   16px;
    line-height: 1;
    padding:     0 2px;
    cursor:      pointer;
    transition:  color 0.1s;
    flex-shrink: 0;
}
.scout-lightbox__play:hover { color: oklch(100% 0 0 / 1); }

.scout-lightbox__counter {
    color:      oklch(100% 0 0 / 0.55);
    font-size:  13px;
    min-width:  36px;
    text-align: center;
}

.scout-lightbox__speed {
    display:    flex;
    align-items: center;
    gap:         3px;
}

.scout-lightbox__speed-btn {
    background:     oklch(100% 0 0 / 0.08);
    border:         1px solid oklch(100% 0 0 / 0.16);
    border-radius:  4px;
    color:          oklch(100% 0 0 / 0.50);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.03em;
    padding:        2px 7px;
    cursor:         pointer;
    transition:     background 0.1s, color 0.1s, border-color 0.1s;
}
.scout-lightbox__speed-btn:hover {
    background:   oklch(100% 0 0 / 0.16);
    color:        oklch(100% 0 0 / 0.85);
    border-color: oklch(100% 0 0 / 0.28);
}
.scout-lightbox__speed-btn--active {
    background:   color-mix(in oklch, var(--scout-accent) 30%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 70%, transparent);
    color:        color-mix(in oklch, var(--scout-accent) 85%, white);
}

.scout-lightbox__img {
    transition: filter 240ms ease-out;
}
.scout-lightbox__img--loading {
    filter: blur(8px) brightness(0.7);
}
.scout-lightbox__spinner {
    display:       none;
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         48px;
    height:        48px;
    margin:        -24px 0 0 -24px;
    border:        3px solid oklch(100% 0 0 / 0.20);
    border-top-color: var(--scout-accent);
    border-radius: 50%;
    animation:     scout-lightbox-spin 800ms linear infinite;
    pointer-events: none;
}
.scout-lightbox__spinner--visible {
    display: block;
}
@keyframes scout-lightbox-spin { to { transform: rotate(360deg); } }

.scout-lightbox__timeout-msg {
    position:        absolute;
    bottom:          72px;
    left:            50%;
    transform:       translateX(-50%);
    background:      oklch(0% 0 0 / 0.72);
    color:           oklch(100% 0 0 / 0.90);
    font-size:       12px;
    font-weight:     500;
    line-height:     1.4;
    padding:         7px 18px;
    border-radius:   20px;
    pointer-events:  none;
    max-width:       80vw;
    text-align:      center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ================================================================
   Profile page panel (ViewProfile.asp)
   ================================================================ */

.scout-profile-panel {
    position:       fixed;
    bottom:         16px;
    right:          16px;
    z-index:        2147483646;
    width:          400px;
    max-height:     88vh;
    display:        flex;
    flex-direction: column;
    background:     var(--scout-surface);
    border:         1px solid var(--scout-border-strong);
    border-radius:  var(--scout-card-radius);
    box-shadow:     var(--scout-card-shadow);
    color:          var(--scout-text-1);
    font-size:      12px;
    overflow:       hidden;
}

.scout-pp-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 10px;
    background:      var(--scout-surface-2);
    border-bottom:   1px solid var(--scout-border);
    cursor:          grab;
    user-select:     none;
    border-radius:   var(--scout-card-radius) var(--scout-card-radius) 0 0;
}

.scout-pp-header:active { cursor: grabbing; }

.scout-pp-badge {
    font-size:      10px;
    font-weight:    700;
    color:          var(--scout-accent);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.scout-pp-dismiss {
    font-size:       15px;
    line-height:     1;
    color:           var(--scout-text-3);
    text-decoration: none;
    padding:         0 2px;
    transition:      color 0.12s;
}

.scout-pp-dismiss:hover { color: var(--scout-text-1); }

.scout-pp-dismiss:focus-visible {
    outline:        2px solid var(--scout-accent);
    outline-offset: 2px;
    border-radius:  2px;
}

.scout-pp-header-right {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.scout-profile-panel--collapsed .scout-pp-body,
.scout-profile-panel--collapsed .scout-card__footer { display: none; }
.scout-profile-panel--collapsed .scout-pp-header    { border-bottom: none; }

/* Scrollable content area — flex: 1 fills between header and footer */
.scout-pp-body {
    flex:       1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The UKP block inside the panel body uses the same card UKP classes;
   this padding rule applies when nested inside .scout-pp-body */
.scout-pp-body .scout-card__ukp {
    padding-bottom: 4px;
}



/* ================================================================
   Search / Hotlist / Home — floating filter panel
   ================================================================ */

.scout-filter-panel {
    position:       fixed;
    bottom:         16px;
    right:          16px;
    z-index:        2147483646;
    width:          240px;
    display:        flex;
    flex-direction: column;
    background:     var(--scout-surface);
    border:         1px solid var(--scout-border-strong);
    border-radius:  var(--scout-card-radius);
    box-shadow:     var(--scout-card-shadow);
    color:          var(--scout-text-1);
    font-size:      12px;
    overflow:       hidden;
}

.scout-filter-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 10px;
    background:      var(--scout-surface-2);
    border-bottom:   1px solid var(--scout-border);
    cursor:          grab;
    user-select:     none;
    border-radius:   var(--scout-card-radius) var(--scout-card-radius) 0 0;
}
.scout-filter-panel__header:active { cursor: grabbing; }

.scout-filter-panel__title {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--scout-accent);
}

.scout-filter-panel__header-right {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.scout-filter__badge {
    background:    var(--scout-accent);
    color:         oklch(100% 0 0);
    border-radius: 10px;
    padding:       1px 7px;
    font-size:     10px;
    font-weight:   700;
    line-height:   1.6;
}

.scout-filter__dismiss {
    font-size:   15px;
    line-height: 1;
    color:       var(--scout-text-3);
    cursor:      pointer;
    padding:     0 2px;
    transition:  color 0.12s;
}
.scout-filter__dismiss:hover { color: var(--scout-text-1); }

/* Summary line — only visible when collapsed */
.scout-filter-panel__summary {
    display:       none;
    padding:       5px 10px 7px;
    font-size:     11px;
    color:         var(--scout-text-3);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--scout-border);
}

.scout-filter-panel--collapsed .scout-filter-panel__summary { display: block; }
.scout-filter-panel--collapsed .scout-filter-panel__body    { display: none; }
.scout-filter-panel--collapsed .scout-filter-panel__footer  { display: none; }
.scout-filter-panel--collapsed .scout-filter-panel__header  { border-bottom: none; border-radius: var(--scout-card-radius); cursor: pointer; }
.scout-filter-panel--collapsed .scout-filter-panel__summary { border-radius: 0 0 var(--scout-card-radius) var(--scout-card-radius); }

.scout-filter-panel__body {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        10px;
    max-height:     70vh;
    overflow-y:     auto;
}

.scout-filter__section { display: flex; flex-direction: column; gap: 5px; }

.scout-filter__label {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--scout-text-3);
}

.scout-filter__row {
    display:     flex;
    align-items: center;
    gap:         5px;
}

.scout-filter__input {
    flex:          1;
    background:    var(--scout-bg);
    border:        1px solid var(--scout-border);
    border-radius: 5px;
    padding:       4px 7px;
    font-size:     12px;
    color:         var(--scout-text-1);
    outline:       none;
    min-width:     0;
}
.scout-filter__input:focus { border-color: var(--scout-accent); }
.scout-filter__input--full  { display: block; width: 100%; box-sizing: border-box; flex: none; }
.scout-filter__input--short { flex: 0 0 90px; }
.scout-filter__input--age   { flex: 0 0 48px; text-align: center; }

.scout-filter__input[type="number"]::-webkit-inner-spin-button,
.scout-filter__input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin:             0;
}
.scout-filter__input[type="number"] { -moz-appearance: textfield; }

.scout-filter__label-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.scout-filter__rate-toggle {
    display:        flex;
    align-items:    center;
    gap:            3px;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--scout-text-3);
    cursor:         pointer;
}

.scout-filter__rate30-cb {
    accent-color: var(--scout-accent);
    cursor:       pointer;
    flex:         none;
}

.scout-filter__sep { color: var(--scout-text-3); font-size: 12px; }

.scout-filter-panel .scout-filter__go-btn {
    flex-shrink:   0;
    background:    var(--scout-accent);
    color:         oklch(100% 0 0);
    border:        none;
    border-radius: 5px;
    padding:       4px 9px;
    font-size:     11px;
    font-weight:   600;
    cursor:        pointer;
    line-height:   1.4;
}
.scout-filter-panel .scout-filter__go-btn:hover { opacity: 0.85; }

.scout-filter__chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
}

.scout-filter__chips--scroll {
    max-height:      68px;
    overflow-y:      auto;
    scrollbar-width: thin;
}

.scout-filter__chip {
    background:    var(--scout-bg);
    border:        1px solid var(--scout-border);
    border-radius: 12px;
    padding:       2px 8px;
    font-size:     10px;
    color:         var(--scout-text-3);
    cursor:        pointer;
    user-select:   none;
    transition:    background 0.1s, border-color 0.1s, color 0.1s;
}
.scout-filter__chip:hover { border-color: var(--scout-border-strong); color: var(--scout-text-2); }
.scout-filter__chip--active {
    background:   color-mix(in oklch, var(--scout-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 50%, transparent);
    color:        var(--scout-accent);
}

.scout-filter__segments { display: flex; gap: 4px; }

.scout-filter__segment {
    flex:        1;
    text-align:  center;
    background:  var(--scout-bg);
    border:      1px solid var(--scout-border);
    border-radius: 5px;
    padding:     4px 4px;
    font-size:   10px;
    color:       var(--scout-text-3);
    cursor:      pointer;
    user-select: none;
    transition:  background 0.1s, border-color 0.1s, color 0.1s;
}
.scout-filter__segment:hover { border-color: var(--scout-border-strong); color: var(--scout-text-2); }
.scout-filter__segment--active {
    background:   color-mix(in oklch, var(--scout-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 50%, transparent);
    color:        var(--scout-accent);
}

/* Sort buttons — same visual language as segments but slightly wider */
.scout-filter__sort-btns { display: flex; flex-wrap: wrap; gap: 4px; }

.scout-filter__sort-btn {
    flex:          0 0 auto;
    text-align:    center;
    background:    var(--scout-bg);
    border:        1px solid var(--scout-border);
    border-radius: 5px;
    padding:       4px 7px;
    font-size:     10px;
    color:         var(--scout-text-3);
    cursor:        pointer;
    user-select:   none;
    transition:    background 0.1s, border-color 0.1s, color 0.1s;
    white-space:   nowrap;
}
.scout-filter__sort-btn:hover { border-color: var(--scout-border-strong); color: var(--scout-text-2); }
.scout-filter__sort-btn--active {
    background:   color-mix(in oklch, var(--scout-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 50%, transparent);
    color:        var(--scout-accent);
}

/* 1h / 30m rate-type sub-toggle shown when Price sort is active */
.scout-filter__sort-rate-toggle {
    display:    flex;
    gap:        4px;
    margin-top: 5px;
}
.scout-filter__sort-rate-btn {
    flex:          0 0 auto;
    background:    var(--scout-bg);
    border:        1px solid var(--scout-border);
    border-radius: 5px;
    padding:       3px 8px;
    font-size:     10px;
    color:         var(--scout-text-3);
    cursor:        pointer;
    user-select:   none;
    transition:    background 0.1s, border-color 0.1s, color 0.1s;
}
.scout-filter__sort-rate-btn:hover { border-color: var(--scout-border-strong); color: var(--scout-text-2); }
.scout-filter__sort-rate-btn--active {
    background:   color-mix(in oklch, var(--scout-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 50%, transparent);
    color:        var(--scout-accent);
}

.scout-filter-panel__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         7px 10px;
    border-top:      1px solid var(--scout-border);
}

.scout-filter__clear-link {
    font-size:  11px;
    color:      var(--scout-text-3);
    cursor:     pointer;
    transition: color 0.12s;
}
.scout-filter__clear-link:hover { color: var(--scout-text-1); }

/* Virtual pagination — hidden-by-page cards. !important so it wins over filter's
   inline style.display = '' (which clears inline, allowing this class to take effect). */
.scout-card--page-hidden { display: none !important; }

/* ================================================================
   Pagination bar — sits below the Scout results grid
   ================================================================ */

.scout-pagination-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         14px 0 20px;
}

.scout-pagination-bar__btn {
    flex-shrink:    0;
    background:     var(--scout-surface);
    border:         1px solid var(--scout-border);
    border-radius:  6px;
    color:          var(--scout-text-2);
    cursor:         pointer;
    font-family:    inherit;
    font-size:      12px;
    font-weight:    500;
    padding:        5px 12px;
    transition:     background 0.1s, border-color 0.1s, color 0.1s;
}
.scout-pagination-bar__btn:hover:not(:disabled) {
    background:    var(--scout-surface-2);
    border-color:  var(--scout-border-strong);
    color:         var(--scout-text-1);
}
.scout-pagination-bar__btn:disabled {
    opacity: 0.35;
    cursor:  default;
}

.scout-pagination-bar__info {
    font-size:   12px;
    color:       var(--scout-text-2);
    white-space: nowrap;
}

.scout-pagination-bar__total {
    color:     var(--scout-text-3);
    font-size: 11px;
}

.scout-filter__done-btn {
    background:    var(--scout-surface-2);
    border:        1px solid var(--scout-border);
    border-radius: 5px;
    padding:       3px 10px;
    font-size:     11px;
    color:         var(--scout-text-2);
    cursor:        pointer;
    transition:    background 0.1s;
}
.scout-filter__done-btn:hover { background: var(--scout-border); }

/* Dim cards whose data-dependent filter data hasn't loaded yet */
.scout-card--filter-pending {
    opacity:        0.35;
    pointer-events: none;
    transition:     opacity 200ms ease;
}


/* ================================================================
   Profile page gallery panel
   ================================================================ */

.scout-gallery-panel {
    background:   var(--scout-surface);
    border-top:   1px solid var(--scout-border);
    padding:      20px 24px 28px;
    width:        100%;
    position:     relative;
    z-index:      1;
}

.scout-gallery-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin-bottom:   14px;
}

.scout-gallery-panel__title {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--scout-text-2);
}

.scout-gallery-panel__count {
    font-size:  12px;
    color:      var(--scout-text-2);
    opacity:    0.6;
}

.scout-gallery-panel__size-toggle {
    display: flex;
    gap:     4px;
}

.scout-gallery-panel__size-btn {
    padding:       3px 9px;
    background:    var(--scout-surface-2);
    border:        1px solid var(--scout-border);
    border-radius: 4px;
    color:         var(--scout-text-2);
    font-size:     11px;
    font-weight:   500;
    cursor:        pointer;
    transition:    background 0.1s, color 0.1s, border-color 0.1s;
}

.scout-gallery-panel__size-btn:hover {
    background: color-mix(in oklch, var(--scout-border) 60%, transparent);
    color:      var(--scout-text-1);
}

.scout-gallery-panel__size-btn--active {
    background:   color-mix(in oklch, var(--scout-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 50%, transparent);
    color:        var(--scout-accent);
}

.scout-gallery-panel__size-btn:focus-visible {
    outline:        2px solid var(--scout-accent);
    outline-offset: 2px;
}

.scout-gallery-panel__grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

.scout-gallery-panel__status {
    font-size:  11px;
    color:      var(--scout-text-2);
    margin-top: 10px;
    opacity:    0.7;
}

/* Individual gallery thumbs */
.scout-gallery-thumb {
    width:       var(--gallery-thumb-size, 120px);
    height:      var(--gallery-thumb-size, 120px);
    object-fit:  cover;
    border-radius: 5px;
    cursor:      pointer;
    display:     block;
    border:      2px solid transparent;
    flex-shrink: 0;
    background:  var(--scout-surface-2);
    transition:  transform 0.12s, border-color 0.15s;
}

.scout-gallery-thumb:hover {
    transform:    scale(1.04);
    border-color: color-mix(in oklch, var(--scout-accent) 55%, transparent);
}

.scout-gallery-thumb--resolved {
    border-color: color-mix(in oklch, var(--scout-accent) 55%, transparent);
}

/* Screencap wrapper (mirrors .scout-card__thumb-wrap) */
.scout-gallery-wrap {
    position:     relative;
    flex-shrink:  0;
    border-radius: 5px;
    overflow:     hidden;
    cursor:       pointer;
}

.scout-gallery-wrap .scout-gallery-thumb {
    display:      block;
    border-radius: 0;
}

.scout-gallery-play {
    position:    absolute;
    inset:       0;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   28px;
    color:       oklch(100% 0 0 / 0.90);
    text-shadow: 0 1px 5px oklch(0% 0 0 / 0.70);
    background:  oklch(0% 0 0 / 0.22);
    pointer-events: none;
    transition:  background 0.12s, color 0.12s;
}

.scout-gallery-wrap:hover .scout-gallery-play {
    background: oklch(0% 0 0 / 0.10);
    color:      oklch(100% 0 0 / 1);
}

/* ================================================================
   Reduced motion — disable all transitions and animations
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .scout-card,
    .scout-card__thumb,
    .scout-card__play-overlay,
    .scout-gallery-thumb,
    .scout-gallery-play,
    .scout-lightbox,
    .scout-lightbox__img,
    .scout-lightbox__speed-btn,
    .scout-lightbox__prev,
    .scout-lightbox__next,
    .scout-lightbox__play,
    .scout-lightbox__close {
        transition: none;
    }

    .scout-lightbox__spinner {
        animation: none;
    }

    .scout-card:hover {
        transform: none;
    }

    .scout-card__thumb:hover,
    .scout-gallery-thumb:hover {
        transform: none;
    }
}

/* ================================================================
   Harness grid layout (tests/harness.html only — not injected)
   ================================================================ */

.scout-harness {
    display:     flex;
    flex-wrap:   wrap;
    gap:         20px;
    padding:     32px;
    background:  #e8e8e8;
    min-height:  100vh;
    align-items: flex-start;
}

/* ------------------------------------------------------------------ */
/* Homepage tab bar (HomeIE.asp) - replaces AW's native tab bar         */
/* ------------------------------------------------------------------ */

.scout-home-tabs {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    padding:       10px 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--scout-border);
    box-sizing:    border-box;
}

/* Reserve the 2-column minimum width directly on every homepage tab's own
   container - not just the .scout-results grid inside it - so an empty tab
   (0 cards, e.g. Local Escorts, out of scope for Scout's per-tab handling)
   also holds AW's own auto-width page at the same width as a populated one,
   keeping the tab bar (which shares that same auto-sizing ancestor) from
   drifting between tabs.
   A tried-and-reverted "full-bleed" attempt (position:relative + width:100vw
   on .scout-home-tabs itself) made this worse, not better: position:relative
   elements still contribute their full box to their parent's width
   calculation, so the ancestor table grew to fit a 100vw-wide child on top
   of everything else - confirmed live, 462px of real horizontal overflow on
   a 1600px viewport. Reserving space on content that was already part of
   normal flow sidesteps that entirely. */
@media (min-width: 1100px) {
    [id^="tbl"][id$="Content"] {
        min-width: 1052px;
    }
}

.scout-home-tabs__btn {
    appearance:     none;
    background:     var(--scout-surface);
    border:         1px solid var(--scout-border);
    border-radius:  8px;
    padding:        7px 14px;
    font-size:      13px;
    font-weight:    600;
    color:          var(--scout-text-2);
    cursor:         pointer;
    transition:     background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.scout-home-tabs__btn:hover {
    color:        var(--scout-text-1);
    border-color: var(--scout-border-strong);
    transform:    translateY(-1px);
}
.scout-home-tabs__btn--active {
    background:   color-mix(in oklch, var(--scout-accent) 14%, transparent);
    border-color: color-mix(in oklch, var(--scout-accent) 55%, transparent);
    color:        var(--scout-accent);
}

/* Escort of the Day (HomeIE.asp) - a single standalone Scout card, not part
   of a .scout-results grid, so it needs its own width constraint rather than
   growing unbounded. This widget's own AW table cell is itself width:auto,
   shrink-to-fit on its content, so any percentage width here (50%, or a
   repeated minmax(520px,1fr) grid-template-columns - both tried first)
   resolves against an indefinite containing block: the browser can't size
   the cell from a percentage of itself, so it falls back to sizing the cell
   from the card's own preferred content width instead - the exact "2040px,
   inflating the whole page" blowup the original max-width:520px was already
   guarding against, just reintroduced via a different property. Only an
   absolute px value breaks that loop, so home-tabs.js measures
   .scout-results' actual rendered column width once it exists and sets it
   here directly (max-width, not width - see setEotdWidth in home-tabs.js). */
.scout-eotd-wrap {
    max-width:     520px; /* fallback floor until home-tabs.js measures the real column width */
    margin-bottom: 12px;
}

.scout-eotd-title {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--scout-accent);
    margin-bottom:  8px;
}

/* Inner AW sub-category tabs (Female/Couple MF/Couple FF/Male/Trans on
   Featured, toggled natively via sGT(N)) - a second, nested row beneath
   .scout-home-tabs, so styled a size down to read as a sub-level rather than
   a sibling of the outer category tabs. */
.scout-home-subtabs {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    padding:       10px 4px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--scout-border);
    box-sizing:    border-box;
}

.scout-home-tabs__btn--sub {
    padding:   5px 12px;
    font-size: 12px;
}