/* ===================================================================
   RENTALS HUB — ACCOUNT SUB-PAGES (subpages.css)
   Shared by saved.html / my-reviews.html / how-it-works.html.
   Design language follows the account/bookings screens; tokens, bottom
   nav, feed cards and the empty state come from app.css.
   =================================================================== */

.vm-subpage {
    background: var(--vm-canvas);
    padding-bottom: 96px;
    min-height: 100vh;
}

/* ---- Header: back circle + title (mirrors the wizard header) ------ */
.vm-sub-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vm-border-2);
}
.vm-sub-back {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--vm-text-2);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sub-back:hover { color: var(--vm-text-2); }
.vm-sub-title {
    margin: 0;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--vm-text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-sub-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--vm-muted);
    white-space: nowrap;
}

/* ---- Body padding -------------------------------------------------- */
.vm-sub-body { padding: 16px 20px 24px; }
.vm-sub-loading {
    text-align: center;
    padding: 34px 0;
    font-size: 13px;
    color: var(--vm-muted-2);
}

/* ---- My-reviews cards ---------------------------------------------- */
.vm-rev-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px rgba(16, 24, 40, .06);
    padding: 13px 14px;
    margin-bottom: 12px;
}
.vm-rev-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}
.vm-rev-thumb img,
.vm-rev-thumb .vm-rev-ph {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.vm-rev-thumb .vm-rev-ph {
    background: var(--vm-border-2);
    color: var(--vm-muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.vm-rev-main { flex: 1; min-width: 0; }
.vm-rev-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
a.vm-rev-title { color: var(--vm-text); }
a.vm-rev-title:hover { color: var(--vm-primary-dark); }
.vm-rev-meta {
    font-size: 11.5px;
    color: var(--vm-muted-2);
    margin-top: 2px;
}
.vm-rev-stars { display: flex; gap: 3px; margin-bottom: 8px; }
.vm-rev-stars i { font-size: 13px; color: #d8dce0; }
.vm-rev-stars i.is-on { color: var(--vm-star); }
.vm-rev-comment {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vm-text-2);
}
.vm-rev-date {
    margin-top: 8px;
    font-size: 11px;
    color: var(--vm-muted-2);
}

/* ---- How-it-works content ------------------------------------------ */
.vm-how-section { margin-bottom: 26px; }
.vm-how-section h2 {
    margin: 0 0 12px;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--vm-text);
}
.vm-how-intro {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--vm-muted);
}

/* Numbered steps */
.vm-how-steps {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px rgba(16, 24, 40, .06);
    padding: 6px 0;
}
.vm-how-step {
    display: flex;
    gap: 13px;
    padding: 13px 15px;
    border-bottom: 1px solid #f4f6f7;
}
.vm-how-step:last-child { border-bottom: none; }
.vm-how-step-n {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--vm-tint);
    color: var(--vm-primary-dark);
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-how-step-main { flex: 1; min-width: 0; }
.vm-how-step-title { font-size: 14px; font-weight: 700; color: var(--vm-text); }
.vm-how-step-sub {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--vm-muted);
    margin-top: 2px;
}

/* Rent vs contact mode cards */
.vm-how-modes { display: flex; gap: 11px; margin-top: 12px; }
.vm-how-mode {
    flex: 1;
    background: #fff;
    border: 1.5px solid var(--vm-border);
    border-radius: 14px;
    padding: 13px 12px;
}
.vm-how-mode i { color: var(--vm-primary); font-size: 15px; }
.vm-how-mode-title { display: block; font-size: 13.5px; font-weight: 700; margin-top: 7px; color: var(--vm-text); }
.vm-how-mode-sub { display: block; font-size: 11.5px; color: var(--vm-muted); margin-top: 3px; line-height: 1.4; }

/* Amber safety card (design language: contact-detail safety card) */
.vm-how-safety {
    background: var(--vm-amber-bg);
    border: 1px solid #f5e3b8;
    border-radius: 16px;
    padding: 15px;
}
.vm-how-safety-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vm-amber-text);
    margin: 0 0 9px;
}
.vm-how-safety ul {
    margin: 0;
    padding-left: 19px;
    font-size: 13px;
    line-height: 1.6;
    color: #7c5a12;
}
.vm-how-safety li + li { margin-top: 6px; }
.vm-how-safety-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vm-amber-text);
}
.vm-how-safety-link:hover { color: var(--vm-primary-dark); }
.vm-how-safety-link i { font-size: 11px; }

/* FAQ accordions (native <details>) */
.vm-faq {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px rgba(16, 24, 40, .06);
    overflow: hidden;
}
.vm-faq details { border-bottom: 1px solid #f4f6f7; }
.vm-faq details:last-child { border-bottom: none; }
.vm-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vm-text);
    cursor: pointer;
}
.vm-faq summary::-webkit-details-marker { display: none; }
.vm-faq summary i {
    margin-left: auto;
    color: var(--vm-muted-2);
    font-size: 12px;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.vm-faq details[open] summary i { transform: rotate(180deg); }
.vm-faq .vm-faq-a {
    margin: 0;
    padding: 0 15px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--vm-muted);
}

/* Help / contact section */
.vm-how-help {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px rgba(16, 24, 40, .06);
    overflow: hidden;
}
.vm-how-help-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 15px;
    border-bottom: 1px solid #f4f6f7;
}
.vm-how-help-row:last-child { border-bottom: none; }
.vm-how-help-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vm-tint);
    color: var(--vm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.vm-how-help-main { flex: 1; min-width: 0; }
.vm-how-help-title { font-size: 13.5px; font-weight: 700; color: var(--vm-text); }
.vm-how-help-sub {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--vm-muted);
    margin-top: 2px;
}
.vm-how-help-sub a { font-weight: 600; }


/* ===================================================================
   DESKTOP LAYER — >= 901px
   ===================================================================
   Appended at the END of the file on purpose (the repo's cascade-order
   trap: @media adds no specificity, so a min-width rule placed above a
   same-specificity base rule would lose to it).

   Load order on these three pages is app.css -> subpages.css ->
   desktop.css, so anything here that shares a class with desktop.css
   (.vm-dt-wrap in particular) is written one step more specific — page
   prefix `.vm-subpage` / `#vm-how` — or desktop.css would win by being
   later. That is exactly the convention desktop.css's header comment
   describes for per-page rules.

   RULING ON .vm-sub-header (the shipped sticky sub-page bar)
   ----------------------------------------------------------
   It ships as `position:sticky; top:0; z-index:20`, and the desktop
   header is `sticky; top:0; z-index:45`, so at desktop it slides
   underneath. The safety unit hit the identical collision with
   .vm-safe-topbar and RETIRED that bar, moving its one unique payload
   into a desktop-only heading. Same ruling here, different mechanism:
   this bar is not disposable, because it owns the page's only <h1> AND
   the [data-count] node the page's JS writes into. Duplicating either
   would give Playwright's strict mode two matches for `.vm-sub-title` /
   `.vm-sub-count` (which the shipped account-pages spec asserts on) and
   would leave a second, permanently empty count node in the DOM. So the
   bar is RESTYLED instead of hidden: it stops being sticky, stops being
   a white full-bleed bar, drops its back circle (the desktop header
   carries brand, nav and the Account route) and becomes the page title
   block on the content measure. Visual outcome matches the sibling: one
   bar of chrome, one page heading, no stacked sticky bars.

   Everything below is inside a min-width query over an untouched
   <=900px base. The only base-layer additions are class names on
   existing elements, all of which are inert below 901px.
   =================================================================== */
@media (min-width: 901px) {

/* --- shell -------------------------------------------------------
   .vm-app.vm-dt-shell (desktop.css 4.2) already unwinds the 480px
   frame and owns the min-height. The 96px bottom pad was clearance for
   the mobile bottom nav, which the desktop header replaces.
   ------------------------------------------------------------------ */
.vm-subpage { padding-bottom: 56px; }

/* --- the sticky sub-header becomes the page heading ---------------- */
.vm-subpage .vm-sub-header {
    position: static;
    z-index: auto;
    background: none;
    border-bottom: none;
    align-items: baseline;
    gap: 14px;
    padding: 36px var(--vm-dt-pad) 20px;
}
.vm-subpage .vm-sub-back { display: none; }
.vm-subpage .vm-sub-title {
    /* flex:1 pushed the count to the far edge of a 480px phone bar; on a
       1024px measure that would strand it a screen away from the title. */
    flex: 0 1 auto;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -.8px;
    line-height: 1.14;
    white-space: normal;
    overflow: visible;
}
.vm-subpage .vm-sub-count {
    /* A real count of rows the API returned, not a claim about the world. */
    padding: 5px 12px;
    border: 1px solid var(--vm-border-2);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
}

.vm-subpage .vm-sub-body { padding: 0 var(--vm-dt-pad) 8px; }
.vm-subpage .vm-sub-loading { padding: 44px 0; font-size: 13.5px; }

/* --- empty states -------------------------------------------------
   Left alone, a dashed-outline empty state stretches the full 1024px
   measure around two short lines of copy and reads as breakage.
   ------------------------------------------------------------------ */
.vm-subpage .vm-empty {
    max-width: 520px;
    margin: 8px auto 48px;
    padding: 48px 32px;
}
.vm-subpage .vm-empty i { font-size: 30px; margin-bottom: 14px; }
.vm-subpage .vm-empty p { font-size: 14px; margin-bottom: 16px; }

/* ------------------------------------------------------------------
   SAVED ITEMS
   Rendered by the same renderFeedCard() as the hub feed, so the grid
   is the hub feed's grid, value for value (desktop.css 8.3).
   ------------------------------------------------------------------ */
#vm-saved .vm-feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 16px;
}
#vm-saved .vm-feed-card .vm-card-media { height: 152px; }

/* ------------------------------------------------------------------
   MY REVIEWS
   The listing page's review grid is repeat(auto-fit, minmax(280px,1fr));
   auto-FILL is used here instead because this list can legitimately hold
   a single review, and auto-fit would blow that one card up to the full
   1024px measure. auto-fill keeps the column width honest at any count.
   ------------------------------------------------------------------ */
#vm-my-reviews [data-list] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    /* no align-items: the cards stretch to a shared row height, so a
       comment-less review does not leave a notch in the row */
}
/* The loading line and the network-error line are written into the same
   container, so they must span it rather than sit in column one. */
#vm-my-reviews [data-list] .vm-sub-loading { grid-column: 1 / -1; }
#vm-my-reviews .vm-rev-card {
    margin-bottom: 0;
    padding: 18px;
    border: 1px solid var(--vm-border-2);
    box-shadow: var(--vm-dt-shadow-card);
}
#vm-my-reviews .vm-rev-thumb img,
#vm-my-reviews .vm-rev-thumb .vm-rev-ph { width: 52px; height: 52px; }
#vm-my-reviews .vm-rev-title { font-size: 14.5px; }
#vm-my-reviews .vm-rev-comment { font-size: 13.5px; line-height: 1.6; }

/* ------------------------------------------------------------------
   HOW IT WORKS
   ------------------------------------------------------------------ */
#vm-how .vm-how-section { margin-bottom: 36px; }
#vm-how .vm-how-section h2 { margin-bottom: 10px; font-size: 21px; letter-spacing: -.5px; }
#vm-how .vm-how-intro { max-width: 620px; margin-bottom: 18px; font-size: 14.5px; line-height: 1.65; }

/* The journey stops being one tall white card of six rows (which at this
   width is a 1024px-wide list with 30px of ink in it) and becomes the same
   numbered step CARDS the hub's how-it-works band uses. */
#vm-how .vm-how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 16px;
    padding: 0;
    background: none;
    box-shadow: none;
}
#vm-how .vm-how-step {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #fff;
    border-bottom: none;
    border-radius: 16px;
    box-shadow: var(--vm-dt-shadow-card);
}
#vm-how .vm-how-step-n { width: 38px; height: 38px; font-size: 15px; }
#vm-how .vm-how-step-title { font-size: 16px; }
#vm-how .vm-how-step-sub { font-size: 13px; line-height: 1.6; }

#vm-how .vm-how-modes { gap: 16px; margin-top: 16px; }
#vm-how .vm-how-mode { padding: 18px 18px 20px; }
#vm-how .vm-how-mode i { font-size: 17px; }
#vm-how .vm-how-mode-title { font-size: 15px; }
#vm-how .vm-how-mode-sub { font-size: 12.5px; line-height: 1.5; }

/* Long-form reading measure. The heading, the step grid and the mode cards
   use the full --narrow measure; the three blocks that are actually PROSE
   are capped at 720px (~95 characters) so an FAQ answer never sets a
   1000px line. Below 1120px they simply sit left-aligned under the
   heading; at 1120px and up the grid below already gives them narrower
   columns (656px and 336px), so this cap stops applying on its own. */
#vm-how .vm-how-safety,
#vm-how .vm-faq,
#vm-how .vm-how-help { max-width: 720px; }

#vm-how .vm-how-safety { padding: 20px 22px; }
#vm-how .vm-how-safety-title { font-size: 15px; }
#vm-how .vm-how-safety ul { font-size: 13.5px; }

/* Native <details>, kept native — an existing spec pins that. */
#vm-how .vm-faq summary { padding: 16px 20px; font-size: 14px; }
#vm-how .vm-faq .vm-faq-a { padding: 0 20px 16px; font-size: 13.5px; line-height: 1.65; }

#vm-how .vm-how-help-row { padding: 16px 20px; }
#vm-how .vm-how-help-title { font-size: 14px; }
#vm-how .vm-how-help-sub { font-size: 13px; }

/* Every cross-page anchor that lands on this page has to clear the 72px
   sticky desktop header, or the target heading renders underneath it.
   #help  — linked from account.html, index.html, listing.html, rent-safely.html
   #faq-title — the "FAQs" link in both footers (index.html, listing.html) */
#vm-how #help,
#vm-how #faq-title { scroll-margin-top: 96px; }

} /* end >= 901px */


/* ===================================================================
   HOW IT WORKS — two-column article, >= 1120px
   ===================================================================
   The rail tier (desktop.css 5) is where the hub's sidebars appear, and
   it is where this page can afford two columns: the FAQ takes the
   reading column at ~656px and the two short reference blocks (safety
   note, help contacts) stack in a 336px side column instead of running
   the full measure with three lines of copy each.

   Placement is explicit via the --journey/--safety/--faq/--help
   modifiers rather than :nth-child, so re-ordering the sections in the
   HTML cannot silently scramble the layout. DOM order is journey,
   safety, faq, help; visual order is journey across the top, then faq
   left with safety over help on the right.
   =================================================================== */
@media (min-width: 1120px) {
#vm-how .vm-sub-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    column-gap: 32px;
    row-gap: 28px;
    align-items: start;
}
#vm-how .vm-how-section { margin-bottom: 0; }
#vm-how .vm-how-section--journey { grid-column: 1 / -1; grid-row: 1; }
#vm-how .vm-how-section--faq { grid-column: 1; grid-row: 2 / 4; }
#vm-how .vm-how-section--safety { grid-column: 2; grid-row: 2; }
#vm-how .vm-how-section--help { grid-column: 2; grid-row: 3; }
}