/* Pricing > Competitors, second redesign (10/06): the competitor board.
   Loaded after skin/pricing-market.css, so a rule here at the same weight
   wins. Every rule is scoped under .yw-compset-page (compset/page.tsx),
   except the price line's, scoped under .yw-compset-hero: PriceLadder also
   renders on the public demo tour (src/app/demo/compset), outside the page.
   Light rules first, their dark twins under [data-theme-root].dark.

   Owner, 10/06: "we need to re design this whole section with the new design
   style. also make it more intuitive right now its kind of basic it has the
   same containers and its boring this section should have better visibility
   for the hotel competitors bigger images easier to use less text, remember
   no ai slop".

   The page, top to bottom, each container a different shape:
   1. The hero (Competitive prices): the gap in words, the night as one
      control, the price line with every hotel's photo on it.
   2. Your position beside it: a rank strip, your rate beside the median,
      occupancy as a track, sold out as a dot per comp.
   3. Your set: no card around it; a grid of photo cards straight on the page,
      you first, an Add a hotel tile last (.yw-cc, compset/comp-card.tsx).
   4. Not returning rates (rows), Watching (a grid of small photo cards),
      Suggested (a strip of photo tiles that scrolls sideways), Others in your
      market (the table).
   Values are ink; only words, marks, tints and pills take colour. */

/* ------------------------------------------------------------ rhythm -- */
.yw-compset-page .yw-compset-stack { gap: 18px; margin-top: 24px; }
.yw-compset-page .yw-compset-top { gap: 16px; }

/* ============================================================== hero == */
/* The pull clock: one quiet line (its whole sentence is the hover) and the
   Pull now pill. */
.yw-compset-page .yw-compset-clock { gap: 8px 12px; font-size: 12px; }
.yw-compset-clock-face { display: inline-flex; align-items: center; gap: 6px; color: #87818c; font-size: 12px; white-space: nowrap; }
.yw-compset-clock-face > svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.yw-compset-clock .hw-info-label:hover .yw-compset-clock-face, .yw-compset-clock .hw-info-label[aria-expanded="true"] .yw-compset-clock-face { color: #8546d7; }

/* The night: one control, the arrows either side of the night itself. */
.yw-compset-page .yw-compset-window { margin-top: 12px; }
.yw-compset-page .yw-compset-picker { flex-wrap: nowrap; gap: 6px; }
.yw-compset-page .yw-compset-arrow { width: 32px; height: 32px; font-size: 14px; }
.yw-compset-when { position: relative; display: inline-flex; min-width: 0; }
.yw-compset-page .yw-compset-when-trigger { display: inline-flex; max-width: 100%; height: 32px; align-items: center; gap: 8px; padding: 0 12px 0 14px; border: 0; border-radius: 10px; background: #eeeded; color: #202024; font-size: 13px; font-weight: 500; letter-spacing: -.15px; white-space: nowrap; cursor: pointer; transition: background-color .16s; }
.yw-compset-page .yw-compset-when-trigger:hover, .yw-compset-page .yw-compset-when-trigger[aria-expanded="true"] { background: #e8e4ed; }
.yw-compset-page .yw-compset-when-trigger:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-compset-page span.yw-compset-when-trigger { cursor: default; opacity: .7; }
.yw-compset-when-caret { display: inline-block; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid #87818c; border-bottom: 1.5px solid #87818c; transform: rotate(45deg); transition: transform .16s; }
.yw-compset-when-trigger[aria-expanded="true"] .yw-compset-when-caret { margin-top: 3px; transform: rotate(-135deg); }
.yw-compset-when-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 236px; margin: 0; padding: 6px; border: 1px solid #e5ddea; border-radius: 16px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; list-style: none; }
.yw-compset-page .yw-compset-when-option { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; color: #343039; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .14s; }
.yw-compset-page .yw-compset-when-option:hover { background: #f4f3f6; }
.yw-compset-page .yw-compset-when-option[data-active] { background: #f1eafc; color: #7433d4; font-weight: 500; }
.yw-compset-page .yw-compset-when-option:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }

/* The answer, one balanced sentence (10/07, owner: "the 1 is too big"): the
   figure a size over the words, on one baseline, so a $1 gap never shouts. */
.yw-compset-hero .yw-compset-headline { margin: 18px 0 10px; font-size: 38px; line-height: 1.2; letter-spacing: -.045em; }
.yw-compset-hero .yw-compset-headline[data-worded], .yw-compset-page .yw-compset-hero .yw-compset-headline[data-worded] { font-size: 30px; letter-spacing: -.035em; }
.yw-compset-headline-tail { margin-left: .2em; color: #59535f; font-size: 21px; font-weight: 500; letter-spacing: -.4px; }
.yw-compset-page .yw-compset-hero .yw-hero-status { font-size: 13px; }
.yw-compset-page .yw-compset-hero .yw-hero-status > .yw-hero-muted { flex: 0 1 auto; font-size: 13px; }
.yw-compset-page .yw-compset-hero .yw-hero-pill { padding: 5px 10px; font-size: 12px; }
.yw-compset-page .yw-compset-hero .yw-hero-status .yw-more button { width: 30px; height: 30px; }
.yw-compset-page .yw-compset-hero .yw-hero-status .yw-more button::after { font-size: 14px; }

/* The ranked bars (10/07, owner: "make the competitors line readable"): a
   row per hotel, priciest first: its photo, its name, a bar from $0 whose
   length is its price, the price at the bar's end. One scale for every bar
   and mark: the track minus the price's room (--bar-label). */
.yw-compset-bars { --bar-photo: 36px; --bar-name: 236px; --bar-gap: 12px; --bar-label: 66px; --bar-pad: 8px; display: flex; flex-direction: column; margin-top: 20px; }
.yw-compset-bars-priced { position: relative; display: flex; flex-direction: column; gap: 2px; }
.yw-compset-bars-marks { position: absolute; top: 0; right: calc(var(--bar-pad) + var(--bar-label)); bottom: 0; left: calc(var(--bar-pad) + var(--bar-photo) + var(--bar-name) + var(--bar-gap) * 2); z-index: 2; pointer-events: none; }
.yw-compset-bars-mark { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100%); width: 0; }
.yw-compset-bars-mark::after { content: ""; position: absolute; bottom: 0; left: -1px; width: 2px; border-radius: 1px; background: #59535f; opacity: .6; }
.yw-compset-bars-mark[data-kind="aim"]::after { background: #7c3aed; opacity: .85; }
.yw-compset-bar-row { display: grid; grid-template-columns: calc(var(--bar-photo) + var(--bar-name) + var(--bar-gap)) minmax(0, 1fr); align-items: center; column-gap: var(--bar-gap); min-height: 44px; padding: 0 var(--bar-pad); border-radius: 13px; }
.yw-compset-bar-row:has(> .yw-compset-bar-link) { grid-template-columns: minmax(0, 1fr); }
.yw-compset-bar-row[data-you] { background: #f6f1fb; }
.yw-compset-hero .yw-compset-bar-who { display: grid; min-width: 0; grid-template-columns: var(--bar-photo) minmax(0, 1fr); align-items: center; column-gap: var(--bar-gap); min-height: 44px; padding: 0; border: 0; border-radius: 13px; background: none; color: inherit; font: inherit; text-align: left; }
.yw-compset-hero .yw-compset-bar-who.yw-compset-bar-link { grid-template-columns: var(--bar-photo) var(--bar-name) minmax(0, 1fr); }
.yw-compset-hero button.yw-compset-bar-who { cursor: pointer; }
.yw-compset-hero button.yw-compset-bar-who:focus-visible { outline: 2px solid #8a45f0; outline-offset: 2px; }
.yw-compset-bar-photo { display: block; width: var(--bar-photo); height: var(--bar-photo); border-radius: 50%; }
.yw-compset-bar-photo > :is(img, div) { width: var(--bar-photo); height: var(--bar-photo); }
.yw-compset-bar-name { display: flex; min-width: 0; align-items: baseline; gap: 7px; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap; }
.yw-compset-bar-name > span, .yw-compset-bar-name:not(:has(> span)) { overflow: hidden; text-overflow: ellipsis; }
.yw-compset-bar-name > em { flex: 0 0 auto; color: #7c3aed; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0; }
.yw-compset-bar-track { display: flex; min-width: 0; align-items: center; height: 44px; }
.yw-compset-bar { display: block; height: 14px; flex: 0 0 auto; border-radius: 4px 7px 7px 4px; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-compset-bar-row[data-you] .yw-compset-bar { background: #7c3aed; }
.yw-compset-bar-row[data-you] .yw-compset-bar-price { background: #f6f1fb; }
.yw-compset-bar-price { position: relative; z-index: 3; flex: 0 0 auto; margin-left: 4px; padding: 1px 4px; border-radius: 5px; background: #fbfbfb; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap; }
/* No price on this night: the word where the bar would be. */
.yw-compset-bar-row[data-off] { border-top: 1px dashed #e4dfe8; border-radius: 0; }
.yw-compset-bar-row[data-off] + .yw-compset-bar-row[data-off] { border-top-style: solid; border-top-color: #f0edf2; }
.yw-compset-bars-priced + .yw-compset-bar-row[data-off] { margin-top: 8px; }
.yw-compset-bar-row[data-off] .yw-compset-bar-name { color: #59535f; }
.yw-compset-bar-word { color: #87818c; font-size: 14px; font-weight: 500; }
.yw-compset-bar-word[data-tone="good"] { color: #2f8a6d; }
.yw-compset-bar-word[data-tone="bad"] { color: #a96883; }
.yw-compset-bar-word[data-tone="accent"] { color: #7433d4; }
/* Our own Sold out (10/10): every room we could sell is sold. Same green as a
   competitor's Sold out word, as a small tag beside your occ and your row. */
.yw-sold-out-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e6f4ee; color: #2f8a6d; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; vertical-align: middle; }

/* A narrow chart (a phone, or the hero beside Your position under 1300):
   each row is two lines, the name whole on the first, the bar and its price
   under it, so no name is cut short. */
.yw-compset-bars { container-type: inline-size; }
@container (max-width: 620px) {
  .yw-compset-bars > * { --bar-photo: 34px; --bar-name: 0px; --bar-gap: 10px; --bar-label: 56px; --bar-pad: 6px; }
  .yw-compset-bars-marks { left: calc(var(--bar-pad) + var(--bar-photo) + var(--bar-gap)); }
  .yw-compset-hero .yw-compset-bar-who.yw-compset-bar-link { grid-template-columns: var(--bar-photo) minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0; padding: 6px 0; }
  .yw-compset-hero .yw-compset-bar-link > .yw-compset-bar-photo { grid-row: 1 / span 2; align-self: center; }
  .yw-compset-hero .yw-compset-bar-link > .yw-compset-bar-name { grid-column: 2; }
  .yw-compset-hero .yw-compset-bar-link > .yw-compset-bar-track { grid-column: 2; height: 24px; }
  .yw-compset-bar-name { font-size: 14px; white-space: normal; }
  .yw-compset-bar-name > span, .yw-compset-bar-name:not(:has(> span)) { overflow: visible; }
  .yw-compset-bar-row[data-off] { grid-template-columns: minmax(0, 1fr) auto; }
  .yw-compset-bar-price { font-size: 14px; }
  /* The marks pass behind each name's letters, never through them. */
  .yw-compset-bar-name > :is(span, em) { position: relative; z-index: 3; padding-right: 3px; background: #fbfbfb; }
  .yw-compset-bar-row[data-you] .yw-compset-bar-name > :is(span, em) { background: #f6f1fb; }
  [data-theme-root].dark .yw-compset-bar-name > :is(span, em) { background: #0d1527; }
  [data-theme-root].dark .yw-compset-bar-row[data-you] .yw-compset-bar-name > :is(span, em) { background: #2f2638; }
}

/* Outside the Pricing root (the public demo tour, src/app/demo/compset)
   none of the page skin reaches the ladder, and the demo page sets white
   text: the hero and its figure keep their ink there. */
.yw-compset-hero:not(.yw-pricing-page *), .yw-compset-position:not(.yw-pricing-page *) { color: #202024; }
.yw-compset-headline:not(.yw-pricing-page *) { font-weight: 500; }

/* ===================================================== Your position == */
.yw-pos-label { color: #59535f; font-size: 13px; }
.yw-pos-label .hw-info-label { text-align: left; }
.yw-pos-rank { margin-top: 16px; }
.yw-pos-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.yw-pos-rank-value { color: #202024; font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
.yw-pos-rank-value > span { margin-left: 4px; color: #a09aa4; font-size: 14px; letter-spacing: -.2px; }
/* 10/07 (owner: "add color like the cheapest one and the expensivest one,
   also have hover animations telling you which one is the most expensive"):
   one slot per hotel, priciest first, the same order as the bars. The
   priciest slot is the house pink, the cheapest the house green, yours the
   violet hatch; a slot lifts on hover or focus and its chip names the hotel,
   its price and its place. */
.yw-pos-strip { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 5px; height: 48px; margin-top: 12px; }
.yw-pos-slot { position: relative; display: block; min-width: 0; border-radius: 10px; outline: none; cursor: default; }
.yw-pos-slot-fill { position: absolute; inset: 0; display: block; border-radius: inherit; background: #eeedf1; transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s cubic-bezier(.2, .8, .2, 1); }
.yw-pos-slot[data-end="top"] .yw-pos-slot-fill { background: #f5d6e3; box-shadow: inset 0 0 0 1px #e9b9cd; }
.yw-pos-slot[data-end="bottom"] .yw-pos-slot-fill { background: #d3efe4; box-shadow: inset 0 0 0 1px #a8dcc8; }
.yw-pos-slot[data-you] .yw-pos-slot-fill { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); box-shadow: 0 4px 12px rgba(124, 58, 237, .22); }
.yw-pos-slot:hover .yw-pos-slot-fill, .yw-pos-slot:focus-visible .yw-pos-slot-fill { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(48, 32, 64, .14); }
.yw-pos-slot[data-end="top"]:is(:hover, :focus-visible) .yw-pos-slot-fill { box-shadow: inset 0 0 0 1px #e9b9cd, 0 8px 18px rgba(200, 95, 132, .22); }
.yw-pos-slot[data-end="bottom"]:is(:hover, :focus-visible) .yw-pos-slot-fill { box-shadow: inset 0 0 0 1px #a8dcc8, 0 8px 18px rgba(39, 152, 118, .2); }
.yw-pos-slot:focus-visible .yw-pos-slot-fill { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-pos-strip-ends { display: flex; justify-content: space-between; margin-top: 7px; color: #a59fab; font-size: 12px; }
/* Not ranked yet (10/10): the strip stays, muted; the rank reads as a word. */
.yw-pos-rank-none { color: #a09aa4; font-size: 14px; font-weight: 400; letter-spacing: -.2px; }
.yw-pos-strip[data-muted] .yw-pos-slot:not([data-you]) .yw-pos-slot-fill { background: #f1eff4; box-shadow: inset 0 0 0 1px #e6e3ea; }
.yw-pos-strip-note { margin: 7px 0 0; color: #a59fab; font-size: 12px; }
.yw-pos-strip-ends > [data-end="top"] { color: #b4547d; }
.yw-pos-strip-ends > [data-end="bottom"] { color: #23805f; }

/* The chips the strip, the bars and the weekly columns show on hover or
   focus: the menu surface, two short lines at most, rising into place. */
.yw-pos-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 30; display: flex; width: max-content; max-width: 230px; align-items: center; gap: 8px; padding: 6px 11px 6px 6px; border: 1px solid #e5ddea; border-radius: 13px; background: #fdfcfe; box-shadow: 0 12px 30px #3a214424, 0 2px 6px #3a21440d; color: #59535f; font-size: 12px; line-height: 1.35; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .18s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.yw-pos-tip[data-edge="start"] { left: 0; transform: translate(0, 5px); }
.yw-pos-tip[data-edge="end"] { right: 0; left: auto; transform: translate(0, 5px); }
:is(.yw-pos-slot, .yw-weeks-col):is(:hover, :focus-visible) > .yw-pos-tip { opacity: 1; transform: translate(-50%, 0); }
:is(.yw-pos-slot, .yw-weeks-col):is(:hover, :focus-visible) > .yw-pos-tip:is([data-edge="start"], [data-edge="end"]) { transform: translate(0, 0); }
.yw-pos-tip > :is(img, div) { flex: 0 0 auto; }
.yw-pos-tip b { color: #202024; font-weight: 500; }
.yw-pos-tip em { font-style: normal; font-weight: 500; }
.yw-pos-slot[data-end="top"] .yw-pos-tip em { color: #b4547d; }
.yw-pos-slot[data-end="bottom"] .yw-pos-tip em { color: #23805f; }
.yw-pos-slot[data-you] .yw-pos-tip em { color: #7433d4; }
.yw-pos-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.yw-pos-fig { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 15px 10px 14px 13px; border-radius: 16px; background: #f4f3f6; }
.yw-pos-fig[data-you] { background: #f6f1fb; }
.yw-pos-fig > .yw-pos-label { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.yw-pos-fig > strong { color: #202024; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.yw-pos-basis { color: #929097; font-size: 12px; }
.yw-compset-page .yw-compset-position .yw-compset-rows { margin-top: 8px; }
.yw-compset-page .yw-compset-position .yw-money-parts .yw-row-stat-value { font-size: 26px; }
.yw-pos-dots { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; }
.yw-pos-dots > i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #e4e1e8; }
.yw-pos-dots > i[data-on] { background: #70b396; }
/* The weekly position is the card's foot chart: it takes the height the
   price chart beside it sets, so the two cards end level with no empty
   floor (10/07). Without it, the rows above spread to fill instead. */
/* 10/07 (owner: "these charts should be improved to be more intuitive"):
   the weekly position keeps a sensible height and says what it draws: its
   0 / 50 / 100 scale behind the columns, each week named under its column,
   the latest one solid, each week's figure in a chip on hover or focus. The
   rows above take the card's spare height instead. */
.yw-pos-weeks { flex: 0 0 auto; padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-pos-weeks .yw-compset-weeks { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.yw-compset-weeks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.yw-pos-weeks .yw-compset-weeks-label { color: #59535f; font-size: 13px; }
.yw-compset-weeks-now { color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
.yw-compset-weeks-now > span { margin-right: 7px; color: #929097; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.yw-weeks-chart { --plot: 96px; position: relative; display: block; padding-left: 30px; }
.yw-weeks-grid { position: absolute; top: 0; right: 0; left: 0; height: var(--plot); pointer-events: none; }
.yw-weeks-grid > i { position: absolute; right: 0; left: 30px; height: 0; border-top: 1px dashed #e7e3ea; }
.yw-weeks-grid > i[data-at="100"] { top: 0; }
.yw-weeks-grid > i[data-at="50"] { top: 50%; }
.yw-weeks-grid > i[data-at="0"] { top: 100%; border-top: 1px solid #d9d4de; }
.yw-weeks-grid > i > b { position: absolute; top: -8px; left: -30px; width: 24px; color: #a59fab; font-size: 12px; font-weight: 400; line-height: 16px; text-align: right; }
.yw-pos-weeks .yw-compset-weeks-cols { position: relative; display: flex; align-items: stretch; gap: 8px; height: auto; }
.yw-weeks-col { position: relative; display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; outline: none; cursor: default; }
.yw-weeks-bar { position: relative; display: block; width: 100%; max-width: 34px; height: var(--plot); }
.yw-weeks-bar > i { position: absolute; right: 0; bottom: 0; left: 0; display: block; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s cubic-bezier(.2, .8, .2, 1); }
.yw-weeks-col[data-latest] .yw-weeks-bar > i { background: #7c3aed; }
.yw-weeks-col:is(:hover, :focus-visible) .yw-weeks-bar > i { box-shadow: 0 6px 14px rgba(124, 58, 237, .25); transform: translateY(-3px); }
.yw-weeks-col:focus-visible .yw-weeks-bar > i { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-weeks-tick { margin-top: 7px; color: #929097; font-size: 12px; white-space: nowrap; }
.yw-weeks-col[data-latest] .yw-weeks-tick { color: #7433d4; font-weight: 500; }
.yw-weeks-tip { bottom: calc(100% + 4px); padding: 6px 11px; }

/* ============================================================ Your set == */
.yw-compset-page .yw-compset-set { margin: 0; }
.yw-compset-set-head { align-items: center; padding: 0 4px; }
.yw-compset-set-night { color: #87818c; font-size: 13px; white-space: nowrap; }
.yw-compset-page :is(.yw-compset-set-head, .yw-compset-card .yw-card-head) .yw-hero-pill { padding: 5px 10px; font-size: 12px; }
/* No 10px flags on this page: every status word reads at 12px. */
.yw-compset-page .yw-money-flag { font-size: 12px; }
.yw-compset-page .yw-compset-set .yw-compset-set-market { margin-top: 14px; }
/* 10/07 (owner: "they are too small ... fix every card size"): four to a
   row at 1440 and 1640, three under 1200, two on a tablet, one on a phone. */
.yw-cc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; margin-top: 14px; }
/* Every row the cards' height, so Add a hotel matches them; while the add
   tile widens to show results its row takes its own height. */
.yw-cc-grid:has(.yw-cc-add :is(.yw-add-pick, .yw-add-matches, .yw-add-line, .yw-add-alert, .yw-add-note, .yw-cc-prefill)) { grid-auto-rows: auto; }
@media (max-width: 1199px) { .yw-cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .yw-cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 559px) { .yw-cc-grid { grid-template-columns: minmax(0, 1fr); } }

/* One hotel: the photo leads, the name on it, the rate under it. */
.yw-cc { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e2e1e4; border-radius: 22px; background: #fbfbfb; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); color: #202024; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.yw-cc:not(.yw-cc-add):hover { border-color: #ddd6e4; box-shadow: 0 12px 30px rgba(48, 32, 64, .09); transform: translateY(-2px); }
.yw-cc[data-you] { border-color: #d7c3f8; background: #fcfaff; }
.yw-cc[data-pending] { box-shadow: 0 0 0 2px #fbfbfb, 0 0 0 4px #b993ff; }
.yw-cc-media { position: relative; }
.yw-compset-page .yw-cc-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #eeedf1; text-align: left; cursor: pointer; }
div.yw-cc-photo { cursor: default; }
.yw-cc-photo > div:first-child { aspect-ratio: 16 / 10; }
.yw-cc-photo img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.yw-cc:hover .yw-cc-photo img { transform: scale(1.035); }
.yw-compset-page .yw-cc-photo:focus-visible { outline: 2px solid #8a45f0; outline-offset: -3px; }
.yw-cc-caption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; padding: 24px 16px 12px; pointer-events: none; }
.yw-cc-name { display: block; overflow: hidden; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.25px; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); white-space: nowrap; }
.yw-cc-name { font-size: 16px; }

/* A hotel with no photo: its initials on a calm violet-grey ground, not a
   block of the bright accent (CompPhoto's own fallback stays as it is
   wherever else it renders). */
:is(.yw-cc-photo, .yw-cs-sug-photo, .yw-cs-watch-photo) [class~="bg-violet-600"],
.yw-compset-page div[class~="rounded-full"][class~="bg-violet-600"] { background: linear-gradient(150deg, #c9bce0 0%, #9a88bd 100%); }
:is(.yw-cc-photo, .yw-cs-sug-photo, .yw-cs-watch-photo) > div > span[class~="z-10"] { color: rgba(255, 255, 255, .92); font-size: 34px; font-weight: 500; letter-spacing: -.02em; }

/* The marks on the photo: how old the read is (its sentence the hover),
   the review score, and You. */
.yw-cc-mark-at { position: absolute; top: 10px; left: 10px; z-index: 2; }
.yw-cc-mark { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding: 0 9px 0 8px; border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); color: #343039; font-size: 12px; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.yw-cc-mark > i { display: block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #2f8a6d; }
.yw-cc-mark[data-tone="watch"] > i { background: #c99a52; }
.yw-cc-mark-at .hw-info-label:hover .yw-cc-mark, .yw-cc-mark-at .hw-info-label[aria-expanded="true"] .yw-cc-mark { color: #7433d4; }
.yw-cc-rating { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; height: 24px; align-items: center; gap: 4px; padding: 0 9px 0 7px; border-radius: 12px; background: rgba(32, 32, 36, .5); color: #fff; font-size: 12px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.yw-cc-rating > svg { width: 12px; height: 12px; fill: #f2c46d; }
.yw-cc-you { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; height: 24px; align-items: center; padding: 0 10px; border-radius: 12px; background: #7c3aed; box-shadow: 0 3px 10px rgba(124, 58, 237, .32); color: #fff; font-size: 12px; font-weight: 500; }

/* The body: the rate at card size and the gap to you as one pill. */
.yw-cc-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 15px 16px 14px; }
.yw-cc-rate-row { display: flex; min-height: 34px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.yw-cc-rate { color: #202024; font-size: 27px; font-weight: 500; line-height: 1.15; letter-spacing: -.8px; white-space: nowrap; }
.yw-cc-none { color: #87818c; font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
.yw-cc-none[data-tone="good"] { color: #2f8a6d; }
.yw-cc-none[data-tone="bad"] { color: #a96883; }
.yw-cc-none[data-tone="accent"] { color: #7433d4; }
.yw-cc-none[data-tone="watch"] { color: #9a805f; }
.yw-cc-gap { display: inline-flex; height: 27px; align-items: center; padding: 0 11px; border-radius: 14px; background: #eeeded; color: #59535f; font-size: 13px; font-weight: 500; white-space: nowrap; }
.yw-cc-gap[data-dir="above"] { background: #f1eafc; color: #7433d4; }
.yw-cc-gap[data-dir="below"] { background: #fbf0f4; color: #a96883; }
.yw-cc .yw-cc-peer { align-self: flex-start; max-width: 100%; padding: 0; border-radius: 0; background: transparent; color: #7433d4; font-size: 13px; font-weight: 500; }

/* The foot: the price trend and the positioning for this night. */
.yw-cc-trend { display: flex; width: 100%; min-width: 0; height: 36px; align-items: flex-end; gap: 2px; overflow: hidden; margin-top: 2px; cursor: default; }
.yw-cc-trend > i { display: block; min-width: 0; flex: 1 1 0; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-cc-trend-gap { display: flex; height: 36px; align-items: center; margin-top: 2px; color: #a59fab; font-size: 13px; }
/* Positioning for this night: one full-width line, the day class (its
   relevance dot) on the left, the setting and the pencil on the right. */
.yw-cc-foot { display: flex; align-items: center; margin-top: auto; padding-top: 8px; border-top: 1px solid #eae8ec; }
.yw-compset-page .yw-cc-pos { display: block; width: calc(100% + 16px); min-width: 0; margin: 0 -8px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.yw-compset-page .yw-cc-pos:focus-visible { outline: 2px solid #8a45f0; outline-offset: 2px; }
.yw-cc-pos-inner { display: flex; min-width: 0; height: 34px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px; border-radius: 10px; color: #59535f; white-space: nowrap; transition: background-color .16s; }
.yw-cc-pos:hover .yw-cc-pos-inner { background: #eeeded; }
.yw-cc-pos-day { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #87818c; font-size: 12px; }
.yw-cc-pos-day > span { overflow: hidden; text-overflow: ellipsis; }
.yw-cc-pos-line { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; font-size: 13px; }
.yw-cc-pos-value { color: #202024; font-weight: 500; }
.yw-cc-pos-set { color: #7433d4; font-weight: 500; }
.yw-cc-pos-edit { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: #a59fab; stroke-width: 1.4; stroke-linejoin: round; }
.yw-cc-pos:hover .yw-cc-pos-edit { stroke: #7c3aed; }
.yw-cc-pos-day > .yw-comp-pos-dot[data-band="high"] { background: #7c3aed; }
.yw-cc-pos-day > .yw-comp-pos-dot[data-band="medium"] { background: #b993ff; }
.yw-cc-pos-day > .yw-comp-pos-dot[data-band="low"] { background: #d6d2da; }
.yw-cc-pos-day > .yw-comp-pos-dot[data-band="off"] { background: transparent; box-shadow: inset 0 0 0 1px #c3bdc8; }
/* Your card: your occupancy where a competitor's trend sits. */
.yw-cc-you-foot { padding: 0; }
.yw-cc-occ-row { display: flex; height: 36px; align-items: center; gap: 12px; margin-top: 2px; }
.yw-cc-occ { position: relative; display: block; height: 10px; flex: 1 1 auto; overflow: hidden; border-radius: 5px; background: #eeedf1; }
.yw-cc-occ > i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(125deg, #9161df 0 2px, #dcccfa 2px 4px); }
.yw-cc-occ-value { flex: 0 0 auto; color: #59535f; font-size: 13px; white-space: nowrap; }

/* A card whose night has no price: no lift, the photo calm. */
.yw-cc[data-status="unreadable"] .yw-cc-photo img, .yw-cc[data-status="quota"] .yw-cc-photo img { opacity: .75; }

/* Add a hotel: the last tile, dashed, the search in it. It widens to the
   whole row while it shows a pick, results or a note. */
.yw-cc-add { justify-content: space-between; gap: 14px; overflow: visible; padding: 18px 16px 16px; border-style: dashed; border-color: #d9cfe3; background: #fbfbfb; box-shadow: none; }
.yw-cc-add:has(.yw-add-pick, .yw-add-matches, .yw-add-line, .yw-add-alert, .yw-add-note, .yw-cc-prefill) { grid-column: 1 / -1; justify-content: flex-start; }
.yw-cc-add-head { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 96px; text-align: center; }
.yw-cc-add:has(.yw-add-pick, .yw-add-matches, .yw-add-line, .yw-add-alert, .yw-add-note, .yw-cc-prefill) .yw-cc-add-head { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; min-height: 0; }
.yw-cc-add-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #f1eafc; color: #7c3aed; font-size: 24px; font-weight: 400; line-height: 1; }
.yw-cc-add-title { color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.25px; }
.yw-compset-page .yw-cc-add .yw-compset-add { margin-top: 0; }
.yw-cc-add .yw-add > form > label { min-width: 0; }
.yw-cc-add .yw-add > form { flex-wrap: nowrap; align-items: center; }
/* No typeahead: the search button is the form's own, under the input. */
.yw-cc-add .yw-add > form:has(> button) { flex-wrap: wrap; }
.yw-cc-add .yw-add > form:has(> button) > label { flex: 1 1 100%; }
.yw-cc-add .yw-add > form > button { width: 100%; }
.yw-cc-add:has(.yw-add-pick, .yw-add-matches, .yw-add-line, .yw-add-alert, .yw-add-note, .yw-cc-prefill) .yw-add > form { max-width: 560px; }
.yw-cc-add .yw-add > form > .relative { margin-bottom: 0; }
.yw-cc-add .yw-add > form > span > .hw-info-trigger { margin: 0; }
.yw-cc-add .yw-add > form button[class~="bg-violet-600"] { flex: 0 0 auto; height: 40px; padding: 0 14px; border-radius: 12px; background-color: #7c3aed; font-size: 13px; font-weight: 500; white-space: nowrap; }
.yw-cc-add .yw-add-matches, .yw-cc-add .yw-add-pick { margin-top: 4px; }
.yw-cc-prefill { margin-top: 4px; }

/* ===================================================== the lists below == */
/* Suggested: a strip of photo tiles that scrolls sideways in its card. */
.yw-cs-strip { display: flex; gap: 14px; margin: 14px -4px 0; padding: 2px 4px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #ddd2e7 transparent; }
.yw-cs-sug { display: flex; min-width: 0; flex: 0 0 252px; flex-direction: column; overflow: hidden; border-radius: 18px; background: #f4f3f6; scroll-snap-align: start; }
.yw-cs-sug-photo { position: relative; }
.yw-cs-sug-photo > div:first-child { aspect-ratio: 16 / 10; }
.yw-cs-sug-rate { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: 13px; background: rgba(255, 255, 255, .9); color: #202024; font-size: 13px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.yw-cs-sug-caption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: block; padding: 22px 13px 10px; }
.yw-cs-sug-name { display: block; max-width: 100%; overflow: hidden; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.2px; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); white-space: nowrap; }
.yw-cs-sug-name > .hw-info-label { display: block; max-width: 100%; overflow: hidden; color: #fff; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.yw-cs-sug-name > .hw-info-label:hover, .yw-cs-sug-name > .hw-info-label[aria-expanded="true"] { color: #efe6ff; }
.yw-cs-sug-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 11px 12px 12px; }
.yw-cs-sug-line { overflow: hidden; color: #87818c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.yw-cs-sug-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.yw-cs-sug-meta .yw-money-flag { font-size: 12px; }
.yw-cs-sug .yw-cs-sug-peer { max-width: 100%; padding: 0; border-radius: 0; background: transparent; color: #7433d4; font-size: 12px; font-weight: 500; }
.yw-compset-page .yw-cs-sug-moves { justify-content: flex-start; margin-top: auto; padding-top: 6px; }
.yw-cs-sug .yw-match-moves :is(button, a):not([class~="bg-violet-600"]) { background: #fff; }
.yw-cs-sug .yw-match-moves :is(button, a):not([class~="bg-violet-600"]):hover { background: #ece8f0; }

/* Watching: a grid of small photo cards in the card. */
.yw-cs-watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; gap: 12px; margin-top: 14px; }
.yw-cs-watch { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 2px 12px; padding: 12px; border-radius: 16px; background: #f4f3f6; }
.yw-cs-watch-photo { display: block; grid-row: 1 / span 2; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; }
.yw-cs-watch-photo > div { aspect-ratio: 1 / 1; height: 100%; }
.yw-cs-watch-photo > div > span[class~="z-10"] { font-size: 18px; }
.yw-cs-watch-copy .yw-match-line { font-size: 12.5px; }
.yw-compset-page .yw-cs-watch > .yw-match-moves { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
.yw-cs-watch .yw-match-moves :is(button, a) { height: 28px; padding: 0 11px; background: #fff; }
.yw-cs-watch .yw-match-moves :is(button, a):hover { background: #ece8f0; }
.yw-cs-watch .yw-match-moves :is(button, a).yw-match-accent { background: #f1eafc; }

/* ---------------------------------------------------------- narrower -- */
@media (max-width: 1100px) {
  .yw-compset-page .yw-compset-hero { min-height: 0; }
}
@media (max-width: 700px) {
  .yw-compset-hero .yw-compset-headline { font-size: 34px; }
  .yw-compset-headline-tail { font-size: 19px; }
  .yw-cc-add .yw-add > form { flex-wrap: wrap; }
  .yw-cs-watch-grid { grid-template-columns: minmax(0, 1fr); }
  .yw-compset-when-menu { min-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .yw-cc, .yw-cc-photo img, .yw-compset-when-caret, .yw-cc-pos-inner { transition: none; }
  .yw-cc:not(.yw-cc-add):hover { transform: none; }
  .yw-cc:hover .yw-cc-photo img { transform: none; }
}

/* --------------------------------------------------------------- dark -- */
/* The warm dark palette: card #2a2a30 / border #414148, raised #35353c,
   ink #f3eef8, body #c3b9cc, muted #a297ab, violet text #c5a8ff. */
[data-theme-root].dark .yw-compset-clock-face { color: #a297ab; }
[data-theme-root].dark .yw-compset-clock .hw-info-label:hover .yw-compset-clock-face { color: #c5a8ff; }
[data-theme-root].dark .yw-compset-page .yw-compset-when-trigger { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-compset-page .yw-compset-when-trigger:hover, [data-theme-root].dark .yw-compset-page .yw-compset-when-trigger[aria-expanded="true"] { background: #1c2843; }
[data-theme-root].dark .yw-compset-when-caret { border-color: #a297ab; }
[data-theme-root].dark .yw-compset-when-menu { border-color: #1c2843; background: #0d1527; box-shadow: 0 15px 45px #00000066, 0 3px 9px #00000033; }
[data-theme-root].dark .yw-compset-page .yw-compset-when-option { color: #d9d2e3; }
[data-theme-root].dark .yw-compset-page .yw-compset-when-option:hover { background: #142036; }
[data-theme-root].dark .yw-compset-page .yw-compset-when-option[data-active] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-compset-headline-tail { color: #c3b9cc; }
[data-theme-root].dark .yw-compset-bars-mark::after { background: #d9d2e3; }
[data-theme-root].dark .yw-compset-bars-mark[data-kind="aim"]::after { background: #a883ee; }
[data-theme-root].dark .yw-compset-bar-row[data-you] { background: #2f2638; }
[data-theme-root].dark :is(.yw-compset-bar-name, .yw-compset-bar-price) { color: #f3eef8; }
[data-theme-root].dark .yw-compset-bar-price { background: #0d1527; }
[data-theme-root].dark .yw-compset-bar-row[data-you] .yw-compset-bar-price { background: #2f2638; }
[data-theme-root].dark .yw-compset-weeks-now { color: #f3eef8; }
[data-theme-root].dark .yw-compset-bar-name > em { color: #c5a8ff; }
[data-theme-root].dark .yw-compset-bar { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-compset-bar-row[data-you] .yw-compset-bar { background: #a883ee; }
[data-theme-root].dark .yw-compset-bar-row[data-off] { border-top-color: #1c2843; }
[data-theme-root].dark .yw-compset-bar-row[data-off] .yw-compset-bar-name { color: #c3b9cc; }
[data-theme-root].dark .yw-compset-bar-word { color: #a297ab; }
[data-theme-root].dark .yw-compset-bar-word[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark .yw-compset-bar-word[data-tone="bad"] { color: #e69ac4; }
[data-theme-root].dark .yw-compset-bar-word[data-tone="accent"] { color: #c9b1ff; }
[data-theme-root].dark .yw-sold-out-tag { background: #12352b; color: #7fd3b4; }

[data-theme-root].dark .yw-pos-label { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-pos-rank-value, .yw-pos-fig > strong) { color: #f3eef8; }
[data-theme-root].dark .yw-pos-rank-value > span, [data-theme-root].dark .yw-pos-basis, [data-theme-root].dark .yw-pos-strip-ends { color: #a297ab; }
[data-theme-root].dark .yw-pos-slot-fill { background: #142036; }
[data-theme-root].dark :is(.yw-pos-rank-none, .yw-pos-strip-note) { color: #a297ab; }
[data-theme-root].dark .yw-pos-strip[data-muted] .yw-pos-slot:not([data-you]) .yw-pos-slot-fill { background: #111b30; box-shadow: inset 0 0 0 1px #1c2843; }
[data-theme-root].dark .yw-pos-slot[data-you] .yw-pos-slot-fill { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); box-shadow: none; }
[data-theme-root].dark .yw-pos-fig { background: #142036; }
[data-theme-root].dark .yw-pos-fig[data-you] { background: #2f2638; }
[data-theme-root].dark .yw-pos-dots > i { background: #1c2843; }
[data-theme-root].dark .yw-pos-dots > i[data-on] { background: #5fae8f; }
[data-theme-root].dark .yw-pos-weeks { border-top-color: #1c2843; }
[data-theme-root].dark .yw-pos-weeks .yw-compset-weeks-label { color: #c3b9cc; }

[data-theme-root].dark .yw-compset-set-night { color: #a297ab; }
[data-theme-root].dark :is(.yw-cc-photo, .yw-cs-sug-photo, .yw-cs-watch-photo) [class~="bg-violet-600"],
[data-theme-root].dark .yw-compset-page div[class~="rounded-full"][class~="bg-violet-600"] { background: linear-gradient(150deg, #5d4f78 0%, #3c3250 100%); }
[data-theme-root].dark .yw-cc { border-color: #1c2843; background: #0d1527; color: #f3eef8; }
[data-theme-root].dark .yw-cc:not(.yw-cc-add):hover { border-color: #273656; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
[data-theme-root].dark .yw-cc[data-you] { border-color: #5b4682; background: #2d2835; }
[data-theme-root].dark .yw-cc[data-pending] { box-shadow: 0 0 0 2px #0d1527, 0 0 0 4px #8a6bc4; }
[data-theme-root].dark .yw-compset-page .yw-cc-photo { background: #142036; }
[data-theme-root].dark .yw-cc-mark { background: rgba(13, 21, 39, .88); color: #f3eef8; }
[data-theme-root].dark .yw-cc-mark-at .hw-info-label:hover .yw-cc-mark, [data-theme-root].dark .yw-cc-mark-at .hw-info-label[aria-expanded="true"] .yw-cc-mark { color: #c5a8ff; }
[data-theme-root].dark .yw-cc-mark > i { background: #7fd3b4; }
[data-theme-root].dark .yw-cc-mark[data-tone="watch"] > i { background: #e6bd7f; }
[data-theme-root].dark .yw-cc-rate { color: #f3eef8; }
[data-theme-root].dark .yw-cc-none { color: #a297ab; }
[data-theme-root].dark .yw-cc-none[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark .yw-cc-none[data-tone="bad"] { color: #e69ac4; }
[data-theme-root].dark .yw-cc-none[data-tone="accent"] { color: #c9b1ff; }
[data-theme-root].dark .yw-cc-none[data-tone="watch"] { color: #e6bd7f; }
[data-theme-root].dark .yw-cc-gap { background: #142036; color: #c3b9cc; }
[data-theme-root].dark .yw-cc-gap[data-dir="above"] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-cc-gap[data-dir="below"] { background: #3a2a31; color: #f0b8d2; }
[data-theme-root].dark .yw-cc .yw-cc-peer, [data-theme-root].dark .yw-cs-sug .yw-cs-sug-peer { background: transparent; color: #c9b1ff; }
[data-theme-root].dark .yw-cc-foot { border-top-color: #1c2843; }
[data-theme-root].dark .yw-cc-trend-gap { color: #8f8996; }
[data-theme-root].dark .yw-cc-trend > i { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-cc-pos-inner { color: #c3b9cc; }
[data-theme-root].dark .yw-cc-pos:hover .yw-cc-pos-inner { background: #142036; }
[data-theme-root].dark .yw-cc-pos-day { color: #a297ab; }
[data-theme-root].dark .yw-cc-pos-value { color: #f3eef8; }
[data-theme-root].dark .yw-cc-pos-set { color: #c9b1ff; }
[data-theme-root].dark .yw-cc-pos-edit { stroke: #8f8996; }
[data-theme-root].dark .yw-cc-pos:hover .yw-cc-pos-edit { stroke: #c5a8ff; }
[data-theme-root].dark .yw-cc-pos-day > .yw-comp-pos-dot[data-band="high"] { background: #a883ee; }
[data-theme-root].dark .yw-cc-pos-day > .yw-comp-pos-dot[data-band="medium"] { background: #7d63a8; }
[data-theme-root].dark .yw-cc-pos-day > .yw-comp-pos-dot[data-band="low"] { background: #5b5663; }
[data-theme-root].dark .yw-cc-occ { background: #142036; }
[data-theme-root].dark .yw-cc-occ > i { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-cc-occ-value { color: #c3b9cc; }
[data-theme-root].dark .yw-cc-add { border-color: #4d4556; background: #0d1527; }
[data-theme-root].dark .yw-cc-add-mark { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-cc-add-title { color: #f3eef8; }

[data-theme-root].dark .yw-cs-strip { scrollbar-color: #273656 transparent; }
[data-theme-root].dark :is(.yw-cs-sug, .yw-cs-watch) { background: #142036; }
[data-theme-root].dark .yw-cs-sug-rate { background: rgba(13, 21, 39, .88); color: #f3eef8; }
[data-theme-root].dark .yw-cs-sug-line { color: #a297ab; }
[data-theme-root].dark :is(.yw-cs-sug, .yw-cs-watch) .yw-match-moves :is(button, a):not([class~="bg-violet-600"]) { background: #0d1527; color: #f3eef8; }
[data-theme-root].dark :is(.yw-cs-sug, .yw-cs-watch) .yw-match-moves :is(button, a):not([class~="bg-violet-600"]):hover { background: #1c2843; }
[data-theme-root].dark .yw-cs-watch .yw-match-moves :is(button, a).yw-match-accent { background: #3f2d5c; color: #c9b1ff; }

/* 10/07 (owner: "these hotels and their images are still too small"): the
   ranked bar chart's rows grow. Photos are 52px rounded squares (a hotel
   reads better as a picture than as a coin), names 16px, prices 17px, bars
   18px thick, rows 62px tall. The narrow two-line layout (the @container rule
   above) sets its own sizes on the rows and keeps them. */
.yw-compset-bars { --bar-photo: 52px; --bar-name: 268px; --bar-gap: 14px; --bar-label: 74px; }
.yw-compset-bar-row, .yw-compset-hero .yw-compset-bar-who { min-height: 62px; }
.yw-compset-bar-track { height: 62px; }
.yw-compset-bar-photo, .yw-compset-bar-photo > :is(img, div) { border-radius: 14px; }
.yw-compset-bar-name { font-size: 16px; letter-spacing: -.25px; }
.yw-compset-bar-name > em { font-size: 13px; }
.yw-compset-bar { height: 18px; border-radius: 5px 9px 9px 5px; }
.yw-compset-bar-price { font-size: 17px; }
.yw-compset-bar-word { font-size: 15px; }
.yw-compset-bar-row { border-radius: 16px; }

/* 10/07 (owner: "there is still a little gap or blank space ... on top of the
   crescent hotel and the aim card"): the median and aim marks carry no label
   at the chart's top any more (the status row names them, each pill with a
   small mark in its line's colour), so the chart starts at its first row and
   the lines run its full height. */
.yw-compset-bars { margin-top: 14px; }
.yw-compset-bars-priced { padding-top: 0 !important; }
.yw-compset-key { display: inline-flex; align-items: center; gap: 6px; }
.yw-compset-key > i { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: #59535f; opacity: .6; }
.yw-compset-key[data-kind="aim"] > i { background: #7c3aed; opacity: .85; }
[data-theme-root].dark .yw-compset-key > i { background: #c3b9cc; }
[data-theme-root].dark .yw-compset-key[data-kind="aim"] > i { background: #b993ff; }

/* 10/07 (owner: "the median and aim should be at the top of the lines"):
   each mark's name sits at the top end of its line, riding in the band of
   the status row above the chart (which is short and left-aligned), so the
   chart keeps no band of its own over its first hotel. The line starts just
   under its name. The lower value's name sits on its line's left and the
   higher on its right, so two close marks never collide. */
.yw-compset-bars-mark::after { top: -12px; }
.yw-compset-hero .yw-hero-status { min-height: 30px; }
.yw-compset-hero .yw-hero-status > .yw-hero-muted { max-width: 300px; }
.yw-compset-bars-tops { position: absolute; top: -36px; right: calc(var(--bar-pad) + var(--bar-label)); left: calc(var(--bar-pad) + var(--bar-photo) + var(--bar-name) + var(--bar-gap) * 2); z-index: 5; height: 22px; pointer-events: none; }
.yw-compset-bars-top { position: absolute; top: 0; left: calc(var(--at) * 100%); display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border-radius: 11px; background: #eeeded; color: #343039; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: auto; }
.yw-compset-bars-top[data-side="left"] { transform: translateX(calc(-100% - 1px)); border-bottom-right-radius: 3px; }
.yw-compset-bars-top[data-side="right"] { transform: translateX(1px); border-bottom-left-radius: 3px; }
.yw-compset-bars-top[data-kind="aim"] { background: #f1eafc; color: #7433d4; }
.yw-compset-bars-top .hw-info-label { color: inherit; font: inherit; }
[data-theme-root].dark .yw-compset-bars-top { background: #142036; color: #e6e0ee; }
[data-theme-root].dark .yw-compset-bars-top[data-kind="aim"] { background: #3a2c57; color: #d7c3ff; }
@container (max-width: 620px) {
  /* A narrow chart has no free band beside its status row: it gets a short
     one of its own for the two names. */
  .yw-compset-bars-priced[data-marks] { margin-top: 30px; }
  .yw-compset-bars-tops { top: -30px; left: calc(var(--bar-pad) + var(--bar-photo) + var(--bar-gap)); }
}

/* 10/07 (owner: "add color like the cheapest one and the expensivest one,
   also have hover animations telling you which one is the most expensive"):
   the priciest bar in the house pink hatch, the cheapest in the house green,
   yours solid violet; a row lifts on hover or focus and a chip over its price
   says where it sits and its gap to you. */
.yw-compset-bar-row { position: relative; transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s cubic-bezier(.2, .8, .2, 1), background-color .16s ease; }
.yw-compset-bar-row:not([data-off]):is(:hover, :focus-within) { z-index: 4; background: #fff; box-shadow: 0 8px 22px rgba(48, 32, 64, .1); transform: translateY(-2px); }
.yw-compset-bar-row[data-you]:is(:hover, :focus-within) { background: #f3ecfc; }
.yw-compset-bar-row:not([data-off]):is(:hover, :focus-within) .yw-compset-bar-price { background: #fff; }
.yw-compset-bar-row[data-you]:is(:hover, :focus-within) .yw-compset-bar-price { background: #f3ecfc; }
.yw-compset-bar-row[data-end="top"]:not([data-you]) .yw-compset-bar { background: repeating-linear-gradient(125deg, #c85f84 0 2px, #f6d3e2 2px 4px); }
.yw-compset-bar-row[data-end="bottom"]:not([data-you]) .yw-compset-bar { background: repeating-linear-gradient(125deg, #279876 0 2px, #c9ecdf 2px 4px); }
.yw-compset-bar-tip { position: absolute; right: -2px; bottom: calc(100% + 9px); z-index: 6; display: inline-flex; height: 28px; align-items: center; padding: 0 11px; border: 1px solid #e5ddea; border-radius: 14px; background: #fdfcfe; box-shadow: 0 12px 30px #3a214424, 0 2px 6px #3a21440d; color: #59535f; font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .18s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.yw-compset-bar-tip > b { margin-right: 4px; color: #202024; font-weight: 500; }
.yw-compset-bar-row[data-end="top"] .yw-compset-bar-tip > b { color: #b4547d; }
.yw-compset-bar-row[data-end="bottom"] .yw-compset-bar-tip > b { color: #23805f; }
.yw-compset-bar-row[data-you] .yw-compset-bar-tip > b { color: #7433d4; }
.yw-compset-bar-row:is(:hover, :focus-within) .yw-compset-bar-tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .yw-compset-bar-row, .yw-compset-bar-tip, .yw-pos-slot-fill, .yw-pos-tip, .yw-weeks-bar > i { transition: none; }
  .yw-compset-bar-row:is(:hover, :focus-within), .yw-pos-slot:is(:hover, :focus-visible) .yw-pos-slot-fill, .yw-weeks-col:is(:hover, :focus-visible) .yw-weeks-bar > i { transform: none; }
}
[data-theme-root].dark .yw-compset-bar-row:not([data-off]):is(:hover, :focus-within) { background: #111b30; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
[data-theme-root].dark .yw-compset-bar-row[data-you]:is(:hover, :focus-within) { background: #362b44; }
[data-theme-root].dark .yw-compset-bar-row:not([data-off]):is(:hover, :focus-within) .yw-compset-bar-price { background: #111b30; }
[data-theme-root].dark .yw-compset-bar-row[data-you]:is(:hover, :focus-within) .yw-compset-bar-price { background: #362b44; }
[data-theme-root].dark .yw-compset-bar-row[data-end="top"]:not([data-you]) .yw-compset-bar { background: repeating-linear-gradient(125deg, #e08aaf 0 2px, #4d3345 2px 4px); }
[data-theme-root].dark .yw-compset-bar-row[data-end="bottom"]:not([data-you]) .yw-compset-bar { background: repeating-linear-gradient(125deg, #5fc19e 0 2px, #24443a 2px 4px); }
[data-theme-root].dark :is(.yw-compset-bar-tip, .yw-pos-tip) { border-color: #1c2843; background: #0d1527; box-shadow: 0 12px 30px #00000066, 0 2px 6px #00000033; color: #c3b9cc; }
[data-theme-root].dark :is(.yw-compset-bar-tip > b, .yw-pos-tip b) { color: #f3eef8; }
[data-theme-root].dark .yw-compset-bar-row[data-end="top"] .yw-compset-bar-tip > b, [data-theme-root].dark .yw-pos-slot[data-end="top"] .yw-pos-tip em, [data-theme-root].dark .yw-pos-strip-ends > [data-end="top"] { color: #f0b8d2; }
[data-theme-root].dark .yw-compset-bar-row[data-end="bottom"] .yw-compset-bar-tip > b, [data-theme-root].dark .yw-pos-slot[data-end="bottom"] .yw-pos-tip em, [data-theme-root].dark .yw-pos-strip-ends > [data-end="bottom"] { color: #7fd3b4; }
[data-theme-root].dark .yw-compset-bar-row[data-you] .yw-compset-bar-tip > b, [data-theme-root].dark .yw-pos-slot[data-you] .yw-pos-tip em { color: #c9b1ff; }
[data-theme-root].dark .yw-pos-slot[data-end="top"] .yw-pos-slot-fill { background: #4d3345; box-shadow: inset 0 0 0 1px #6b4560; }
[data-theme-root].dark .yw-pos-slot[data-end="bottom"] .yw-pos-slot-fill { background: #24443a; box-shadow: inset 0 0 0 1px #2f5c4d; }
[data-theme-root].dark .yw-weeks-grid > i { border-top-color: #17243d; }
[data-theme-root].dark .yw-weeks-grid > i[data-at="0"] { border-top-color: #273656; }
[data-theme-root].dark .yw-weeks-grid > i > b, [data-theme-root].dark .yw-weeks-tick, [data-theme-root].dark .yw-compset-weeks-now > span { color: #8f8996; }
[data-theme-root].dark .yw-weeks-bar > i { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-weeks-col[data-latest] .yw-weeks-bar > i { background: #a883ee; }
[data-theme-root].dark .yw-weeks-col[data-latest] .yw-weeks-tick { color: #c5a8ff; }

/* 10/07 (owner: "this filter should be an universal filter like the one we
   have on the top header in other tabs"): the night picker in the page
   header (compset/page.tsx), one white header control holding the arrows and
   the night, the same surface as the period control on Money and Get Found. */
.yw-compset-header-picker .yw-compset-picker { flex-wrap: nowrap; gap: 2px; padding: 3px; border: 1px solid #e8e6e9; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px #00000009; }
.yw-compset-header-picker .yw-compset-arrow { width: 31px; height: 31px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; }
.yw-compset-header-picker .yw-compset-arrow:hover:not(:disabled) { background: #f4f2f6; }
.yw-compset-header-picker .yw-compset-when-trigger { height: 31px; padding: 0 10px 0 12px; border-radius: 9px; background: transparent; font-size: 12.5px; }
.yw-compset-header-picker .yw-compset-when-trigger:hover, .yw-compset-header-picker .yw-compset-when-trigger[aria-expanded="true"] { background: #f4f2f6; }
.yw-compset-header-picker .yw-compset-when-menu { z-index: 80; }
[data-theme-root].dark .yw-compset-header-picker .yw-compset-picker { border-color: #1c2843; background: #0b1122; box-shadow: none; }
[data-theme-root].dark .yw-compset-header-picker .yw-compset-arrow:hover:not(:disabled),
[data-theme-root].dark .yw-compset-header-picker .yw-compset-when-trigger:hover,
[data-theme-root].dark .yw-compset-header-picker .yw-compset-when-trigger[aria-expanded="true"] { background: #142036; }
[data-theme-root].dark .yw-compset-header-picker .yw-compset-when-trigger { background: transparent; }

/* 10/07 (owner: "also forest springs bar should be the only one purple the
   other ones that arent expensive or cheapest should be grey"): a comp's bar
   is the house grey hatch; the priciest keeps its pink and the cheapest its
   green (the rules above), and only your own bar is violet. */
.yw-compset-bar-row:not([data-you]):not([data-end]) .yw-compset-bar { background: repeating-linear-gradient(125deg, #a6a0ac 0 2px, #e2dee6 2px 4px); }
[data-theme-root].dark .yw-compset-bar-row:not([data-you]):not([data-end]) .yw-compset-bar { background: repeating-linear-gradient(125deg, #8a8491 0 2px, #18253e 2px 4px); }

/* ================================================== the hotel pop-up == */
/* 10/07 (owner: "this modal still uses the old ui design, it needs proper new
   design style, also animations and fonts and font sizes. everything also it
   needs to be a bit translucent like the whole vibe we are going for with
   this design modals. lets fix it no ai slop"). The pop-up (comp-card-modal.tsx)
   wears the frosted surface of the period and title menus: warm white a
   little see-through over a blurred page, a hairline, a soft deep shadow,
   radius 24, rising in with the house motion over a soft blurred dim. These
   rules are global on purpose: Rates Setup's competitor pop-up and the
   onboarding step open this same pop-up outside /compset, and it must read
   the same there. Sizes: the name 23px on the photo, section titles 17px,
   labels 13px, values 15-17px, nothing under 12px. */
@keyframes yw-comp-modal-in { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes yw-comp-modal-dim { from { opacity: 0; } to { opacity: 1; } }
/* Centred by the dialog's own inset and auto margin, not a translate: a
   transformed dialog would become the box its hovers (fixed InfoDot panels
   portaled into it) measure from, and they would open in the wrong place. */
.yw-comp-modal { inset: 0; height: fit-content; max-height: calc(100dvh - 32px); margin: auto; translate: none; }
.yw-comp-modal { max-width: 600px; border: 1px solid rgba(229, 221, 234, .9); border-radius: 24px; background: rgba(253, 252, 254, .9); box-shadow: 0 32px 80px rgba(48, 24, 72, .24), 0 6px 18px rgba(48, 24, 72, .08); color: #202024; font-family: var(--font-geist-sans), Geist, system-ui, sans-serif; letter-spacing: -.2px; animation: yw-comp-modal-in .34s cubic-bezier(.2, .8, .2, 1) both; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .yw-comp-modal { background: rgba(253, 252, 254, .8); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); }
}
.yw-comp-modal::backdrop { background: rgba(28, 20, 38, .34); -webkit-backdrop-filter: blur(6px) saturate(110%); backdrop-filter: blur(6px) saturate(110%); animation: yw-comp-modal-dim .3s ease both; }

/* The photo: the name on it, the night's rate as a glass chip, Remove and
   Close as round glass buttons. */
.yw-comp-modal header > div:first-child { height: 184px; }
.yw-comp-modal-name { font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -.6px; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.yw-comp-modal-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; color: rgba(255, 255, 255, .88); font-size: 12px; }
.yw-comp-modal-meta > span + span::before { content: "·"; margin-right: 10px; color: rgba(255, 255, 255, .6); }
.yw-comp-modal .yw-comp-modal-rate { padding: 8px 13px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 15px; background: rgba(255, 255, 255, .16); box-shadow: none; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.yw-comp-modal .yw-comp-modal-rate > div:first-child { font-size: 19px; font-weight: 500; letter-spacing: -.4px; }
.yw-comp-modal .yw-comp-modal-rate > div + div { color: rgba(255, 255, 255, .85); font-size: 12px; }
.yw-comp-modal-glass { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); transition: background-color .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
.yw-comp-modal-glass > svg { width: 16px; height: 16px; }
.yw-comp-modal-glass:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); }
.yw-comp-modal-glass[data-tone="bad"]:hover { border-color: transparent; background: rgba(200, 95, 132, .9); }
.yw-comp-modal-glass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Remove: one soft pink bar, the house pink button. */
.yw-comp-modal .yw-comp-modal-confirm { gap: 10px; padding: 12px 20px; border-bottom: 1px solid rgba(200, 95, 132, .2); background: rgba(251, 240, 244, .82); color: #7e4560; font-size: 13px; }
.yw-comp-modal .yw-comp-modal-confirm button[type="submit"] { height: 32px; padding: 0 14px; border-radius: 10px; background: #c85f84; color: #fff; font-size: 12px; font-weight: 500; }
.yw-comp-modal .yw-comp-modal-confirm button[type="submit"]:hover { background: #b4547d; }

/* Positioning | Stats: the house segmented control, its white pill sliding
   to the tab in view. */
.yw-comp-modal .yw-comp-modal-tabs { padding: 16px 20px 0; }
.yw-comp-modal .yw-comp-modal-tabs > div { display: block; border: 0; }
.yw-comp-modal .yw-comp-modal-tabs [role="tablist"] { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 0; padding: 3px; border-radius: 13px; background: rgba(32, 32, 36, .06); }
.yw-comp-modal .yw-comp-modal-tabs [role="tablist"]::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(32, 16, 48, .1), 0 1px 2px rgba(32, 16, 48, .06); transition: transform .34s cubic-bezier(.2, .8, .2, 1); }
.yw-comp-modal .yw-comp-modal-tabs [role="tablist"]:has(> [role="tab"]:nth-child(2)[aria-selected="true"])::before { transform: translateX(100%); }
.yw-comp-modal .yw-comp-modal-tabs [role="tab"] { position: relative; z-index: 1; margin: 0; padding: 8px 18px; border: 0; border-radius: 10px; background: transparent; color: #6f6975; font-size: 13px; font-weight: 500; transition: color .2s ease; }
.yw-comp-modal .yw-comp-modal-tabs [role="tab"]:hover { background: transparent; color: #202024; }
.yw-comp-modal .yw-comp-modal-tabs [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; color: #202024; }
.yw-comp-modal .yw-comp-modal-tabs [role="tab"]:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-comp-modal [role="tabpanel"]:not([hidden]) { animation: yw-comp-modal-in .3s cubic-bezier(.2, .8, .2, 1) both; }
.yw-comp-modal .overflow-y-auto { scrollbar-width: thin; scrollbar-color: #ddd2e7 transparent; }

/* Positioning: Weekday and Weekend as hairline sections. */
.yw-comp-pos-panel { display: flex; flex-direction: column; }
.yw-comp-modal-state { margin: 0 0 6px; }
.yw-comp-pos-form { display: flex; flex-direction: column; }
.yw-comp-modal .yw-comp-day { padding: 16px 0 18px; border-top: 1px solid rgba(32, 32, 36, .08); border-radius: 0; background: transparent; }
.yw-comp-modal .yw-comp-pos-form > .yw-comp-day:first-of-type { padding-top: 6px; border-top: 0; }
.yw-comp-modal .yw-comp-day-head { align-items: center; }
.yw-comp-modal .yw-comp-day-head > h4 { font-size: 17px; letter-spacing: -.35px; }
.yw-comp-modal .yw-comp-day-head .yw-money-flag { font-size: 12px; }
.yw-comp-ctl { margin-top: 14px; }
.yw-comp-ctl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yw-comp-modal .yw-comp-day-label { color: #59535f; font-size: 13px; font-weight: 500; }
.yw-comp-modal .yw-comp-day-label .hw-info-label { text-align: left; }
.yw-comp-modal .yw-comp-pos-pill { height: 26px; padding: 0 11px; font-size: 12px; }
.yw-comp-modal .yw-comp-day-side { color: #202024; font-size: 13px; font-weight: 500; }
.yw-comp-ctl-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
/* The house slider: a 6px track filled violet, a white thumb with a soft
   shadow. Relevance fills from the left; price vs them from Even (the
   centre) out to its value. */
.yw-comp-modal .yw-comp-range { min-width: 0; height: 22px; flex: 1 1 auto; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; accent-color: #7c3aed; }
.yw-comp-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #e6e2ea; }
.yw-comp-range[data-fill="from-start"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #7c3aed 0 var(--fill), #e6e2ea var(--fill) 100%); }
.yw-comp-range[data-fill="from-centre"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #e6e2ea 0 var(--from), #7c3aed var(--from) var(--to), #e6e2ea var(--to) 100%); }
.yw-comp-range::-moz-range-track { height: 6px; border-radius: 3px; background: #e6e2ea; }
.yw-comp-range[data-fill="from-start"]::-moz-range-track { background: linear-gradient(to right, #7c3aed 0 var(--fill), #e6e2ea var(--fill) 100%); }
.yw-comp-range[data-fill="from-centre"]::-moz-range-track { background: linear-gradient(to right, #e6e2ea 0 var(--from), #7c3aed var(--from) var(--to), #e6e2ea var(--to) 100%); }
.yw-comp-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(32, 16, 48, .24), 0 0 0 1px rgba(124, 58, 237, .32); -webkit-appearance: none; appearance: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease; }
.yw-comp-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(32, 16, 48, .24), 0 0 0 1px rgba(124, 58, 237, .32); transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease; }
.yw-comp-range:hover::-webkit-slider-thumb, .yw-comp-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(32, 16, 48, .28), 0 0 0 4px rgba(124, 58, 237, .18); transform: scale(1.08); }
.yw-comp-range:hover::-moz-range-thumb, .yw-comp-range:focus-visible::-moz-range-thumb { box-shadow: 0 2px 8px rgba(32, 16, 48, .28), 0 0 0 4px rgba(124, 58, 237, .18); transform: scale(1.08); }
.yw-comp-range:focus-visible { outline: none; }
/* The house input. */
.yw-comp-modal .yw-comp-num { width: 66px; height: 36px; flex: 0 0 auto; padding: 0 10px; border: 1px solid #e2dfe6; border-radius: 11px; background: rgba(255, 255, 255, .78); color: #202024; font-size: 15px; font-weight: 500; text-align: right; outline: none; -moz-appearance: textfield; appearance: textfield; transition: border-color .16s ease, box-shadow .16s ease; }
.yw-comp-modal .yw-comp-num::-webkit-inner-spin-button, .yw-comp-modal .yw-comp-num::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.yw-comp-modal .yw-comp-num:focus { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
.yw-comp-num-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.yw-comp-modal .yw-comp-num-wrap > .yw-comp-num { padding-right: 24px; }
.yw-comp-num-wrap > span { position: absolute; top: 50%; right: 10px; color: #a59fab; font-size: 13px; pointer-events: none; transform: translateY(-50%); }
/* The scale under each slider: small ticks with their words, aligned to the
   track (the input's width plus the gap is held clear on the right). */
.yw-comp-modal .yw-comp-day-scale { display: flex; justify-content: space-between; margin-top: 6px; padding-right: 80px; color: #a59fab; font-size: 12px; }
.yw-comp-day-scale > span { display: flex; flex-direction: column; align-items: center; }
.yw-comp-day-scale > span:first-child { align-items: flex-start; }
.yw-comp-day-scale > span:last-child { align-items: flex-end; }
.yw-comp-day-scale > span::before { content: ""; width: 1px; height: 5px; margin: 0 9px 3px; background: #d6d1db; }
/* What it means on this night: Aim and You as figures, one honest word. */
.yw-comp-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 16px; padding: 12px 15px; border-radius: 14px; background: rgba(124, 58, 237, .06); }
.yw-comp-readout[data-empty] { padding: 0; background: transparent; }
.yw-comp-readout-fig { display: flex; flex-direction: column; gap: 2px; }
.yw-comp-readout-label { color: #87818c; font-size: 12px; }
.yw-comp-readout-label .hw-info-label { text-align: left; }
.yw-comp-readout-fig > strong { color: #202024; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.yw-comp-readout-fig > strong > span { color: #87818c; font-size: 13px; font-weight: 500; }
.yw-comp-readout-flag { margin-left: auto; }
.yw-comp-modal .yw-money-flag { font-size: 12px; }
/* Save is the one violet button; Preview a quiet pill; Reset a word. */
.yw-comp-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; padding-top: 16px; border-top: 1px solid rgba(32, 32, 36, .08); }
.yw-comp-modal .yw-comp-modal-actions > button[class~="bg-violet-600"] { height: 40px; padding: 0 18px; border-radius: 12px; background: #7c3aed; box-shadow: 0 6px 16px rgba(124, 58, 237, .26); color: #fff; font-size: 14px; font-weight: 500; transition: background-color .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.yw-comp-modal .yw-comp-modal-actions > button[class~="bg-violet-600"]:hover { background: #7130df; transform: translateY(-1px); }
.yw-comp-modal .yw-comp-modal-quiet { height: 32px; padding: 0 13px; border-radius: 11px; background: rgba(32, 32, 36, .06); color: #202024; font-size: 13px; font-weight: 500; }
.yw-comp-modal .yw-comp-modal-quiet:hover { background: rgba(32, 32, 36, .1); }
.yw-comp-modal .yw-comp-modal-quiet[data-size="lg"] { height: 40px; padding: 0 16px; border-radius: 12px; }
.yw-comp-modal .yw-comp-modal-link { color: #87818c; font-size: 13px; }
.yw-comp-modal .yw-comp-modal-notice { font-size: 13px; }
.yw-comp-modal .yw-comp-diff { margin-top: 12px; padding: 13px 15px; border: 1px solid rgba(32, 32, 36, .07); border-radius: 14px; background: rgba(255, 255, 255, .6); font-size: 13px; }
.yw-comp-modal .yw-comp-diff .yw-money-table { font-size: 13px; }
/* The suggestion: one line, its evidence the hover of "Suggested". */
.yw-comp-modal .yw-comp-modal-suggest { gap: 10px 14px; margin-top: 16px; padding: 12px 14px 12px 16px; border: 1px solid rgba(124, 58, 237, .16); border-radius: 15px; background: rgba(124, 58, 237, .06); }
.yw-comp-modal .yw-comp-modal-suggest-copy { color: #343039; font-size: 13px; }
.yw-comp-modal .yw-comp-modal-suggest-copy > .relative .hw-info-label, .yw-comp-modal .yw-comp-modal-suggest-copy .hw-info-label { color: #5d2bb0; font-weight: 500; }
.yw-comp-modal .yw-comp-modal-suggest .yw-comp-modal-quiet { background: rgba(255, 255, 255, .8); }
.yw-comp-modal .yw-comp-modal-suggest .yw-comp-modal-quiet:hover { background: #fff; }

/* Stats: the same hairline sections and sizes. */
.yw-comp-modal .yw-comp-stats { gap: 0; }
.yw-comp-modal .yw-comp-stats > :is(section, div) + :is(section, div) { padding-top: 16px; border-top: 1px solid rgba(32, 32, 36, .08); }
.yw-comp-modal .yw-comp-stats > :is(section, div) { padding-bottom: 16px; }
.yw-comp-modal .yw-comp-stat-head { font-size: 17px; letter-spacing: -.35px; }
.yw-comp-modal :is(.yw-comp-stat-line, .yw-comp-moves > li, .yw-comp-rating-sub) { font-size: 13px; }
.yw-comp-modal :is(.yw-comp-day-note, .yw-comp-stat-trend, .yw-comp-rating-sub > div) { font-size: 12px; }
.yw-comp-modal .yw-comp-rating-value { font-size: 32px; }
.yw-comp-modal .yw-comp-platform { height: 28px; font-size: 12px; }
.yw-comp-modal .yw-comp-curve-label { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .yw-comp-modal, .yw-comp-modal::backdrop, .yw-comp-modal [role="tabpanel"]:not([hidden]) { animation: none; }
  .yw-comp-modal .yw-comp-modal-tabs [role="tablist"]::before, .yw-comp-modal-glass, .yw-comp-range::-webkit-slider-thumb, .yw-comp-modal .yw-comp-modal-actions > button { transition: none; }
}

/* The pop-up, dark: the same frosted surface on the warm dark palette. */
[data-theme-root].dark .yw-comp-modal { border-color: rgba(39, 54, 86, .9); background: rgba(13, 21, 39, .92); box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .3); color: #f3eef8; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme-root].dark .yw-comp-modal { background: rgba(13, 21, 39, .84); }
}
[data-theme-root].dark .yw-comp-modal::backdrop { background: rgba(0, 0, 0, .5); }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-confirm { border-bottom-color: rgba(240, 184, 210, .2); background: rgba(58, 42, 49, .85); color: #f0b8d2; }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-tabs [role="tablist"] { background: rgba(255, 255, 255, .07); }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-tabs [role="tablist"]::before { background: #243352; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-tabs [role="tab"] { background: transparent; color: #a297ab; }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-tabs [role="tab"]:hover, [data-theme-root].dark .yw-comp-modal .yw-comp-modal-tabs [role="tab"][aria-selected="true"] { background: transparent; color: #f3eef8; }
[data-theme-root].dark .yw-comp-modal :is(.yw-comp-day, .yw-comp-modal-actions, .yw-comp-stats > :is(section, div) + :is(section, div)) { border-top-color: rgba(255, 255, 255, .08); background: transparent; }
[data-theme-root].dark .yw-comp-modal :is(.yw-comp-day-label, .yw-comp-modal-suggest-copy) { color: #c3b9cc; }
[data-theme-root].dark .yw-comp-modal .yw-comp-day-side, [data-theme-root].dark .yw-comp-readout-fig > strong { color: #f3eef8; }
[data-theme-root].dark .yw-comp-range::-webkit-slider-runnable-track { background: #202d4a; }
[data-theme-root].dark .yw-comp-range[data-fill="from-start"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #a883ee 0 var(--fill), #202d4a var(--fill) 100%); }
[data-theme-root].dark .yw-comp-range[data-fill="from-centre"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #202d4a 0 var(--from), #a883ee var(--from) var(--to), #202d4a var(--to) 100%); }
[data-theme-root].dark .yw-comp-range::-moz-range-track { background: #202d4a; }
[data-theme-root].dark .yw-comp-range[data-fill="from-start"]::-moz-range-track { background: linear-gradient(to right, #a883ee 0 var(--fill), #202d4a var(--fill) 100%); }
[data-theme-root].dark .yw-comp-range[data-fill="from-centre"]::-moz-range-track { background: linear-gradient(to right, #202d4a 0 var(--from), #a883ee var(--from) var(--to), #202d4a var(--to) 100%); }
[data-theme-root].dark .yw-comp-range::-webkit-slider-thumb { background: #f3eef8; }
[data-theme-root].dark .yw-comp-range::-moz-range-thumb { background: #f3eef8; }
[data-theme-root].dark .yw-comp-modal .yw-comp-num { border-color: #273656; background: rgba(0, 0, 0, .18); color: #f3eef8; }
[data-theme-root].dark .yw-comp-day-scale > span::before { background: #55525c; }
[data-theme-root].dark .yw-comp-modal .yw-comp-day-scale, [data-theme-root].dark .yw-comp-readout-label, [data-theme-root].dark .yw-comp-readout-fig > strong > span, [data-theme-root].dark .yw-comp-num-wrap > span { color: #a297ab; }
[data-theme-root].dark .yw-comp-readout { background: rgba(168, 131, 238, .1); }
[data-theme-root].dark .yw-comp-readout[data-empty] { background: transparent; }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-quiet { background: rgba(255, 255, 255, .08); color: #f3eef8; }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-quiet:hover { background: rgba(255, 255, 255, .14); }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-suggest { border-color: rgba(168, 131, 238, .22); background: rgba(168, 131, 238, .1); }
[data-theme-root].dark .yw-comp-modal .yw-comp-modal-suggest-copy .hw-info-label { color: #d7c3ff; }
[data-theme-root].dark .yw-comp-modal .yw-comp-diff { border-color: rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .15); }
[data-theme-root].dark .yw-comp-modal .overflow-y-auto { scrollbar-color: #273656 transparent; }

/* Dark: a toned status word keeps its tone. money.css greys every flag under
   the Pricing root at a heavier weight (its :is() list carries a
   three-part selector), so the tones here repeat the class to outweigh it. */
[data-theme-root].dark :is(.yw-compset-page, .yw-comp-modal) .yw-money-flag.yw-money-flag[data-tone="accent"] { color: #c9b1ff; }
[data-theme-root].dark :is(.yw-compset-page, .yw-comp-modal) .yw-money-flag.yw-money-flag[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark :is(.yw-compset-page, .yw-comp-modal) .yw-money-flag.yw-money-flag[data-tone="bad"] { color: #e69ac4; }
[data-theme-root].dark :is(.yw-compset-page, .yw-comp-modal) .yw-money-flag.yw-money-flag[data-tone="watch"] { color: #e6bd7f; }

/* 10/07 (owner: "this purple doesnt need to be full color like that it can be
   like this other purple"): your bar wears the house violet hatch, the same
   as your slot in the rank strip, instead of a solid block. */
.yw-compset-bar-row[data-you] .yw-compset-bar { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
[data-theme-root].dark .yw-compset-bar-row[data-you] .yw-compset-bar { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
/* Same for the latest week in Weekly position: a stronger violet hatch (its
   date stays violet) rather than a solid block. */
.yw-weeks-col[data-latest] .yw-weeks-bar > i { background: repeating-linear-gradient(125deg, #7c3aed 0 2.5px, #c9adf8 2.5px 4px); }
[data-theme-root].dark .yw-weeks-col[data-latest] .yw-weeks-bar > i { background: repeating-linear-gradient(125deg, #b993ff 0 2.5px, #4a3a63 2.5px 4px); }