/* ══ THE OVERVIEW, SECTION BY SECTION ═══════════════════════════ 28 Sep 2026 ══ Sir: "start with the overview page and go through all the tabs one by one revamping every section". Chosen: both dashboards, kept identical; one tab at a time; the same look with every section rebuilt. ONE FILE, LOADED BY BOTH PAGES, so the two Overviews cannot drift apart again: dashboard-tradesperson.html and my-jobs.html each carry thousands of lines of their own sheet, and yesterday's parity pass found all sixty shared elements differing. Everything a section is built from lives here, and `html body` puts it above either page's own rules without !important. WHAT EACH SECTION WAS, MEASURED AT 1440 BEFORE THIS FILE: the greeting three figures at 12px in one run of text the checklist "3 of 4 done" as the last words of a sentence; the step buttons at whatever height the text above them left the bar a 470px column of text beside 600px of nothing the money card a 226px pie over two 95px rows each holding one figure the right card (trade) "Nothing open near you" said twice, over an empty 66px box; (homeowner) a dot alone on its own line above every status, "£0 protected" on jobs that have no money in them, and a "P" clipped by its own circle the proof card "None", "0 of 0" and "0": one absence said three ways the footers a filled button on one card, an outline on the next, and a line of text on the third, for the same job */ /* ── 1. THE GREETING'S FIGURES ───────────────────────────────────────────── The figures are what a returning reader checks first, and they were the smallest type in the header. Each number is set in the display serif at the size of a key figure, its label in the house small caps. */ html body .ov-id .ov-figs{ margin-top:10px; line-height:1.9; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } html body .ov-id .ov-figs b{ font-family:var(--serif-display); font-weight:400; font-size:21px; letter-spacing:0; text-transform:none; color:var(--navy); margin-right:5px; vertical-align:-1px; } /* the dot between the head's figures in the muted ink: the rule colour read 1.46 to 1 (rp123 fixed it in My jobs' own sheet, which this outranked; Mason gate, 14 Oct 2026) */ html body .ov-id .ov-figs .ov-dot{ margin:0 10px; color:var(--muted, #636976) } html body .ov-id .ov-figs .ov-rate{ text-transform:none; letter-spacing:0; font-size:12px; font-weight:400 } html body .ov-id .ov-desc{ margin-top:4px } /* ── 2. THE CHECKLIST ────────────────────────────────────────────────────── Progress is a meter beside the title, not the tail of a sentence. The steps sit on one grid and their buttons on one line, because a button floats with its text and four texts are four lengths. A done step goes quiet: no fill, no dashes, a tick. */ html body .ov-start .ov-start-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px } html body .ov-start .ov-start-side{ display:flex; align-items:center; gap:18px; flex:none; padding-top:6px } html body .ov-meter{ display:flex; align-items:center; gap:10px } html body .ov-meter-bar{ display:flex; gap:4px } html body .ov-meter-bar i{ width:26px; height:4px; border-radius:2px; background:var(--line-2) } html body .ov-meter-bar i.is-on{ background:var(--green, #0F5A4F) } html body .ov-meter-t{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); white-space:nowrap; } html body .ov-start .ov-start-hide{ padding-top:0 } html body .ov-steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px } html body .ov-step{ display:flex; flex-direction:column; gap:8px; min-height:100%; border-style:solid } html body .ov-step .ov-step-s{ flex:1 1 auto } html body .ov-step .ov-step-a{ margin-top:6px; align-self:flex-start } html body .ov-step.is-done{ background:transparent; border:1px solid var(--line); border-style:solid } html body .ov-step.is-done .ov-step-k span:last-child{ color:var(--muted) } html body .ov-step.is-done .ov-step-s{ opacity:.8 } html body .ov-step.is-done .ov-step-done{ margin-top:auto } @media (max-width:1080px){ html body .ov-steps{ grid-template-columns:repeat(2, minmax(0,1fr)) } } @media (max-width:560px){ html body .ov-steps{ grid-template-columns:1fr } html body .ov-start .ov-start-head{ flex-direction:column; gap:10px } html body .ov-start .ov-start-side{ padding-top:0 } /* rp160: four needed steps make the meter longer; the meter and "Hide this list" wrap rather than run off a phone */ html body .ov-start .ov-start-side{ flex:1 1 auto; flex-wrap:wrap; row-gap:8px; max-width:100% } } /* ── 3. WHAT NEEDS YOU NOW ───────────────────────────────────────────────── Three columns that each own their width: the mark, the sentence (which may now run the width of the bar instead of wrapping at 470px), and the actions, whose primary is never narrower than its label wants. */ html body .evbar{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; padding:18px 22px; } html body .evbar .ev-say{ min-width:0 } html body .evbar .ev-t{ font-family:var(--serif); font-size:16px; line-height:1.35; color:var(--navy); margin:0 } html body .evbar .ev-s{ max-width:78ch; margin:4px 0 0; font-size:12.5px; line-height:1.55 } html body .evbar .ev-act{ display:flex; align-items:center; gap:18px; flex-wrap:nowrap } html body .evbar .ev-act .btn{ min-width:150px; white-space:nowrap } html body .evbar .ev-act .near-more{ white-space:nowrap } @media (max-width:900px){ html body .evbar{ grid-template-columns:auto minmax(0,1fr) } html body .evbar .ev-act{ grid-column:1 / -1; flex-wrap:wrap } } /* ── 4. THE MONEY CARD ───────────────────────────────────────────────────── A ring, not a disc: the total sits in the middle where the eye already is, instead of under the chart on a patch of cream cut out of the rule. The two figures are one line each. The note and the button sit at the foot of the card, so the card ends on its action whatever its height. */ html body .rcard--pie{ display:flex; flex-direction:column } html body .rcard--pie .pie-stage{ position:relative; width:236px; max-width:100%; margin:20px auto 6px } html body .rcard--pie .pie{ width:236px; max-width:100%; height:auto; display:block; overflow:visible } html body .rcard--pie .pie-hole{ fill:var(--cream, #FAF8F3); pointer-events:none } html body .rcard--pie .pie-read{ position:absolute; left:50%; top:50%; bottom:auto; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px; width:112px; margin:0; padding:0; background:none; white-space:normal; text-align:center; pointer-events:none; } html body .rcard--pie .pie-read b{ font-size:26px; line-height:1 } html body .rcard--pie .pie-read span{ font-size:9px; line-height:1.35; letter-spacing:.12em } html body .rcard--pie .pie-key{ margin:18px 0 0 } html body .rcard--pie .pie-key li{ grid-template-columns:auto minmax(0,1fr) auto 46px; align-items:center; gap:12px; padding:12px 2px; } html body .rcard--pie .pie-key li b{ grid-column:auto; font-size:20px; line-height:1 } html body .rcard--pie .pie-key li i{ text-align:right; font-style:normal } html body .rcard--pie .pie-key li:last-child{ border-bottom:1px solid var(--line) } html body .rcard--pie .pie-key{ margin-bottom:auto } html body .rcard--pie .pie-next, html body .rcard--pie .pie-note{ margin:18px 0 0; padding:13px 15px; border-radius:8px; background:var(--cream-2); font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--ink, #1B2638); } html body .rcard--pie .pie-next:not([hidden]) + .pie-none[hidden] + .pie-note, html body .rcard--pie .pie-next:not([hidden]) + .pie-note{ margin-top:10px } html body .rcard--pie > .btn{ margin-top:16px; align-self:flex-start } /* ── 5. THE CARD FOOTERS, ONE RULE ───────────────────────────────────────── The 7 Sep ruling on My jobs, now kept on both pages: a fill is for the thing with a clock on it (the bar's action) or for starting something (Post a job, List a service). Everything at the foot of a card goes somewhere, so it is an outline, or a quiet link beside one. It had drifted: a fill on one card, an outline on the next, a line of text on the third. */ html body .rcard-foot, html body .proof-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-top:18px } /* ── 6. JOBS NEAR YOU (trade) ────────────────────────────────────────────── With nothing open, the map says so once, under itself, and the empty "Closest to you" box goes: it said the same thing a second time over 66px of nothing. It comes back the moment there is a job in it. */ html body .rcard--map .map-near:has(#mnList:empty){ display:none } html body .rcard--map .map-note{ margin:10px 2px 0 } /* ── 7. YOUR JOBS AND TRADESPEOPLE (homeowner) ───────────────────────────── One row, four columns that hold still: who, the job, where it stands, and the money. The status reads as a label with its detail under it; before, its dot sat alone on a line of its own above both. */ html body .ov-mix .yj-row{ grid-template-columns:36px minmax(0,1.25fr) minmax(0,1fr) 112px; gap:16px; align-items:center; padding:14px 10px; } html body .ov-mix .yj-face, html body .ov-mix .yj-face.fin-face--mono, html body .ov-mix .yj-face--mono{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--cream-2); box-shadow:0 0 0 1px var(--line); object-fit:cover; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--navy); overflow:hidden; } html body .ov-mix .yj-face svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6 } html body .ov-mix .yj-state{ display:block; min-width:0 } html body .ov-mix .yj-state .yj-dot{ margin-right:8px; vertical-align:1px } html body .ov-mix .yj-state em{ display:block; margin-top:4px } html body .ov-mix .yj-v{ align-items:flex-end } html body .ov-mix .yj--quotes .yj-v{ color:var(--navy) } html body .ov-mix .yj-v.is-none{ font-family:var(--serif); font-size:14px; color:var(--muted) } @media (max-width:900px){ html body .ov-mix .yj-row{ grid-template-columns:36px minmax(0,1fr) auto; row-gap:8px } html body .ov-mix .yj-state{ grid-column:2 / -1; grid-row:2 } } /* ── 8. YOUR PROOF (homeowner) ───────────────────────────────────────────── With nothing sealed, the three figures were "None", "0 of 0" and "0": one absence in three cells. They wait until there is something to count, and the one sentence saying what will appear stands in their place. */ html body .proofcard:has(.pf-none) .proof-band{ display:none } html body .proofcard .pf-none{ margin:16px 0 0; padding:13px 15px; border-radius:8px; background:var(--cream-2); font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--ink, #1B2638); } html body .proofcard .proof-say{ margin-top:14px } /* ── 9. THE TWO COLUMNS END TOGETHER ─────────────────────────────────────── Each column's last card runs to the foot of the row and keeps its actions at its own foot, so the pair ends on one line whichever holds more. */ html body #tab-earnings .ref-grid > .ov-col{ align-self:stretch; display:flex; flex-direction:column } html body #tab-earnings .ov-col > .rcard:last-child{ flex:1 1 auto } html body #tab-earnings .ov-col--facts > .rcard--pie{ flex:1 1 auto } html body .ov-mix .proof-foot, html body .rcard--map .rcard-foot{ margin-top:auto; padding-top:18px } html body .ov-mix .yj-list{ margin-bottom:0 } html body .ov-mix .yj-state em{ white-space:normal; overflow:visible } /* ── 10. YOUR PROOF RUNS THE WIDTH (homeowner) ───────────────────────────── It sat under the jobs in the right-hand column, which made that column three hundred pixels longer than the money beside it. Full width, above the chart, it reads as the record it is. */ html body #tab-earnings .ref-grid > .proofcard{ grid-column:1 / -1 } html body .proofcard .pf-none{ max-width:none } html body .proofcard .proof-say{ max-width:80ch } html body #tab-earnings .ref-grid > .proofcard{ position:relative; 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); } /* full width, three photographs across would be 420 wide each; they keep the size they had in the column */ html body #tab-earnings .ref-grid > .proofcard .pf-shots{ max-width:640px } /* On one column the proof follows the money, before the chart: the order a reader asks in is what is waiting, where the jobs are, where the money is, what the record holds, then the history. */ @media (max-width:1080px){ html body #tab-earnings .ref-grid > .proofcard{ order:2 } html body #tab-earnings .ref-grid > .rcard--chart{ order:3 } } /* ══ SECOND PASS ═══════════════════════════════════════════════ 28 Sep 2026 ══ Sir: a better way of showing the jobs completed, in progress and waiting on you (chosen: three status tiles); the text of the proof section and the three above it; the whole structure more intuitive and more visual. */ /* ── 11. THE STATUS TILES ────────────────────────────────────────────────── Three cards of one shape. The count is the biggest figure on the page after the greeting, because "how many are waiting on me" is the question the page is opened to answer. Waiting on you carries the gold edge only while it has something in it: gold is "look at this", and an empty tile is not. */ html body #tab-earnings .ref-grid > .ov-status{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; } html body .st-tile{ position:relative; display:flex; flex-direction:column; min-width:0; background:var(--cream); border:1px solid var(--line); border-radius:4px; padding:18px 20px 16px; 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 body .st-tile--wait:not(.is-empty){ box-shadow:inset 0 3px 0 var(--gold, #D4A943), 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 body .st-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line) } html body .st-k{ margin:0; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); } html body .st-tile--wait:not(.is-empty) .st-k{ color:var(--gold-ink, #83632C) } html body .st-n{ margin:0; font-family:var(--serif-display); font-size:40px; line-height:.9; color:var(--navy); font-variant-numeric:tabular-nums } html body .st-tile.is-empty .st-n{ color:var(--line-2) } html body .st-list{ list-style:none; margin:0; padding:0; flex:1 1 auto } html body .st-row{ border-bottom:1px solid var(--line) } html body .st-link{ display:flex; flex-direction:column; gap:3px; padding:11px 0; text-decoration:none; color:inherit; min-width:0 } html body .st-link:hover .st-t{ text-decoration:underline; text-underline-offset:3px } html body .st-t{ font-family:var(--serif); font-size:15px; line-height:1.3; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } html body .st-s{ font-family:var(--sans); font-size:11.5px; line-height:1.4; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } html body .st-row.is-stop .st-s{ color:var(--danger, #A94644) } html body .st-more{ padding:9px 0 0; font-family:var(--sans); font-size:11px; color:var(--muted) } html body .st-none{ display:flex; flex-direction:column; gap:4px; padding:12px 0 } html body .st-none b{ font-family:var(--serif); font-weight:400; font-size:15px; color:var(--navy) } html body .st-none span{ font-family:var(--serif); font-size:13px; line-height:1.45; color:var(--muted) } html body .st-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:14px } html body .st-foot .st-go{ min-width:0 } @media (max-width:1080px){ html body #tab-earnings .ref-grid > .ov-status{ grid-template-columns:1fr; order:0 } } /* The bar the tiles replace, and the two single-purpose quote cards whose rows are now the tiles' rows. Kept in the page (their scripts write to them), no longer shown. */ html body #tab-earnings .ref-grid > .evbar, html body #tab-earnings #ovQuotes, html body #tab-earnings #ovSent{ display:none } /* The jobs card no longer opens a "waiting" pane of its own: the tile says it. */ html body .ov-mix #mixBtnWait, html body .ov-mix #mixWait{ display:none } /* ── 12. THE BEFORE AND AFTER CARDS ──────────────────────────────────────── Each job is a row: its name and where it stands, then its sealed items as cards read left to right, before then after. A card leads with what the picture shows, in the serif; the stage is a small label above it; when, whether it is agreed, and the seal are one quiet line each. */ html body .proofcard .pf-post{ padding:18px 4px; border-top:1px solid var(--line); background:none } html body .proofcard .pf-post-h{ display:flex; align-items:baseline; justify-content:space-between; gap:16px } html body .proofcard .pf-post-t{ font-family:var(--serif); font-size:17px; font-weight:400; color:var(--navy); margin:0 } html body .proofcard .pf-post-by{ font-family:var(--sans); font-size:11px; color:var(--muted); margin:0; white-space:nowrap } html body .proofcard .pf-post-st{ margin:4px 0 0 } html body .proofcard .pf-shots.pf-shots--seals, html body #tab-earnings .ref-grid > .proofcard .pf-shots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; max-width:none; margin-top:14px; } html body .proofcard .gt.gt--seal.is-nopix{ aspect-ratio:auto; display:flex; flex-direction:column; gap:5px; min-height:0; padding:14px 16px 13px; border:1px solid var(--line); border-radius:6px; background:var(--cream); box-shadow:none; } html body .proofcard .gt--seal .gt-stage{ position:static; align-self:flex-start; margin:0 0 2px; padding:3px 9px; border-radius:999px; font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background:var(--cream-2); color:var(--navy); box-shadow:inset 0 0 0 1px var(--line-2); } html body .proofcard .gt--seal .gt-stage--after{ background:var(--navy); color:var(--cream); box-shadow:none } html body .proofcard .gt--seal .gt-stage--dispute{ background:transparent; color:var(--danger, #A94644); box-shadow:inset 0 0 0 1px currentColor } html body .proofcard .gt--seal .gt-cap{ position:static; font-family:var(--serif); font-size:15px; line-height:1.35; color:var(--navy); margin:0 } html body .proofcard .gt--seal .gt-when, html body .proofcard .gt--seal .gt-hash, html body .proofcard .gt--seal .gt-kind{ position:static; font-family:var(--sans); font-size:11px; line-height:1.4; color:var(--muted); margin:0; letter-spacing:0; text-transform:none } html body .proofcard .gt--seal .gt-hash{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:10.5px; opacity:.8 } html body .proofcard .gt--seal .gt-state{ position:static; margin:4px 0 0; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green, #0F5A4F); } html body .proofcard .gt--seal .gt-state::before{ content:'\2713\00a0' } html body .proofcard .gt--seal .gt-state--wait{ color:var(--gold-ink, #83632C) } html body .proofcard .gt--seal .gt-state--wait::before{ content:'\25CF\00a0' } html body .proofcard .gt--seal .gt-state--no{ color:var(--danger, #A94644) } html body .proofcard .gt--seal .gt-state--no::before{ content:'\2715\00a0' } @media (max-width:560px){ html body .proofcard .pf-post-h{ flex-direction:column; gap:2px } html body .proofcard .pf-shots.pf-shots--seals, html body #tab-earnings .ref-grid > .proofcard .pf-shots{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px } html body .proofcard .gt.gt--seal.is-nopix{ padding:12px 12px 11px } } html body .st-foot{ margin-top:auto; padding-top:14px } /* The jobs card is the list, the tiles are the summary: the five most recent here, every one in Jobs. */ html body .ov-mix #mixJobs > li:nth-child(n+6){ display:none } /* ══ THIRD PASS: THE COMMAND CENTRE ════════════════════════════ 29 Sep 2026 ══ Sir: not satisfied with the look; every card should take you to the section it states; the cards, the finances, the lists of jobs and tradespeople and the way progress is shown must reach the standard of the trade's Overview, Money tab, Jobs tab and profile; the homeowner's side more user friendly in the same family. Chosen from three drawn options: the command centre. THE FAMILY IS THE TRADE'S MONEY TAB, taken apart and reused, not imitated: posts with a coloured rule on top for the state they count (tan protected, gold releasing, navy paid, red frozen); a list headed by the stages it passes through with each row's dots beneath them; the figure in the display serif at the right with its small print under it. Those three devices now draw the whole Overview, on both dashboards. */ /* the cards they replace stay in the page for their scripts */ html body #tab-earnings .ov-col--facts > .rcard--pie, html body #tab-earnings .ov-col--feed > .ov-mix{ display:none } /* ── A DOOR IS A CARD YOU CAN PRESS ANYWHERE ────────────────────────────── */ html body .is-door{ cursor:pointer; transition:box-shadow 220ms cubic-bezier(.16,1,.3,1), translate 220ms cubic-bezier(.16,1,.3,1), border-color 220ms } html body .is-door:hover{ translate:0 -2px; border-color:var(--line-2); box-shadow:0 1px 1px rgba(10,22,40,.04), 0 10px 22px -12px rgba(10,22,40,.30), 0 28px 44px -30px rgba(10,22,40,.50) } html body .is-door:focus-within{ border-color:var(--line-2) } @media (prefers-reduced-motion:reduce){ html body .is-door:hover{ translate:none } } html body .is-flash{ animation:ovFlash 2.2s cubic-bezier(.16,1,.3,1) } @keyframes ovFlash{ 0%,30%{ box-shadow:inset 0 0 0 2px var(--gold, #D4A943); background:rgba(212,169,67,.08) } 100%{ box-shadow:inset 0 0 0 2px transparent; background:transparent } } /* ── THE STAGE TRACK: five dots, one per stage, read left to right ─────── */ html body .oj-track{ display:inline-flex; align-items:center; gap:6px; flex:none } html body .oj-track i{ width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-2); background:transparent } html body .oj-track i.is-done{ background:var(--navy); box-shadow:none } html body .oj-track i.is-now{ box-shadow:inset 0 0 0 2px var(--navy); background:var(--cream) } html body .oj-track i.is-now.is-you{ box-shadow:none; background:var(--gold, #D4A943); outline:3px solid rgba(212,169,67,.22) } html body .oj-track i.is-now.is-stop{ box-shadow:none; background:var(--danger, #A94442); outline:3px solid rgba(169,68,66,.18) } /* ── 1. THE THREE STATUS CARDS ──────────────────────────────────────────── One shape, a rule on top in the colour of what it counts: gold for what waits on the reader (only while it holds something), navy for what is moving, green for what is done. Three jobs each, each with its dots. */ html body .st-tile{ padding:18px 20px 16px; border-top:0 } html body .st-tile::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; border-radius:4px 4px 0 0; background:var(--line-2) } html body .st-tile--wait:not(.is-empty)::before{ background:var(--gold, #D4A943) } html body .st-tile--prog:not(.is-empty)::before{ background:var(--navy) } html body .st-tile--done:not(.is-empty)::before{ background:var(--green, #0F5A4F) } html body .st-tile--wait:not(.is-empty){ 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 body .st-head{ align-items:flex-end; padding:6px 0 12px } html body .st-k{ font-size:10.5px; letter-spacing:.14em } html body .st-n{ font-size:44px } html body .st-tile--done:not(.is-empty) .st-k{ color:var(--green, #0F5A4F) } html body .st-link{ gap:6px; padding:12px 0 } html body .st-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0 } html body .st-top .st-t{ flex:1 1 auto; min-width:0 } html body .st-v{ flex:none; font-family:var(--serif-display); font-size:17px; color:var(--navy); font-variant-numeric:tabular-nums } html body .st-bot{ display:flex; align-items:center; gap:10px; min-width:0 } html body .st-bot .st-s{ flex:1 1 auto; min-width:0 } html body .st-tile--wait .st-row:not(.is-stop) .st-s{ color:var(--gold-ink, #83632C); font-weight:500 } html body .st-link:hover .st-t{ text-decoration:underline; text-underline-offset:3px } /* ── 2. YOUR MONEY ──────────────────────────────────────────────────────── The total over one bar, the bar cut by state, a line per state that opens the part of Money listing it, then when the next money moves. */ html body .ov-money .om-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:18px 0 12px } html body .ov-money .om-k{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) } html body .ov-money .om-v{ font-family:var(--serif-display); font-weight:400; font-size:40px; line-height:1; color:var(--navy); font-variant-numeric:tabular-nums } html body .ov-money .om-bar{ display:flex; gap:3px; height:14px; border-radius:7px; overflow:hidden; background:var(--cream-2) } html body .ov-money .om-seg{ display:block; min-width:6px; flex:1 1 0; flex-grow:1 } html body .om-seg--paid, html body .om-row--paid .om-sw{ background:var(--navy) } html body .om-seg--releasing, html body .om-row--releasing .om-sw{ background:var(--gold, #D4A943) } html body .om-seg--protected, html body .om-row--protected .om-sw{ background:#D8CFB8 } html body .om-seg--frozen, html body .om-row--frozen .om-sw{ background:var(--danger, #A94442) } html body .ov-money .om-key{ list-style:none; margin:16px 0 0; padding:0 } html body .ov-money .om-row{ border-top:1px solid var(--line) } html body .ov-money .om-row:last-child{ border-bottom:1px solid var(--line) } html body .ov-money .om-row a{ display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 2px; color:inherit; text-decoration:none } html body .ov-money .om-row a:hover .om-l{ text-decoration:underline; text-underline-offset:3px } html body .ov-money .om-sw{ width:10px; height:10px; border-radius:2px } html body .ov-money .om-l{ font-family:var(--sans); font-size:12.5px; color:var(--ink, #1B2638) } html body .ov-money .om-n{ font-family:var(--sans); font-size:11px; color:var(--muted) } html body .ov-money .om-a{ font-family:var(--serif-display); font-weight:400; font-size:19px; color:var(--navy); font-variant-numeric:tabular-nums; min-width:84px; text-align:right } html body .ov-money .om-row.is-nil .om-a, html body .ov-money .om-row.is-nil .om-l{ color:var(--muted) } html body .ov-money .om-row.is-nil .om-sw{ opacity:.35 } html body .ov-money .om-next{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"k v" "s s"; gap:2px 12px; margin:16px 0 0; padding:13px 15px; border-radius:8px; background:var(--cream-2); color:inherit; text-decoration:none } html body .ov-money .om-next[hidden]{ display:none } html body .ov-money .om-next-k{ grid-area:k; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink, #83632C); align-self:center } html body .ov-money .om-next-v{ grid-area:v; justify-self:end; font-family:var(--serif-display); font-size:19px; color:var(--navy) } html body .ov-money .om-next-s{ grid-area:s; font-family:var(--serif); font-size:14px; color:var(--ink, #1B2638) } html body .ov-money .om-next:hover .om-next-s{ text-decoration:underline; text-underline-offset:3px } html body .ov-money .om-none{ margin:16px 0 0; font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--muted) } html body .ov-money .om-note{ margin:14px 0 0; font-family:var(--serif); font-size:13px; line-height:1.5; color:var(--muted) } html body .ov-money.is-empty .om-v{ color:var(--line-2) } html body .ov-money > .rcard-foot{ margin-top:auto; padding-top:18px } /* ── 3. YOUR JOBS: THE STAGE RAIL AND THE ROWS UNDER IT ─────────────────── */ html body .ov-jobs{ --oj-track:260px } html body .ov-jobs .oj-switch{ display:flex; gap:26px; margin:14px 0 0; border-bottom:1px solid var(--line) } html body .ov-jobs .oj-b{ appearance:none; border:0; background:none; cursor:pointer; padding:0 0 11px; margin-bottom:-1px; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid transparent } html body .ov-jobs .oj-b.is-on{ color:var(--navy); border-bottom-color:var(--navy) } html body .ov-jobs .oj-n{ font-family:var(--serif-display); font-size:13px; letter-spacing:0; margin-left:4px } html body .ov-jobs .oj-rail{ list-style:none; margin:16px 0 0; padding:0 0 10px 0; display:grid; grid-template-columns:repeat(5, calc(var(--oj-track) / 5)); justify-content:center; position:relative; border-bottom:1px solid var(--line); margin-left:calc(100% - var(--oj-track) - 110px); width:var(--oj-track) } html body .ov-jobs .oj-rail li{ text-align:center; white-space:nowrap; font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) } html body .ov-jobs .oj-list, html body .ov-jobs .oj-people{ list-style:none; margin:0; padding:0 } html body .ov-jobs .oj-item, html body .ov-jobs .op-item{ border-bottom:1px solid var(--line) } html body .ov-jobs .oj-row{ display:grid; grid-template-columns:minmax(0,1fr) var(--oj-track) 96px; align-items:center; gap:14px; padding:13px 4px 13px 12px; color:inherit; text-decoration:none; position:relative } html body .ov-jobs .oj-item.is-you .oj-row{ background:rgba(212,169,67,.05) } html body .ov-jobs .oj-row:hover{ background:var(--cream-2) } html body .ov-jobs .oj-t{ display:flex; flex-direction:column; gap:3px; min-width:0 } html body .ov-jobs .oj-name{ font-family:var(--serif); font-size:15.5px; color:var(--navy); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } html body .ov-jobs .oj-row:hover .oj-name{ text-decoration:underline; text-underline-offset:3px } html body .ov-jobs .oj-sub{ font-family:var(--sans); font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } html body .ov-jobs .oj-mid{ display:flex; flex-direction:column; gap:6px; min-width:0 } html body .ov-jobs .oj-mid .oj-track{ display:grid; grid-template-columns:repeat(5, 1fr); justify-items:center; gap:0; width:var(--oj-track); position:relative } html body .ov-jobs .oj-mid .oj-track::before{ content:''; position:absolute; left:10%; right:10%; top:50%; height:1px; background:var(--line); z-index:0 } html body .ov-jobs .oj-mid .oj-track i{ position:relative; z-index:1; width:10px; height:10px } html body .ov-jobs .oj-say{ font-family:var(--sans); font-size:11.5px; line-height:1.35; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:calc(var(--oj-track) / 10 - 5px) } html body .ov-jobs .oj-you{ display:inline-block; margin-right:7px; padding:1px 7px; border-radius:999px; background:var(--navy); color:var(--cream); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; vertical-align:1px } html body .ov-jobs .oj-item.is-you .oj-say{ color:var(--ink, #1B2638) } html body .ov-jobs .oj-item.is-stop .oj-say{ color:var(--danger, #A94442) } html body .ov-jobs .oj-item.is-fin .oj-name{ color:var(--muted) } html body .ov-jobs .oj-v{ display:flex; flex-direction:column; align-items:flex-end; font-family:var(--serif-display); font-size:18px; color:var(--navy); line-height:1.1; font-variant-numeric:tabular-nums } html body .ov-jobs .oj-v small{ margin-top:3px; font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) } html body .ov-jobs .oj-none{ display:flex; flex-direction:column; gap:4px; padding:18px 4px } html body .ov-jobs .oj-none b{ font-family:var(--serif); font-weight:400; font-size:16px; color:var(--navy) } html body .ov-jobs .oj-none span{ font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--muted) } html body .ov-jobs .op-row{ display:grid; grid-template-columns:40px minmax(0,1fr) auto 110px; align-items:center; gap:14px; padding:13px 4px; color:inherit; text-decoration:none } html body .ov-jobs .op-row:hover{ background:var(--cream-2) } html body .ov-jobs .op-face{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--cream); font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.04em } html body .ov-jobs .op-t{ display:flex; flex-direction:column; gap:3px; min-width:0 } html body .ov-jobs .op-name{ font-family:var(--serif); font-size:15.5px; color:var(--navy) } html body .ov-jobs .op-row:hover .op-name{ text-decoration:underline; text-underline-offset:3px } html body .ov-jobs .op-sub{ font-family:var(--sans); font-size:11.5px; color:var(--muted) } html body .ov-jobs .op-mid{ font-family:var(--sans); font-size:11.5px; color:var(--ink, #1B2638) } html body .ov-jobs > .rcard-foot{ margin-top:auto; padding-top:18px } @media (max-width:700px){ html body .ov-jobs{ --oj-track:200px } html body .ov-jobs .oj-rail{ margin-left:0; width:auto; grid-template-columns:repeat(5, 1fr) } html body .ov-jobs .oj-row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t v" "m m"; row-gap:10px; padding-left:10px } html body .ov-jobs .oj-t{ grid-area:t } html body .ov-jobs .oj-v{ grid-area:v } html body .ov-jobs .oj-mid{ grid-area:m } html body .ov-jobs .oj-mid .oj-track{ width:100% } html body .ov-jobs .oj-say{ padding-left:0; white-space:normal } html body .ov-jobs .op-row{ grid-template-columns:40px minmax(0,1fr) auto } html body .ov-jobs .op-mid{ display:none } } /* ── 4. JOBS NEAR YOU RUNS THE WIDTH (trade) ─────────────────────────────── */ html body #tab-earnings .ref-grid > .rcard--map{ grid-column:1 / -1 } html body #tab-earnings .ref-grid > .rcard--map .map-frame{ height:360px } html body #tab-earnings .ov-col > .ov-money, html body #tab-earnings .ov-col > .ov-jobs{ flex:1 1 auto } /* ══ FOURTH PASS: ONE RECORD, ONE RAIL ═══════════════════════════ 29 Sep 2026 ══ Mason scored the third pass 4.9. Measured against the house values, not the eye: cards at 4px where the card corner is 14px; labels at 10.5px/.14em where the house label is 9.5px/.17em; figures at 18 and 19px, inside the 18 to 24px gap the scale skips; a quarter of the text in the serif, where under a third means a page has turned into a dashboard; navy on work in progress, where navy means the platform's own guarantee. AND THE ORDER A READER ASKS IN: what needs me, where each job is, where the money is and what it has come to, then the record. Your jobs runs the width under the tiles, because the rail is the page's one idea; Your money and the chart share a row, because they are one question asked two ways. */ html body #tab-earnings .ref-grid > .ov-col{ display:contents } html body #tab-earnings .ref-grid > .ov-status{ order:1 } html body #tab-earnings .ref-grid > .ov-start, html body #tab-earnings .ref-grid > .evbar, html body #tab-earnings .ref-grid > .ov-quotes{ order:2 } html body #tab-earnings .ref-grid .ov-jobs{ order:3; grid-column:1 / -1 } html body #tab-earnings .ref-grid .ov-money{ order:4; grid-column:1; align-self:stretch } html body #tab-earnings .ref-grid > .rcard--chart{ order:5; grid-column:2; align-self:stretch } html body #tab-earnings .ref-grid > .proofcard, html body #tab-earnings .ref-grid > .rcard--map{ order:6; grid-column:1 / -1 } @media (max-width:1080px){ html body #tab-earnings .ref-grid .ov-money, html body #tab-earnings .ref-grid > .rcard--chart{ grid-column:1 / -1 } html body #tab-earnings .ref-grid > .rcard--chart{ order:5 } html body #tab-earnings .ref-grid > .proofcard{ order:6 } } /* one card corner, the house's */ html body #tab-earnings .rcard, html body #tab-earnings .ref-grid > .proofcard, html body #tab-earnings .st-tile{ border-radius:14px } html body #tab-earnings .st-tile{ overflow:hidden } html body #tab-earnings .st-tile::before{ border-radius:0 } /* one label, the house's */ html body #tab-earnings .st-k, html body .ov-money .om-k, html body .ov-money .om-next-k, html body .ov-jobs .oj-rail li, html body .ov-jobs .oj-people-h, html body .ov-jobs .oj-m small, html body .ov-jobs .oj-chip{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase } @media (max-width: 760px) { html body #tab-earnings .st-k, html body .ov-money .om-k, html body .ov-money .om-next-k, html body .ov-jobs .oj-rail li, html body .ov-jobs .oj-people-h, html body .ov-jobs .oj-m small, html body .ov-jobs .oj-chip { font-size: 10.5px; } } /* rp200 phone floor, was 9.5px */ /* ── 1. THE THREE PILES ────────────────────────────────────────────────── */ html body .st-tile--prog:not(.is-empty)::before{ background:var(--muted) } html body .st-row{ display:flex; flex-direction:column; gap:7px; padding:12px 0; border-bottom:1px solid var(--line) } html body .st-row.is-door:hover{ translate:none; box-shadow:none; background:var(--cream-2) } html body .st-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0 } html body .st-top .st-t{ flex:1 1 auto; min-width:0; white-space:normal; overflow:visible; text-wrap:pretty; color:var(--navy); text-decoration:none; font-family:var(--serif); font-size:15px; line-height:1.3 } html body .st-top .st-t:hover{ text-decoration:underline; text-underline-offset:3px } html body .st-v{ font-size:17px } html body .st-bot{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; min-width:0 } html body .st-bot .st-s{ flex:1 1 auto; min-width:0; white-space:normal; overflow:visible; font-family:var(--serif); font-size:13px; line-height:1.35; color:var(--muted); font-weight:400 } html body .st-tile--wait .st-row .st-s{ color:var(--ink, #1B2638); font-weight:400 } html body .st-row.is-stop .st-s{ color:var(--danger-ink, #7A3230) } html body .st-bot .oj-act{ flex:none; padding:6px 13px; font-size:9.5px; letter-spacing:.14em } html body .st-more{ padding:10px 0 0 } html body .st-more a{ font-family:var(--sans); font-size:11px; color:var(--muted); text-decoration:none } html body .st-more a:hover{ color:var(--navy); text-decoration:underline; text-underline-offset:3px } html body .st-foot{ justify-content:space-between } html body .st-made{ font-family:var(--serif); font-size:13px; color:var(--muted) } /* the dots, as the Money and Jobs tabs draw them: four, navy when passed */ html body .oj-track{ display:inline-flex; align-items:center; gap:5px; flex:none } html body .oj-track .oj-c{ display:flex; flex-direction:column; align-items:center } html body .oj-track .oj-dot{ display:block; width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-2); background:transparent } html body .oj-track .is-done .oj-dot{ background:var(--navy); box-shadow:none } html body .oj-track.is-all .oj-dot{ background:var(--green, #0F5A4F) } html body .oj-track .is-now .oj-dot{ box-shadow:inset 0 0 0 2px var(--navy); background:var(--cream) } html body .oj-track .is-now.is-pre .oj-dot{ box-shadow:inset 0 0 0 1.5px var(--navy); background:transparent } html body .oj-track .is-now.is-you .oj-dot{ box-shadow:none; background:var(--gold, #83632C); outline:3px solid rgba(131,99,44,.18) } html body .oj-track .is-now.is-stop .oj-dot{ box-shadow:none; background:var(--danger, #A94442); outline:3px solid rgba(169,68,66,.16) } /* ── 2. YOUR JOBS: THE RAIL, WITH THE MONEY STANDING ON IT ─────────────── */ html body .ov-jobs{ --oj-track:520px; --oj-next:176px; --oj-gap:22px } html body .ov-jobs .oj-rail, html body .ov-jobs .oj-item{ display:grid; column-gap:0; grid-template-columns:minmax(0,1fr) var(--oj-gap) repeat(4, calc(var(--oj-track) / 4)) var(--oj-gap) var(--oj-next) } html body .ov-jobs .oj-rail{ margin:18px 0 0; padding:0 14px 10px 16px; width:auto; list-style:none; border-bottom:1px solid var(--navy); justify-content:stretch } html body .ov-jobs .oj-rail li{ color:var(--muted); text-align:center; white-space:normal; text-wrap:balance; line-height:1.35; align-self:end } html body .ov-jobs .oj-rail li:nth-child(2){ grid-column:3 } html body .ov-jobs .oj-rail li:nth-child(3){ grid-column:4 } html body .ov-jobs .oj-rail li:nth-child(4){ grid-column:5 } html body .ov-jobs .oj-rail li:nth-child(5){ grid-column:6 } html body .ov-jobs .oj-rail .oj-rail-job{ grid-column:1; text-align:left } html body .ov-jobs .oj-rail .oj-rail-next{ grid-column:8; text-align:right } html body .ov-jobs .oj-list{ list-style:none; margin:0; padding:0 } html body .ov-jobs .oj-item{ align-items:start; padding:16px 14px 16px 16px; border-bottom:1px solid var(--line); position:relative } html body .ov-jobs .oj-item.is-door:hover{ translate:none; box-shadow:none; background:var(--cream-2) } html body .ov-jobs .oj-item.is-stop, html body .ov-jobs .oj-t{ grid-column:1; display:flex; flex-direction:column; gap:4px; min-width:0 } html body .ov-jobs .oj-name{ font-family:var(--serif); font-size:16px; line-height:1.3; color:var(--navy); text-decoration:none; white-space:normal; overflow:visible; text-wrap:pretty } html body .ov-jobs .oj-name:hover{ text-decoration:underline; text-underline-offset:3px } html body .ov-jobs .oj-say{ padding:0; white-space:normal; overflow:visible; font-family:var(--serif); font-size:13.5px; line-height:1.45; color:var(--muted) } html body .ov-jobs .oj-item.is-you .oj-say{ color:var(--ink, #1B2638) } html body .ov-jobs .oj-item.is-stop .oj-say{ color:var(--danger-ink, #7A3230) } html body .ov-jobs .oj-track--money{ grid-column:3 / span 4; display:grid; align-items:start; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; width:auto; position:relative; padding-top:4px } html body .ov-jobs .oj-track--money::before, html body .ov-jobs .oj-track--money::after{ content:''; position:absolute; top:8px; left:12.5%; height:1px; z-index:0 } html body .ov-jobs .oj-track--money::before{ right:12.5%; background:var(--line-2) } html body .ov-jobs .oj-track--money::after{ right:87.5%; background:var(--navy) } html body .ov-jobs .oj-track--money.at-1::after{ right:62.5% } html body .ov-jobs .oj-track--money.at-2::after{ right:37.5% } html body .ov-jobs .oj-track--money.at-3::after{ right:12.5% } html body .ov-jobs .oj-track--money.is-all::after{ background:var(--green, #0F5A4F) } html body .ov-jobs .oj-track--money .oj-c{ position:relative; z-index:1; gap:9px; min-width:0 } html body .ov-jobs .oj-track--money .oj-dot{ width:10px; height:10px } html body .ov-jobs .oj-m{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:0 4px } html body .ov-jobs .oj-m b{ font-family:var(--serif-display); font-weight:400; font-size:17px; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap } html body .ov-jobs .oj-m small{ color:var(--muted); letter-spacing:.17em; line-height:1.3; text-wrap:balance } html body .ov-jobs .is-now.is-you .oj-m small{ color:var(--gold-ink, #83632C) } html body .ov-jobs .is-now.is-stop .oj-m small, html body .ov-jobs .is-now.is-stop .oj-m b{ color:var(--danger-ink, #7A3230) } html body .ov-jobs .oj-track.is-all .oj-m small{ color:var(--green, #0F5A4F) } html body .ov-jobs .oj-next{ grid-column:8; display:flex; justify-content:flex-end; align-items:flex-start } html body .ov-jobs .oj-next .oj-act{ margin:0; white-space:nowrap } html body .oj-chip{ display:inline-block; padding:4px 10px; border-radius:999px; line-height:1.3; white-space:nowrap; letter-spacing:.12em } html body .oj-chip.is-them{ background:var(--code-wait-bg, #FBF3DF); color:var(--gold-ink, #7A5B12) } html body .oj-chip.is-stop{ background:#FBEDEC; color:var(--danger-ink, #7A3230) } html body .oj-chip.is-none{ background:var(--cream-2, #F3EFE4); color:var(--ink, #1B2638) } html body .ov-jobs .oj-more{ padding:12px 16px 0; font-family:var(--sans); font-size:11.5px } html body .ov-jobs .oj-more a{ color:var(--muted); text-decoration:none } html body .ov-jobs .oj-more a:hover{ color:var(--navy); text-decoration:underline; text-underline-offset:3px } /* who works for her: faces, in a row under the rail */ html body .ov-jobs .oj-people-h{ margin:24px 0 0; padding:0 0 10px 16px; color:var(--muted); border-bottom:1px solid var(--line) } html body .ov-jobs .oj-people{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:0 22px; list-style:none; margin:0; padding:0 } html body .ov-jobs .op-item{ border-bottom:1px solid var(--line) } html body .ov-jobs .op-row{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 14px 14px 16px; color:inherit; text-decoration:none } html body .ov-jobs .op-face{ width:48px; height:48px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--navy); color:var(--cream); font-size:13px } html body .ov-jobs .op-face img{ width:100%; height:100%; object-fit:cover; display:block } html body .ov-jobs .op-name{ font-size:16px } html body .ov-jobs .op-sub{ font-family:var(--serif); font-size:13px; color:var(--muted) } html body .ov-jobs .op-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 body .ov-jobs .op-v small{ margin-top:2px; font-family:var(--serif); font-size:12px; color:var(--muted) } html body .ov-jobs > .rcard-foot{ margin-top:18px; padding-top:0 } html body .ov-jobs [data-oj-foot][hidden]{ display:none } @media (max-width:1180px){ html body .ov-jobs{ --oj-track:420px; --oj-next:160px; --oj-gap:16px } } @media (max-width:900px){ html body .ov-jobs .oj-rail{ grid-template-columns:repeat(4, minmax(0,1fr)); padding:0 0 10px; column-gap:0 } html body .ov-jobs .oj-rail .oj-rail-job, html body .ov-jobs .oj-rail .oj-rail-next{ display:none } html body .ov-jobs .oj-rail li:nth-child(n){ grid-column:auto } html body .ov-jobs .oj-rail li{ letter-spacing:.14em; font-size:9.5px } html body .ov-jobs .oj-item{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t n" "r r"; row-gap:14px; padding:14px 10px 16px 12px } html body .ov-jobs .oj-t{ grid-area:t } html body .ov-jobs .oj-next{ grid-area:n } html body .ov-jobs .oj-track--money{ grid-area:r } html body .ov-jobs .oj-m small{ letter-spacing:.17em } html body .ov-jobs .oj-m b{ font-size:15px } html body .ov-jobs .oj-people{ grid-template-columns:1fr } } @media (max-width:480px){ html body .ov-jobs .oj-item{ column-gap:12px } html body .ov-jobs .oj-next .oj-act{ padding:7px 12px; letter-spacing:.17em } } /* ── 3. YOUR MONEY ─────────────────────────────────────────────────────── */ html body .ov-money .om-total{ margin:18px 0 8px } html body .ov-money .om-barwrap{ position:relative; padding-top:30px } html body .ov-money .om-barwrap[hidden]{ display:none } html body .ov-money .om-brace{ position:absolute; top:0; height:26px } html body .ov-money .om-brace[hidden]{ display:none } html body .ov-money .om-brace::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:7px; border:1.5px solid var(--navy); border-bottom:0; border-radius:3px 3px 0 0 } html body .ov-money .om-brace-t{ position:absolute; right:0; bottom:11px; white-space:nowrap; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--navy) } @media (max-width: 760px) { html body .ov-money .om-brace-t { font-size: 10.5px; } } /* rp200 phone floor, was 9.5px */ html body .ov-money .om-brace-t b{ margin-left:4px; font-family:var(--serif-display); font-weight:400; font-size:15px; letter-spacing:0; text-transform:none } html body .ov-money .om-bar{ height:14px; border-radius:999px } html body .om-seg--paid, html body .om-row--paid .om-sw{ background:var(--green, #0F5A4F) } html body .om-seg--moving{ background:var(--gold, #83632C); opacity:.45 } html body .om-seg--releasing, html body .om-row--releasing .om-sw{ background:var(--gold, #83632C) } html body .om-seg--protected, html body .om-row--protected .om-sw{ background:var(--navy) } html body .om-seg--frozen, html body .om-row--frozen .om-sw{ background:var(--danger, #A94442) } html body .ov-money .om-row a{ grid-template-columns:10px minmax(0,1fr) auto 96px; padding:13px 2px } html body .ov-money .om-sw{ border-radius:50% } html body .ov-money .om-l{ display:flex; flex-direction:column; gap:2px; font-family:var(--serif); font-size:14.5px; color:var(--navy) } html body .ov-money .om-l-s{ font-family:var(--serif); font-size:12.5px; color:var(--muted) } html body .ov-money .om-n{ font-family:var(--serif); font-size:12.5px } html body .ov-money .om-a{ font-size:17px; min-width:0 } html body .ov-money .om-next{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k k" "v v" "s s"; gap:6px 12px; padding:16px 18px; margin-top:18px; border-radius:14px } html body .ov-money .om-next-v{ justify-self:start; font-size:26px; line-height:1.1 } html body .ov-money .om-next-s{ font-size:13.5px; line-height:1.45; color:var(--ink, #1B2638) } html body .ov-money .om-note{ margin-top:16px } html body .ov-money > .rcard-foot{ margin-top:18px; padding-top:0 } /* ── 4. THE CHART: MONEY THAT HAS MOVED, AND A SENTENCE FOR THE REST ───── */ html body #tab-earnings .rcard--chart .chart-tooltip-held{ display:none } html body #tab-earnings .rcard--chart .chart-key .ck-held{ display:block; flex:1 1 100%; font-weight:400; font-family:var(--serif); font-size:13.5px; line-height:1.45; color:var(--muted); letter-spacing:0; text-transform:none } html body #tab-earnings .rcard--chart .chart-key .ck-held b{ font-family:var(--serif-display); font-weight:400; font-size:15px; color:var(--navy) } html body #tab-earnings .rcard--chart .chart-key .ck-held[hidden]{ display:none } html body #tab-earnings .rcard--chart .pk-sw--navy{ background:var(--green, #0F5A4F) } html body .ov-jobs .oj-switch[hidden], html body .ov-jobs .oj-people[hidden], html body .ov-jobs .oj-people-h[hidden], html body .ov-jobs .oj-list[hidden]{ display:none } html body #tab-earnings .rcard--chart .fig--lead .figband-k::before{ background:var(--green, #0F5A4F) } /* ══ FOURTH PASS, SECOND ROUND ═══════════════════════════════════ 29 Sep 2026 ══ Mason, 7.5: neighbouring cards missed each other's bottom edge by 35 to 180px; the money being paid out was a beige with no key; on a phone a figure's word wrapped alone and a separator began a line; Jobs near you cut its names off. */ html body #tab-earnings .ref-grid .ov-money, html body #tab-earnings .ref-grid > .rcard--chart{ display:flex; flex-direction:column } html body .ov-money .om-note{ margin-top:auto; padding-top:16px } html body #tab-earnings .rcard--chart > .chart-frame{ flex:1 1 auto; display:flex; flex-direction:column } html body #tab-earnings .rcard--chart .chart-body{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end } /* rp135: this rule outranked the page's own .chart-frame.is-empty > .chart-body, so an account with nothing ever paid drew an empty £0 to £100 chart above the route a payment takes. Nothing to draw, no chart. */ html body #tab-earnings .rcard--chart .chart-frame.is-empty > .chart-body{ display:none } html body .om-seg--moving{ opacity:1; background:repeating-linear-gradient(135deg, var(--gold, #83632C) 0 3px, rgba(131,99,44,.35) 3px 6px) } html body .ov-money .om-l-s::before{ content:''; display:inline-block; width:14px; height:8px; margin-right:6px; vertical-align:0; border-radius:4px; background:repeating-linear-gradient(135deg, var(--gold, #83632C) 0 3px, rgba(131,99,44,.35) 3px 6px) } html body .ov-id .ov-figs .ov-fu{ white-space:nowrap } @media (max-width:700px){ html body .ov-id .ov-figs{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px } html body .ov-id .ov-figs .ov-dot{ display:none } html body .rcard--map .mn-name, html body .rcard--map .mn-sub{ white-space:normal; overflow:visible; text-overflow:clip } } @media (max-width:1080px){ html body #tab-earnings .ref-grid > .rcard--map .map-frame{ height:auto } } /* ══ ONE TYPE SCALE ═════════════════════════════════════════════ 29 Sep 2026 ══ Mason counted sixteen sizes on the Overview, half-pixel steps among them, built up over four passes. Six now, and each says what a piece of text is: 9.5 a label, in the house small caps 12 a detail: a date, a count, a seal 14 a sentence 17 a name, or a figure in a row 26 a key figure; 40 and 44 the display figures of a card */ html body .ov-id .ov-figs, html body .ov-id .ov-since, html body #tab-earnings .btn, html body #tab-earnings .near-more, html body #tab-earnings .figband-k, html body #tab-earnings .gt-state, html body #tab-earnings .gt-hash, html body #tab-earnings .gt-stage, html body #tab-earnings .period-pills button, html body #tab-earnings .chart-key li, html body #tab-earnings .mn-k, html body #tab-earnings .mn-name{ font-size:9.5px } @media (max-width: 760px) { html body .ov-id .ov-figs, html body .ov-id .ov-since, html body #tab-earnings .btn, html body #tab-earnings .near-more, html body #tab-earnings .figband-k, html body #tab-earnings .gt-state, html body #tab-earnings .gt-hash, html body #tab-earnings .gt-stage, html body #tab-earnings .period-pills button, html body #tab-earnings .chart-key li, html body #tab-earnings .mn-k, html body #tab-earnings .mn-name { font-size: 10.5px; } } /* rp200 phone floor, was 9.5px */ html body #tab-earnings .st-more a, html body #tab-earnings .oj-more, html body #tab-earnings .gt-when, html body #tab-earnings .gt-kind, html body #tab-earnings .pf-post-by, html body #tab-earnings .pf-post-st, html body #tab-earnings .pf-post-st em, html body #tab-earnings .pf-of, html body #tab-earnings .figband-s, html body .ov-money .om-n, html body .ov-money .om-l-s, html body .ov-jobs .op-v small, html body #tab-earnings .map-note, html body #tab-earnings .mn-from, html body #tab-earnings .mn-sub, html body .ov-id .ov-figs .ov-rate{ font-size:12px } html body .ov-id .ov-desc, html body #tab-earnings .rcard-s, html body #tab-earnings .proof-say, html body #tab-earnings .period-label, html body .st-bot .st-s, html body .st-made, html body .ov-jobs .oj-say, html body .ov-jobs .op-sub, html body .ov-money .om-l, html body .ov-money .om-next-s, html body .ov-money .om-note, html body .ov-money .om-none, html body #tab-earnings .rcard--chart .chart-key .ck-held, html body #tab-earnings .gt-cap, html body .st-none span, html body .ov-jobs .oj-none span{ font-size:14px } html body .st-top .st-t, html body .ov-jobs .oj-name, html body .ov-jobs .op-name, html body #tab-earnings .pf-post-t, html body .st-v, html body .ov-money .om-a, html body .ov-jobs .oj-m b, html body .ov-jobs .op-v, html body .ov-money .om-brace-t b, html body #tab-earnings .rcard--chart .chart-key .ck-held b, html body .st-none b, html body .ov-jobs .oj-none b, html body #tab-earnings .mn-d{ font-size:17px } html body .ov-id .ov-figs b, html body #tab-earnings .figband-v--sm, html body #tab-earnings .figband-v{ font-size:26px } html body #tab-earnings .fig--lead .figband-v, html body #tab-earnings .pf-fig--lead .figband-v{ font-size:40px } html body .ov-id .ov-figs .ov-rate b, html body .ov-id .ov-figs .ov-rate span{ font-size:12px } html body .ov-id .ov-desc{ text-wrap:pretty } @media (max-width:900px){ html body .ov-jobs .oj-rail li{ letter-spacing:.17em; font-size:9.5px } html body .ov-jobs .oj-m b{ font-size:17px } html body .ov-jobs .oj-m small{ letter-spacing:.17em } } html body .ov-id .ov-acts .btn, html body #tab-earnings .map-expand span, html body #tab-earnings .job-pin span{ font-size:9.5px } @media (max-width: 760px) { html body .ov-id .ov-acts .btn, html body #tab-earnings .map-expand span, html body #tab-earnings .job-pin span { font-size: 10.5px; } } /* rp200 phone floor, was 9.5px */ html body #tab-earnings .rcard--chart svg text{ font-size:12px } html body .st-bot{ min-height:32px } html body .st-rest{ padding:12px 0 0; font-family:var(--serif); font-size:14px; line-height:1.4; color:var(--muted) } html body .ov-money .om-next.is-quiet{ cursor:default } html body .ov-money .om-next.is-quiet .om-next-k{ color:var(--muted) } html body .ov-money .om-next.is-quiet .om-next-v{ font-size:17px; color:var(--muted) } html body .ov-money .om-next.is-quiet:hover .om-next-s{ text-decoration:none } html body .ov-jobs .oj-more--phone{ display:none } @media (max-width:700px){ html body .ov-jobs .oj-item.is-extra{ display:none } html body .ov-jobs .oj-more--phone{ display:block } html body .ov-jobs .oj-more--phone ~ .oj-more:not(.oj-more--phone){ display:none } } html body .st-rest{ flex:1 1 auto; display:grid; place-items:center; min-height:44px; margin-top:12px; padding:10px 12px; border-radius:13px; background:var(--cream-2, #F3EFE4); text-align:center } html body .st-tile .st-list{ display:flex; flex-direction:column } html body .st-more--phone{ display:none } @media (max-width:700px){ html body .st-row.is-extra{ display:none } html body .st-more--phone{ display:block } html body .st-more--phone ~ .st-more:not(.st-more--phone){ display:none } html body .st-rest{ display:none } } @media (max-width:700px){ /* on a phone the row is its name, its rail and its next move; the sentence stays only where it is a warning */ html body .ov-jobs .oj-item:not(.is-stop) .oj-say{ display:none } } @media (max-width:1080px){ /* THE THREE PILES AS THREE COUNTS on a phone and a tablet: the rail right under them lists every live job, so the tiles say how many and open the list; a phone does not scroll past the same jobs twice */ html body #tab-earnings .ref-grid > .ov-status{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px } html body #tab-earnings .st-tile{ padding:14px 12px 12px; min-height:0 } html body #tab-earnings .st-tile .st-list, html body #tab-earnings .st-tile .st-foot{ display:none } html body #tab-earnings .st-head{ flex-direction:column-reverse; align-items:flex-start; gap:8px; padding:4px 0 0; border-bottom:0 } html body #tab-earnings .st-k{ letter-spacing:.12em; line-height:1.35 } html body #tab-earnings .st-n{ font-size:40px } } @media (min-width:701px) and (max-width:1080px){ html body #tab-earnings .ref-grid > .ov-status{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px } } /* ══ FOURTH PASS, FOURTH ROUND ═══════════════════════════════════ 29 Sep 2026 ══ */ /* the counts, wherever they stand alone: one label height, a way in */ @media (max-width:1080px){ html body #tab-earnings .st-k{ letter-spacing:.17em; min-height:2.7em } html body #tab-earnings .st-tile .st-head::after{ content:'Open \2192'; order:-1; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--muted) } html body #tab-earnings .st-rest{ display:none } } html body #tab-earnings .st-tile:focus-visible{ outline:2px solid var(--navy); outline-offset:3px } html body .ov-jobs .rcard-s .oj-sub-phone{ display:none } @media (max-width:700px){ html body .ov-jobs .rcard-s.has-phone .oj-sub-wide{ display:none } html body .ov-jobs .rcard-s.has-phone .oj-sub-phone{ display:inline } } /* the rating: the stars are the figure, and the figure is a header figure */ html body .ov-id .ov-stars svg.is-off{ opacity:.22 } html body .ov-id .ov-figs .ov-rate{ font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase } html body .ov-id .ov-figs .ov-rate b{ font-size:26px; letter-spacing:0 } /* one label, in the header and the record too */ html body .ov-id .ov-figs, html body .ov-id .ov-since, html body #tab-earnings .near-more, html body #tab-earnings .figband-k, html body #tab-earnings .gt-state, html body #tab-earnings .gt-stage, html body #tab-earnings .pf-post-st, html body #tab-earnings .chart-key li:not(.ck-held){ font-weight:500; letter-spacing:.17em } /* the rail's own labels, Jobs near you, and every button: one spacing */ html body .ov-jobs .oj-m small{ letter-spacing:.17em } html body #tab-earnings .mn-k, html body #tab-earnings .mn-name{ font-weight:500; letter-spacing:.17em } html body #tab-earnings .btn, html body .ov-id .ov-acts .btn, html body .st-bot .oj-act, html body .ov-jobs .oj-next .oj-act{ letter-spacing:.17em } /* the header's figures fit one line beside the buttons on both roles */ html body .ov-id .ov-figs .ov-dot{ margin:0 6px } /* the last three controls onto the label spec (Mason, pass 6) */ html body #tab-earnings .period-pills button, html body #tab-earnings .pf-of, html body #tab-earnings .map-expand, html body #tab-earnings .map-expand span{ font-weight:500; letter-spacing:.17em } /* ══ DASHBOARD-WIDE: A JOB WEARS THE COLOUR OF WHERE ITS MONEY IS ═ 29 Sep 2026 ══ Sir: colour the cards to match the stage the job is at, intuitively; chosen: where the money is, in the site's three-colour code, on the Overview, in Jobs and in Money, both dashboards. A bearing edge and a faint wash (signal by structure, not saturation, §22). wait gold not paid in yet held navy protected by Stripe: work, then sign-off moved green paid out, or being paid now stop red frozen in a dispute none grey nothing at stake yet, or closed */ html body [data-phase]{ --ph:var(--line-2, #D8CFB8); --ph-w:transparent } html body [data-phase="wait"]{ --ph:var(--gold, #83632C); --ph-w:rgba(131,99,44,.055) } html body [data-phase="held"]{ --ph:var(--navy, #0A1628); --ph-w:rgba(10,22,40,.03) } html body [data-phase="moved"]{ --ph:var(--green, #0F5A4F); --ph-w:rgba(15,90,79,.05) } html body [data-phase="stop"]{ --ph:var(--danger, #A94442); --ph-w:rgba(169,68,66,.05) } html body .jb-row[data-phase], html body .mo-row[data-phase]{ background:var(--ph-w); padding-left:18px; padding-right:14px } html body .ov-jobs .oj-list > .oj-item[data-phase], html body .ov-jobs .oj-list > .oj-item[data-phase].is-you, html body .ov-jobs .oj-list > .oj-item[data-phase].is-stop, html body .ov-jobs .oj-list > .oj-item[data-phase].is-door:hover{ background:var(--ph-w) } html body .ov-jobs .oj-list > .oj-item[data-phase].is-door:hover{ background:var(--cream-2, #F3EFE4) } html body .st-list > .st-row[data-phase]{ background:var(--ph-w); padding-left:12px; padding-right:8px } html body .st-list > .st-row[data-phase].is-door:hover{ background:var(--cream-2, #F3EFE4) } /* the dot the job stands on is its phase's colour */ html body .oj-track[data-phase] .is-now .oj-dot, html body .oj-track[data-phase] .is-now.is-you .oj-dot, html body .oj-track[data-phase] .is-now.is-stop .oj-dot{ background:var(--ph); box-shadow:none; outline:3px solid var(--ph-w) } html body .oj-track[data-phase="none"] .is-now .oj-dot{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted); outline:0 } html body .ov-jobs .oj-track[data-phase] .is-now .oj-m small{ color:var(--ph) } html body .ov-jobs .oj-track[data-phase="held"] .is-now .oj-m small{ color:var(--navy) } html body .ov-jobs .oj-track[data-phase="none"] .is-now .oj-m small{ color:var(--muted) } html body .ov-jobs .oj-track[data-phase="moved"]::after{ background:var(--green, #0F5A4F) } /* the rail's stage labels carry the key: gold, navy, navy, green */ html body .ov-jobs .oj-rail li:nth-child(2), html body .ov-jobs .oj-rail li:nth-child(3), html body .ov-jobs .oj-rail li:nth-child(4), html body .ov-jobs .oj-rail li:nth-child(5){ padding-bottom:9px; margin-bottom:-10px; box-shadow:inset 0 -3px 0 var(--navy) } html body .ov-jobs .oj-rail li:nth-child(2){ box-shadow:inset 0 -3px 0 var(--gold, #83632C) } html body .ov-jobs .oj-rail li:nth-child(5){ box-shadow:inset 0 -3px 0 var(--green, #0F5A4F) } html body .ov-jobs .oj-rail{ border-bottom-color:var(--line) } html body .ov-jobs .oj-key{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:14px 0 0; font-family:var(--serif); font-size:12px; color:var(--muted) } html body .ov-jobs .oj-key-i{ display:inline-flex; align-items:center; gap:7px } html body .ov-jobs .oj-key-i i{ display:block; width:10px; height:10px; border-radius:50%; background:var(--ph) } /* the money bar in the same code: protected navy (releasing a lighter navy, still protected, its countdown running), paid green, frozen red */ html body .om-seg--releasing, html body .om-row--releasing .om-sw{ background:rgba(10,22,40,.62) } html body .om-seg--moving{ background:repeating-linear-gradient(135deg, var(--green, #0F5A4F) 0 3px, rgba(15,90,79,.35) 3px 6px) } html body .ov-money .om-l-s::before{ background:repeating-linear-gradient(135deg, var(--green, #0F5A4F) 0 3px, rgba(15,90,79,.35) 3px 6px) } html body .ov-money .om-next .om-next-k{ color:var(--navy) } /* the Money tab's four posts, the same code */ html body .mo-post[data-k="paid"]{ border-top-color:var(--green, #0F5A4F) } html body .mo-post[data-k="protected"]{ border-top-color:var(--navy) } html body .mo-post[data-k="releasing"], html body .mo-post[data-k="releasing"].is-live{ border-top-color:rgba(10,22,40,.62) } /* "Do not start" is money not in yet, so gold, not the dispute's red */ html body .jb-row[data-phase="wait"][data-who="stop"] .jb-who{ background:var(--code-wait-bg, #FBF3DF); color:var(--gold-ink, #7A5B12) } /* ══ DASHBOARD-WIDE: ONE BUTTON ══════════════════════════════════ 29 Sep 2026 ══ Sir: make the buttons consistent in all tabs. Measured before: 9.5px/.17em on the Overview, 10px/.18em on every other tab; outlines for the reader's own move on the Overview and fills for the same move in Jobs. Now one: filled for your own next move on a job, an outline for everything else, one size, one spacing, on every tab of both dashboards. */ html body .dash-tab-panel .btn, html body .ov-id .ov-acts .btn{ font-size:9.5px; letter-spacing:.17em; font-weight:400 } html body .dash-tab-panel .btn.btn--sm, html body .ov-id .ov-acts .btn{ min-height:44px; padding-left:20px; padding-right:20px } html body .dash-tab-panel .work-btn{ font-size:9.5px; font-weight:500; letter-spacing:.17em } /* the Money tab's rows and bars in the same code: the sentence takes its row's colour, and money that reached the trade is green in the bars too */ html body .mo-row[data-phase="held"] .mo-at-t{ color:var(--navy) } html body .mo-row[data-phase="moved"] .mo-at-t{ color:var(--green, #0F5A4F) } html body .mo-row[data-phase="stop"] .mo-at-t{ color:var(--danger-ink, #7A3230) } html body .mo-cols .mc-bar{ fill:var(--green, #0F5A4F) } html body .mo-track li{ box-shadow:inset 0 -3px 0 var(--navy); padding-bottom:9px } html body .mo-track li:first-child{ box-shadow:inset 0 -3px 0 var(--gold, #83632C) } html body .mo-track li:last-child{ box-shadow:inset 0 -3px 0 var(--green, #0F5A4F) } /* ══ MONEY: THE LEDGER ACROSS THE STAGES ═════════════════════════ 29 Sep 2026 ══ The totals row is laid on the same grid as the rows under it, so each total stands exactly over its stage; the rail and the rows are the Overview's own (.ov-jobs), so a job looks the same on both tabs. */ html body #tab-money .mo-posts[hidden], html body #tab-money #moComing[hidden]{ display:none } html body #tab-money .rcard, html body #tab-money .mo-sheet{ border-radius:14px } html body .ml.ov-jobs{ margin-bottom:20px } html body .ml .om-next{ margin:18px 0 0 } html body .ml .ml-posts{ display:grid; column-gap:0; row-gap:14px; margin:20px 0 0; padding:0 14px 0 16px; grid-template-columns:minmax(0,1fr) var(--oj-gap) repeat(4, calc(var(--oj-track) / 4)) var(--oj-gap) var(--oj-next) } html body .ml .ml-lead{ grid-column:1; align-self:end; padding-right:16px } html body .ml .ml-post{ display:flex; flex-direction:column; gap:4px; padding:12px 10px 10px; margin:0 3px; border-top:3px solid var(--ph); background:var(--ph-w); border-radius:0 0 8px 8px; color:inherit; text-decoration:none; min-width:0 } html body .ml .ml-post[data-c="0"]{ grid-column:3 } html body .ml .ml-post[data-c="1"]{ grid-column:4 } html body .ml .ml-post[data-c="2"]{ grid-column:5 } html body .ml .ml-post[data-c="3"]{ grid-column:6 } html body .ml .ml-post[data-c="f"]{ grid-column:8 } html body .ml .ml-post:hover .ml-v{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px } html body .ml .ml-post:focus-visible{ outline:2px solid var(--navy); outline-offset:2px } html body .ml .ml-k{ margin:0; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--muted) } html body .ml .ml-post .ml-k{ color:var(--ph) } html body .ml .ml-post[data-phase="held"] .ml-k{ color:var(--navy) } html body .ml .ml-v{ margin:0; font-family:var(--serif-display); font-weight:400; font-size:26px; line-height:1.05; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap } html body .ml .ml-lead .ml-v{ font-size:40px; margin-top:6px } html body .ml .ml-s{ margin:0; font-family:var(--serif); font-size:12px; line-height:1.35; color:var(--muted) } html body .ml .ml-lead .ml-s{ font-size:14px; margin-top:6px } html body .ml .oj-key{ margin-top:18px } html body .ml .ml-sum{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 10px; margin:14px 0 0; padding:12px 14px 0; border-top:1px solid var(--navy); font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--navy) } html body .ml .ml-sum[hidden]{ display:none } html body .ml .ml-dot{ color:var(--line-2) } @media (max-width:1180px){ html body .ml .ml-v{ font-size:17px } html body .ml .ml-lead .ml-v{ font-size:40px } } @media (max-width:900px){ html body .ml .ml-posts{ grid-template-columns:repeat(2, minmax(0,1fr)); padding:0; gap:10px } html body .ml .ml-lead, html body .ml .ml-post[data-c="f"]{ grid-column:1 / -1 } html body .ml .ml-post[data-c]{ grid-column:auto; margin:0 } html body .ml .ml-post[data-c="f"]{ grid-column:1 / -1 } html body .ml .ml-v{ font-size:26px } } /* the paid-out sheet in the family: the kit's type and a row in the colour of where its money is */ html body #tab-money .mo-row-t{ font-family:var(--serif); font-size:17px; font-weight:400; color:var(--navy) } html body #tab-money .mo-row-w{ font-family:var(--serif); font-size:12px } html body #tab-money .mo-at-t{ font-size:14px } html body #tab-money .mo-v b{ font-size:17px } html body #tab-money .mo-v span{ font-family:var(--serif); font-size:12px } html body #tab-money .mo-cols text{ font-size:12px } html body #tab-money .mo-foot{ font-size:14px } html body #tab-money .mo-links a{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase } html body #tab-money .mo-refunds{ margin:16px 0 0; padding:14px 16px; border-radius:13px; background:var(--cream-2, #F3EFE4); font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--ink, #1B2638) } html body #tab-money .mo-refunds b{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px } /* ── the ledger, second round (Mason, Money pass 1) ── */ html body .ml .ml-post{ border-radius:0 } html body .ml .ml-post .ml-k::after{ content:'\00a0\2192'; letter-spacing:0 } html body .ml .ml-s.is-stop{ color:var(--danger-ink, #7A3230) } html body .ml .oj-rail li[data-total]::after{ content:none } @media (max-width:900px){ /* the totals ride on the stage labels, where they stand on a wide screen */ html body .ml .ml-posts .ml-post{ display:none } html body .ml .oj-rail .ml-rt{ display:block; margin-top:4px; font-family:var(--serif-display); font-weight:400; font-size:17px; letter-spacing:0; text-transform:none; color:var(--navy) } html body .ml .oj-rail .ml-rs{ display:block; margin-top:2px; color:var(--danger-ink, #7A3230) } html body .ov-jobs .oj-rail li{ padding-left:3px; padding-right:3px } } /* paid out: the last stage continued, on the same rail */ html body #moPaid.has-rail .mo-recent, html body #moPaid.has-rail .mo-paid > .mo-row-w{ display:none } html body #moPaid .ml-paid{ margin-top:14px } html body #moPaid .ml-paid[hidden]{ display:none } html body #moPaid .ml-paid .oj-rail{ margin-top:6px } html body #moPaid .ml-paid .oj-more{ padding:12px 16px 0; font-family:var(--serif); font-size:12px; color:var(--muted) } /* the fee note: a sheet pinned beside the ledger (Sir's ruling 11) */ html body .ml .rcard-head.has-pad{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); column-gap:32px; align-items:start } html body .ml .rcard-head.has-pad > :not(.ml-pad){ grid-column:1 } html body .ml .ml-pad{ grid-column:2; grid-row:1 / span 3; position:relative; margin:4px 6px 0 0; padding:30px 19px 20px; background:#FDFBF5; border-radius:2px; rotate:-1.4deg; transition:rotate 340ms cubic-bezier(.16,1,.3,1); box-shadow:0 1px 1px rgba(10,22,40,.05), 0 8px 18px -10px rgba(10,22,40,.35), 0 22px 36px -26px rgba(10,22,40,.45); font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--ink, #1B2638) } html body .ml .ml-pad:hover{ rotate:0deg } html body .ml .ml-pad::before{ content:''; position:absolute; top:9px; left:50%; margin-left:-9px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy) 52%, #04090F 100%); box-shadow:0 1px 0 rgba(250,248,243,.22), 0 5px 8px -3px rgba(0,0,0,.6) } @media (prefers-reduced-motion:reduce){ html body .ml .ml-pad{ transition:none } } @media (max-width:900px){ html body .ml .rcard-head.has-pad{ grid-template-columns:minmax(0,1fr) } html body .ml .ml-pad{ grid-column:1; grid-row:auto; margin:18px 4px 4px } } html body .ov-money .om-l-s.is-stop{ color:var(--danger-ink, #7A3230) } html body .ov-money .om-l-s.is-stop::before{ display:none } html body .ov-jobs .oj-m .oj-fee{ color:var(--muted); letter-spacing:.06em; text-transform:none; font-family:var(--serif); font-size:12px } html body .ov-jobs .oj-m .oj-fee{ white-space:nowrap } html body .om-row--moving .om-sw{ background:repeating-linear-gradient(135deg, var(--green, #0F5A4F) 0 2px, rgba(15,90,79,.35) 2px 4px) } html body .ml .oj-rail .ml-rt, html body .ml .oj-rail .ml-rs{ display:none } @media (max-width:900px){ html body .ml .oj-rail .ml-rt, html body .ml .oj-rail .ml-rs{ display:block } } @media (max-width:480px){ html body .ov-jobs .oj-m .oj-fee-g{ display:none } } html body .ov-jobs .oj-track[data-phase] .is-now .oj-m small.oj-fee{ color:var(--muted) } /* ══ JOBS: WHOSE MOVE, AND BY WHEN ═══════════════════════════════ 29 Sep 2026 ══ The rail's rows with a clock under each job: a bar that runs down to the deadline, or how long the turn has been open. Prices open into their quotes, side by side. */ html body #tab-jobs .jb-sheet{ border-radius:14px } html body #tab-jobs .jb-list.jt{ display:block } html body #tab-jobs .jb-list.jt .oj-rail{ margin-top:4px } html body .jt-clock{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap } html body .jt-bar{ position:relative; display:block; width:120px; height:6px; border-radius:999px; background:var(--line, #E6E0D0); overflow:hidden; flex:none } html body .jt-bar b{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--ph, var(--navy)) } html body [data-phase="held"] .jt-bar b{ background:var(--navy) } html body .jt-bar.is-low b{ background:var(--gold, #83632C) } html body .jt-bar.is-out{ background:rgba(169,68,66,.18) } html body .jt-t{ font-family:var(--serif); font-size:12px; line-height:1.4; color:var(--muted) } html body .oj-item.is-you .jt-clock.has-due .jt-t{ color:var(--ink, #1B2638) } html body .jt-qrow{ list-style:none; padding:0 14px 20px 16px; background:var(--ph-w); border-bottom:1px solid var(--line) } html body .jt-q-h{ margin:0 0 12px; font-family:var(--serif); font-size:14px; color:var(--ink, #1B2638) } html body .jt-q-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px } html body .jt-q{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 14px; border-radius:14px; background:var(--cream, #FAF8F3); border:1px solid var(--line, #E6E0D0); box-shadow:0 1px 1px rgba(10,22,40,.035), 0 4px 9px -6px rgba(10,22,40,.18) } html body .jt-q.is-low{ border-top:3px solid var(--green, #0F5A4F) } html body .jt-q-who{ display:flex; align-items:center; gap:12px } html body .jt-q-who .op-face{ width:40px; height:40px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--navy); color:var(--cream); font-family:var(--sans); font-size:12px; flex:none } html body .jt-q-who .op-face img{ width:100%; height:100%; object-fit:cover; display:block } html body .jt-q-n{ display:flex; flex-direction:column; gap:2px; min-width:0 } html body .jt-q-n b{ font-family:var(--serif); font-weight:400; font-size:17px; color:var(--navy) } html body .jt-q-p{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); text-decoration:none } html body .jt-q-p:hover{ color:var(--navy); text-decoration:underline; text-underline-offset:3px } html body .jt-q-v{ margin:4px 0 0; font-family:var(--serif-display); font-size:26px; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums } html body .jt-q-f{ margin:0; font-family:var(--serif); font-size:12px; color:var(--muted) } html body .jt-q-d{ margin:0; font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--ink, #1B2638) } html body .jt-q-go{ align-self:flex-start; margin-top:6px } /* the pinned note beside a tab's head (Jobs; the Money ledger has its own) */ html body .tab-head.has-pad{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); column-gap:32px; align-items:start } html body .tab-head.has-pad > :not(.ml-pad){ grid-column:1 } html body .tab-head .ml-pad{ grid-column:2; grid-row:1 / span 3; position:relative; margin:4px 6px 12px 0; padding:30px 19px 20px; background:#FDFBF5; border-radius:2px; rotate:-1.4deg; transition:rotate 340ms cubic-bezier(.16,1,.3,1); box-shadow:0 1px 1px rgba(10,22,40,.05), 0 8px 18px -10px rgba(10,22,40,.35), 0 22px 36px -26px rgba(10,22,40,.45); font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--ink, #1B2638) } html body .tab-head .ml-pad:hover{ rotate:0deg } html body .tab-head .ml-pad::before{ content:''; position:absolute; top:9px; left:50%; margin-left:-9px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy) 52%, #04090F 100%); box-shadow:0 1px 0 rgba(250,248,243,.22), 0 5px 8px -3px rgba(0,0,0,.6) } @media (prefers-reduced-motion:reduce){ html body .tab-head .ml-pad{ transition:none } } @media (max-width:900px){ html body .tab-head.has-pad{ grid-template-columns:minmax(0,1fr) } html body .tab-head .ml-pad{ grid-column:1; grid-row:auto; margin:18px 4px 4px } html body .jt-q-grid{ grid-template-columns:1fr } html body #tab-jobs .jb-list.jt .oj-item:not(.is-stop) .oj-say{ display:none } } /* Jobs, second round */ html body #tab-jobs .sv-lede{ font-size:14px } html body #tab-jobs .work-btn span{ font-family:var(--serif-display); font-size:17px; letter-spacing:0; margin-left:6px } html body .ov-jobs .oj-next.has-follow{ flex-direction:column; align-items:flex-end; gap:8px } html body #tab-jobs .jb-empty a{ color:var(--navy); text-underline-offset:3px } @media (max-width:480px){ html body #tab-jobs .jb-list.jt .oj-item:has(.oj-next .btn){ grid-template-areas:"t" "n" "r"; grid-template-columns:minmax(0,1fr) } html body #tab-jobs .jb-list.jt .oj-item:has(.oj-next .btn) .oj-next{ justify-content:flex-start; align-items:flex-start } } /* ══ SQUARE AND PLAIN ═══════════════════════════════════════════ 29 Sep 2026 ══ Sir: remove the coloured edges of the containers, and square them across the dashboard like the trade Services and Reviews sheets (4px). The stage still reads from the row's tint and the dot on its stage line; the 3px edge said it a second time. Buttons and pills keep their round ends: they are controls, not containers. One rule for both dashboards, every tab. The edge is removed with !important because it was drawn by eleven rules, several on :hover, and matching each one's weight would leave the twelfth. Those eleven edge declarations were then deleted where they stood (Mason, same day), and the !important stays as the guard against a twelfth. */ html body .dash-tab-panel :is(.oj-item, .oj-row, .st-row, .om-next, .jb-row, .mo-row, .jt-qrow, .hy-m-row--bad), html body .dash-tab-panel :is(.oj-item, .oj-row, .st-row, .om-next, .jb-row, .mo-row, .jt-qrow):hover{ box-shadow:none !important } html body .dash-tab-panel .rw-reply{ border-left-color:var(--line-2, #D8CFB8) } html body .dash-tab-panel :is(.rcard, .st-tile, .om-next, .jb-sheet, .work-group, .mo-sheet, .mo-refunds, .st-rest, .jb-empty, .jt-q, .dc-case, .dc-next, .dc-add), html body :is(#tab-earnings, #tab-money, #tab-jobs, #tab-services, #tab-reviews, #tab-disputes) :is(.rcard, .st-tile, .jb-sheet, .mo-sheet){ border-radius:4px } html body #tab-earnings .rcard.proofcard, html body #tab-money .mo-refunds{ border-radius:4px } /* and the coloured tops: the three Overview piles and the four Money totals. The stage line's own key under them still carries the colours. */ html body .dash-tab-panel .st-tile::before{ display:none } html body .dash-tab-panel :is(.ml-post, .mo-post){ border-top:0 } /* the last corners: the proof card's stage seals and its post, the map's frame */ html body #tab-earnings :is(.gt.gt--seal, .pf-post, .map-frame){ border-radius:4px } /* ══ WHAT SHE CAN STILL UNDO ═══════════════════════════════════ 1 Oct 2026 ══ Decline a price, cancel a job, have her money back before the work starts. Quiet: a sentence-sized control under the row's words, never a second filled button competing with the one that moves the job on. */ html body .oj-undo{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:4px; margin:6px 0 0 } html body .oj-undo-b, html body .jt-q-no{ align-self:flex-start; padding:4px 0; border:0; background:none; cursor:pointer; font-family:var(--serif); font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:3px } html body .oj-undo-b:hover, html body .jt-q-no:hover{ color:var(--navy) } html body .oj-undo-b:focus-visible, html body .jt-q-no:focus-visible{ outline:2px solid var(--navy); outline-offset:2px } /* rp202: the price card's Message link, a quiet line like Decline, a full press on a phone */ html body .jt-q-msg{ align-self:flex-start; padding:4px 0; font-size:13px; color:var(--navy); text-decoration:underline; text-underline-offset:3px } html body .jt-q-msg:hover{ color:var(--ink, #1B2638) } html body .jt-q-msg:focus-visible{ outline:2px solid var(--navy); outline-offset:2px } @media (max-width: 760px){ html body .jt-q-msg{ padding:6px 0; margin:-2px 0 } } html body .oj-undo-b[disabled], html body .jt-q-no[disabled]{ cursor:default; text-decoration:none } html body .oj-undo-say, html body .jt-q-say{ margin:0; font-family:var(--serif); font-size:12px; color:var(--ink, #1B2638) } html body .jt-q-say:empty{ display:none } html body .jt-q.is-declined{ opacity:.6 } /* ══ rp112, 12 Oct 2026: THE TRADE DASHBOARD'S FINAL POLISH ═════════════════ Sir chose the trade dashboard next (12 Oct). Read at 1440 by 900 against the homepage standard (Mason chapter 59): */ /* (1) The stage totals were 124px boxes (the earlier note: "the Earnings steps column is cramped"): labels broke over two lines and their sentences over three. On a desktop wide enough, the four stages take 160px each and the job's own column gives way; the totals stand over their stages as before. */ @media (min-width:1360px){ html body .ov-jobs{ --oj-track:640px; --oj-next:184px; --oj-gap:24px } } html body .ml .ml-post{ padding:12px 12px 12px } html body .ml .ml-post .ml-s{ text-wrap:pretty } /* (2) The ledger's head was a tall band of nothing beside the pinned note. The next money to move now sits under the heading, in the note's height. */ html body .ml .rcard-head.has-pad > .om-next{ grid-column:1; margin:16px 0 0 } html body .ml .rcard-head.has-pad{ padding-bottom:18px } html body .ml .ml-post .ml-k{ letter-spacing:.1em } /* (3) The Jobs tab stopped after one or two rows and left the window empty. Under his own work it now lists what he can price next, nearest first (assets/hyyryn-jobs-near.js). The dashboard's card, its pin and its rule. */ html body #tab-jobs .jn{ position:relative; margin:0 0 40px; padding:26px 21px 18px; background:rgb(250,248,243); border:1px solid var(--line, #E6E0D0); border-radius:4px; box-shadow:rgba(10,22,40,.035) 0 1px 1px 0, rgba(10,22,40,.18) 0 4px 9px -6px, rgba(10,22,40,.45) 0 18px 30px -22px } /* the dashboard's pin, as on every card here (Sir's ruling, 11 Sep) */ html body #tab-jobs .jn::before{ content:''; position:absolute; top:-11px; left:50%; margin-left:-9px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy) 52%, #04090F 100%); box-shadow:0 1px 0 rgba(250,248,243,.22), 0 5px 8px -3px rgba(0,0,0,.6) } html body #tab-jobs .jn .rcard-head{ padding-bottom:12px; border-bottom:1px solid var(--line-2, #DDD6C6) } html body #tab-jobs .jn .rcard-t{ margin:0 } html body #tab-jobs .jn .rcard-s{ margin:6px 0 0 } html body #tab-jobs .jn[hidden]{ display:none } html body #tab-jobs .jn-list{ list-style:none; margin:6px 0 0; padding:0 } html body #tab-jobs .jn-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,auto) auto; align-items:center; gap:10px 24px; padding:16px 0; border-bottom:1px solid var(--line, #E6E0D0) } html body #tab-jobs .jn-row:last-child{ border-bottom:0 } html body #tab-jobs .jn-name{ display:block; font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.35; color:var(--navy) } html body #tab-jobs .jn-sub{ display:block; margin-top:3px; font-family:var(--serif); font-size:13px; color:var(--muted) } html body #tab-jobs .jn-v{ margin:0; text-align:right } html body #tab-jobs .jn-v b{ display:block; font-family:var(--serif-display); font-weight:400; font-size:20px; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums } html body #tab-jobs .jn-v span{ display:block; margin-top:3px; font-family:var(--serif); font-size:12px; color:var(--muted) } html body #tab-jobs .jn-none{ padding:18px 4px; font-family:var(--serif); font-size:14px; color:var(--muted) } html body #tab-jobs .jn-none b{ display:block; font-weight:400; font-size:16px; color:var(--navy); margin-bottom:4px } html body #tab-jobs .jn-foot{ display:flex; align-items:center; gap:22px; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line-2, #DDD6C6) } html body #tab-jobs .jn-foot .jn-all[hidden]{ display:none } html body #tab-jobs .jn-area{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--navy); text-decoration:underline; text-decoration-color:rgba(10,22,40,.3); text-underline-offset:4px } @media (max-width:640px){ html body #tab-jobs .jn-row{ grid-template-columns:minmax(0,1fr) auto; } html body #tab-jobs .jn-go{ grid-column:1 / -1; justify-self:start } } /* (4) Services: a listing's name in the job rows' face (it was the sans the rest of the tabs left behind); adding photographs is a button of the buttons' kind, not a dashed box; the photograph that is not there yet says so in the page's voice; the foot note no longer touches its button. */ html body #tab-services .sv-row .jb-t{ font-family:var(--serif); font-size:17px; font-weight:400; line-height:1.35 } html body #tab-services .sv-add{ position:relative; height:40px; padding:0 18px; border:1px solid var(--line-2, #DDD6C6); border-radius:999px; background:transparent; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--navy); transition:border-color .2s, background-color .2s } html body #tab-services .sv-add:hover{ border-color:var(--navy); background-color:rgba(10,22,40,.03) } html body #tab-services .sv-pic .sv-nopic{ font-family:var(--serif); font-style:italic; font-size:12.5px } html body #tab-services .rg-p + .mo-foot{ margin-top:14px } /* (5) On a phone a job row on the Overview and in Money set its name and its button side by side, so a long button ("Completion photographs") left the name four words a line under it. Below 560px the name, the button and the stages run one under another, as the Jobs tab already does. */ @media (max-width:560px){ html body .ov-jobs .oj-item{ grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "n" "r"; row-gap:12px } html body .ov-jobs .oj-next{ justify-content:flex-start } html body .ov-jobs .oj-next.has-follow{ align-items:flex-start } } /* ══ BEFORE YOUR FIRST JOB, GROUPED BY WHAT EACH STEP UNLOCKS ══ 14 Oct 2026 (rp135) ══ Two columns on a desktop: what is needed (before you can price, before you can be paid) on the left, what is for some jobs or optional on the right. Each step is a row: its mark, its name and its status as a tag on the first line (the GOV.UK task list), why it is asked under it, what to do now, and one button. */ html body .ov-steps.ov-steps--grouped{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 30px; margin-top:20px } html body .ov-col-g{ list-style:none; display:flex; flex-direction:column; gap:22px; min-width:0 } html body .ov-group-h{ margin:0 0 10px; font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--muted) } @media (max-width: 760px) { html body .ov-group-h { font-size: 10.5px; } } /* rp200 phone floor, was 9.5px */ html body .ov-group-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px } html body .ov-steps--grouped .ov-task{ display:flex; flex-direction:column; gap:6px; min-height:0; padding:15px 16px 14px; border:1px solid var(--line-2, #D8CFB8); border-radius:10px; background:var(--cream-2, #F3EFE4) } html body .ov-steps--grouped .ov-task .ov-step-k{ display:flex; align-items:center; gap:10px; margin:0 } html body .ov-steps--grouped .ov-task .ov-step-k > span:nth-child(2){ flex:1 1 auto; min-width:0 } html body .ov-steps--grouped .ov-task .ov-step-s, html body .ov-steps--grouped .ov-task .ov-step-how, html body .ov-steps--grouped .ov-task .ov-step-a, html body .ov-steps--grouped .ov-task .ov-step-change{ margin-left:34px } html body .ov-steps--grouped .ov-task .ov-step-s{ flex:none; margin-top:0 } html body .ov-steps--grouped .ov-task .ov-step-how{ margin-top:2px; margin-bottom:0; font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--ink, #1B2638) } html body .ov-steps--grouped .ov-task .ov-step-a{ margin-top:6px; align-self:flex-start } html body .ov-steps--grouped .ov-task .ov-step-change{ align-self:flex-start; margin-top:2px; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); text-decoration:underline; text-underline-offset:3px } html body .ov-steps--grouped .ov-task.is-done{ background:transparent; border-color:var(--line, #E6E0D0) } html body .ov-steps--grouped .ov-task.is-done .ov-step-done{ display:none } /* the status, said in words (a colour alone says nothing to a screen reader or a colour-blind reader) */ html body .ov-tag{ flex:none; padding:5px 9px 4px; border-radius:999px; border:1px solid var(--line-2, #D8CFB8); white-space:nowrap; font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--navy) } @media (max-width: 760px) { html body .ov-tag { font-size: 10.5px; } } /* rp200 phone floor, was 9.5px */ html body .ov-tag--todo{ border-color:var(--navy); color:var(--navy) } html body .ov-tag--done{ border-color:transparent; background:rgba(15,90,79,.1); color:var(--green, #0F5A4F) } html body .ov-tag--wait{ border-color:transparent; background:rgba(212,169,67,.18); color:var(--gold, #83632C) } html body .ov-tag--stop{ border-color:transparent; background:rgba(169,68,66,.1); color:var(--danger, #A94442) } html body .ov-tag--opt{ color:var(--muted) } html body .ov-tag--unknown{ border-style:dotted; color:var(--muted) } @media (max-width:860px){ html body .ov-steps.ov-steps--grouped{ grid-template-columns:minmax(0,1fr) } } @media (max-width:560px){ html body .ov-steps--grouped .ov-task .ov-step-k{ flex-wrap:wrap; row-gap:6px } html body .ov-steps--grouped .ov-task .ov-tag{ margin-left:34px; order:3 } html body .ov-steps--grouped .ov-task .ov-step-s, html body .ov-steps--grouped .ov-task .ov-step-how, html body .ov-steps--grouped .ov-task .ov-step-a, html body .ov-steps--grouped .ov-task .ov-step-change{ margin-left:0 } } /* ══ A FIRST RUN: NO PRICE EVER SENT (rp135) ══ The list leads, the jobs near him follow, then the way he is paid. The three tiles, the rail and the money at nought are hidden until there is something in them (they come back with his first price). */ html.ov-first body #tab-earnings .ref-grid > .ov-status, html.ov-first body #tab-earnings .ref-grid .ov-jobs, html.ov-first body #tab-earnings .ref-grid .ov-money{ display:none } html.ov-first body #tab-earnings .ref-grid > .ov-start{ order:0 } html.ov-first body #tab-earnings .ref-grid > .rcard--map{ order:1 } html.ov-first body #tab-earnings .ref-grid > .rcard--chart{ order:2; grid-column:1 / -1 } /* whether he can price the jobs near him yet */ html body .mn-gate{ margin:10px 0 0; padding:8px 12px; border-left:3px solid var(--gold-soft, #D4A943); background:rgba(212,169,67,.08); font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--navy) } html body .mn-gate[hidden]{ display:none } /* ══ A SEQUENCE OF STEPS (the homeowner's first job, rp136) ══ Four steps in her order, each saying where she is in it (Done, Next, Then); the next one stands out. */ html body .ov-steps.ov-steps--seq .ov-task .ov-step-k{ display:flex; align-items:center; gap:10px; margin:0 } html body .ov-steps.ov-steps--seq .ov-task .ov-step-k > span:nth-child(2){ flex:1 1 auto; min-width:0 } html body .ov-steps.ov-steps--seq .ov-task.is-next{ border-color:var(--navy); background:var(--cream, #FAF8F3) } html body .ov-steps.ov-steps--seq .ov-task .ov-step-change{ align-self:flex-start; margin-top:auto; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); text-decoration:underline; text-underline-offset:3px } html body .ov-steps.ov-steps--seq .ov-task.is-done .ov-step-done{ display:none } /* a phone rule on My jobs centres a step's parts; a step in a sequence reads from its left edge */ html body .ov-steps.ov-steps--seq .ov-task{ align-items:stretch } html body .ov-steps.ov-steps--seq .ov-task .ov-step-a{ align-self:flex-start } /* a done step's tag keeps its green: the rule that mutes a done step's last word reached the tag once the tag became the last part of the head (rp136), 4.44 to 1 on its tint; green on the tint reads 6.9 to 1 (Mason gate) */ html body .ov-step.is-done .ov-step-k span.ov-tag--done{ color:var(--green, #0F5A4F) } /* rp157 (17 Oct 2026, the launch-day pass): at a phone's width the trade's first rail label, HOMEOWNER, filled its quarter to the pixel at .17em and ran into the next ("HOMEOWNERUNDER WAY"); on a phone the rail is spaced less */ @media (max-width:480px){ html body .ov-jobs .oj-rail li{ letter-spacing:.08em } }