/* ══ THE DASHBOARDS, ROUNDED, ON THE SETTINGS CARD'S GRAMMAR ═════ 20 Oct 2026 (rp164, rp165) ══
   Sir, 20 Oct 2026 (rp164): "go to the overview page. And on the overview, the
   containers need to be improved as well. The pins are not necessary unless
   you feel like it needs to be ... you're going for the same curved container
   as the settings". Then (rp165): "the containers should be all surrounded,
   just like the settings containers ... like the plan page subscription
   cards ... the overview, the money, the jobs, the own jobs, services,
   reviews, disputes, all ... should have that rounded container style ...
   improve the remaining tabs as well. Do it one by one so the quality is on
   par with the overview ... Remove the pins ... Do this for both users". Asked
   what "surrounded" meant, he chose "a clear edge all round": every card,
   outer and inner, rounded and with a visible edge and shadow on every side.

   BUILT, NOT WRITTEN: this sheet is made from docs/dev/dash-round.tpl.css by
   docs/dev/build-dash-round.py (the tab list, each tab named twice, and the
   marks). Edit the template and rebuild.

   Loaded last on dashboard-tradesperson.html, my-jobs.html and my-jobs-norm.html
   (not on organisation.html: its tabs share two of these ids, #tab-earnings and
   #tab-jobs, and hold other things; rp164 linked it there unseen, rp166 took it
   off). Each tab is brought in by its own pass; the tabs done so far are named
   in every shared rule (the list in :is(...)).

   THE GRAMMAR (Mason 62, 64, 66, 67):
     a card: solid cream, a 22px corner (18 on a phone), an inner ring dark
       enough to read as an edge on the light ground, a white edge lit from
       above, a near shadow all round and the long soft one under it; no
       border, no pin;
     a card's head: its mark on a navy disc in the cover's gold, the title and
       its line beside it, and the gold hairline that fades out under them;
     inside a card, every box that holds words is rounded (rows 14px, panels
       16px) and has its own faint edge; a state is a tint, a ring or a dot,
       never a bar; a note is a tile with its own mark, not a pinned sheet;
     what is pressed is a pill;
     evidence stays square-edged where it is evidence: the chart's bars and
       lines, the map's tiles inside their rounded frame, the money bar.

   Specificity: the tabs were drawn by four sheets and two inline style blocks,
   the strongest rule (1,4,2). Every rule here names its tab twice
   (#tab-money#tab-money, (2,0,0)), so this sheet wins on count and never on
   !important (Mason 05). "A card that is not inside another card" is
   :where(:not(...)), which counts nothing, so a state's ring outranks the
   plain card, under the pointer too. */

:root {
  --dr-ring: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 #FFFFFF;
  --dr-drop: 0 1px 2px rgba(10,22,40,.07), 0 10px 22px -14px rgba(10,22,40,.24), 0 34px 60px -36px rgba(10,22,40,.42);
  --dr-drop-up: 0 2px 4px rgba(10,22,40,.08), 0 14px 28px -14px rgba(10,22,40,.28), 0 44px 72px -38px rgba(10,22,40,.52);
  --dr-edge: inset 0 0 0 1px rgba(10,22,40,.08);
  --dr-gold-ring: inset 0 0 0 1.5px rgba(212,169,67,.6), inset 0 1px 0 #FFFFFF;
}

/* ── 1. the cards ─────────────────────────────────────────────────────── */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .st-tile, .ov-compose, .po-band, .jb-sheet, .st-sec, .dc-case, .dc-road):where(:not(.rcard .rcard)) {
  border: 0; border-radius: 22px; background-color: #FAF8F3;
  box-shadow: var(--dr-ring), var(--dr-drop);
  transition: box-shadow 260ms cubic-bezier(.16,1,.3,1), translate 260ms cubic-bezier(.16,1,.3,1);
}
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .ov-compose):where(:not(.rcard .rcard)) { padding: clamp(20px, 1.9vw, 30px) clamp(18px, 2vw, 30px) clamp(20px, 1.7vw, 26px); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .st-tile, .ov-compose):where(:not(.rcard .rcard)):is(:hover, :focus-within) {
  translate: 0 -2px; box-shadow: var(--dr-ring), var(--dr-drop-up);
}
/* no pins */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .ov-start, .st-tile, .st-sec)::before,
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .ov-start, .st-sec)::after { content: none; display: none; }
/* the heads no longer keep clear of a pin */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard > .rcard-head { padding-top: 0; }

/* ── 2. the head: a mark on a navy disc, the gold hairline that fades ──── */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard-head, .ov-start-head, .ovh-need-head, .st-sec-h):not(.rcard .rcard *) {
  position: relative; border-bottom: 0; padding-bottom: 16px; margin-bottom: 18px;
  padding-left: 58px; min-height: 42px;
}
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard-head, .ov-start-head, .ovh-need-head, .st-sec-h):not(.rcard .rcard *)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,169,67,.65), rgba(212,169,67,.18) 55%, rgba(212,169,67,0));
}
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard-head, .ov-start-head, .ovh-need-head, .st-sec-h):not(.rcard .rcard *)::before {
  content: ''; position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--dr-ico, none) center / 19px 19px no-repeat, radial-gradient(circle at 35% 30%, #1C2A44, #0A1628 70%);
  box-shadow: 0 0 0 4px rgba(212,169,67,.13), 0 6px 14px -8px rgba(10,22,40,.6);
}
/* what a head holds besides its title (Money's next payment and its note)
   starts at the card's edge, not beside the disc */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard-head > .om-next { margin-left: -58px; }
@media (max-width: 900px) { html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard-head > .ml-pad { margin-left: -58px; } }
@media (max-width: 640px) { html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard-head > :is(.om-next, .ml-pad) { margin-left: -48px; } }
/* the marks, one a card: a list ticked, a pound, a briefcase, a pin, a chart,
   a bell, two people, a camera, a pie, a sheet; on Money a wallet, a calendar
   and a bank */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-start { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-money { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7c0-5.33-8-5.33-8 0'/%3E%3Cpath d='M10 7v14'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M6 13h10'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard--map { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 15 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard--chart { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ovh-need { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.27 21a2 2 0 0 0 3.46 0'/%3E%3Cpath d='M3.26 15.33A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.41 13.96 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.41 5.96-2.74 7.33'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ovh-people { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .proofcard { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard--pie { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c.55 0 1-.45.98-1a10 10 0 0 0-9-9c-.55-.05-1 .4-1 .95v8a1 1 0 0 0 1 1z'/%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3C/svg%3E"); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-quotes { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
html body #tab-money#tab-money #moLedger { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
html body #tab-money#tab-money #moComing { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
html body #tab-money#tab-money #moPaid { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M12 2 20 7H4z'/%3E%3C/svg%3E"); }
/* a card whose head has no mark of its own shows no disc */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard:not(.ov-start, .ov-money, .ov-jobs, .rcard--map, .rcard--chart, .ovh-need, .ovh-people, .proofcard, .rcard--pie, .ov-quotes, #moLedger, #moComing, #moPaid, #jbNear) > :is(.rcard-head) { padding-left: 0; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .rcard:not(.ov-start, .ov-money, .ov-jobs, .rcard--map, .rcard--chart, .ovh-need, .ovh-people, .proofcard, .rcard--pie, .ov-quotes, #moLedger, #moComing, #moPaid, #jbNear) > :is(.rcard-head)::before { content: none; }

/* ── 3. what is inside a card: rows 14px, panels 16px, each with its edge ─ */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ov-step, .om-next, .chart-frame, .mo-empty, .ovh-calm, .mo-refunds, .st-rest) { border-radius: 16px; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.om-next, .chart-frame, .st-rest) { box-shadow: var(--dr-edge); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .map-frame { border-radius: 16px; overflow: hidden; border: 0; box-shadow: var(--dr-edge), 0 1px 2px rgba(10,22,40,.06); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .map-frame .leaflet-container { border-radius: 16px; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .chart-frame { overflow: hidden; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .map-frame .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(10,22,40,.12), 0 6px 14px -8px rgba(10,22,40,.45); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-item { border-radius: 14px; border-top: 0; border-bottom: 0; box-shadow: var(--dr-edge); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-item + .oj-item { margin-top: 6px; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .evbar .ev-mark { border-radius: 14px; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .st-row { border-radius: 14px; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .st-row + .st-row { margin-top: 6px; }

/* the stage key over a list of jobs: a rounded capsule under each stage, in
   its colour (gold, navy, navy, green), where a 3px bar ran along the foot */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-rail { border-bottom: 0; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-rail li:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) { position: relative; box-shadow: none; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-rail li:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5))::before {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 4px; border-radius: 2px; background: #0A1628; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-rail li:nth-child(2)::before { background: #83632C; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .ov-jobs .oj-rail li:nth-child(5)::before { background: #0F5A4F; }

/* ── 4. the Overview ───────────────────────────────────────────────────── */
/* the three tiles: a dot by the name, the waiting one ringed */
html body #tab-earnings#tab-earnings .st-tile { padding: 20px 22px 18px; }
html body #tab-earnings#tab-earnings .st-k { display: inline-flex; align-items: center; gap: 9px; }
html body #tab-earnings#tab-earnings .st-k::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #C8BFA0; }
html body #tab-earnings#tab-earnings .st-tile--wait:not(.is-empty) .st-k::before { background: #D4A943; box-shadow: 0 0 0 3px rgba(212,169,67,.18); }
html body #tab-earnings#tab-earnings .st-tile--prog:not(.is-empty) .st-k::before { background: #0A1628; box-shadow: 0 0 0 3px rgba(10,22,40,.10); }
html body #tab-earnings#tab-earnings .st-tile--done:not(.is-empty) .st-k::before { background: #0F5A4F; box-shadow: 0 0 0 3px rgba(15,90,79,.14); }
html body #tab-earnings#tab-earnings .st-tile--wait:not(.is-empty) {
  background: radial-gradient(130% 90% at 100% 0%, rgba(212,169,67,.10), rgba(212,169,67,0) 60%), #FAF8F3;
  box-shadow: var(--dr-gold-ring), var(--dr-drop); }
html body #tab-earnings#tab-earnings .st-head { border-bottom: 0; position: relative; }

/* Needs you: a gold ring, not a gold bar along its top; its rows rounded tiles */
html body #tab-earnings#tab-earnings .ovh-need::before { content: none; display: none; }
html body #tab-earnings#tab-earnings .ovh-need:not(.is-calm) {
  background: radial-gradient(120% 70% at 100% 0%, rgba(212,169,67,.10), rgba(212,169,67,0) 60%), #FAF8F3;
  box-shadow: var(--dr-gold-ring), var(--dr-drop); }
html body #tab-earnings#tab-earnings .ovh-need-list { display: grid; gap: 8px; }
html body #tab-earnings#tab-earnings .ovh-row { border-top: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(212,169,67,.22); }
html body #tab-earnings#tab-earnings .ovh-more { border-top: 0; }

/* the proof's three figures: tiles, no bar across their tops */
html body #tab-earnings#tab-earnings .proofcard .proof-band { gap: 8px; border: 0; background: none; }
html body #tab-earnings#tab-earnings .proofcard .pf-fig {
  border: 0; border-radius: 14px; background: #F3EEE3; box-shadow: var(--dr-edge); }
html body #tab-earnings#tab-earnings .proofcard .pf-fig--lead {
  background: linear-gradient(160deg, #15243D, #0A1628 70%) #0A1628; box-shadow: inset 0 0 0 1px rgba(212,169,67,.30); }
html body #tab-earnings#tab-earnings .proofcard .pf-fig--lead :is(.figband-k, .figband-s) { color: rgba(243,238,227,.72); }
html body #tab-earnings#tab-earnings .proofcard .pf-fig--lead .figband-v { color: #F3EEE3; }

/* whether he can price the jobs near him yet: a tinted tile with a dot, not a bar down its side */
html body #tab-earnings#tab-earnings .mn-gate { position: relative; padding: 9px 14px 9px 30px; border-left: 0; border-radius: 12px;
  background: rgba(212,169,67,.10); box-shadow: inset 0 0 0 1px rgba(212,169,67,.30); }
html body #tab-earnings#tab-earnings .mn-gate::before { content: ''; position: absolute; left: 13px; top: 16px; width: 7px; height: 7px; border-radius: 50%;
  background: #D4A943; box-shadow: 0 0 0 3px rgba(212,169,67,.18); }

/* the chart's period: a pill on a track */
html body #tab-earnings#tab-earnings .period-pills {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 0;
  background: #EFEAE0; box-shadow: inset 0 0 0 1px rgba(10,22,40,.06); }
html body #tab-earnings#tab-earnings .period-pills button {
  min-height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  transition: background-color .2s ease, color .2s ease; }
html body #tab-earnings#tab-earnings .period-pills button::after { content: none; display: none; }
html body #tab-earnings#tab-earnings .period-pills button:hover { background: rgba(10,22,40,.06); }
html body #tab-earnings#tab-earnings .period-pills button.active {
  background: #0A1628; color: #FAF8F3; box-shadow: 0 4px 10px -4px rgba(10,22,40,.5); }
html body #tab-earnings#tab-earnings .period-pills button:focus-visible { outline: 2px solid #D4A943; outline-offset: 2px; }

/* ── 5. Money ──────────────────────────────────────────────────────────── */
/* the payouts band (the trade's): a card, its state a tint and a ring, not a
   bar down its side; loud (night) while a homeowner cannot pay him, green and
   quiet once payouts are on */
html body #tab-money#tab-money .po-band { padding: 20px 24px; }
html body #tab-money#tab-money .po-band[data-state="off"], html body #tab-money#tab-money .po-band[data-state="part"] {
  background: radial-gradient(120% 120% at 100% 0%, rgba(212,169,67,.14), rgba(212,169,67,0) 60%), linear-gradient(160deg, #16305A, #0A1628 70%) #0A1628;
  box-shadow: inset 0 0 0 1px rgba(212,169,67,.4), inset 0 1px 0 rgba(255,255,255,.08), var(--dr-drop); }
html body #tab-money#tab-money .po-band[data-state="on"] {
  background: radial-gradient(120% 120% at 100% 0%, rgba(15,90,79,.08), rgba(15,90,79,0) 60%) #F7F8F3;
  box-shadow: inset 0 0 0 1px rgba(15,90,79,.28), inset 0 1px 0 #FFFFFF, var(--dr-drop); }

/* the fee note: a rounded tile with its own mark beside the ledger's head,
   not a sheet pinned at a tilt (the trade's: what the fee is, a percent sign;
   the homeowner's: that Hyyryn charges her nothing, a shield) */
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ml, .tab-head) .ml-pad {
  rotate: 0deg; border-radius: 18px; margin-top: 2px; margin-right: 0; margin-bottom: 0; padding: 18px 20px 18px 62px;
  background: #F3EEE3; box-shadow: var(--dr-edge), 0 1px 2px rgba(10,22,40,.05);
  font-size: 14px; line-height: 1.55; transition: none; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ml, .tab-head) .ml-pad::before {
  content: ''; position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; margin: 0; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 16px 16px no-repeat, #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), 0 2px 6px -3px rgba(10,22,40,.3); }
html body #tab-money#tab-money #moLedger[data-role="tradesperson"] .ml-pad::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat, #FFFFFF; }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ml, .tab-head) .ml-pad::after { content: none; display: none; }

/* the totals over each stage: rounded tiles with their edge */
html body #tab-money#tab-money .ml .ml-post { border-radius: 14px; box-shadow: var(--dr-edge); }
/* the sum under the rows: a rounded strip, not a navy rule */
html body #tab-money#tab-money .ml .ml-sum { margin-top: 12px; padding: 11px 16px; border-top: 0; border-radius: 999px;
  background: #F3EEE3; box-shadow: var(--dr-edge); }
/* the links under Paid: pills */
html body #tab-money#tab-money .mo-links { display: flex; flex-wrap: wrap; gap: 10px; }
html body #tab-money#tab-money .mo-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10,22,40,.16), 0 1px 2px rgba(10,22,40,.06); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
html body #tab-money#tab-money .mo-links a:hover { background: #0A1628; color: #FAF8F3; box-shadow: inset 0 0 0 1px #0A1628, 0 10px 20px -12px rgba(10,22,40,.5); }
html body #tab-money#tab-money .mo-links a:focus-visible { outline: 2px solid #D4A943; outline-offset: 2px; }
html body #tab-money#tab-money .mo-empty { border-style: dashed; }
html body #tab-money#tab-money :is(.mo-track) li { position: relative; box-shadow: none; }
html body #tab-money#tab-money .mo-track li::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 4px; border-radius: 2px; background: #0A1628; }
html body #tab-money#tab-money .mo-track li:first-child::before { background: #83632C; }
html body #tab-money#tab-money .mo-track li:last-child::before { background: #0F5A4F; }

/* ── 5b. Jobs (both users) ───────────────────────────────────────────── */
/* the three views (On now, Quoted or Prices, Finished): a track with the
   open view on a navy pill, its count beside its name; not an underline */
html body #tab-jobs#tab-jobs .work-filter {
  display: inline-flex; flex-wrap: wrap; gap: 2px; width: max-content; max-width: 100%; margin-bottom: 18px; padding: 4px;
  border: 0; border-radius: 999px; background: rgba(250,248,243,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), 0 10px 24px -16px rgba(10,22,40,.45); }
html body #tab-jobs#tab-jobs .work-filter .work-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px;
  box-shadow: none; transition: background-color .2s ease, color .2s ease; }
html body #tab-jobs#tab-jobs .work-filter .work-btn span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 0; padding: 0 6px; box-sizing: border-box;
  border-radius: 11px; background: rgba(10,22,40,.07); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0; color: #0A1628; font-variant-numeric: tabular-nums; }
html body #tab-jobs#tab-jobs .work-filter .work-btn:hover { background: rgba(10,22,40,.06); }
html body #tab-jobs#tab-jobs .work-filter .work-btn.is-on { background: #0A1628; color: #FAF8F3; box-shadow: 0 6px 14px -6px rgba(10,22,40,.55); }
html body #tab-jobs#tab-jobs .work-filter .work-btn.is-on span { background: #D4A943; color: #0A1628; }
html body #tab-jobs#tab-jobs .work-filter .work-btn:focus-visible { outline: 2px solid #D4A943; outline-offset: 2px; }
/* each view is a card; its rows rounded tiles under the stage key */
html body #tab-jobs#tab-jobs .jb-sheet { padding: clamp(14px, 1.4vw, 22px) clamp(14px, 1.6vw, 24px); }
html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.jb-empty) { border-radius: 16px; border: 0; background: #F3EEE3; box-shadow: var(--dr-edge); }
/* a price row under a job: a rounded panel of the job's tint; each price a card, the lowest ringed in green (not a bar across its top) */
html body #tab-jobs#tab-jobs .jt-qrow { margin-top: 6px; padding: 16px; border-bottom: 0; border-radius: 14px; box-shadow: var(--dr-edge); }
html body #tab-jobs#tab-jobs .jt-q { border: 0; border-radius: 16px; background: #FFFFFF; box-shadow: var(--dr-edge), 0 1px 2px rgba(10,22,40,.06), 0 10px 22px -16px rgba(10,22,40,.3); }
html body #tab-jobs#tab-jobs .jt-q.is-low { border-top: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(15,90,79,.07), rgba(15,90,79,0) 60%) #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(15,90,79,.45), 0 1px 2px rgba(10,22,40,.06), 0 10px 22px -16px rgba(10,22,40,.3); }
/* the jobs near him waiting for a price: a card with its mark, each job a rounded row, the area a pill */
html body #tab-jobs#tab-jobs #jbNear { margin-bottom: 28px; }
html body #tab-jobs#tab-jobs #jbNear { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
html body #tab-jobs#tab-jobs .jn-list { display: grid; gap: 8px; margin-top: 4px; }
html body #tab-jobs#tab-jobs .jn-row { padding: 14px 16px; border-bottom: 0; border-radius: 14px; background: #F6F3EC; box-shadow: var(--dr-edge); }
html body #tab-jobs#tab-jobs .jn-none { padding: 18px 20px; border-radius: 16px; background: #F3EEE3; box-shadow: var(--dr-edge); }
html body #tab-jobs#tab-jobs .jn-foot { border-top: 0; padding-top: 0; margin-top: 16px; }
html body #tab-jobs#tab-jobs .jn-area, html body #tab-jobs#tab-jobs .jn-all { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10,22,40,.16), 0 1px 2px rgba(10,22,40,.06); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
html body #tab-jobs#tab-jobs :is(.jn-area, .jn-all):hover { background: #0A1628; color: #FAF8F3; box-shadow: inset 0 0 0 1px #0A1628, 0 10px 20px -12px rgba(10,22,40,.5); }
/* the line under the tab about his own jobs: a small tile with its mark */
html body #tab-jobs#tab-jobs > .mo-foot { position: relative; display: block; width: fit-content; max-width: 100%; margin-top: 4px; padding: 14px 18px 14px 56px;
  border-radius: 16px; background: rgba(250,248,243,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), 0 10px 24px -18px rgba(10,22,40,.4); }
html body #tab-jobs#tab-jobs > .mo-foot::before { content: ''; position: absolute; left: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / 14px 14px no-repeat, #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10,22,40,.10); }
/* the jobs' note beside the tab's head: what is said about the money is a shield */
html body #tab-jobs#tab-jobs .tab-head .ml-pad { margin-top: 0; }
/* a wider note is a shorter one: the head's note took 340px and ran to seven lines, leaving a well of empty page
   between the tab's title and its views */
@media (min-width: 1100px) { html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .tab-head.has-pad { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } }

/* ── 5c. Own jobs (the trade's) ────────────────────────────────────────── */
/* each section a card with its mark: the records a clipboard, adding one a
   new sheet, one customer a person, the bin a bin, the offer the Plus spark */
html body #tab-own#tab-own .st-sec { margin-bottom: 22px; padding: clamp(20px, 1.9vw, 30px) clamp(18px, 2vw, 30px) clamp(20px, 1.7vw, 26px); }
html body #tab-own#tab-own :is(#own-records, #own-record) { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); }
html body #tab-own#tab-own #own-add { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M12 18v-6'/%3E%3C/svg%3E"); }
html body #tab-own#tab-own #own-customer { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
html body #tab-own#tab-own #own-bin { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); }
html body #tab-own#tab-own #ojOffer { --dr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.13a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.13 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3C/svg%3E"); }
/* the counts: three tiles */
html body #tab-own#tab-own .og-counts { display: flex; flex-wrap: wrap; gap: 10px; }
html body #tab-own#tab-own .og-counts li { min-width: 120px; padding: 12px 16px 12px; border-radius: 16px; background: #FAF8F3; box-shadow: var(--dr-ring), 0 1px 2px rgba(10,22,40,.06), 0 10px 22px -16px rgba(10,22,40,.3); }
/* the ways round the tab: pills on white with their edge */
html body #tab-own#tab-own .og-pick a { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10,22,40,.16), 0 1px 2px rgba(10,22,40,.06); }
html body #tab-own#tab-own .og-pick a:hover { background: #0A1628; color: #FAF8F3; box-shadow: inset 0 0 0 1px #0A1628, 0 10px 20px -12px rgba(10,22,40,.5); }
/* the records: rounded rows, not ruled lines */
html body #tab-own#tab-own .og-list { display: grid; gap: 8px; border-top: 0; }
html body #tab-own#tab-own .og-list > li { padding: 14px 16px; border-bottom: 0; border-radius: 14px; background: #F6F3EC; box-shadow: var(--dr-edge); }
html body #tab-own#tab-own .og-empty { padding: 16px 18px; border: 0; border-radius: 16px; background: #F3EEE3; box-shadow: var(--dr-edge); }
/* the notice for the customer, and the example on the offer */
html body #tab-own#tab-own .oj-notice { border: 0; border-radius: 16px; box-shadow: var(--dr-edge); }
html body #tab-own#tab-own .oj-spec { border: 0; border-radius: 20px; box-shadow: var(--dr-ring), var(--dr-drop); }
html body #tab-own#tab-own .oj-spec .ph { border: 0; border-radius: 12px; box-shadow: var(--dr-edge); }
html body #tab-own#tab-own .oj-spec-seal { border-top: 0; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(15,90,79,.07); box-shadow: inset 0 0 0 1px rgba(15,90,79,.18); }
html body #tab-own#tab-own textarea { border-radius: 16px; }
/* a record's three photograph stages: rounded tiles side by side, not ruled bands */
html body #tab-own#tab-own .oj-stage { margin-top: 10px; padding: 14px 16px 16px; border-top: 0; border-radius: 16px; background: #F6F3EC; box-shadow: var(--dr-edge); }

/* ── 5d. Services (the trade's) ───────────────────────────────────────── */
/* each listing a rounded tile in the card, not a ruled row; its photograph
   well rounded; what it covers and what it does not as two tinted tiles, the
   navy half and the red half (the foot note names them), each with its dot,
   where a 2px rule ran along their tops */
html body #tab-services#tab-services #svList { display: grid; gap: 10px; }
html body #tab-services#tab-services .sv-row { padding: 16px; border-bottom: 0; border-radius: 18px; background: #F6F3EC; box-shadow: var(--dr-edge); }
html body #tab-services#tab-services .sv-pic { border-radius: 14px; box-shadow: var(--dr-edge); }
html body #tab-services#tab-services .sv-half { position: relative; padding: 10px 14px 12px; border-top: 0; border-radius: 14px;
  background: rgba(10,22,40,.045); box-shadow: inset 0 0 0 1px rgba(10,22,40,.10); }
html body #tab-services#tab-services .sv-half--no { background: rgba(169,68,66,.055); box-shadow: inset 0 0 0 1px rgba(169,68,66,.22); }
html body #tab-services#tab-services .sv-half .sv-k { display: inline-flex; align-items: center; gap: 7px; }
html body #tab-services#tab-services .sv-half .sv-k::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #0A1628; }
html body #tab-services#tab-services .sv-half--no .sv-k::before { background: #A94442; }

/* ── 5e. Reviews (both users) ─────────────────────────────────────────── */
/* the rating: the score's bars as rounded capsules, not ruled strips */
html body #tab-reviews#tab-reviews .rb { height: 8px; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(10,22,40,.08); }
html body #tab-reviews#tab-reviews .rb i { border-radius: 999px; }
/* each review a rounded tile in its card; a reply under it a tinted tile,
   not a navy rule down its side */
html body #tab-reviews#tab-reviews .jb-list { display: grid; gap: 10px; }
html body #tab-reviews#tab-reviews :is(.rw-row, .jb-row) { padding: 16px 18px; border-bottom: 0; border-radius: 18px; background: #F6F3EC; box-shadow: var(--dr-edge); }
html body #tab-reviews#tab-reviews .jb-sheet { padding: clamp(14px, 1.4vw, 22px); }
html body #tab-reviews#tab-reviews .rw-sheet { padding: clamp(20px, 1.9vw, 30px) clamp(18px, 2vw, 30px); }
html body #tab-reviews#tab-reviews .rw-reply { padding: 12px 14px; border-left: 0; border-radius: 14px; background: #FFFFFF; box-shadow: var(--dr-edge); }
/* the headings over the homeowner's two lists (Waiting on you, What you wrote) carry their count on a disc */
html body #tab-reviews#tab-reviews .rw-h b, html body #tab-reviews#tab-reviews .jb-h b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: rgba(10,22,40,.08); }

/* ── 5f. Disputes (both users) ────────────────────────────────────────── */
/* each case a card; the steps' track rounded capsules (navy done, gold now,
   pale to come), not 2px rules; the next move a tile; each side's column
   head over a rounded underline in its colour; each item a rounded tile; the
   place to add to your side a tile with a solid edge, its box rounded */
html body #tab-disputes#tab-disputes .dc-case { padding: clamp(20px, 1.9vw, 30px) clamp(18px, 2vw, 30px); }
html body #tab-disputes#tab-disputes .dc-step { border-top: 0; padding-top: 18px; }
html body #tab-disputes#tab-disputes .dc-step::after { content: ''; position: absolute; left: 0; right: 6px; top: -2px; height: 4px; border-radius: 2px; background: #E4DFD3; z-index: 0; }
html body #tab-disputes#tab-disputes .dc-step.is-done::after { background: #0A1628; }
html body #tab-disputes#tab-disputes .dc-step.is-now::after { background: #B08A3E; }
html body #tab-disputes#tab-disputes .dc-step::before { z-index: 1; }
html body #tab-disputes#tab-disputes .dc-next { border-radius: 16px; box-shadow: var(--dr-edge); }
html body #tab-disputes#tab-disputes .dc-col-h { position: relative; border-bottom: 0; padding-bottom: 12px; }
html body #tab-disputes#tab-disputes .dc-col-h::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: #B08A3E; }
html body #tab-disputes#tab-disputes .dc-col--you .dc-col-h::after { background: #0A1628; }
html body #tab-disputes#tab-disputes .dc-list, html body #tab-disputes#tab-disputes .dc-col ol, html body #tab-disputes#tab-disputes .dc-col ul { display: grid; gap: 8px; }
html body #tab-disputes#tab-disputes .dc-it { margin-top: 0; padding: 12px 14px; border-bottom: 0; border-radius: 14px; background: #F6F3EC; box-shadow: var(--dr-edge); }
html body #tab-disputes#tab-disputes .dc-add { border: 0; border-radius: 18px; background: #F6F3EC; box-shadow: var(--dr-edge); padding: 18px; }
html body #tab-disputes#tab-disputes .dc-add textarea { border-radius: 14px; }
html body #tab-disputes#tab-disputes .dc-empty { border: 0; border-radius: 18px; background: rgba(250,248,243,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), 0 10px 24px -18px rgba(10,22,40,.4); }
/* how a dispute runs: a card with its mark, no navy and gold bars across its top */
html body #tab-disputes#tab-disputes .dc-road { padding: clamp(20px, 1.9vw, 28px) clamp(18px, 2vw, 30px); background: #FAF8F3; }
html body #tab-disputes#tab-disputes .dc-road::before { content: ''; position: absolute; left: clamp(18px, 2vw, 30px); top: clamp(20px, 1.9vw, 28px); width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E") center / 16px 16px no-repeat, radial-gradient(circle at 35% 30%, #1C2A44, #0A1628 70%);
  box-shadow: 0 0 0 4px rgba(212,169,67,.13), 0 6px 14px -8px rgba(10,22,40,.6); }
html body #tab-disputes#tab-disputes .dc-road-t { display: flex; align-items: center; min-height: 34px; margin-bottom: 22px; padding-left: 48px; }

/* ── 6. the homeowner's tabs: a track with the open tab on a navy pill ─── */
html.ovh body .ovh-tabs.ovh-tabs {
  gap: 2px; width: max-content; max-width: calc(100% - 2 * var(--ov-inset, 24px)); padding: 4px; border: 0; border-radius: 999px;
  background: rgba(250,248,243,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.08), 0 10px 24px -16px rgba(10,22,40,.45); }
html.ovh body .ovh-tabs .ovh-tab { padding: 10px 16px; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
html.ovh body .ovh-tabs .ovh-tab::after { content: none; display: none; }
html.ovh body .ovh-tabs .ovh-tab:hover { background: rgba(10,22,40,.06); }
html.ovh body .ovh-tabs .ovh-tab[aria-current] { background: #0A1628; color: #FAF8F3; box-shadow: 0 6px 14px -6px rgba(10,22,40,.55); }
html.ovh body .ovh-tabs .ovh-tab[aria-current] .ovh-tab-n { background: #D4A943; color: #0A1628; }
html.ovh body .ovh-tabs .ovh-tab:focus-visible { border-radius: 999px; }

/* ── 7. one column: every card the column's width ─────────────────────
   Below 1080px the homeowner's two columns fold into one flex column, and its
   cards kept the grid's align-self: start, so each was as wide as its words:
   Needs you 588px, Your jobs 693px, Your money 735px at 767 (rp123 fixed only
   Who works for you). On rounded cards the ragged right edge showed. */
@media (max-width: 1080px) {
  html.ovh body #tab-earnings#tab-earnings .ovh-cols .rcard { align-self: stretch; }
}
@media (max-width: 900px) {
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ml, .tab-head) .ml-pad { margin-top: 16px; margin-right: 0; margin-bottom: 4px; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) .tab-head .ml-pad { margin-left: 0; }
}

/* ── 8. a phone ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .st-tile, .ov-compose, .po-band, .jb-sheet, .st-sec, .dc-case, .dc-road):where(:not(.rcard .rcard)) { border-radius: 18px; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .ov-compose):where(:not(.rcard .rcard)) { padding: 18px 16px 18px; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard-head, .ov-start-head, .ovh-need-head, .st-sec-h):not(.rcard .rcard *) { padding-left: 48px; min-height: 36px; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard-head, .ov-start-head, .ovh-need-head, .st-sec-h):not(.rcard .rcard *)::before { width: 36px; height: 36px; background-size: 16px 16px, auto; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ml, .tab-head) .ml-pad { padding: 16px 16px 16px 56px; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.ml, .tab-head) .ml-pad::before { left: 14px; top: 16px; }
  html body #tab-money#tab-money .ml .ml-sum { border-radius: 14px; text-align: center; }
  /* the counts, three abreast */
  html body #tab-own#tab-own .og-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  html body #tab-own#tab-own .og-counts li { min-width: 0; padding: 10px 12px; font-size: 9px; letter-spacing: .1em; }
  /* a listing on a phone: the photograph beside the name, then what it covers and what it does not across the
     whole tile (they were 190px wide beside an empty column under the photograph) */
  html body #tab-services#tab-services .sv-row { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  html body #tab-services#tab-services .sv-pic { width: 64px; border-radius: 12px; grid-row: 1 / span 2; }
  html body #tab-services#tab-services .sv-main > .jb-t { align-self: end; margin-top: 0; }
  html body #tab-services#tab-services .sv-main > .jb-w { align-self: start; }
  html body #tab-services#tab-services .sv-pic .sv-nopic { font-size: 10.5px; line-height: 1.25; padding: 6px; }
  html body #tab-services#tab-services .sv-main { display: contents; }
  html body #tab-services#tab-services .sv-main > :is(.jb-t, .jb-w) { grid-column: 2; }
  html body #tab-services#tab-services .sv-main > :is(.sv-halves, .sv-shots) { grid-column: 1 / -1; }
  html body #tab-services#tab-services .sv-halves { display: grid; gap: 8px; }
  /* a review row on a phone: the job and its words the row's width, the price and the button under them */
  html body #tab-reviews#tab-reviews .jb-row { grid-template-columns: minmax(0, 1fr); }
  html body #tab-reviews#tab-reviews .jb-row > .jb-end { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  /* the three views share the width, on one line */
  html body #tab-jobs#tab-jobs .work-filter { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; }
  html body #tab-jobs#tab-jobs .work-filter .work-btn { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 8px; letter-spacing: .1em; }
  html.ovh body .ovh-tabs.ovh-tabs { margin-left: 0; margin-right: 0; max-width: 100%; overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  html.ovh body .ovh-tabs .ovh-tab { padding: 9px 13px; }
  /* the homeowner's job row on a phone: its name the row's width, the stages
     under it, the one action last (the name was squeezed to 102px beside the
     button, three lines for "Shower pump replacement") */
  html.ovh body #tab-earnings#tab-earnings .ov-jobs .oj-item.is-you {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "r" "n"; row-gap: 14px; }
  html.ovh body #tab-earnings#tab-earnings .ov-jobs .oj-item.is-you > .oj-track { justify-self: stretch; width: auto; max-width: none; }
  html.ovh body #tab-earnings#tab-earnings .ov-jobs .oj-item.is-you > .oj-next { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .st-tile, .ov-compose):where(:not(.rcard .rcard)) { transition: none; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .st-tile, .ov-compose):where(:not(.rcard .rcard)):is(:hover, :focus-within) { translate: none; }
}
@media (forced-colors: active) {
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard, .st-tile, .ov-compose, .po-band, .jb-sheet):where(:not(.rcard .rcard)) { border: 1px solid CanvasText; }
  html body :is(#tab-earnings#tab-earnings, #tab-money#tab-money, #tab-jobs#tab-jobs, #tab-own#tab-own, #tab-services#tab-services, #tab-reviews#tab-reviews, #tab-disputes#tab-disputes, #tab-profile#tab-profile) :is(.rcard-head, .ov-start-head, .ovh-need-head)::before { forced-color-adjust: none; }
}