/* ============================================================
   card14_c1.css — the FINALS card dress (B Crisp, locked 8/11)
   Namespace: .cr14  (renderer: card_renderer_r14.js)
   Palette: orange #e99821 (action, ink #b3720f) · navy #14273c ·
   blue box #dbe8f5/#a7c6e6/#1d4a7c · green #2c7a3f (matched tags) ·
   greys #eaeef3/#e4e9ef/#d4dbe4 · ink #1b2a3a/#5b6d7f
   Cards LOCKED LIGHT — explicit hex everywhere, no theme vars.
   ============================================================ */

.card.cr14 {
    color: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.card.cr14 .card-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 11px 11px 12px;
}
/* chat/invite context: navy border marks the card as an object in the thread */
.card.cr14.cr14-chatdress { border: 1.5px solid #14273c; }

/* ---- 1 · two-chip match row + tag expand ---- */
.cr14-chips {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.cr14-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 11px;
    background: rgba(20, 39, 60, .72);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}
.cr14-chip-left { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr14-chip-all { border-color: #e9b421; color: #ffe9b0; }
.cr14-tagx {
    background: rgba(20, 39, 60, .46);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    padding: 8px 9px;
}
.cr14-tagx-hdr {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}
.cr14-tagx .cr14-hdr-us, .cr14-tagx .cr14-tagx-us { display: none; }
.cr14-tagx.grp .cr14-hdr-me, .cr14-tagx.grp .cr14-tagx-me { display: none; }
.cr14-tagx.grp .cr14-hdr-us { display: block; }
.cr14-tagx.grp .cr14-tagx-us { display: flex; }
.cr14-tagx-me, .cr14-tagx-us { display: flex; flex-wrap: wrap; gap: 5px; }
.cr14-tagx .hash-tag { margin: 0; }
.cr14-bandtag { background: #7b5bb5 !important; color: #fff !important; }

/* ---- 2 · navy header band ---- */
.cr14-head {
    background: rgba(20, 39, 60, .92);
    border-radius: 11px;
    padding: 8px 9px 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    width: 100%;
    box-sizing: border-box;
}
.cr14-tcap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    background: rgba(245, 247, 250, .96);
    border-radius: 8px;
    padding: 5px 9px 5px 6px;
}
.cr14-tcap .cr-disc { width: 22px !important; height: 22px !important; font-size: 12px !important; }
.cr14-title {
    font-weight: 750;
    font-size: 15.5px;
    line-height: 1.2;
    color: #1b2a3a;
    min-width: 0;
}
.cr14-idrow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #eef3f8;
    padding: 6px 2px 0;
}
.cr14-idrow.cr14-ev { color: #ffd08a; font-weight: 700; }
.cr14-idrow.cr14-cat { font-weight: 700; color: #fff; }
.cr14-dim { color: #c7d3df; }
.cr14-idrow .explore-card-category { padding: 0; margin: 0; font-size: 12.5px; }

/* ---- 3 · action row ---- */
.cr14-act {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 2px 0;
}
/* Directions = orange action (restyles the shared actionItem) */
.cr14-act .action-item.cr14-dir {
    flex: 1.1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    background: #e99821;
    color: #3a2600;
    border: 1px solid #b3720f;
    border-radius: 9px;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    padding: 0 6px;
    margin: 0;
    white-space: nowrap;
}
.cr14-act .action-item.cr14-dir * { color: #3a2600 !important; font-size: 12px; }
.cr14-act .action-item.cr14-dir img, .cr14-act .action-item.cr14-dir .icon { width: 14px; height: 14px; }
/* Open + Save = blue utility boxes (explicit hex — theme-proof) */
.cr14-open {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    background: #dbe8f5 !important;
    color: #1d4a7c !important;
    border: 1px solid #a7c6e6;
    border-radius: 9px;
    font-weight: 750;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    white-space: nowrap;
}
.cr14-open svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }
select.classification-select.cr14-save {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    background: #dbe8f5 !important;
    color: #1d4a7c !important;
    border: 1px solid #a7c6e6 !important;
    border-radius: 9px !important;
    font-weight: 750;
    font-size: 12px !important;
    padding: 0 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    text-align-last: center;
}
.cr14-plus { flex: 0 0 auto; position: relative; }
/* the house ＋ (page_m77 makes .icon-frame a 46px orange circle) — size
   it to the 34px action-row spec inside cr14 */
.cr14-plus .action-item.add .icon-frame {
    width: 34px !important;
    height: 34px !important;
}
.cr14-plus .action-item.add .icon { width: 18px !important; height: 18px !important; }

/* ---- 4 · boxless rating row ---- */
.cr14-raterow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 2px;
    font-size: 12.5px;
}
.cr14-stars { font-weight: 700; color: #fff; white-space: nowrap; }
.cr14-ct { color: #c7d3df; font-weight: 500; }
.cr14-price { color: #8fe0a5; font-weight: 700; }
.cr14-ratein {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #c7d3df;
    white-space: nowrap;
}

/* ---- 5 · folder tabs + panels ---- */
.cr14-tabwrap { width: 100%; }
.cr14-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 7px;
    background: rgba(228, 233, 239, .95);
    border-radius: 10px 10px 0 0;
    padding: 7px 8px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.cr14-tab {
    flex: 1;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    padding: 7px 2px;
    border-radius: 9px 9px 0 0;
    cursor: pointer;
    background: #5b6d7f;
}
.cr14-tab.on { background: #14273c; box-shadow: inset 0 -2px 0 #e99821; }
.cr14-panel {
    display: none;
    background: rgba(228, 233, 239, .95);
    border-radius: 0 0 10px 10px;
    padding: 9px 10px;
    font-size: 12px;
    color: #33465a;
    line-height: 1.5;
}
.cr14-panel.on { display: block; }
.cr14-toppick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    background: #f5f7fa;
    color: #33465a;
    border: 1px solid #c8d1db;
    padding: 2px 8px;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    flex: 0 0 auto;
    white-space: nowrap;
}
.cr14-why {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    min-width: 0;
}
.cr14-whytxt {
    font-style: italic;
    font-weight: 700;
    color: #b3720f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cr14-ovrow { display: flex; align-items: baseline; gap: 8px; }
.cr14-ov {
    flex: 1;
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cr14-ov.x { white-space: normal; overflow: visible; }
.cr14-ov a { color: #245a94; }
.cr14-more { flex: 0 0 auto; color: #b3720f; font-weight: 700; cursor: pointer; white-space: nowrap; font-size: 12px; }
.cr14-dimtxt { color: #7c8b99; font-style: italic; }
.cr14-kv { display: flex; gap: 8px; padding: 2px 0; }
.cr14-k { color: #5b6d7f; width: 64px; flex: 0 0 auto; }
.cr14-link { color: #245a94; font-weight: 600; text-decoration: none; }
.hours-estimated-prefix { color: #7c8b99; font-style: italic; font-weight: 600; }

/* business-status badge rides above the navy band */
.card.cr14 .business-status-badge { align-self: flex-start; }

/* ---- r14 field fixes (probe round 1) ---- */
/* DUAL-COLUMN feed preserved (Greg 8/11): the card takes whatever width
   the results grid gives it (2-up on Search) and adapts below via
   container query — never forces the column count. */
.card.cr14 {
    box-sizing: border-box;
    container-type: inline-size;
}
/* Rate widget: compact stars that fit the boxless row */
.cr14-ratein .rating { display: flex; gap: 2px; }
.cr14-ratein .rating-star { width: 17px; height: 17px; }
.cr14-ratein .rating-star .icon { width: 15px; height: 15px; }
/* ＋ house circle sized to the action-row spec (out-specify page_m77) */
.cr14-act .cr14-plus .action-item.add .icon-frame,
.cr14-act .cardplus-holder .action-item.add .icon-frame {
    width: 34px !important;
    height: 34px !important;
}
.cr14-act .cr14-plus .action-item.add .icon,
.cr14-act .cardplus-holder .action-item.add .icon {
    width: 18px !important;
    height: 18px !important;
}
/* the cuisine line keeps its house class for probes/hooks — neutralize
   any legacy margins inside the navy band */
.cr14-head .explore-card-category { margin: 0; padding: 6px 2px 0; font-size: 12.5px; width: auto; }

/* Greg 8/11: NO text shadows on the new card — kill ours AND the legacy
   .card inheritance (the old dress shadowed everything for photo
   legibility; the scrim gradient does that job now) */
.card.cr14, .card.cr14 * { text-shadow: none !important; }

/* narrow card (dual-column Search, ~180-260px): same anatomy, tighter
   dress — rows wrap instead of truncating, type steps down whole-word */
@container (max-width: 270px) {
    .cr14-title { font-size: 13.5px; }
    /* ONE ROW ALWAYS (Greg 8/11): labels step down whole-word, row
       never breaks — Directions/Open go icon-only, Save stays "Save" */
    .cr14-act .action-item.cr14-dir .text { display: none; }
    .cr14-act .action-item.cr14-dir { flex: 0 0 auto; width: 38px; padding: 0; }
    .cr14-open .cr14-lbl { display: none; }
    .cr14-open { flex: 0 0 auto; width: 38px; padding: 0; }
    select.classification-select.cr14-save { flex: 1 1 auto; }
    .cr14-stars, .cr14-stars * { font-size: 11.5px !important; }
    .cr14-ratein .rating-star { width: 15px; height: 15px; }
    .cr14-ratein .rating-star .icon { width: 13px; height: 13px; }
    .cr14-tab { font-size: 10.5px; padding: 6px 1px; }
    .cr14-idrow { font-size: 11.5px; }
    .cr14-chips { flex-wrap: wrap; }
    .cr14-chip-left { margin-right: 0; }
}
/* the row itself NEVER wraps, any width, any legacy rule */
.cr14-act { flex-wrap: nowrap !important; }
/* narrow polish: Directions label never clips; category keeps mockup
   title-case (legacy CSS uppercased it) */
@container (max-width: 270px) {
    .cr14-act .action-item.cr14-dir * { font-size: 11px; }
}
.cr14-head .explore-card-category,
.cr14-idrow.cr14-cat { text-transform: none; letter-spacing: normal; }

/* ---- Greg field round 2 (8/11) ---- */
/* (d) taste chip = near-black frost like the mockup, not navy-blue */
.cr14-chip {
    background: rgba(24, 30, 38, .78) !important;
    border-color: rgba(255, 255, 255, .4);
}
.cr14-chip-all { border-color: #e9b421 !important; }
/* (b) tab block runs edge-to-edge of the card for max copy width,
   and panel copy pins to the mockup size (beats the global * font clamp) */
.card.cr14 .cr14-tabwrap {
    margin-left: -11px;
    margin-right: -11px;
    width: auto;
}
.card.cr14 .cr14-tabs { border-radius: 0; padding-left: 11px; padding-right: 11px; }
.card.cr14 .cr14-panel { border-radius: 0; padding-left: 11px; padding-right: 11px; }
.card.cr14 .card-section > .cr14-tabwrap:last-child { margin-bottom: -12px; }
.card.cr14 .card-section > .cr14-tabwrap:last-child .cr14-panel { padding-bottom: 14px; }
.cr14-panel, .cr14-panel .cr14-ov, .cr14-panel .cr14-kv, .cr14-ovrow {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}
.cr14-more { font-size: 12px !important; }
.cr14-whytxt { font-size: 12.5px !important; }
/* Save select must never crush below its label */
select.classification-select.cr14-save { min-width: 60px; }
@container (max-width: 270px) {
    select.classification-select.cr14-save { min-width: 58px; font-size: 11.5px !important; }
}
/* narrow row precise fit: 32+32+(flex≥52)+32 + 3×4 gaps = fits 161px */
@container (max-width: 270px) {
    .cr14-act { gap: 4px; }
    .cr14-act .action-item.cr14-dir { width: 32px; height: 30px; }
    .cr14-open { width: 32px; height: 30px; }
    select.classification-select.cr14-save { min-width: 52px; height: 30px; font-size: 11px !important; padding: 0 4px; }
    .cr14-act .cr14-plus .action-item.add .icon-frame,
    .cr14-act .cardplus-holder .action-item.add .icon-frame { width: 30px !important; height: 30px !important; }
    .cr14-act .cr14-plus .action-item.add .icon,
    .cr14-act .cardplus-holder .action-item.add .icon { width: 16px !important; height: 16px !important; }
}

/* ---- Greg field round 3 (8/11): pin ALL type to mockup scale ----
   The global * font clamp inflates card copy at feed width — every
   cr14 size is now explicit + !important so proportions match the
   finals everywhere. */
.cr14-title { font-size: 15.5px !important; }
.cr14-idrow, .cr14-idrow * { font-size: 12.5px !important; }
.cr14-idrow.cr14-ev { font-size: 12.5px !important; }
.cr14-chip { font-size: 11px !important; }
.cr14-stars, .cr14-stars *, .cr14-raterow { font-size: 12.5px !important; }
.cr14-ratein, .cr14-ratein * { font-size: 11.5px !important; }
.cr14-tab { font-size: 11.5px !important; }
.cr14-tagx, .cr14-tagx * { font-size: 11px !important; }
@container (max-width: 270px) {
    .cr14-title { font-size: 13.5px !important; }
    .cr14-idrow, .cr14-idrow * { font-size: 11.5px !important; }
    .cr14-tab { font-size: 10.5px !important; }
}

/* ---- Save = the bookmark SYMBOL painted into the select; all four
   action buttons equal-size icons that fill the row (bigger) ---- */
@container (max-width: 330px) {
    .cr14-act .action-item.cr14-dir,
    .cr14-open,
    select.classification-select.cr14-save {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
    }
    .cr14-act .action-item.cr14-dir .text { display: none; }
    .cr14-open .cr14-lbl { display: none; }
    select.classification-select.cr14-save {
        color: transparent !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231d4a7c' d='M7 4h10a1 1 0 0 1 1 1v15l-6-4.2L6 20V5a1 1 0 0 1 1-1z'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 17px 17px !important;
    }
    select.classification-select.cr14-save option { color: #1b2a3a; }
    .cr14-act .cr14-plus .action-item.add .icon-frame,
    .cr14-act .cardplus-holder .action-item.add .icon-frame {
        width: 36px !important;
        height: 36px !important;
    }
}


/* ---- Greg field round 4 (8/11) ---- */
/* (b) rating + Rate = ONE row always: rating left, stars right */
.cr14-raterow { flex-wrap: nowrap !important; }
.cr14-stars { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr14-ratein { margin-left: auto !important; flex: 0 0 auto; }
/* (c) four action buttons spaced equally, ＋ can never overlap Save */
.cr14-act { justify-content: space-between; }
.cr14-act > * { margin: 0 !important; }
.cr14-plus, .cr14-act .cardplus-holder {
    flex: 0 0 38px !important;
    width: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.cr14-plus .action-item.add { margin: 0 !important; position: static !important; }
/* (d) Details copy never clips at the card edge — breathing room + real ellipsis */
.cr14-panel { box-sizing: border-box; }
.cr14-ovrow { min-width: 0; padding-right: 2px; }
.cr14-ov {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cr14-ov.x { white-space: normal !important; overflow: visible !important; }
.cr14-whytxt { padding-right: 2px; }
/* Open label: same 12px as its siblings (clamp-proof) */
.cr14-open, .cr14-open * { font-size: 12px !important; }
.cr14-act .action-item.cr14-dir, .cr14-act .action-item.cr14-dir .text { font-size: 12px !important; }

/* coplanner starter strip — the always-present invite door (Greg 8/11) */
.cr14-coplan {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    background: rgba(20, 39, 60, .46);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.cr14-coplan-txt { font-size: 12px !important; font-weight: 700; color: #eef3f8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr14-coplan-btn {
    margin-left: auto;
    flex: 0 0 auto;
    background: #e99821;
    color: #fff;
    border-radius: 10px;
    padding: 4px 11px;
    font-weight: 800;
    font-size: 11.5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* narrow column: whole-word step-down — 👥 + Invite only, never "Pl…" */
@container (max-width: 270px) {
    .cr14-coplan-words { display: none; }
    .cr14-coplan-txt { overflow: visible; }
}
/* the global div col-flex trap was stacking .cr14-ovrow vertically —
   the nowrap copy then escaped the panel. Armor it like .cr14-why. */
.cr14-ovrow {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}
.cr14-ov { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100%; }
.cr14-kv { display: flex !important; flex-direction: row !important; min-width: 0; }
.cr14-kv > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr14-panel { overflow: hidden; }
/* EXPANDED read-more: the toggle drops BELOW and the copy takes the FULL
   panel width — collapsed keeps the inline one-liner (Greg 8/11: the
   narrow column was wrapping expanded copy one word per line). */
.cr14-ovrow:has(.cr14-ov.x) { flex-wrap: wrap !important; }
.cr14-ov.x { flex: 1 1 100% !important; width: 100%; }
.cr14-ovrow:has(.cr14-ov.x) .cr14-more { margin-left: auto; padding-top: 3px; }

/* ============ 📱 PHONE = ONE COLUMN (Greg 8/11 "we can try 1 column") ============
   ≤520px CSS viewport: each card takes the full feed width (~370px — the
   exact width the finals were designed at). The container query then
   auto-restores full labels + roomy rows. Desktop/tablet keep the 2-up
   grid untouched. Touch targets grow to 42px. */
@media (max-width: 520px) {
    .card.cr14 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 0 12px 0 !important;
    }
    .card.cr14 .cr14-act .action-item.cr14-dir,
    .card.cr14 .cr14-open,
    .card.cr14 select.classification-select.cr14-save { height: 42px !important; }
    .card.cr14 .cr14-act .cr14-plus .action-item.add .icon-frame,
    .card.cr14 .cr14-act .cardplus-holder .action-item.add .icon-frame {
        width: 42px !important;
        height: 42px !important;
    }
    .card.cr14 .cr14-title { font-size: 16px !important; }
    .card.cr14 .cr14-coplan { padding: 9px 11px; }
    .card.cr14 .cr14-coplan-btn { padding: 7px 14px; font-size: 12.5px !important; }
}

/* ============ 📍 S PIN (FINALS, Greg-blessed) — cr14s ============ */
.pin-popup-s.cr14s {
    width: 256px !important;
    max-width: 256px !important;
    background: #f5f7fa;
    color: #1b2a3a;
    font-family: inherit;
    text-shadow: none !important;
}
.cr14s * { text-shadow: none !important; }
.cr14s .cr14s-chips { display: flex !important; flex-direction: row !important; gap: 5px; align-items: center; }
.cr14s-chip {
    font-size: 10.5px !important;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 11px;
    background: #14273c;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.cr14s-chip:first-child { margin-right: auto; }
.cr14s-chip-all { border: 1px solid #e9b421; color: #ffe9b0; }
.cr14s-tagx { margin-top: 6px; }
.cr14s-tagx .hash-tag { font-size: 10px !important; padding: 1px 7px; margin: 1px; }
.cr14s-tcap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 7px;
    background: #eaeef3;
    border-radius: 8px;
    padding: 4px 8px 4px 5px;
    margin-top: 7px;
}
.cr14s-tcap .cr-disc { width: 22px !important; height: 22px !important; font-size: 11.5px !important; }
.cr14s-title { font-weight: 800; font-size: 13.5px !important; line-height: 1.2; color: #1b2a3a; min-width: 0; }
.cr14s-ev { color: #b3720f; font-weight: 800; font-size: 11.5px !important; margin-top: 6px; }
.cr14s-cat {
    font-size: 11.5px !important;
    color: #5b6d7f;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr14s-cat b { color: #1b2a3a; }
.cr14s-rate { display: flex !important; flex-direction: row !important; align-items: center; gap: 7px; margin-top: 7px; }
.cr14s-stars { font-weight: 800; font-size: 12px !important; color: #1b2a3a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr14s-ct { color: #5b6d7f; font-weight: 600; }
.cr14s-price { color: #2c7a3f; font-weight: 800; }
.cr14s-open {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    background: #dbe8f5 !important;
    color: #1d4a7c !important;
    border: 1px solid #a7c6e6;
    border-radius: 9px;
    font-weight: 800;
    font-size: 11.5px !important;
    cursor: pointer;
}
.cr14s-open svg { width: 12px; height: 12px; fill: currentColor; }
.cr14s-act { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin-top: 8px; }
.cr14s-act .action-item.cr14-dir { flex: 1.2 1 0; height: 30px; font-size: 11.5px !important; }
.cr14s-act .action-item.cr14-dir * { font-size: 11.5px !important; }
select.classification-select.cr14s-save { flex: 1 1 0; height: 30px; min-width: 52px; font-size: 11.5px !important; }
.cr14s-act .cr14-plus .action-item.add .icon-frame { width: 30px !important; height: 30px !important; }
.cr14s-act .cr14-plus .action-item.add .icon { width: 16px !important; height: 16px !important; }
.cr14s-etd {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-top: 1px solid #d4dbe4;
    margin: 8px -0px 0;
    padding-top: 7px;
}
.cr14s-ft {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    background: #dbe8f5;
    color: #1d4a7c;
    border: 1px solid #a7c6e6;
    border-radius: 9px;
    font-weight: 800;
    font-size: 11px !important;
    cursor: pointer;
    white-space: nowrap;
}
.cr14s-est { font-size: 10.5px !important; color: #5b6d7f; font-weight: 700; cursor: pointer; text-align: center; min-width: 0; }

/* ============ 🃏 XL OPEN CARD (FINALS, M language) — cr14x ============ */
.card.explore.cr14x {
    background: #f5f7fa !important;
    color: #1b2a3a;
    border-radius: 18px;
    overflow: hidden;
}
.cr14x, .cr14x * { text-shadow: none !important; }
.cr14x-hero {
    position: relative;
    min-height: 170px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start;
    padding: 10px 11px;
    border-radius: 18px 18px 0 0;
}
.cr14x-hero-flat { min-height: 0; background: #24303c; padding-bottom: 12px; }
.cr14x-chips { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; flex-wrap: wrap; }
.cr14x-chip {
    font-size: 11px !important;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 11px;
    background: rgba(24, 30, 38, .78);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    cursor: pointer;
    white-space: nowrap;
}
.cr14x-chip:first-child { margin-right: auto; }
.cr14x-chip-all { border-color: #e9b421 !important; color: #ffe9b0; }
.cr14x-tagx { margin-bottom: 4px; }
.cr14x-band {
    background: #14273c;
    padding: 10px 12px 9px;
    color: #eef3f8;
}
.cr14x-tcap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    background: rgba(245, 247, 250, .96);
    border-radius: 8px;
    padding: 6px 10px 6px 7px;
}
.cr14x-tcap .cr-disc { width: 26px !important; height: 26px !important; font-size: 13px !important; }
.cr14x-title { font-weight: 800; font-size: 17px !important; line-height: 1.2; color: #1b2a3a; min-width: 0; }
.cr14x-idrow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 13px !important;
    padding: 6px 2px 0;
    color: #eef3f8;
}
.cr14x-idrow * { font-size: 13px !important; }
.cr14x-idrow.cr14x-ev { color: #ffd08a; font-weight: 800; }
.cr14x-idrow.cr14x-cat { font-weight: 700; color: #fff; }
.cr14x-dim { color: #c7d3df; font-weight: 500; }
.cr14x-chip-dashed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px !important;
    padding: 1px 7px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .45);
    white-space: nowrap;
    margin-left: 5px;
}
.cr14x-body {
    padding: 12px 12px 26px;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
}
.cr14x-act {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.cr14x-dir {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    background: #e99821;
    color: #3a2600 !important;
    border: 1px solid #b3720f;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.cr14x-dir svg { width: 16px; height: 16px; fill: currentColor; }
.cr14x-act .cr14-plus { flex: 0 0 44px !important; width: 44px !important; display: flex !important; justify-content: center; }
.cr14x-act .cr14-plus .action-item.add .icon-frame {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
}
select.classification-select.cr14x-save {
    flex: 1 1 0;
    min-width: 60px;
    height: 40px;
    font-size: 13px !important;
}
.cr14x-rate {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}
.cr14x-stars { font-weight: 800; font-size: 14px !important; color: #1b2a3a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr14x-ct { color: #5b6d7f; font-weight: 600; }
.cr14x-price { color: #2c7a3f; font-weight: 800; }
.cr14x-ratein { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px !important; color: #5b6d7f; }
.cr14x-ratein .rating { display: flex; gap: 2px; }
.cr14x-tabwrap { width: 100%; }
.cr14x-gal { white-space: nowrap; overflow-x: auto; }
.cr14x-gal img { height: 120px; border-radius: 8px; margin-right: 6px; display: inline-block; }
/* the plan machinery renders dark-dress crew areas — keep them legible
   on the light body (crewAreaHTML text is #fff on bordered box) */
.cr14x #xl-planblock-bottom .crew-area,
.cr14x #xl-planblock .xl-plan-strip { background: #14273c; border-color: #14273c; }
.cr14x #xl-planblock-bottom .crew-area { border-radius: 12px; }

/* r17 (8/12): expandable why-quote when it IS the overview — the toggle
   lives on the quote row; expanded state wraps to full width */
.cr14-why.wrapok { flex-wrap: wrap !important; align-items: baseline; }
.cr14-why.wrapok .cr14-more { flex: 0 0 auto; margin-left: auto; }
.cr14-whytxt.x {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex: 1 1 100%;
}

/* r18 (8/12): hours provenance line under the friendly hours */
.cr14-hrsmeta {
    margin-top: 7px;
    font-size: 11.5px !important;
    color: #7a7466;
    font-weight: 600;
}

/* ── r19 Discovery R1: event dress — genre badge + 🎟 Tickets + status ── */
.cr14-evrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cr14-genre{border:1px solid rgba(240,179,87,.55);color:#f0b357;border-radius:7px;padding:0 7px;font-size:11px!important;font-weight:800;white-space:nowrap}
.cr14-tix{margin-left:auto;background:#e99821;color:#fff!important;border-radius:8px;padding:1px 9px;font-size:11.5px!important;font-weight:800;text-decoration:none;white-space:nowrap}
.cr14s-ev .cr14-tix{margin-left:6px}
.cr14-evstat{color:#ffd27a;font-weight:800;font-size:11px!important}

/* ════════════════════════════════════════════════════════════════
   r20 WHITE-BODY B skin (v19 LOCKED 8/13, artifact 745dedac —
   contract: docs/CARD_TRUTH.html). Scope: .cr20b only; legacy
   dress above is untouched (timeline stays legacy).
   ════════════════════════════════════════════════════════════════ */
.card.cr14.cr20b { background: #fff !important; color: #1b2a3a; border: 1px solid #cfd4da; }
/* ① hero — full-bleed navy (photo or category tint) */
.cr20b .cr20-hero { margin: -11px -11px 0; padding: 10px 11px 9px; }
.cr20-topline { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin-bottom: 9px; }
.cr20-chips { width: auto !important; flex: 1 1 auto; min-width: 0; }
.cr20-opensq { flex: 0 0 auto; margin-left: auto; border: 1.5px solid #14273c; border-radius: 6px; padding: 1px 9px; color: #14273c; font-weight: 800; font-size: 15px; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.cr20-opensq.cr20-onhero { border-color: #fff; color: #fff; background: rgba(20, 39, 60, .35); }
/* ② welded band — flush to the hero, hairline under, full-bleed */
.cr20b .cr20-vband { display: block; margin: -12px -11px 0; padding: 7px 11px; background: #fbfcfd; border-bottom: 1px solid #dde2e8; font-size: 12.5px; color: #3f4e5d; line-height: 1.45; }
.cr20-vband .cr20-vcat { font-weight: 800; color: #14273c; }
.cr20-vband .cr20-vcat.explore-card-category { padding: 0; margin: 0; font-size: 12.5px; display: inline; }
.cr20-vband .cr20-vdim { color: #5b6d7f; }
.cr20b .cr14-dim { color: #5b6d7f; }
/* ③ grey when-zone — full-bleed */
.cr20b .cr20-when { margin: -12px -11px 0; padding: 8px 11px 9px; background: #f5f6f7; }
.cr20-whenline { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 7px; font-weight: 800; font-size: 13px; color: #1b2a3a; }
.cr20-whenline.cr20-evline { color: #b3720f; }
.cr20b .cr14-genre { border-color: rgba(179, 114, 15, .5); color: #b3720f; }
.cr20b .cr14-evstat { color: #b3720f; }
.cr20-pricechip { margin-left: auto; background: #fff; border: 1px solid #dde2e8; border-radius: 8px; padding: 1px 10px; font-size: 12px; font-weight: 800; color: #3f4e5d; }
.cr20-popchip { margin-left: auto; background: #fff; border: 1px solid rgba(179, 114, 15, .45); border-radius: 8px; padding: 1px 9px; font-size: 11.5px; font-weight: 800; color: #b3720f; white-space: nowrap; }
.cr20-when .cr14-hrsmeta { font-size: 10.5px; color: #8a96a3; margin-top: 2px; }
/* ④ lined action lane — ONE color (#e99821) ONE size (46px) */
.cr20b .cr14-act.cr20-act { margin: 0 -11px; padding: 10px 11px; border-top: 1px solid #e6e8eb; border-bottom: 1px solid #e6e8eb; gap: 9px; width: auto; }
.cr20-abtn { flex: 1 1 0; min-width: 0; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: #e99821; color: #fff; border-radius: 12px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.cr20-navarr { display: inline-block; transform: rotate(-45deg); font-size: 19px; line-height: 1; color: #fff; }
.cr20-tix2 { flex: 1 1 0; min-width: 0; height: 46px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #e99821; color: #fff !important; border-radius: 12px; font-weight: 800; font-size: 11.5px; line-height: 1; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.cr20-tixi { font-size: 17px; }
.cr20b select.classification-select.cr14-save { flex: 1 1 0; height: 46px !important; background: #e99821 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 17'%3E%3Cpath fill='white' d='M0 0h13v17l-6.5-4.8L0 17z'/%3E%3C/svg%3E") center/13px 17px no-repeat !important; color: transparent !important; border: none !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.cr20b select.classification-select.cr14-save option { color: #1b2a3a !important; background: #fff; }
.cr20b .cr14-plus .action-item.add .icon-frame { width: 46px !important; height: 46px !important; }
.cr20b .cr14-plus .action-item.add .icon { width: 22px !important; height: 22px !important; }
/* ⑤ white tail recolors (tabs/panels already light) */
.cr20b .cr14-stars { color: #1b2a3a; }
.cr20b .cr14-ct { color: #5b6d7f; }
.cr20b .cr14-price { color: #2c7a3f; }
.cr20b .cr14-ratein { color: #5b6d7f; }
.cr20b .cr14-idrow { color: #3f4e5d; }
.cr20b .cr14-tagx { background: #f2f4f6; border-color: #dde2e8; }
.cr20b .cr14-tagx-hdr { color: #33465a; }
/* the coplanner bubble stays NAVY — distinct social object (v19) */
.cr20b .cr14-coplan { background: #16222f; border: 1.5px solid #2c3a4a; border-radius: 14px; }
.cr20b .cr-crew { color: #cdd8e4; background: #16222f; border: 1.5px solid #2c3a4a; border-radius: 14px; padding: 9px 11px; border-top-width: 1.5px !important; }
/* S pin variant: boxed (not bled — leaflet owns the popup padding) */
.cr14s.cr20b .cr20-vband { margin: 6px 0 0; border: 1px solid #dde2e8; border-radius: 8px; border-bottom: 1px solid #dde2e8; padding: 5px 9px; font-size: 11.5px; background: #fbfcfd; }
.cr14s.cr20b .cr20-when { margin: 6px 0 0; border-radius: 8px; padding: 6px 9px; background: #f5f6f7; }
.cr14s.cr20b .cr20-whenline { font-size: 12px; }
.cr14s.cr20b .cr14s-act.cr20-act { border-top: 1px solid #e6e8eb; border-bottom: 1px solid #e6e8eb; padding: 8px 0; margin: 8px 0 0; }
.cr14s.cr20b .cr14s-chips { align-items: center; }
.cr14s.cr20b .cr20-opensq { font-size: 13.5px; }
/* XL (cr14x) B variant */
.cr14x.cr20b { background: #fff; }
.cr14x.cr20b .cr14x-band { padding-bottom: 10px; }
.cr20x-vband.cr20-vband { margin: 0; padding: 7px 12px; }
.cr20x-vband .cr14x-idrow { color: #3f4e5d; padding: 2px 0 0; }
.cr20x-vband .cr14x-idrow.cr14x-cat { color: #14273c; font-weight: 800; }
.cr20x-vband .cr14x-dim { color: #5b6d7f; }
.cr20x-vband .cr14x-chip-dashed { background: #f2f4f6; color: #33465a; border-color: #b9c3cd; }
.cr14x.cr20b > .cr20-when { margin: 0; padding: 8px 12px 9px; }
.cr14x.cr20b .cr14x-act.cr20-act { border-top: 1px solid #e6e8eb; border-bottom: 1px solid #e6e8eb; margin: 0 -12px; padding: 10px 12px; width: auto; }
.cr14x.cr20b select.classification-select.cr14x-save { height: 46px !important; background: #e99821 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 17'%3E%3Cpath fill='white' d='M0 0h13v17l-6.5-4.8L0 17z'/%3E%3C/svg%3E") center/13px 17px no-repeat !important; color: transparent !important; border: none !important; border-radius: 12px !important; }
.cr14x.cr20b .cr14x-act .cr14-plus { flex: 0 0 46px !important; width: 46px !important; }
.cr14x.cr20b .cr14x-act .cr14-plus .action-item.add .icon-frame { width: 46px !important; height: 46px !important; }
/* Plans chip (cr20chip) — Round 16 grouping */
.pchip.cr20chip .pchip-ww { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 3px 5px; font-size: 12px; color: #667085; margin-top: 5px; }
.pchip.cr20chip .pchip-ww .pchip-when { font-weight: 800; color: #33465a; }
.pchip.cr20chip .pchip-del { margin-left: auto; cursor: pointer; }
.pchip.cr20chip .cr20-abtn.pchip-dirb { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 9px; margin-left: 8px; }
.pchip.cr20chip .pchip-right .pchip-open.cr20-opensq { margin-left: 4px; color: #14273c; }
/* r20 law enforcement over the ≤520px shrink round: B lane is 46px on
   EVERY viewport (specificity beats the .card.cr14 mobile rules) */
.card.cr14.cr20b select.classification-select.cr14-save { height: 46px !important; min-height: 46px !important; }
.card.cr14.cr20b .cr14-plus, .card.cr14.cr20b .cr14-act .cardplus-holder { flex: 0 0 46px !important; width: 46px !important; }
.card.cr14.cr20b .cr14-act .cr14-plus .action-item.add .icon-frame,
.card.cr14.cr20b .cr14-act .cardplus-holder .action-item.add .icon-frame { width: 46px !important; height: 46px !important; }
.card.cr14.cr20b .cr14-act .action-item.add { height: 46px !important; display: flex !important; align-items: center; justify-content: center; }
/* ── field round 1 (Greg 8/13 screenshots) ── */
/* ① lane law refined: buttons keep their SIZE; the lane balances the
   space between (3-button rows were inflating dir/save) */
.cr20b .cr14-act.cr20-act, .cr14s.cr20b .cr14s-act.cr20-act { justify-content: space-between; }
.cr20-abtn, .cr20-tix2 { flex: 0 1 88px; }
.cr20b select.classification-select.cr14-save { flex: 0 1 88px; }
.cr14x.cr20b select.classification-select.cr14x-save { flex: 0 1 88px; }
/* ② rounded top restored — the hero clips to the card's own corners */
.card.cr14.cr20b { overflow: hidden; }
.cr20b .cr20-hero { border-radius: 15px 15px 0 0; }
/* ── Safari select truth (Greg screenshot 8/13): WebKit sizes <select>
   by intrinsic rules and ignores flex-basis on form controls — the
   glyph-only Save collapsed to a sliver. EXPLICIT width is the law
   Safari obeys. (Chromium honored the 88px basis — invisible to probes.) */
.cr20b select.classification-select.cr14-save {
    width: 88px !important;
    min-width: 72px !important;
    flex: 0 1 88px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.cr14x.cr20b select.classification-select.cr14x-save {
    width: 88px !important;
    min-width: 72px !important;
    flex: 0 1 88px !important;
}
.cr14s.cr20b select.classification-select.cr14s-save {
    min-width: 56px !important;
}
/* ── field r2 (Greg 8/13): the global font clamp inflated the vband copy
   ('at Silver Legacy…' towering over the card) — armor the band like
   the idrows, every descendant pinned */
.cr20b .cr20-vband, .cr20b .cr20-vband * { font-size: 12.5px !important; line-height: 1.45 !important; }
.cr14x.cr20b .cr20x-vband, .cr14x.cr20b .cr20x-vband * { font-size: 13px !important; }
.cr14s.cr20b .cr20-vband, .cr14s.cr20b .cr20-vband * { font-size: 11.5px !important; }
.cr20b .cr20-when .cr20-whenline, .cr20b .cr20-whenline > span { font-size: 13px !important; }
/* ── field r3 (Greg 8/13): the chat L card inherited the full thread
   width — buttons flung to the corners, card towering. The invite card
   is an OBJECT in the thread (v19 L mock ≈ 400px), not a page. */
.card.cr14.cr20b.cr14-chatdress { max-width: 420px; }
/* ── field r4 (Greg 8/13): Safari pinned Save at its width while sibs
   rendered slimmer. End the negotiation: ALL lane rectangles get the
   IDENTICAL fixed box — no grow, no shrink, same on every engine. */
.cr20b .cr20-act > .cr20-abtn,
.cr20b .cr20-act > .cr20-tix2,
.cr20b .cr20-act > select.classification-select.cr14-save {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
}
.cr14x.cr20b .cr20-act > .cr20-abtn,
.cr14x.cr20b .cr20-act > .cr20-tix2,
.cr14x.cr20b .cr20-act > select.classification-select.cr14x-save {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
}
/* ── field r5 (Greg 8/13): ＋ vanished in Safari (present in Chromium).
   Pin the ENTIRE ＋ chain with explicit boxes — holder, trigger, circle,
   icon — and keep the lane from clipping its last child. */
.cr20b .cr14-act.cr20-act { flex-wrap: nowrap !important; overflow: visible; }
.cr20b .cr14-act .cr14-plus, .cr20b .cr14-act .cardplus-holder {
    flex: 0 0 46px !important; width: 46px !important; height: 46px !important;
    min-width: 46px !important; max-width: 46px !important;
    display: flex !important; visibility: visible !important;
    align-items: center; justify-content: center;
}
.cr20b .cr14-act .cr14-plus .action-item.add {
    display: flex !important; visibility: visible !important;
    width: 46px !important; height: 46px !important;
    margin: 0 !important; position: static !important;
    align-items: center; justify-content: center;
}
.cr20b .cr14-act .cr14-plus .action-item.add .icon-frame {
    display: flex !important; width: 46px !important; height: 46px !important;
    min-width: 46px !important; border-radius: 50% !important;
    background: #e99821 !important; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.cr20b .cr14-act .cr14-plus .action-item.add .icon {
    width: 22px !important; height: 22px !important; display: block !important;
}
/* ── field r6 (Greg 8/13, THE ＋ mystery solved): r5's rigid 74px boxes
   overflowed NARROW 2-up columns → nowrap + corner-clip ate the LAST
   child (the ＋). Width becomes MATH, not flex negotiation: each
   rectangle = (lane − ＋46px − gaps 27px) / 3, equal on every engine at
   every width, capped so wide columns don't balloon. */
.cr20b .cr20-act > .cr20-abtn,
.cr20b .cr20-act > .cr20-tix2,
.cr20b .cr20-act > select.classification-select.cr14-save,
.cr14x.cr20b .cr20-act > select.classification-select.cr14x-save {
    flex: 0 1 auto !important;
    width: calc((100% - 73px) / 3) !important;
    min-width: 0 !important;
    max-width: 118px !important;
}
/* v15 style round (Greg 8/13): thin mid-grey border on result cards */
.card.cr14.cr20b { border: 1px solid #aab3bc; }
/* ── compact-seams pass (Greg 8/13: "tighten the seams to ~9px") ──
   Strata gap 12→9; the WELD negative margins re-calibrate with it
   (they cancel the flex gap — mismatched values un-weld the band).
   Outer margins untouched: seams, never margins. */
.card.cr14.cr20b .card-section { gap: 9px; }
.cr20b .cr20-vband { margin-top: -9px; }
.cr20b .cr20-when { margin-top: -9px; }
.cr20b .cr14-act.cr20-act { padding-top: 8px; padding-bottom: 8px; }
/* ── phone gutters (Greg mobile field 8/13: 'cards too big, don't fit') ──
   The 1-col rule ran cards edge-to-edge — corners/borders clipped at the
   screen edge read as oversized. Cards get 10px side gutters. */
@media (max-width: 520px) {
    .card.cr14.cr20b {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 0 10px 12px !important;
    }
}

/* ── r32 · cr20t: Time Travel 2-up B cut, v8 CONTRACT (Greg blessed the
   mock rounds 8/13, artifact dc5bb04e v8): 52px hero [disc L · chip C · ↗ R]
   · when·$$ + conditional More ▾ · 📍 honest distance row · 34px lane with
   hairline BETWEEN buttons · coplanner pill / fit-priority crew row.
   HEIGHT LAW: panels closed at rest; align-self:start keeps the 2-up
   neighbor untouched when one card expands. Lane cells = flex-equal law,
   never rigid px (Safari corner-clip lesson). ── */
.cr20t, .page.timeline .card .suggestion-card.cr20t { background: #fff !important; border: 1px solid #aab3bc; border-radius: 12px; overflow: hidden; padding: 0; display: flex; flex-direction: column; align-self: stretch !important; min-width: 0 !important; }  /* align-self governs WIDTH inside the column wrapper — stretch fills it; the height law lives on the wrapper now */

.cr20t .cr20t-hero { height: 52px; flex: none; background-size: cover; background-position: center; position: relative; border-radius: 11px 11px 0 0; }
.cr20t-hdisc { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #d6dade; display: flex; align-items: center; justify-content: center; font-size: 11px !important; }
.cr20t-chip { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d6dade; border-radius: 7px; padding: 1px 6px; font-size: 10.5px !important; font-weight: 650; color: #2d5885; cursor: pointer; white-space: nowrap; }
.cr20t-open { position: absolute; top: 5px; right: 5px; }
/* CATO badge: its absolute seat was tuned for the old card — on the T cut it sits on the hero under the ↗ */
.cr20t .source-badge { position: absolute; top: 28px; right: 5px; left: auto; }
.cr20t-tcap { display: flex; flex-direction: row !important; gap: 5px; align-items: flex-start; padding: 6px 8px 3px; }
.cr20t-tcap, .cr20t-tcap b { font-size: 12.5px !important; line-height: 1.25; }
.cr20t-vband, .cr20t-vband * { font-size: 11px !important; color: #6b7280; }
.cr20t-vband { padding: 0 8px 4px; }
.cr20t-when { background: #f5f6f7; padding: 4px 8px; display: flex; flex-direction: row !important; justify-content: space-between; align-items: center; gap: 6px; }
.cr20t-when, .cr20t-when * { font-size: 11px !important; }
.cr20t-whenl { color: #3d4650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr20t-whenr { color: #b45309; white-space: nowrap; flex: none; }
.cr20t-more { color: #8a5406; font-weight: 700; cursor: pointer; }
.cr20t-morex { background: #fafbfc; border-top: 1px solid #e6e8eb; padding: 4px 8px; line-height: 1.5; color: #4a5560; }
.cr20t-morex, .cr20t-morex * { font-size: 10.5px !important; }
.cr20t-dist { background: #f5f6f7; border-top: 1px solid #eceef0; padding: 3px 8px; color: #4a5560; }
.cr20t-dist, .cr20t-dist * { font-size: 10.5px !important; }
.cr20t-tagx { padding: 4px 8px; border-bottom: 1px solid #e6e8eb; }
.cr20t-extras { padding: 6px 8px; }
/* 34px lane · equal flex cells · hairline separators (Greg 8/13) */
.cr20t-lane { display: flex; flex-direction: row !important; height: 40px; background: transparent; margin-top: auto; flex: none; gap: 6px; padding: 0 6px 6px; align-items: stretch; }
.cr20t-lane .cr20t-abtn { flex: 1 1 0; min-width: 0; height: 34px; display: flex; align-items: center; justify-content: center; background: #e99821; color: #fff; font-weight: 800; font-size: 14px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.22); cursor: pointer; text-decoration: none; padding: 0; }
/* dividers retired — the lane is discrete BUTTONS now (Greg field r4) */
.cr20t-lane .cr20-navarr { font-size: 14px; }
.cr20t-savewrap { position: relative; }
/* Save select: explicit width (Safari form-control flex law) */
.cr20t-save { width: 100%; height: 100%; background: transparent; border: 0; color: #fff; font-weight: 700; font-size: 11.5px !important; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; cursor: pointer; }
.cr20t-save option { color: #23272c; font-size: 14px; }
.cr20t-lane .cardplus-holder { width: 100%; height: 100%; display: flex; flex-direction: row !important; align-items: center; justify-content: center; }
/* coplanner: invite pill (Search's front door, sized for 2-up — the button
   keeps its seat, the WORDS ellipsize; Save-sliver lesson) */
.cr20t .cr14-coplan.cr20t-pill { display: flex; flex-direction: row !important; align-items: center; gap: 5px; margin: 5px; padding: 4px 4px 4px 9px; border-radius: 999px; background: #232c3a !important; min-width: 0; overflow: hidden; cursor: pointer; }
.cr20t-pill .cr14-coplan-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 800; font-size: 11px !important; }
.cr20t-pill .cr14-coplan-btn { flex: 0 0 auto; margin-left: auto; background: #e99821; border-radius: 999px; padding: 3px 8px; color: #fff; font-weight: 800; font-size: 10.5px !important; }
/* planned: fit-priority crew row [✓ · avatars · X in · Y waiting · ⌄] */
.cr20t-crew { border-top: 1px solid #e6e8eb; padding: 5px 7px; display: flex; flex-direction: row !important; align-items: center; gap: 5px; background: #fff; cursor: pointer; min-width: 0; }
.cr20t-crew, .cr20t-crew * { font-size: 10.5px !important; }
.cr20t-chk { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #1a6b3c; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.cr20t-mest { flex: none; border: 1px solid #d6dade; border-radius: 8px; padding: 1px 6px; font-weight: 700; color: #6b7280; }
.cr20t-avs { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: row !important; }
.cr20t-tally { color: #6b7280; white-space: nowrap; }
.cr20t-crewarr { margin-left: auto; color: #8a5406; font-weight: 800; flex: none; }
.cr20t-xp { border-top: 1px solid #e6e8eb; background: #fafbfc; padding: 6px 7px; }
.cr20t-xp, .cr20t-xp * { font-size: 11px !important; }
.cr20t-xp .cr14-coplan.cr20t-pill { margin: 6px 0 0; }
.cr20t-pcact { display: flex; flex-direction: row !important; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.cr20t-openbtn { background: #e99821; color: #fff; font-weight: 800; border-radius: 9px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.cr20t-cxl { border: 1.2px solid #c0392b; color: #c0392b; font-weight: 800; border-radius: 9px; padding: 4px 10px; cursor: pointer; background: #fff; white-space: nowrap; }

/* ── r35 · T-cut LEGACY ARMOR (Greg field round 2, 8/13). The old .card /
   .card.explore dress bleeds through: white shadowed text · space-between
   column (the dead-space bug) · #fff!important 24px select · 30px disc
   circle inside the 20px seat · low-contrast ↗ · inflated coplan pill.
   Every rule here counters a NAMED legacy rule — never delete without
   checking card.css still carries the counterpart. ── */
.cr20t, .cr20t * { text-shadow: none !important; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
.cr20t { color: #23272c !important; justify-content: flex-start !important; align-content: flex-start !important; }
.cr20t-tcap, .cr20t-tcap b { color: #1d2530 !important; font-weight: 800; }
/* hero: never stretch (legacy background-size:auto/100% bleeds) */
.cr20t .cr20t-hero { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* ↗ open square: SOLID and visible on any photo (Greg: 'not visible') */
.cr20t .cr20-opensq { background: #fff !important; border: 1px solid #aab3bc !important; color: #1d4a7c !important; width: 22px !important; height: 22px !important; border-radius: 7px !important; display: flex !important; align-items: center; justify-content: center; font-size: 13px !important; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* disc: cardCatDisc brings its OWN 30px colored circle — let it BE the
   badge, scaled to the hero seat (no white ring around it) */
.cr20t-hdisc { width: auto !important; height: auto !important; background: none !important; border: 0 !important; }
.cr20t-hdisc .cr-disc { width: 22px !important; height: 22px !important; font-size: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.35) !important; }
/* Save: counters .classification-select's #fff!important 24px pill —
   white TEXT riding the orange lane, full cell */
.cr20t-lane select.cr20t-save.classification-select { background: transparent !important; background-color: transparent !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; height: 100% !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 800; box-shadow: none !important; }
.cr20t-lane select.cr20t-save.classification-select option { color: #23272c !important; }
/* $$ breathes before More */
.cr20t-more { margin-left: 8px; }
/* coplan pill: compact for 2-up — counters the Search-size cr14-coplan */
.cr20t .cr14-coplan.cr20t-pill { padding: 3px 3px 3px 8px !important; margin: 5px !important; min-height: 0 !important; height: auto !important; }
.cr20t-pill .cr14-coplan-txt, .cr20t-pill .cr14-coplan-words { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0 !important; }
.cr20t-pill .cr14-coplan-btn { font-size: 10px !important; padding: 2px 7px !important; }
/* height truth: card hugs content — counters legacy min-height/stretch
   chain (wrapper flex stretch + 140px min) that opened the dead space */
.cr20t { height: auto !important; min-height: 0 !important; position: relative; }  /* .source-badge anchors here */
/* size-consistency (Greg field r3): wrappers split the row equally,
   cards fill them; rows equalize, the lane bottom-anchors via its
   margin-top:auto. Expansion grows the row (both cards' lanes ride down
   together — the equal-height reading Greg asked for wins the earlier
   never-stretch note). */
.suggestion-wrapper { height: auto !important; min-height: 0 !important; align-items: stretch !important; align-self: auto !important; flex: 0 0 48.5% !important; width: 48.5% !important; max-width: 48.5% !important; box-sizing: border-box; margin: 0 0 6px 0 !important; }
.cr20t { width: 100% !important; height: auto !important; flex: 1 1 auto !important; box-sizing: border-box; margin: 0 !important; }  /* fills the wrapper by GROWING (flex), never height:100% — percent-height inside an auto parent is circular and Safari thrashes between the two answers = the 8/13 flicker */
/* b) From-your-Guide ribbon: compact one-liner on the T cut; the legacy
   'Added {date}' corner (card-birth trivia) lost its CSS hooks on the new
   structure and landed huge in the banner — hidden here, the save-age
   line is the honest, useful copy */
.suggestion-wrapper .tv-fromguide-strip { font-size: 10.5px !important; line-height: 1.3 !important; padding: 3px 8px !important; margin: 0 0 3px !important; border-radius: 8px !important; background: #fff6e8 !important; border: 1px solid #f0ddc0 !important; color: #8a5406 !important; text-shadow: none !important; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
.suggestion-wrapper .tv-fromguide-strip * { font-size: 10.5px !important; text-shadow: none !important; }
.cr20t .card-date-added, .suggestion-wrapper .card-date-added { display: none !important; }
/* c) CATO badge retired from cards (Greg 8/13) */
.cr20t .source-badge, .cr20b .source-badge, .cr14s .source-badge, .cr14x .source-badge { display: none !important; }
/* scheduled-event T cards ride rows without a suggestion-wrapper — same
   48.5% seat so mixed rows stay equal */
.card.activity.cr20t { width: 48.5% !important; flex: 0 0 48.5% !important; height: auto !important; }
#page-timeline .card.timeline:not(.expanded) .suggestions { overflow: hidden !important; }
#page-timeline .card.timeline:not(.expanded) { overflow: hidden; }
/* Greg 8/13 (long-standing): period tops read 'cut off' — the frame was
   asymmetric by construction (0.9rem left spine + 1px bottom, NO top).
   The top gets the same explicit boundary as the bottom + a breath of
   padding so the time row doesn't kiss the edge. */
#page-timeline .card.timeline { border-top: 1px solid #8883; }
#page-timeline .card.timeline > .card-inner { padding-top: 10px !important; }

/* ── r45 · Kyoto field round (Greg 8/13): the Contact/Details panel fonts
   blew up under the global font clamp on some widths — hard-clamp the kv
   rows; distance line gets its subtle dress on the XL/M band ── */
.cr14-panel .cr14-kv, .cr14-panel .cr14-kv * { font-size: 13px !important; line-height: 1.5; }
.cr14-panel .cr14-k { font-size: 12px !important; }
.cr20-distline { font-size: 12px !important; color: #4a5560; }

/* ══ r46 · 🃏 CREW ROW v9 (Greg locked spec + GO 8/14, artifact aeb33165) ══
   ONE green row on planned cards: 🗓 date ✎ │ You ✓ 2 in, 1 pending ⌄
   (solo: 🗓 date ✎ │ ＋ Invite ⌄) · drawer carries roster + date editor +
   Manage invites/Open/Cancel · timeline holder yields all dress to the card */
.invite-plan-card .cr20t, .invite-plan-card .card.activity.cr20t { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; background: #fff !important; margin: 0 !important; border-radius: 14px; }  /* beats the TimeVibes 2-up 48.5% pin — the planned card owns its full-period row */
.cr20t-crew { border: 1.5px solid #bfe0c8; border-radius: 11px; background: #eef6f0; margin: 6px 7px 7px; padding: 6px 9px; color: #1a4d30; font-weight: 800; }
.cr20t-crew, .cr20t-crew * { font-size: 12px !important; }
.cr20t-cdate { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; color: #1a4d30; }
.cr20t-cpen { color: #8a5406; margin-left: 3px; font-weight: 800; }
.cr20t-cdiv { align-self: stretch; border-left: 1.5px solid #bfe0c8; margin: -2px 1px; }
.cr20t-mebit { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.cr20t-crew .cr20t-chk { width: auto; height: auto; background: none; color: #1a6b3c; font-weight: 900; }
.cr20t-mest { color: #b45309; font-weight: 900; }
.cr20t-crew .cr20t-tally { color: #375f46; font-weight: 700; }
.cr20t-invmini { background: #e99821; color: #fff !important; border-radius: 999px; padding: 3px 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.cr20t-xp { border: 1.5px solid #bfe0c8; border-top: none; border-radius: 0 0 11px 11px; background: #fbfdfb; margin: -9px 8px 8px; padding: 12px 9px 9px; }
.cr20t-daterow { display: flex; flex-direction: row !important; align-items: center; gap: 6px; margin-bottom: 6px; color: #33465a; font-weight: 700; }
.cr20t-daterow input.plan-datetime { width: auto !important; border: 1.5px solid #cfc9bc; border-radius: 8px; padding: 4px 7px; background: #fff; font-size: 16px !important; }
.cr20t-invdd input.plan-datetime { border: 1.5px solid #cfc9bc; border-radius: 8px; padding: 4px 7px; background: #fff; width: auto !important; font-size: 16px !important; margin-bottom: 6px; }
.cr20t-invdd .invite-status { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 5px 0; }
/* r59 (Greg field 8/18, chat card): the invitee names were sliding off the
   right edge — the green status pill takes its natural width and the person
   chip beside it had nowhere to go, so the row overflowed and the card's
   overflow ate the names. Same cure as the crew row above: let it wrap, and
   let both children actually shrink (a flex item won't ellipsis at
   min-width:auto). Cap the pill so the name always keeps a share of the row. */
.cr20t-invdd .invite-status { flex-wrap: wrap; row-gap: 4px; }
.cr20t-invdd .invite-status > * { min-width: 0; }
.cr20t-invdd .invite-status .dropdown { max-width: 56%; }
.cr20t-invdd .invite-status .connect_person { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* .datetime is a CHAT-era rule (main.css:1604 `color:white`) — white on the
   white drawer ground was Greg's "invisible text". Scope it back to ink here
   without touching the chat bubbles that rule was written for. */
.cr20t-invdd .datetime { color: #33465a; font-weight: 700; }
.cr20t-invdd .dropdown { border-radius: 999px; padding: 3px 10px; color: #fff; font-weight: 800; }
.cr20t-invdd select { width: auto !important; max-width: 60%; border: 1.5px solid #cfc9bc; border-radius: 999px; padding: 4px 10px; background: #fff; font-weight: 700; }
.cr21-revoke { margin-left: auto; color: #9aa1a8; font-weight: 800; padding: 2px 7px; cursor: pointer; border-radius: 7px; }
.cr21-revoke:hover { color: #8a2c2c; background: #fbf3f0; }
.cr20t-manage { background: #2b3a4d; color: #fff; font-weight: 800; border-radius: 9px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.cr20t-xp .cr20t-pcact { flex-wrap: wrap; }

/* r48 (Greg field 8/14): the FULL-WIDTH planned card wears bigger body
   type — the T-cut sizes were tailored for the 166px 2-up card and read
   under-proportioned at period width. Suggestions keep their compact cut. */
.invite-plan-card .cr20t-tcap, .invite-plan-card .cr20t-tcap b { font-size: 16px !important; }
.invite-plan-card .cr20t-vband { font-size: 13.5px !important; }
.invite-plan-card .cr20t-when, .invite-plan-card .cr20t-when * { font-size: 13.5px !important; }
.invite-plan-card .cr20t-dist { font-size: 13.5px !important; }
.invite-plan-card .cr20t-morex, .invite-plan-card .cr20t-morex * { font-size: 13.5px !important; }
.invite-plan-card .cr20t-crew, .invite-plan-card .cr20t-crew * { font-size: 13.5px !important; }
/* r59 (Greg field 8/18): ...and that 12px→13.5px bump is exactly what cut
   "2 in, 0 pending" in half. The crew row is a nowrap flex row whose three
   children — .cr20t-cdate, .cr20t-mebit, .cr20t-tally — are ALL
   white-space:nowrap, so nothing can shrink and nothing can wrap; 12.5%
   more type simply ran past the card and the card's overflow ate the rest
   (the ⌄ went with it). Greg's standing law is wrap, never clip, so give
   the row somewhere to go rather than taking his bigger type back. Wrap
   engages only when it overflows, so every row that already fits is
   untouched. */
.cr20t-crew { flex-wrap: wrap; row-gap: 3px; }
.invite-plan-card .cr20t-xp, .invite-plan-card .cr20t-xp *:not(input) { font-size: 13.5px !important; }

/* r49 (Greg field 8/14): ★ rating rides its OWN row under the venue band
   (sharing the address row wrapped) + the planned card insets 2px so its
   period-color border's LEFT edge never clips at the holder boundary */
.cr20t-starline { padding: 0 8px 4px; font-size: 11px !important; color: #6b7280; }
.invite-plan-card .cr20t-starline { font-size: 13.5px !important; }
.invite-plan-card .cr20t, .invite-plan-card .card.activity.cr20t { width: calc(100% - 4px) !important; margin: 0 2px !important; }

/* r50 · ❤ F-dress on MATCHED card tags (Greg 8/14: 'open the new tag
   art as well') — the taste-match panels speak the same language as the
   filter rail: sky fill, red border, red ❤. Semantic is .match (taste),
   period Edit-Tags approval pills are untouched. */
.hash-tag.match, .hash-tag.synonym-match { background: #e3f1ff !important; border: 2px solid #d9482b !important; color: #1b2a3a !important; }
.hash-tag.match::after { content: ' ❤' !important; color: #d13b3b !important; }
.hash-tag.synonym-match::after { content: ' ❤' !important; color: #e0526d !important; opacity: .7; }

/* 🕛 8/14 field (Greg: "timetravel cards super stretched when i click open
   the period"): the TimeVibes 2-up pin above (.suggestion-wrapper
   flex:0 0 48.5% !important) LEAKED into the timeline's EXPANDED period,
   whose .suggestions is a COLUMN flex — a percentage flex-BASIS turns
   VERTICAL there, so each wrapper claimed 48.5% of the container height
   (3389px cards over 216px of content). Timeline-expanded wrappers go
   back to content-sized full-width rows; TimeVibes keeps its pin. */
#page-timeline .card.timeline.expanded .suggestions .suggestion-wrapper {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 🃏 8/14 field (Greg #4): scheduled/planned cards in Time Travel periods
   bled into the period body — a quiet grey frame seats them */
#page-timeline .invite-plan-card{border:1px solid #c9ced4 !important;border-radius:14px !important;
  background:#fff;padding:5px !important;margin:6px 0 !important;overflow:hidden}
/* r54 (Greg: "my eyes can't tell where the card ends"): the 1px grey was
   invisible on Retina white-on-white — real line + a whisper of shadow */
#page-timeline .invite-plan-card{border:1.5px solid #b6bec7 !important;
  box-shadow:0 1px 5px rgba(30,40,50,.10);background:#fff}

/* r55 (Greg 8/15 field): the grey frame was drawn on the PADDED holder —
   a visible gap between border and card. Frame moves onto the card
   itself: touching the image top and the green plan-row bottom; the
   holder goes invisible (spacing only). */
#page-timeline .invite-plan-card{border:none !important;padding:0 !important;box-shadow:none !important;background:transparent !important}
#page-timeline .invite-plan-card .card.activity,
#page-timeline .invite-plan-card .cr20t{border:1.5px solid #b6bec7 !important;border-radius:14px !important;
  box-shadow:0 1px 5px rgba(30,40,50,.10) !important;background:#fff !important;overflow:hidden;
  /* r57 (Greg 8/15): "bring it in even tighter" — the bordered node's own
     padding was the last moat; a 4px whisker, frame almost touches */
  padding:4px !important}

/* r58 (Greg 8/15 field: 'copy is too light for the blue background') —
   the r20 plan chip's ww line wore WHITE-PAGE inks (#667085 / #33465a)
   on the NAVY pchip ground: dark-on-dark. Light ink, amber date (the
   Day-Plan card's proven palette). */
.pchip.cr20chip .pchip-ww { color: rgba(255,255,255,.85) !important; }
.pchip.cr20chip .pchip-ww .pchip-when { color: #ffd9a0 !important; }
.pchip.cr20chip .pchip-edline { opacity: 1 !important; color: rgba(255,255,255,.85); }