/* item-rates-mobile.css
   Mobile (<=768px) Rates section of the profile page - "Two lists", owner-approved 2026-09-02
   (docs/plans/rates-mobile-plan-2026-09-02.md): same section rhythm as the contact block, "Incall in ... / Outcall to ..."
   hint from the advertiser's suburbs, Incall / Outcall groups with 48px price rows, "Additional price information" in full.
   Loaded at every width: the base rule keeps the mobile block hidden on desktop (the markup also carries an inline
   display:none as the fail-safe for a missing sheet - not the `hidden` attribute, so the shown block stays exposed to
   assistive tech); the mobile block below hides the card markup the desktop sidebar uses. The outcall location text sits in .item-rates-mobile-loc-text children: dark.css's late 10x [data-theme] chain colours
   .np-value-text itself (#D8DAE0) and cannot reach them, so the grey token is set on the children. Prefix P =
   body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates (0,4,1) = the existing mobile rules' prefix, so every
   override adds a class and uses !important where the existing declaration has it. Tokens: ink #0f0f0f, sec #6b7280,
   line #ececec; dark twins reuse the dark.css tokens (the section title keeps the theme's dark heading colour). */
.item-rates-mobile { display: none; }
@media (max-width: 768px) {

body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates { padding: 32px 0 24px !important; /* rhythm: rule, 32, title (2026-09-03) */ margin: 0 !important; border-top: 1px solid #ececec !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates > .np-header,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates > .mc-stats-grid,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates > .np-rates-subsection-label,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates > .np-sub-card { display: none !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile { display: block !important; }   /* beats the inline display:none fail-safe */

body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-title { margin: 0 !important; padding: 0 !important; font-size: 22px !important; line-height: 26px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: #0f0f0f !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-hint { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #6b7280 !important; }

body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 20px 0 0; font-size: 16px; line-height: 20px; font-weight: 500; color: #0f0f0f; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-title + .item-rates-mobile-group,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-hint + .item-rates-mobile-group { margin-top: 12px; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-group > span,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-group > span.np-value-text { display: inline; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #6b7280 !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc .np-outcall-preview,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc .np-outcall-full,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc-text { font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #6b7280 !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc a.np-outcall-toggle { font-size: 14px !important; line-height: 18px !important; font-weight: 500 !important; color: #0f0f0f !important; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; margin: 0 !important; }

body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-rows { display: flex; flex-direction: column; margin: 4px 0 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-title + .item-rates-mobile-rows,
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-hint + .item-rates-mobile-rows { margin-top: 12px; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 48px; border-top: 1px solid #ececec; font-size: 16px; line-height: 20px; font-weight: 400; color: #0f0f0f; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-row:first-child { border-top: 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-row b { font-weight: 500; font-variant-numeric: tabular-nums; }

body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-notes { margin: 24px 0 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-notes-title { font-size: 16px; line-height: 20px; font-weight: 500; color: #0f0f0f; }
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-notes p { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: #6b7280 !important; white-space: pre-line; }

/* dark twins - the section title takes the theme-wide dark heading colour (no override here) */
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates { border-top-color: var(--esc-dk-line) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-hint,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-group > span,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-group > span.np-value-text,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc .np-outcall-preview,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc .np-outcall-full,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc-text,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-notes p { color: var(--esc-dk-text-2) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-group,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-row,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-notes-title,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-loc a.np-outcall-toggle { color: var(--esc-dk-text) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--rates .item-rates-mobile-row { border-top-color: var(--esc-dk-line); }

}

/* Desktop (>=769px, owner 2026-09-03): the same Rates section is relocated into the left column (after About me, before
   The Basics) by relocateDesktopProfileSections() in item.php, and shows the "Two lists" block instead of the card
   markup - the contact card carries a compact copy of the rows, this is the full price area (incall / outcall /
   additional price information). Same rhythm as the other left-column sections (hairline, 40px above, 21px title).
   While the section still sits in the sidebar (before the script runs, or without JS) item-contact-desktop.css
   keeps it hidden. Prefix P = the relocated section under .parameters (0,4,1). */
@media (min-width: 769px) {
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable { display: block !important; background: transparent !important; border: 0 !important; border-top: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; margin: 40px 0 0 !important; padding: 40px 0 0 !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable > .np-header,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable > .mc-stats-grid,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable > .np-rates-subsection-label,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable > .np-sub-card { display: none !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile { display: block !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-title { margin: 0 !important; padding: 0 !important; font-size: 21px !important; line-height: 26px !important; font-weight: 500 !important; letter-spacing: -0.012em !important; color: #18181b !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-hint { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #6b7280 !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 24px 0 0; font-size: 16px; line-height: 20px; font-weight: 500; color: #0f0f0f; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-title + .item-rates-mobile-group,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-hint + .item-rates-mobile-group { margin-top: 16px; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-group > span,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-group > span.np-value-text { display: inline; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #6b7280 !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc .np-outcall-preview,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc .np-outcall-full,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc-text { font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #6b7280 !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc a.np-outcall-toggle { font-size: 14px !important; line-height: 18px !important; font-weight: 500 !important; color: #0f0f0f !important; text-decoration: none !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-rows { display: flex; flex-direction: column; margin: 4px 0 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-title + .item-rates-mobile-rows,
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-hint + .item-rates-mobile-rows { margin-top: 16px; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; box-sizing: border-box; height: 48px; border-top: 1px solid #ececec; font-size: 16px; line-height: 20px; color: #0f0f0f; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-row:first-child { border-top: 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-notes { margin: 24px 0 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-notes-title { font-size: 16px; line-height: 20px; font-weight: 500; color: #0f0f0f; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-notes p { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: #6b7280 !important; }
/* owner try 2026-09-03: Incall and Outcall side by side. The block is a 2-column grid; title, hint and notes span
   both columns; the first label/list sits in column 1 (row 3/4), a second group in column 2; a single list also stays in
   column 1 (owner: aligned with the first Basics column, not stretched). div:nth-of-type counts the block's divs in DOM order:
   group(1) rows(2) group(3) rows(4) notes(5), or rows(1) notes(2) without a label. */
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-title { grid-column: 1 / -1; grid-row: 1; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-hint { grid-column: 1 / -1; grid-row: 2; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile > div.item-rates-mobile-group { margin-top: 16px !important; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile > div.item-rates-mobile-group:nth-of-type(1) { grid-column: 1; grid-row: 3; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile > div.item-rates-mobile-rows:nth-of-type(1) { grid-column: 1; grid-row: 3; }   /* owner: a single list stays in column 1, aligned with the first Basics column (375px), never stretched */
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile > div.item-rates-mobile-rows:nth-of-type(2) { grid-column: 1; grid-row: 4; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile > div.item-rates-mobile-group:nth-of-type(3) { grid-column: 2; grid-row: 3; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile > div.item-rates-mobile-rows:nth-of-type(4) { grid-column: 2; grid-row: 4; }
body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-notes { grid-column: 1 / -1; grid-row: 5; }
/* dark twins */
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable { border-top-color: var(--esc-dk-line) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-title,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-group,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-row,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-notes-title,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc a.np-outcall-toggle { color: var(--esc-dk-text) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-hint,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-group > span,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-group > span.np-value-text,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc .np-outcall-preview,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc .np-outcall-full,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-loc-text,
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-notes p { color: var(--esc-dk-text-2) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--rates-relocatable .item-rates-mobile-row { border-top-color: var(--esc-dk-line); }
}