/* ══ THE HOMEOWNER'S OVERVIEW, IN THREE QUESTIONS ═══════════════  1 Oct 2026 ══
   The layout half of assets/hyyryn-home-overview.js; see the note there.
   Every rule is scoped to html.ovh, which only that script sets, so with the
   script off the Overview is exactly what it was. Colours are the page's
   own: gold is hers to do, navy is protected, green is done or calm. */

/* ── 2 · a shorter cover: the first screen reaches "Needs you" ────────── */
html.ovh .ov-cover{ aspect-ratio:1240/170; max-height:210px; min-height:110px }

/* ── 3 · one line under the name: the figures, not the sentence ──────── */
html.ovh .ov-head .ov-desc{ display:none }

/* ── 5 · the tabs, in view ──────────────────────────────────────────── */
html.ovh .ovh-tabs{
  display:flex; gap:clamp(14px,2.4vw,34px); overflow-x:auto; scrollbar-width:none;
  margin:clamp(14px,1.6vw,22px) var(--ov-inset, 24px) 0; padding:0 2px; border-bottom:1px solid var(--line);
}
html.ovh .ovh-tabs::-webkit-scrollbar{ display:none }
html.ovh .ovh-tab{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; padding:12px 0 13px; border:0; background:none; cursor:pointer;
  font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .2s ease;
}
html.ovh .ovh-tab::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; transition:background .2s ease }
html.ovh .ovh-tab:hover{ color:var(--navy) }
html.ovh .ovh-tab[aria-current]{ color:var(--navy); font-weight:600 }
html.ovh .ovh-tab[aria-current]::after{ background:var(--navy) }
html.ovh .ovh-tab:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; border-radius:2px }
html.ovh .ovh-tab-n{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--gold); color:var(--cream); font:600 10px/1 var(--sans); letter-spacing:0;
}

/* ── 4 · the tab's own heading goes: the tab bar says Overview ────────── */
html.ovh #tab-earnings > .tab-head{ display:none }

/* ── 13 · two columns: the work on the left, the money and record right ─ */
html.ovh #tab-earnings .ref-grid > .ovh-cols{
  grid-column:1 / -1; order:1; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr);
  gap:clamp(18px,2vw,30px); align-items:start;
}
html.ovh .ovh-l, html.ovh .ovh-r{ display:grid; gap:clamp(18px,2vw,30px); min-width:0; align-content:start }
html.ovh .ovh-cols .rcard{ margin:0 }
/* the grid's own orders (ov-money 4, ov-jobs 3) were written for one grid;
   inside the columns, the order is the order they were placed in */
html.ovh body #tab-earnings .ref-grid .ovh-cols .rcard{ order:0; grid-column:auto; align-self:start }
/* the card the grid gave its direct children, given again inside the columns
   (measured off the page before the move: cream, the house line, 19/21/17) */
html.ovh body #tab-earnings .ref-grid .ovh-cols .rcard{
  background:var(--cream); border:1px solid var(--line); border-radius:4px; padding:19px 21px 17px;
  box-shadow:0 1px 1px rgba(10,22,40,.035), 0 4px 9px -6px rgba(10,22,40,.18), 0 18px 30px -22px rgba(10,22,40,.45);
}
html.ovh #tab-earnings .ovh-cols .proofcard{ margin-top:0 }

/* ── 1, 15, 16 · Needs you ──────────────────────────────────────────── */
html.ovh .ovh-need{ position:relative; overflow:hidden }
html.ovh .ovh-need::before{ content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--gold-soft) }
html.ovh .ovh-need.is-calm::before{ background:var(--green) }
html.ovh .ovh-need-head{ display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; column-gap:12px }
html.ovh .ovh-need-head .rcard-s{ grid-column:1 / -1 }
html.ovh .ovh-need-n:not(:empty){
  display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; border-radius:13px;
  background:var(--gold); color:var(--cream); font:600 12px/1 var(--sans);
}
html.ovh .ovh-need-list{ list-style:none; margin:14px 0 0; padding:0 }
html.ovh .ovh-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px;
  padding:14px 14px 14px 16px; border-top:1px solid var(--line); cursor:pointer;
  background:rgba(212,169,67,.05); transition:background .2s ease;
}
html.ovh .ovh-row:hover{ background:rgba(212,169,67,.11) }
html.ovh .ovh-row[data-phase="stop"]{ background:var(--code-stop-bg, rgba(169,68,66,.075)) }
html.ovh .ovh-row.is-more{ display:none }
html.ovh .ovh-need.is-open .ovh-row.is-more{ display:grid; animation:ovhIn .35s cubic-bezier(.16,1,.3,1) both }
@keyframes ovhIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
html.ovh .ovh-row-tx{ display:flex; flex-direction:column; gap:3px; min-width:0 }
html.ovh .ovh-row-t{ font-family:var(--serif); font-size:16px; line-height:1.3; color:var(--navy); text-decoration:none; text-wrap:pretty }
html.ovh .ovh-row-t:hover{ text-decoration:underline; text-underline-offset:3px }
html.ovh .ovh-row-s{ font-family:var(--serif); font-size:13.5px; line-height:1.35; color:var(--gold-ink, #6E5220) }
html.ovh .ovh-row-v{ font-family:var(--serif-display); font-size:19px; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap }
html.ovh .ovh-row-act .oj-act{ white-space:nowrap }
html.ovh .ovh-more{ padding:12px 16px 0; border-top:1px solid var(--line) }
html.ovh .ovh-more-b{ border:0; background:none; padding:0; cursor:pointer }
html.ovh .ovh-calm{ display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:10px; background:rgba(15,90,79,.07); color:var(--green); font-family:var(--serif); font-size:15px; line-height:1.5 }
html.ovh .ovh-calm b{ font-weight:400; color:var(--green-2, #0B3F37) }
html.ovh .ovh-calm svg{ flex:none; width:20px; height:20px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ── 6, 7, 8 · one jobs list: filters, short rows ────────────────────── */
html.ovh .ovh-filt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 0 }
html.ovh .ovh-chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:0; cursor:pointer;
  background:var(--cream-2); color:var(--navy); box-shadow:inset 0 0 0 1px var(--line-2);
  font:500 11px/1 var(--sans); letter-spacing:.08em; transition:background .2s, color .2s, box-shadow .2s;
}
@media (max-width: 760px) { html.ovh .ovh-chip { font-size: 12px; } }  /* rp200 phone floor, was 11px (set in the shorthand) */
html.ovh .ovh-chip:hover{ box-shadow:inset 0 0 0 1px var(--navy) }
html.ovh .ovh-chip[aria-pressed="true"]{ background:var(--navy); color:var(--cream); box-shadow:none }
html.ovh .ovh-chip-n{ font-variant-numeric:tabular-nums; opacity:.75 }
html.ovh .ovh-chip:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px }
html.ovh .ovh-fin{ margin-left:auto; font-size:10.5px }
html.ovh .ov-jobs .oj-key{ display:none }
html.ovh .ov-jobs .oj-list > .oj-item.ovh-off{ display:none !important }
/* the explanation opens on the row's own small button */
html.ovh .ov-jobs .oj-item:not(.is-why) .oj-say{ display:none }
html.ovh .ov-jobs .oj-t{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:6px }
html.ovh .ov-jobs .oj-say{ flex-basis:100% }
html.ovh .ovh-why{
  flex:none; display:inline-grid; place-items:center; width:22px; height:22px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--muted); transform:translateY(3px); transition:background .2s, transform .25s ease;
}
html.ovh .ovh-why:hover{ background:var(--cream-2); color:var(--navy) }
html.ovh .ovh-why svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease }
html.ovh .oj-item.is-why .ovh-why svg{ transform:rotate(180deg) }
html.ovh body .ov-jobs .oj-item.is-why .oj-say{ display:block !important }
html.ovh .ovh-why:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px }
/* the people move to their own card */
html.ovh .ov-jobs .oj-people, html.ovh .ov-jobs .oj-people-h, html.ovh .ov-jobs [data-oj-foot="people"]{ display:none !important }
/* in the left column every row is the stacked row: name and next move,
   then the rail with the money on it, full width */
html.ovh .ovh-l .ov-jobs .oj-rail{ grid-template-columns:repeat(4, minmax(0,1fr)); padding:0 14px 10px 16px; column-gap:0; margin-top:16px }
html.ovh .ovh-l .ov-jobs .oj-rail .oj-rail-job, html.ovh .ovh-l .ov-jobs .oj-rail .oj-rail-next{ display:none }
html.ovh .ovh-l .ov-jobs .oj-rail li:nth-child(n){ grid-column:auto }
html.ovh .ovh-l .ov-jobs .oj-item{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t n" "r r"; row-gap:12px; padding:14px 14px 16px 16px }
html.ovh .ovh-l .ov-jobs .oj-t{ grid-area:t; grid-column:auto }
html.ovh .ovh-l .ov-jobs .oj-next{ grid-area:n; grid-column:auto }
html.ovh .ovh-l .ov-jobs .oj-track--money{ grid-area:r; grid-column:auto; width:100%; justify-self:stretch }
html.ovh .ovh-l .ov-jobs .oj-item.is-extra{ display:grid }
html.ovh .ovh-l .ov-jobs .oj-more--phone{ display:none }

/* ── 9 · who works for you ──────────────────────────────────────────── */
html.ovh .ovh-people-list{ list-style:none; margin:12px 0 0; padding:0 }
html.ovh .ovh-people-list li + li{ border-top:1px solid var(--line) }
html.ovh .ovh-p{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 2px; color:inherit; text-decoration:none }
html.ovh .ovh-p:hover b{ text-decoration:underline; text-underline-offset:3px }
html.ovh .ovh-p-face{ width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--navy); color:var(--cream); font:500 13px/1 var(--sans) }
html.ovh .ovh-p-face img{ width:100%; height:100%; object-fit:cover; display:block }
html.ovh .ovh-p-t{ display:flex; flex-direction:column; gap:2px; min-width:0 }
html.ovh .ovh-p-t b{ font-family:var(--serif); font-weight:400; font-size:16px; color:var(--navy) }
html.ovh .ovh-p-t span{ font-family:var(--serif); font-size:13px; color:var(--muted) }
html.ovh .ovh-p-v{ display:flex; flex-direction:column; align-items:flex-end; font-family:var(--serif-display); font-size:17px; color:var(--navy); font-variant-numeric:tabular-nums }
html.ovh .ovh-p-v small{ font-family:var(--serif); font-size:12px; color:var(--muted) }

/* ── 10 · the money card: total, bar, paid, under way, the next date ──── */
html.ovh .ov-money .om-row--releasing{ display:none }

/* ── 12 · proof: the three figures, and only what waits on her ──────── */
html.ovh .proofcard .pf-post:not(.pf-post--wait){ display:none }
html.ovh .proofcard .gt--seal:not(:has(.gt-state--wait)):not(:has(.gt-state--no)){ display:none !important }
html.ovh .proofcard .pf-post:not(.pf-post--wait){ display:none !important }
html.ovh .ovh-r .proofcard .proof-band{ grid-template-columns:repeat(3, minmax(0,1fr)) }
html.ovh .ovh-r .proofcard .pf-fig{ padding:14px 12px }
html.ovh .ovh-r .proofcard .figband-v{ font-size:30px }
html.ovh .ovh-r .proofcard .pf-shots{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) }
html.ovh .ovh-proof-calm{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:rgba(15,90,79,.07); color:var(--green); font-family:var(--serif); font-size:14px; line-height:1.5 }
html.ovh .ovh-proof-calm svg{ flex:none; width:18px; height:18px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
html.ovh .ovh-fold{ display:none }

/* ── 17 · the tour's pill on the cover, gone once the page scrolls ───── */
html.ovh .hy-tour-dock{ top:calc(var(--bar, 74px) + 16px); bottom:auto; left:clamp(70px, 6vw, 88px) }
html.ovh .hy-tour-menu, html.ovh .hy-tour-offer{ top:calc(var(--bar, 74px) + 64px); bottom:auto; left:clamp(70px, 6vw, 88px) }
html.ovh.ovh-scrolled .hy-tour-dock{ opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden; transition:opacity 200ms, transform 200ms, visibility 0s 200ms }

/* ── 14 · one column: Needs you, money, jobs, people, proof folded ───── */
@media (max-width:1080px){
  html.ovh #tab-earnings .ref-grid > .ovh-cols{ display:flex; flex-direction:column }
  html.ovh .ovh-l, html.ovh .ovh-r{ display:contents }
  html.ovh body #tab-earnings .ref-grid .ovh-cols .ovh-need{ order:1 }
  html.ovh body #tab-earnings .ref-grid .ovh-cols .ov-money{ order:2 }
  html.ovh body #tab-earnings .ref-grid .ovh-cols .ov-jobs{ order:3 }
  html.ovh body #tab-earnings .ref-grid .ovh-cols .ovh-people{ order:4 }
  html.ovh body #tab-earnings .ref-grid .ovh-cols .proofcard{ order:5 }
}
@media (max-width:700px){
  html.ovh .ovh-row{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"t t t" "d v a"; gap:10px 12px; padding:14px 12px }
  html.ovh .ovh-row > .oj-track{ grid-area:d; align-self:center }
  html.ovh .ovh-row-tx{ grid-area:t } html.ovh .ovh-row-v{ grid-area:v; align-self:center; font-size:17px } html.ovh .ovh-row-act{ grid-area:a; justify-self:end }
  html.ovh .ovh-fin{ margin-left:0; flex-basis:100%; margin-top:4px }
  html.ovh .ovh-fold{ display:inline-block; margin-top:8px; border:0; background:none; padding:0; cursor:pointer; text-align:left }
  html.ovh .proofcard:not(.is-unfold) .pf-post, html.ovh .proofcard:not(.is-unfold) .pf-note{ display:none }
  html.ovh .ovh-r .proofcard .proof-band, html.ovh .proofcard .proof-band{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  html.ovh .proofcard .figband-s{ display:none }
  html.ovh .ovh-tab{ font-size:10.5px; letter-spacing:.12em }
}
/* on a phone the head is one row: the face beside the name, the figures
   under it, and the one action that matters. Payment protection keeps its
   other six doors (the account menu, the rail, the proof card, the footer). */
@media (max-width:640px){
  html.ovh .ov-head{ --av:64px; --ov-drop:10px }
  html.ovh .ov-id{ grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:10px; align-items:start; padding-left:0; padding-right:0 }
  html.ovh .ov-avatar{ margin-top:-22px; box-shadow:0 0 0 3px var(--cream) }
  html.ovh .ov-id-t{ margin-top:10px }
  html.ovh .ov-name{ font-size:22px }
  html.ovh .ov-figs{ font-size:13px }
  html.ovh .ov-acts{ grid-column:1 / -1; margin-top:2px; gap:10px; flex-wrap:nowrap }
  html.ovh #ovProtect{ display:none }
  html.ovh .ov-acts #ovPostJob{ flex:1; justify-content:center }
}
@media (prefers-reduced-motion:reduce){ html.ovh .ovh-need.is-open .ovh-row.is-more{ animation:none } }

/* rp123: in one column every card is the column's width (Who works for you shrank to its content, 15px
   short of the others), and the third proof figure keeps "SHA-256" on one line */
@media (max-width:1080px){ html.ovh body #tab-earnings .ref-grid .ovh-cols .ovh-people{ align-self:stretch } }
html.ovh .proofcard .figband-v--sm{ white-space:nowrap }
@media (max-width:700px){ html.ovh .proofcard .pf-fig--seal .figband-v{ font-size:22px } }

/* ══ A FIRST RUN: NO JOB EVER POSTED (rp136, 14 Oct 2026) ══════════════════════════════════════════════════════
   The guide leads, then who works near her district and what is checked before anyone can price. The empty cards
   (Needs you, Your jobs, Your money, Your proof) wait until her first job. html.ov-first is set by
   assets/hyyryn-home-tabs.js for a signed-in homeowner with no job. */
html.ov-first.ovh body #tab-earnings .ref-grid > .ovh-cols{ display:none }
html.ov-first body #tab-earnings .ref-grid > .ov-start{ order:0 }
html.ovh body #tab-earnings .ref-grid > .ovh-first{ grid-column:1 / -1; order:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px,2vw,30px); align-items:start }
html.ovh body #tab-earnings .ref-grid > .ovh-first[hidden]{ display:none }
html.ovh body #tab-earnings .ref-grid .ovh-first .rcard{
  margin:0; background:var(--cream); border:1px solid var(--line); border-radius:4px; padding:19px 21px 17px;
  box-shadow:0 1px 1px rgba(10,22,40,.035), 0 4px 9px -6px rgba(10,22,40,.18), 0 18px 30px -22px rgba(10,22,40,.45) }
html.ovh .ovh-first .rcard-foot{ margin-top:16px }
html.ovh .ovh-pros{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line) }
html.ovh .ovh-pro{ border-bottom:1px solid var(--line) }
html.ovh .ovh-pro-a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 2px; color:var(--navy); text-decoration:none }
html.ovh .ovh-pro-a:hover .ovh-pro-t b{ text-decoration:underline; text-underline-offset:3px }
html.ovh .ovh-pro-t{ display:flex; flex-direction:column; gap:3px; min-width:0 }
html.ovh .ovh-pro-t b{ font-family:var(--serif); font-size:16px; font-weight:400 }
html.ovh .ovh-pro-t span{ font-family:var(--sans); font-size:12px; color:var(--muted) }
html.ovh .ovh-pro-p{ flex:none; font-family:var(--serif); font-size:15px; color:var(--navy) }
html.ovh .ovh-facts{ margin:14px 0 0; padding:0; display:grid; gap:14px }
html.ovh .ovh-facts > div{ padding:0 0 0 14px; border-left:2px solid var(--line-2, #D8CFB8) }
html.ovh .ovh-facts dt{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--navy); margin:0 }
html.ovh .ovh-facts dd{ margin:4px 0 0; font-family:var(--serif); font-size:14px; line-height:1.55; color:var(--ink, #1B2638) }
@media (max-width:860px){ html.ovh body #tab-earnings .ref-grid > .ovh-first{ grid-template-columns:minmax(0,1fr) } }

/* ══ rp157 (17 Oct 2026, the launch-day pass) ═══════════════════════════════════════════════════════════════════
   On a phone two things ran into their neighbours. "from £180" in Needs you ran 3px under "Compare prices": the
   price cell would not wrap, so it could not be narrower than its words; it wraps now, "from" above the figure.
   And "SHA-256" ran 7px out of the third proof figure: the 22px meant for phones lost to a 26px rule with an id
   in it, and the cell is 57px to 93px wide at 320px to 430px. The figure now scales with the screen and fits. */
@media (max-width:700px){
  html.ovh .ovh-row-v{ white-space:normal; line-height:1.15 }
  html.ovh body #tab-earnings .proofcard .pf-fig--seal .figband-v{ font-size:clamp(14px, calc((100vw - 120px) / 13.5), 26px) }
}