/* Pricing > Competitors redesign (10/05): the new Dashboard design on this Pricing section.
   Loaded after skin/money.css (whose root rules now include .yw-pricing-page),
   so a rule here at the same weight wins. Light rules first, their dark twins
   under [data-theme-root].dark.

   Owner, 10/05: "everything we have done on the last tabs we need to do here
   ... the fonts, the colors the sizes ... use the new design style. remember
   no ai slop". Two parts:
   1. Competitors (/compset, .yw-compset-page): the hero row (Competitive
      prices and Your position), the set, the lists, the market table, the
      first-run card, the job lines and the paused note.
   2. The competitor pieces that also render outside the page (Rates Setup's
      competitor pop-up and the onboarding step): the comp row (.yw-comp-row),
      the match row (.yw-match), the add box (.yw-add) and the hotel pop-up
      (.yw-comp-modal). Their rules are global for that reason.
   Rate parity is not here: it has its own skin (skin/parity.css, 10/03).
   Values are ink; only words, marks, tints and pills take colour. */

/* ------------------------------------------------------- shared tones -- */

/* ============================================================ Competitors */
/* 10/06: the second Competitors redesign (the photo-card grid, the night
   control, the bigger price line, Your position's strip) lives in
   skin/pricing-compset.css, which loads after this file and wins at the same
   weight. The rules below stay the base it builds on.
   The first row: Competitive prices (two thirds) and Your position. */
.yw-compset-top { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 18px; }
.yw-compset-top > * { min-width: 0; margin: 0; }
.yw-compset-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.yw-compset-stack > * { margin-top: 0; }
.yw-compset-stack > div:empty { display: none; }

/* The hero. */
.yw-compset-hero { display: flex; flex-direction: column; }
.yw-compset-clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; color: #929097; font-size: 11px; }
.yw-compset-page .yw-compset-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: #eeeded; color: #202024; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .16s; }
.yw-compset-page .yw-compset-pill:hover { background: #e8e4ed; }
.yw-compset-page .yw-compset-pill[data-running] { background: #f1eafc; color: #7433d4; cursor: default; }
.yw-compset-window { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.yw-compset-window-title { color: #59535f; font-size: 13px; font-weight: 500; letter-spacing: -.2px; }
.yw-compset-picker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-compset-page .yw-compset-arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #e4e2e6; border-radius: 50%; background: transparent; color: #202024; font-size: 13px; line-height: 1; cursor: pointer; transition: background-color .16s; }
.yw-compset-page .yw-compset-arrow:hover:not(:disabled) { background: #eeeeee; }
.yw-compset-page .yw-compset-arrow:disabled, .yw-compset-page span.yw-compset-arrow { opacity: .35; cursor: not-allowed; }
.yw-compset-page .yw-compset-headline { margin: 18px 0 8px; }
.yw-compset-aim .hw-info-label { cursor: help; }

/* The price line: every readable hotel on one hatched range, the median a
   dark tick, your aim a violet one, you ringed in violet. */
.yw-compset-line { margin-top: 20px; }
.yw-compset-rail { height: 96px; }
.yw-compset-axis { background: repeating-linear-gradient(125deg, #c7b2ef 0 2px, #efe8fb 2px 4px); }
.yw-compset-tick { width: 2px; height: 24px; border-radius: 1px; background: #59535f; }
.yw-compset-tick[data-kind="aim"] { background: #7c3aed; }
.yw-compset-marker { z-index: 20; }
.yw-compset-marker[data-you] { z-index: 30; }
.yw-compset-marker-face { display: flex; flex-direction: column; align-items: center; }
.yw-compset-marker-photo { display: block; border-radius: 50%; box-shadow: 0 0 0 2px #fbfbfb, 0 3px 8px rgba(32, 32, 36, .12); }
.yw-compset-marker-face[data-you] .yw-compset-marker-photo { box-shadow: 0 0 0 2px #fbfbfb, 0 0 0 4px #7c3aed; }
.yw-compset-marker-rate { margin-top: 5px; color: #343039; font-size: 11px; font-weight: 500; white-space: nowrap; }
.yw-compset-marker-face[data-you] .yw-compset-marker-rate { color: #202024; }
.yw-compset-marker-you { color: #7c3aed; font-size: 10px; font-weight: 500; line-height: 1.2; }
.yw-compset-page .yw-compset-marker-link { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .16s; }
.yw-compset-page .yw-compset-marker-link:hover { transform: scale(1.08); }
.yw-compset-page .yw-compset-marker-link:focus-visible { outline: 2px solid #8a45f0; outline-offset: 3px; }
.yw-compset-axis-labels { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding: 0 24px; color: #8f8996; font-size: 10px; }
.yw-compset-key { display: inline-flex; gap: 14px; }
.yw-compset-key > span { display: inline-flex; align-items: center; gap: 5px; }
.yw-compset-key i { display: inline-block; width: 2px; height: 10px; border-radius: 1px; background: #59535f; }
.yw-compset-key i[data-kind="aim"] { background: #7c3aed; }

/* The hero's foot: hotels off the line, then the weekly position. */
.yw-compset-foot { margin-top: auto; padding-top: 16px; }
.yw-compset-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 0; border-top: 1px solid #eae8ec; }
.yw-compset-tray-label { display: inline-flex; min-width: 92px; align-items: baseline; color: #59535f; font-size: 12px; font-weight: 500; }
.yw-compset-tray[data-tone="violet"] .yw-compset-tray-label .hw-info-label { color: #7433d4; }
.yw-compset-tray[data-tone="amber"] .yw-compset-tray-label .hw-info-label { color: #a96883; }
.yw-compset-tray-hotels { display: flex; min-width: 0; flex: 1 1 0; flex-wrap: wrap; gap: 6px; }
.yw-compset-tray-hotel { display: inline-flex; max-width: 200px; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 3px; border-radius: 20px; background: #eeeded; color: #59535f; font-size: 11.5px; }
.yw-compset-tray-hotel > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-compset-weeks { display: flex; align-items: flex-end; gap: 14px; }
.yw-compset-weeks-label { color: #87818c; font-size: 11px; }
.yw-compset-weeks-cols { display: inline-flex; height: 28px; align-items: flex-end; gap: 3px; }
.yw-compset-weeks-cols > i { display: block; width: 7px; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }

/* Your position: the Dashboard's Last full week rows. */
.yw-compset-position { display: flex; flex-direction: column; }
.yw-compset-page .yw-compset-rows { margin-top: 8px; }
.yw-compset-rows > .yw-row-stat:first-child { border-top: 0; }
.yw-compset-rows .yw-row-stat-label .hw-info-label { text-align: left; }

/* A card of the stack: the head's right side, a list that scrolls in it. */
.yw-compset-head-side { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.yw-compset-rows:not(.yw-money-parts) { margin-top: 8px; }
.yw-compset-scroll[data-scroll="list"] { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ddd2e7 transparent; }
.yw-compset-set-market, .yw-compset-page .yw-compset-add { margin-top: 16px; }

/* The search box: the quiet input. */
.yw-compset-page .yw-add input[name="q"] { height: 40px; padding: 0 14px; border-radius: 12px; background-color: #fff; color: #202024; font-size: 13px; }
.yw-compset-page .yw-compset-search { display: block; width: 100%; max-width: 360px; height: 38px; margin-top: 14px; padding: 0 14px; border: 1px solid #e2e1e4; border-radius: 12px; background-color: #fff; color: #202024; font-size: 13px; outline: none; }
.yw-compset-page .yw-compset-search:focus { border-color: #b993ff; }

/* Others in your market: the table in its scroller. */
.yw-compset-market-table td { vertical-align: middle; }
.yw-compset-market-table td:last-child form { display: inline-flex; }
.yw-compset-hotel { display: flex; min-width: 0; align-items: center; gap: 10px; }
.yw-compset-hotel-name { overflow: hidden; color: #202024; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-compset-hotel-sub { color: #a09aa4; font-size: 11px; }
.yw-compset-page .yw-compset-market-table td.yw-money-empty { padding: 18px 0; text-align: center; }

/* The first rate shop: one card, its moves in a column. */
.yw-compset-page .yw-compset-first { margin-top: 18px; }
.yw-compset-first-row { max-width: 680px; margin-top: 14px; }
.yw-compset-first-moves { display: flex; flex-wrap: wrap; gap: 8px; }
.yw-compset-prefill { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.yw-compset-field { display: block; min-width: 0; flex: 1 1 13rem; }
.yw-compset-field > span:first-child { display: block; margin-bottom: 4px; color: #87818c; font-size: 12px; }
.yw-compset-field-short { flex: 0 0 7rem; }

/* Set your market: a tinted panel inside the card. */
.yw-compset-market-set { padding: 16px 18px; border-radius: 16px; background: #f6f1fb; }
.yw-compset-market-set-title { color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.yw-compset-market-set-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }

/* The scan and the pull: one quiet card line each. */
.yw-compset-jobs { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.yw-compset-first .yw-compset-jobs { margin-top: 0; }
.yw-compset-job { padding: 15px 20px; border: 1px solid #e2e1e4; border-radius: 18px; background: #fbfbfb; }
.yw-compset-first .yw-compset-job { border-color: transparent; background: #f6f5f7; }
.yw-compset-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.yw-compset-job-head > svg { color: #7c3aed; }
.yw-compset-job[data-phase="failed"] .yw-compset-job-title { color: #a96883; }
.yw-compset-job-clock { margin-left: auto; color: #87818c; font-size: 12px; font-weight: 400; }
.yw-compset-job-line { margin: 4px 0 0; color: #59535f; font-size: 12.5px; line-height: 1.5; }
.yw-compset-job-bar { margin-top: 10px; }
.yw-compset-job-bar [role="progressbar"] { height: 6px; background-color: #eeedf1; }
.yw-compset-job-bar [role="progressbar"] > div { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-compset-job-detail { margin-top: 10px; color: #929097; font-size: 11px; }
.yw-compset-job-detail > div { font-weight: 500; }
.yw-compset-job-detail > p { margin: 2px 0 0; font-size: 10.5px; }
.yw-compset-job-moves { margin-top: 10px; }

/* Live data paused: a quiet card line with a grey dot, then the stamp. */
.yw-compset-page .yw-compset-paused { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 20px; border: 1px solid #e2e1e4; border-radius: 18px; background: #fbfbfb; color: #59535f; font-size: 13px; }
.yw-compset-paused::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #a09aa4; }
.yw-compset-asof { margin: 16px 0 -6px; color: #87818c; font-size: 11px; font-weight: 500; }

/* ------------------------------------------- the comp row (global, 10/05) -- */
/* CompTile (comp-tile.tsx): the Dashboard's Needs you row. It renders on
   /compset and in Rates Setup's competitor pop-up, so these rules are global.
   CompetitorManager's photo-card grid becomes the list. */
div.grid:has(> .yw-comp-row) { display: flex; flex-direction: column; gap: 0; }
.yw-comp-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto minmax(96px, auto); align-items: center; gap: 0 16px; min-height: 72px; padding: 10px 6px; border-bottom: 1px solid #eae8ec; color: #202024; transition: background-color .16s; }
.yw-comp-row:last-child { border-bottom: 0; }
.yw-comp-row:hover { background: #f8f6fa; }
.yw-comp-row[data-pending] { border-radius: 14px; background: #f6f1fb; }
.yw-comp-row-mark { display: block; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.yw-comp-row-mark > :is(img, div) { width: 36px; height: 36px; }
.yw-comp-row[data-pending] .yw-comp-row-mark { box-shadow: 0 0 0 2px #fbfbfb, 0 0 0 4px #b993ff; }
.yw-comp-row-mark:focus-visible, .yw-comp-row-name:focus-visible, .yw-comp-row-pos:focus-visible { outline: 2px solid #8a45f0; outline-offset: 2px; }
.yw-comp-row-copy { min-width: 0; }
.yw-comp-row-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.yw-comp-row-name { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; text-align: left; cursor: pointer; transition: color .16s; }
.yw-comp-row-name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-comp-row-name:hover { color: #7c3aed; }
.yw-comp-row-line { margin-top: 3px; overflow: hidden; color: #929097; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.yw-comp-row-line[data-comp-read="carried"] { color: #9a805f; }
.yw-comp-row-line > .yw-money-flag { font-size: 11px; white-space: normal; }
:is(.yw-comp-row, .yw-match) [data-peer-badge] { height: auto; padding: 0; border-radius: 0; background: transparent; color: #7433d4; font-size: 10.5px; font-weight: 500; }
.yw-comp-trend { display: inline-flex; width: 72px; height: 26px; align-items: flex-end; gap: 1.5px; cursor: default; }
.yw-comp-trend > i { display: block; min-width: 1px; flex: 1 1 0; border-radius: 1px 1px 0 0; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-comp-trend-gap { width: 72px; }
.yw-comp-row-pos { display: block; padding: 0; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.yw-comp-pos { display: flex; flex-direction: column; gap: 4px; }
.yw-comp-pos-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 9px; background: #eeeded; color: #343039; font-size: 11px; font-weight: 500; white-space: nowrap; transition: background-color .16s; }
.yw-comp-row-pos:hover .yw-comp-pos-pill { background: #e8e4ed; }
.yw-comp-pos-day { min-width: 50px; color: #87818c; font-weight: 400; }
.yw-comp-pos-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #d6d2da; }
.yw-comp-pos-pill[data-band="high"] .yw-comp-pos-dot { background: #7c3aed; }
.yw-comp-pos-pill[data-band="medium"] .yw-comp-pos-dot { background: #b993ff; }
.yw-comp-pos-pill[data-band="low"] .yw-comp-pos-dot { background: #d6d2da; }
.yw-comp-pos-pill[data-band="off"] .yw-comp-pos-dot { background: transparent; box-shadow: inset 0 0 0 1px #c3bdc8; }
.yw-comp-pos-sign { min-width: 34px; color: #202024; text-align: right; }
.yw-comp-pos-set { color: #7433d4; }
.yw-comp-row-rate { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.yw-comp-row-rate > strong { color: #202024; font-size: 17px; font-weight: 500; letter-spacing: -.4px; white-space: nowrap; }
.yw-comp-row-none { color: #c3bdc8; }
.yw-comp-row-gap { color: #929097; font-size: 11px; white-space: nowrap; }
@media (max-width: 900px) {
  .yw-comp-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .yw-comp-trend, .yw-comp-trend-gap { display: none; }
  .yw-comp-row-pos { grid-column: 2 / -1; grid-row: 2; margin-top: 8px; }
  .yw-comp-pos { flex-direction: row; flex-wrap: wrap; }
}

/* ------------------------------------------ the match row (global, 10/05) -- */
/* MatchCard (match-card.tsx), the Watching and Not returning rates rows: the
   same Needs you row with the caller's forms as quiet pills. */
.yw-match { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 0 14px; min-height: 68px; padding: 10px 6px; border-bottom: 1px solid #eae8ec; color: #202024; transition: background-color .16s; }
.yw-match:last-child { border-bottom: 0; }
.yw-match:hover { background: #f8f6fa; }
.yw-match-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; }
.yw-match-mark > :is(img, div) { width: 36px; height: 36px; }
.yw-compset-dead-mark { background: #f8e8ef; color: #bd6a91; font-size: 15px; font-weight: 500; }
.yw-match-copy { min-width: 0; }
.yw-match-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.yw-match-name { min-width: 0; max-width: 100%; overflow: hidden; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.yw-match-name > .hw-info-label { display: block; max-width: 100%; overflow: hidden; font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.yw-match-line { display: flex; min-width: 0; align-items: baseline; gap: 6px; margin-top: 3px; overflow: hidden; color: #929097; font-size: 12px; line-height: 1.45; white-space: nowrap; }
.yw-match-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.yw-match-line > span:first-child { flex-shrink: 0; }
.yw-match-line > span + span::before { content: "·"; margin-right: 6px; color: #c3bdc8; }
.yw-match-clip { display: block; min-width: 0; max-width: 100%; overflow: hidden; }
.yw-match-clip > .hw-info-label { display: block; max-width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.yw-match-rate { color: #202024; font-size: 16px; font-weight: 500; letter-spacing: -.4px; white-space: nowrap; }
.yw-match-moves { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.yw-match-moves form { display: contents; }
.yw-match-moves > .yw-add-alert { flex-basis: 100%; margin: 0; text-align: right; }
.yw-match-moves :is(button, a), .yw-match-quiet { display: inline-flex; width: auto; height: 30px; align-items: center; gap: 6px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: #eeeded; color: #202024; font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s; }
.yw-match-moves :is(button, a):hover, .yw-match-quiet:hover { background: #e8e4ed; color: #202024; }
.yw-match-moves :is(button, a)[class~="bg-violet-600"], .yw-match-quiet.yw-match-primary { background: #7c3aed; color: #fff; }
.yw-match-moves :is(button, a)[class~="bg-violet-600"]:hover, .yw-match-quiet.yw-match-primary:hover { background: #7130df; color: #fff; }
.yw-match-quiet.yw-match-accent { background: #f1eafc; color: #7433d4; }
.yw-match-quiet.yw-match-danger { color: #a96883; }
td > form > .yw-match-quiet { height: 28px; padding: 0 11px; }
@media (max-width: 800px) {
  .yw-match { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .yw-match-moves { grid-column: 2 / -1; justify-content: flex-start; margin-top: 8px; }
}

/* -------------------------------------------- the add box (global, 10/05) -- */
.yw-add-line { margin: 8px 0 0; color: #929097; font-size: 12px; line-height: 1.5; }
.yw-add-link { padding: 0; border: 0; background: none; color: #8553c2; font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.yw-add-alert { margin-top: 8px; }
.yw-add-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #f6f1fb; color: #5d2bb0; font-size: 12.5px; line-height: 1.5; }
.yw-add-pick, .yw-add-matches { margin-top: 10px; }
.yw-add-matches { display: flex; flex-direction: column; }

/* ------------------------------------------ the hotel pop-up (global, 10/05) -- */
.yw-comp-modal { border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; color: #202024; box-shadow: 0 24px 60px rgba(48, 32, 64, .16); font-family: var(--font-geist-sans), Geist, system-ui, sans-serif; letter-spacing: -.25px; }
.yw-comp-modal-name { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.6px; }
.yw-comp-modal-rate { padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.yw-comp-modal-rate > div:first-child { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.4px; }
.yw-comp-modal-rate > div + div { color: rgba(255, 255, 255, .82); font-size: 10.5px; }
.yw-comp-modal-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #f0d2dd; background: #fbf0f4; color: #7e4560; font-size: 12.5px; }
.yw-comp-modal-confirm > span { margin-right: auto; }
.yw-comp-modal-tabs > div { border-bottom: 0; }
.yw-comp-modal-tabs [role="tablist"] { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #eeeded; }
.yw-comp-modal-tabs [role="tab"] { margin: 0; padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: #6f6975; font-size: 12px; font-weight: 500; }
.yw-comp-modal-tabs [role="tab"]:hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-comp-modal-tabs [role="tab"][aria-selected="true"] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-comp-modal-quiet { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: #eeeded; color: #202024; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s; }
.yw-comp-modal-quiet[data-size="lg"] { height: 38px; padding: 0 14px; font-size: 13px; }
.yw-comp-modal-quiet:hover { background: #e8e4ed; }
.yw-comp-modal-quiet:disabled { opacity: .6; cursor: wait; }
.yw-comp-modal-quiet.yw-comp-modal-primary { background: #7c3aed; color: #fff; }
.yw-comp-modal-quiet.yw-comp-modal-primary:hover { background: #7130df; }
.yw-comp-modal-link { padding: 0 4px; border: 0; background: none; color: #87818c; font-size: 12px; font-weight: 500; cursor: pointer; }
.yw-comp-modal-link:hover { color: #202024; }
.yw-comp-modal-notice { margin: 0 0 12px; color: #2f8a6d; font-size: 12.5px; line-height: 1.5; }
.yw-comp-modal-notice[data-tone="bad"] { color: #a96883; }
.yw-comp-modal-lead { margin: 0; color: #87818c; font-size: 12.5px; line-height: 1.55; }
.yw-comp-modal-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: #f6f1fb; }
.yw-comp-modal-suggest-copy { margin-right: auto; color: #5d2bb0; font-size: 12.5px; }
.yw-comp-modal-suggest-why { display: block; margin-top: 2px; color: #8b70a8; font-size: 11.5px; }
.yw-comp-modal form[class~="space-y-3"] button[class~="bg-violet-600"] { border-radius: 10px; background-color: #7c3aed; }
.yw-comp-modal input[type="range"] { accent-color: #7c3aed; }
.yw-comp-day { padding: 16px 18px; border-radius: 18px; background: #f4f3f6; }
.yw-comp-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yw-comp-day-head > h4 { margin: 0; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
.yw-comp-day-label { color: #59535f; font-size: 12px; font-weight: 500; }
.yw-comp-day-side { color: #202024; font-size: 12px; font-weight: 500; }
.yw-comp-day-scale { display: flex; justify-content: space-between; margin-top: 3px; color: #a59fab; font-size: 10px; }
.yw-comp-day-note { margin: 6px 0 0; color: #87818c; font-size: 11.5px; line-height: 1.5; }
.yw-comp-day-twist { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.yw-comp-day-twist > p { min-width: 0; flex: 1 1 auto; margin: 0; color: #343039; font-size: 12.5px; line-height: 1.55; }
.yw-comp-diff { padding: 12px 14px; border-radius: 14px; background: #fff; color: #343039; font-size: 12.5px; line-height: 1.5; }
.yw-comp-diff .yw-money-table { margin-top: 6px; font-size: 12px; }
.yw-comp-stats { display: flex; flex-direction: column; gap: 22px; }
.yw-comp-stats-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.yw-comp-rating { display: flex; align-items: baseline; gap: 12px; }
.yw-comp-rating-value { color: #202024; font-size: 30px; font-weight: 500; letter-spacing: -.05em; }
.yw-comp-rating-value > span { color: #a59fab; font-size: 16px; letter-spacing: 0; }
.yw-comp-rating-sub { color: #59535f; font-size: 13px; }
.yw-comp-rating-sub > div { color: #929097; font-size: 11px; }
.yw-comp-stat-head { margin: 0; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
.yw-comp-stat-line { margin: 4px 0 0; color: #87818c; font-size: 12.5px; line-height: 1.5; }
.yw-comp-stat-line[data-ink] { color: #343039; }
.yw-comp-stat-line[data-tone="watch"] { color: #9a805f; }
.yw-comp-stat-trend { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #929097; font-size: 11px; }
.yw-comp-moves { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-comp-moves > li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid #eae8ec; color: #343039; font-size: 12.5px; }
.yw-comp-moves > li:first-child { border-top: 0; }
.yw-comp-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.yw-comp-platform { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: 9px; background: #eeeded; color: #343039; font-size: 11.5px; font-weight: 500; }
.yw-comp-platforms > .yw-comp-day-note { flex-basis: 100%; margin-top: 2px; }
.yw-comp-platforms-check { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.yw-comp-platforms-check button { height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: #eeeded; color: #202024; font-size: 12px; font-weight: 500; }
.yw-comp-platforms-check button:hover { background: #e8e4ed; }
.yw-comp-curve { margin-top: 10px; }
.yw-comp-curve-cols { display: grid; gap: 2px; height: 120px; }
.yw-comp-curve-col { display: flex; min-width: 0; height: 100%; flex-direction: column; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: default; transition: background-color .2s ease; }
.yw-comp-curve-col:hover, .yw-comp-curve-col[data-active="true"] { background: #f4eefb; }
.yw-comp-curve-col:focus-visible { outline: 2px solid #7836e9; outline-offset: -2px; }
.yw-comp-curve-rail { position: relative; display: block; flex: 1 1 auto; border-bottom: 1px solid #cfc8d5; }
.yw-comp-curve-bar { position: absolute; right: 12%; bottom: 0; left: 12%; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-comp-curve-label { display: block; height: 18px; padding-top: 4px; overflow: visible; color: #8b8290; font-size: 9.5px; text-align: left; white-space: nowrap; }
.yw-comp-curve .yw-month-detail { min-height: 34px; margin-top: 4px; padding-top: 9px; }

/* Check now and the run dot. */

/* The hero. */

/* The fix: a round mark toned by the issue, its panel the menu surface. */

/* This check. */

/* What we found scrolls inside its card. */

/* ---------------------------------------------------------- narrower -- */
@media (max-width: 1100px) {
  .yw-compset-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .yw-compset-axis-labels { padding: 0 8px; }
  .yw-compset-key { display: none; }
}
/* money.css keeps these two for .yw-money-page; the same on these pages. */
@media (prefers-reduced-motion: reduce) {
  .yw-comp-row, .yw-match, .yw-compset-marker-link, .yw-comp-curve-col { transition: none; }
  .yw-compset-page .yw-compset-marker-link:hover { 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 :is(.yw-comp-row, .yw-match, .yw-comp-modal) .yw-money-flag { color: #a297ab; }
[data-theme-root].dark :is(.yw-comp-row, .yw-match, .yw-comp-modal) .yw-money-flag[data-tone="bad"] { color: #e69ac4; }
[data-theme-root].dark :is(.yw-comp-row, .yw-match, .yw-comp-modal) .yw-money-flag[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark :is(.yw-comp-row, .yw-match, .yw-comp-modal) .yw-money-flag[data-tone="accent"] { color: #c9b1ff; }

/* money.css scopes these dark twins to .yw-money-page; the same here. */

/* Competitors, dark. */
[data-theme-root].dark .yw-compset-clock, [data-theme-root].dark .yw-compset-axis-labels { color: #a297ab; }
[data-theme-root].dark .yw-compset-page .yw-compset-pill { background-color: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-compset-page .yw-compset-pill:hover { background: #1c2843; }
[data-theme-root].dark .yw-compset-page .yw-compset-pill[data-running] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-compset-page .yw-compset-arrow { border-color: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-compset-page .yw-compset-arrow:hover:not(:disabled) { background: #142036; }
[data-theme-root].dark .yw-compset-window-title { color: #c3b9cc; }
[data-theme-root].dark .yw-compset-axis { background: repeating-linear-gradient(125deg, #6f5a98 0 2px, #35303f 2px 4px); }
[data-theme-root].dark :is(.yw-compset-tick, .yw-compset-key i) { background: #d9d2e3; }
[data-theme-root].dark :is(.yw-compset-tick[data-kind="aim"], .yw-compset-key i[data-kind="aim"]) { background: #a883ee; }
[data-theme-root].dark .yw-compset-marker-photo { box-shadow: 0 0 0 2px #0d1527, 0 3px 8px rgba(0, 0, 0, .3); }
[data-theme-root].dark .yw-compset-marker-face[data-you] .yw-compset-marker-photo { box-shadow: 0 0 0 2px #0d1527, 0 0 0 4px #a883ee; }
[data-theme-root].dark .yw-compset-marker-rate { color: #d9d2e3; }
[data-theme-root].dark .yw-compset-marker-face[data-you] .yw-compset-marker-rate { color: #f3eef8; }
[data-theme-root].dark .yw-compset-marker-you { color: #c5a8ff; }
[data-theme-root].dark .yw-compset-tray { border-top-color: #1c2843; }
[data-theme-root].dark .yw-compset-tray-label { color: #c3b9cc; }
[data-theme-root].dark .yw-compset-tray[data-tone="violet"] .yw-compset-tray-label .hw-info-label { color: #c9b1ff; }
[data-theme-root].dark .yw-compset-tray[data-tone="amber"] .yw-compset-tray-label .hw-info-label { color: #e69ac4; }
[data-theme-root].dark .yw-compset-tray-hotel { background: #142036; color: #c3b9cc; }
[data-theme-root].dark .yw-compset-weeks-label { color: #a297ab; }
[data-theme-root].dark :is(.yw-compset-weeks-cols > i, .yw-comp-trend > i, .yw-comp-curve-bar) { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-compset-page :is(.yw-add input[name="q"], .yw-compset-search) { border-color: #1c2843; background-color: #142036; color: #f3eef8; }
[data-theme-root].dark :is(.yw-compset-hotel-name) { color: #f3eef8; }
[data-theme-root].dark .yw-compset-hotel-sub, [data-theme-root].dark .yw-compset-field > span:first-child { color: #a297ab; }
[data-theme-root].dark .yw-compset-market-set { background: #2f2638; }
[data-theme-root].dark .yw-compset-market-set-title { color: #f3eef8; }
[data-theme-root].dark .yw-compset-page :is(.yw-compset-job, .yw-compset-paused) { border-color: #1c2843; background: #0d1527; color: #c3b9cc; }
[data-theme-root].dark .yw-compset-first .yw-compset-job { border-color: transparent; background: #142036; }
[data-theme-root].dark .yw-compset-job-head { color: #f3eef8; }
[data-theme-root].dark .yw-compset-job-head > svg { color: #c5a8ff; }
[data-theme-root].dark .yw-compset-job[data-phase="failed"] .yw-compset-job-title { color: #e69ac4; }
[data-theme-root].dark :is(.yw-compset-job-line) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-compset-job-clock, .yw-compset-job-detail, .yw-compset-asof) { color: #a297ab; }
[data-theme-root].dark .yw-compset-job-bar [role="progressbar"] { background-color: #142036; }
[data-theme-root].dark .yw-compset-job-bar [role="progressbar"] > div { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-compset-paused::before { background: #6f6975; }

/* The comp row, the match row and the add box, dark. */
[data-theme-root].dark :is(.yw-comp-row, .yw-match) { border-bottom-color: #1c2843; color: #f3eef8; }
[data-theme-root].dark :is(.yw-comp-row, .yw-match):hover { background: #111b30; }
[data-theme-root].dark .yw-comp-row[data-pending] { background: #33293f; }
[data-theme-root].dark .yw-comp-row[data-pending] .yw-comp-row-mark { box-shadow: 0 0 0 2px #0d1527, 0 0 0 4px #8a6bc4; }
[data-theme-root].dark :is(.yw-comp-row-name, .yw-match-name, .yw-comp-row-rate > strong, .yw-match-rate, .yw-comp-pos-sign) { color: #f3eef8; }
[data-theme-root].dark .yw-comp-row-name:hover { color: #c5a8ff; }
[data-theme-root].dark :is(.yw-comp-row-line, .yw-comp-row-gap, .yw-match-line, .yw-comp-pos-day, .yw-add-line) { color: #a297ab; }
[data-theme-root].dark .yw-comp-row-line[data-comp-read="carried"] { color: #e6bd7f; }
[data-theme-root].dark :is(.yw-comp-row, .yw-match) [data-peer-badge] { background: transparent; color: #c9b1ff; }
[data-theme-root].dark .yw-comp-pos-pill { background: #142036; color: #d9d2e3; }
[data-theme-root].dark .yw-comp-row-pos:hover .yw-comp-pos-pill { background: #1c2843; }
[data-theme-root].dark .yw-comp-pos-pill[data-band="high"] .yw-comp-pos-dot { background: #a883ee; }
[data-theme-root].dark .yw-comp-pos-pill[data-band="medium"] .yw-comp-pos-dot { background: #7d63a8; }
[data-theme-root].dark .yw-comp-pos-pill[data-band="low"] .yw-comp-pos-dot { background: #5b5663; }
[data-theme-root].dark .yw-comp-pos-set { color: #c9b1ff; }
[data-theme-root].dark .yw-comp-row-none { color: #6f6975; }
[data-theme-root].dark .yw-compset-dead-mark { background: #4d3345; color: #f0b8d2; }
[data-theme-root].dark :is(.yw-match-moves :is(button, a), .yw-match-quiet) { background: #142036; color: #f3eef8; }
[data-theme-root].dark :is(.yw-match-moves :is(button, a):hover, .yw-match-quiet:hover) { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark :is(.yw-match-moves :is(button, a)[class~="bg-violet-600"], .yw-match-quiet.yw-match-primary) { background: #7c3aed; color: #fff; }
[data-theme-root].dark .yw-match-quiet.yw-match-accent { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-match-quiet.yw-match-danger { color: #e69ac4; }
[data-theme-root].dark .yw-add-link { color: #c5a8ff; }
[data-theme-root].dark .yw-add-note { background: #2f2638; color: #d9c8f0; }

/* The hotel pop-up, dark. */
[data-theme-root].dark .yw-comp-modal { border-color: #1c2843; background: #0d1527; color: #f3eef8; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
[data-theme-root].dark .yw-comp-modal-confirm { border-bottom-color: #5a3a4b; background: #3a2a31; color: #f0b8d2; }
[data-theme-root].dark .yw-comp-modal-tabs [role="tablist"] { background: #142036; }
[data-theme-root].dark .yw-comp-modal-tabs [role="tab"] { color: #c3b9cc; }
[data-theme-root].dark .yw-comp-modal-tabs [role="tab"]:hover { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-comp-modal-tabs [role="tab"][aria-selected="true"] { background: #3f2d5c; color: #c9b1ff; box-shadow: none; }
[data-theme-root].dark .yw-comp-modal-quiet { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-comp-modal-quiet:hover { background: #1c2843; }
[data-theme-root].dark .yw-comp-modal-quiet.yw-comp-modal-primary { background: #7c3aed; color: #fff; }
[data-theme-root].dark :is(.yw-comp-modal-link, .yw-comp-modal-lead, .yw-comp-day-note, .yw-comp-day-scale, .yw-comp-stat-line, .yw-comp-stat-trend, .yw-comp-rating-sub > div) { color: #a297ab; }
[data-theme-root].dark .yw-comp-modal-link:hover { color: #f3eef8; }
[data-theme-root].dark .yw-comp-modal-notice { color: #7fd3b4; }
[data-theme-root].dark .yw-comp-modal-notice[data-tone="bad"] { color: #e69ac4; }
[data-theme-root].dark .yw-comp-modal-suggest { background: #2f2638; }
[data-theme-root].dark .yw-comp-modal-suggest-copy { color: #d9c8f0; }
[data-theme-root].dark .yw-comp-modal-suggest-why { color: #b49ccf; }
[data-theme-root].dark .yw-comp-day { background: #142036; }
[data-theme-root].dark :is(.yw-comp-day-head > h4, .yw-comp-day-side, .yw-comp-rating-value, .yw-comp-stat-head) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-comp-day-label, .yw-comp-rating-sub, .yw-comp-stat-line[data-ink], .yw-comp-moves > li) { color: #d9d2e3; }
[data-theme-root].dark :is(.yw-comp-day-twist, .yw-comp-diff) { background: #0d1527; }
[data-theme-root].dark :is(.yw-comp-day-twist > p, .yw-comp-diff) { color: #d9d2e3; }
[data-theme-root].dark .yw-comp-moves > li { border-top-color: #1c2843; }
[data-theme-root].dark .yw-comp-platform, [data-theme-root].dark .yw-comp-platforms-check button { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-comp-curve-col:hover, [data-theme-root].dark .yw-comp-curve-col[data-active="true"] { background: #30263a; }
[data-theme-root].dark .yw-comp-curve-rail { border-bottom-color: #5b5063; }
[data-theme-root].dark .yw-comp-curve-label { color: #a297ab; }