/* ══ THE TABS BOTH DASHBOARDS SHARE ═════════════════════════ 26 Sep 2026 ══
   Sir: "the homeowner dashboard needs the same revamp as the tradesperson
   dashboard". The trade's rebuilt tabs (25 Sep) carry their rules inline in
   dashboard-tradesperson.html. My jobs needs the same sheets, rows and
   review rows, so they are copied here once, verbatim, rather than a third
   time into another page. Loaded by my-jobs.html only; the trade page keeps
   its own inline copy until it is moved here too. */
  /* ══ MONEY, 25 Sep 2026 ══════════════════════════════════════════════════
     Four posts, then two pinned sheets. Every surface sits on cream over the
     photograph, so nothing is read against the bleed. */
  .mo-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 clamp(26px, 3vw, 44px);
    background: var(--cream); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
    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); }
  .mo-posts.has-frozen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mo-post { padding: 18px 20px 17px; border-left: 1px solid var(--line); border-top: 3px solid var(--line-2); min-width: 0; }
  .mo-post:first-child { border-left: 0; }
  .mo-post[hidden] { display: none; }
  .mo-post[data-k="paid"] { border-top-color: var(--navy); }
  .mo-post[data-k="releasing"].is-live { border-top-color: var(--gold); }
  .mo-post[data-k="frozen"] { border-top-color: var(--danger, #A94442); }
  .mo-post-k { margin: 0; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .mo-post-v { margin: 8px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; }
  .mo-post-s { margin: 7px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--muted); }
  @media (max-width: 760px) { .mo-posts, .mo-posts.has-frozen { grid-template-columns: 1fr 1fr; }
    .mo-post:nth-child(3) { border-left: 0; }
    .mo-posts:not(.has-frozen) .mo-post[data-k="paid"] { grid-column: 1 / -1; } }

  .mo-sheet { position: relative; margin: 0 0 clamp(30px, 3.4vw, 50px); background: var(--cream); border: 1px solid var(--line);
    border-radius: 4px; padding: 19px 21px 19px;
    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); }
  .mo-sheet::before { content: ''; position: absolute; z-index: 4; top: -11px; left: 50%; margin-left: -11px; width: 22px; height: 22px;
    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(10,22,40,.34); }
  .mo-sheet::after { content: ''; position: absolute; z-index: 5; top: -7.5px; left: 50%; margin-left: -7px; width: 6px; height: 5px;
    border-radius: 50%; background: rgba(250,248,243,.62); rotate: -24deg; }
  .mo-track { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--line-2); counter-reset: mt; }
  .mo-track li { position: relative; padding: 14px 8px 0 0; font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); counter-increment: mt; }
  .mo-track li::before { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--cream); box-shadow: inset 0 0 0 2px var(--line-2); }
  .mo-track li:last-child::before { background: var(--navy); box-shadow: none; }
  .mo-list { display: grid; margin-top: 10px; }
  .mo-empty { margin: 14px 0 4px; padding: 22px 20px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center;
    font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--muted); }
  .mo-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) auto; gap: 8px 22px; align-items: center;
    padding: 16px 0; border-bottom: 1px solid var(--line); }
  .mo-row:last-child { border-bottom: 0; }
  .mo-row-t { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; }
  a.mo-row-t:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mo-row-w { margin-top: 3px; font-family: var(--serif); font-size: 13.5px; color: var(--muted); }
  .mo-at { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mo-dots { display: inline-flex; gap: 5px; flex: none; }
  .mo-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .mo-dots i.is-done { background: var(--navy); box-shadow: none; }
  .mo-dots i.is-now { box-shadow: inset 0 0 0 2px var(--navy); }
  .mo-at-t { font-family: var(--serif); font-size: 14px; line-height: 1.4; color: var(--ink, #1B2638); }
  .mo-row[data-s="releasing"] .mo-at-t { color: var(--gold-ink, #7A5B12); }
  .mo-row[data-s="frozen"] .mo-at-t { color: var(--danger, #A94442); }
  .mo-v { text-align: right; font-variant-numeric: tabular-nums; }
  .mo-v b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: 22px; color: var(--navy); }
  .mo-v span { font-family: var(--sans); font-size: 11px; color: var(--muted); }
  .mo-sum { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 0; border-top: 2px solid var(--navy);
    font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
  @media (max-width: 760px) { .mo-row { grid-template-columns: minmax(0, 1fr) auto; } .mo-at { grid-column: 1 / -1; grid-row: 2; } }

  .mo-paid { margin-top: 18px; }
  .mo-cols { width: 100%; height: auto; display: block; }
  .mo-cols .mc-bar { fill: var(--navy); }
  .mo-cols .mc-fee { fill: var(--line-2); }
  .mo-cols .mc-rule { stroke: var(--line); stroke-width: 1; }
  .mo-cols .mc-base { stroke: var(--line-2); stroke-width: 1; }
  .mo-cols text { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
  .mo-cols .mc-v { fill: var(--navy); font-weight: 600; }
  .mo-recent { margin-top: 18px; }
  .mo-recent .mo-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; }
  .mo-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 20px 0 0;
    font-family: var(--sans); font-size: 13px; }
  .mo-links a { color: var(--navy); }
  .mo-links [hidden] { display: none; }
  .mo-foot { margin: 0 0 8px; max-width: 70ch; font-family: var(--serif); font-size: 13.5px; line-height: 1.55; color: #3A4150; }

  /* ══ JOBS, 25 Sep 2026: one pinned sheet per group, one row per job ══ */
  .jb-sheet { position: relative; margin: 18px 0 clamp(26px, 3vw, 40px); background: var(--cream); border: 1px solid var(--line);
    border-radius: 4px; padding: 8px 21px;
    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); }
  .jb-sheet[hidden] { display: none; }
  .jb-list { display: grid; }
  .jb-empty { margin: 16px 0; padding: 22px 20px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center;
    font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--muted); }
  .jb-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.7fr) auto; gap: 10px 24px; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
  .jb-row:last-child { border-bottom: 0; }
  .jb-t { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--navy); }
  .jb-t a { color: inherit; text-decoration: none; }
  .jb-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .jb-w { margin: 3px 0 0; font-family: var(--serif); font-size: 13.5px; color: var(--muted); }
  .jb-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  .jb-who { grid-row: 1 / span 2; margin-top: 2px; padding: 3px 9px; border-radius: 999px; font-family: var(--sans); font-size: 10px;
    font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--cream-2); color: var(--muted); white-space: nowrap; }
  .jb-row[data-who="you"] .jb-who { background: var(--navy); color: var(--cream); }
  .jb-row[data-who="them"] .jb-who { background: var(--code-wait-bg, #FBF3DF); color: var(--gold-ink, #7A5B12); }
  .jb-row[data-who="stop"] .jb-who { background: #FBEDEC; color: var(--danger, #A94442); }
  .jb-do { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink, #1B2638); }
  .jb-dots { display: inline-flex; gap: 5px; margin-top: 3px; }
  .jb-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .jb-dots i.is-done { background: var(--navy); box-shadow: none; }
  .jb-dots i.is-now { box-shadow: inset 0 0 0 2px var(--navy); }
  .jb-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
  .jb-v { font-family: var(--serif-display); font-size: 21px; color: var(--navy); font-variant-numeric: tabular-nums; }
  .jb-v small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); }
  @media (max-width: 760px) { .jb-row { grid-template-columns: minmax(0, 1fr) auto; } .jb-next { grid-column: 1 / -1; grid-row: 2; } }
  .sv-lede { margin: 6px 0 0; max-width: 70ch; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink, #1B2638); }
  .sv-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .sv-acts .btn--sm { align-self: auto; }
  .sv-acts .is-armed { border-color: var(--danger, #A94442); color: var(--danger, #A94442); }
  /* ══ REVIEWS, 25 Sep 2026: each review beside what its job paid ══ */
  .rw-sheet { padding-top: 4px; padding-bottom: 4px; }
  #tab-reviews .rw-rep { border: 0; padding: clamp(16px, 2vw, 24px) 0; }
  .rw-k { margin: 0 0 4px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .rw-stars-big { margin: 8px 0 0; display: flex; gap: 3px; }
  .rw-star { fill: var(--line-2); }
  .rw-star.is-on { fill: var(--gold, #B08A3E); }
  .rw-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
  .rw-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin: 18px 0 0; }
  .rw-parts[hidden] { display: none; }
  .rw-parts div { border-top: 1px solid var(--line); padding-top: 8px; }
  .rw-parts dt { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .rw-parts dd { margin: 4px 0 0; font-family: var(--serif-display); font-size: 20px; color: var(--navy); font-variant-numeric: tabular-nums; }
  .rw-parts dd small { font-family: var(--sans); font-size: 11px; color: var(--muted); }
  .rw-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px 22px; align-items: start;
    padding: 20px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
  .rw-row:last-child { border-bottom: 0; }
  .rw-score { text-align: center; }
  .rw-score b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--navy); }
  .rw-score .rw-stars { margin-top: 6px; }
  .rw-q { margin: 10px 0 0; max-width: 68ch; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink, #1B2638); }
  .rw-q.is-none { color: var(--muted); font-style: italic; font-size: 14px; }
  .rw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
  .rw-chip { padding: 2px 9px; border-radius: 999px; background: var(--cream-2, #EFEBE2); font-family: var(--sans); font-size: 11px; color: var(--muted); }
  .rw-chip b { color: var(--navy); font-weight: 600; }
  .rw-reply { margin: 14px 0 0; padding: 10px 0 0 14px; border-left: 2px solid var(--navy); }
  .rw-reply p:not(.rw-k) { margin: 0; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink, #1B2638); }
  .rw-form { margin: 14px 0 0; display: grid; gap: 8px; max-width: 68ch; }
  .rw-form[hidden] { display: none; }
  .rw-form textarea { width: 100%; box-sizing: border-box; min-height: 84px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 3px;
    background: #fff; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--navy); resize: vertical; }
  .rw-form textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
  .rw-form .rw-fine { margin: 0; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
  .rw-form .sv-acts { justify-content: flex-start; }
  .rw-flagged { margin: 12px 0 0; font-family: var(--sans); font-size: 12px; color: var(--gold-ink, #7A5B12); }
  /* rp113: the writer can ask for her review to come down (the policy's "the person who wrote it asked") */
  .rw-ask { display: inline-block; margin: 10px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted-2, #4A5160); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(131,99,44,.5); }
  .rw-ask:hover { color: var(--navy); }
  @media (max-width: 760px) {
    .rw-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rw-row { grid-template-columns: 52px minmax(0, 1fr); }
    .rw-row .jb-end { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  }


/* BEFORE YOUR FIRST JOB, the checklist (from the trade dashboard, 24 Sep 2026) */
.ref-grid > .ov-start{ grid-column:1 / -1; }
.ov-start[hidden]{ display:none }
.ov-start-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line-2); padding-bottom:10px; }
.ov-start-hide{ flex:none; margin-top:8px; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ov-start-hide:hover{ color:var(--navy) }
.ov-steps{ list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.ov-step{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 14px;
  border:1px solid var(--line-2); border-radius:6px; background:var(--cream-2, #F3EFE4); min-width:0; }
.ov-step-k{ display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:500; line-height:1.3; color:var(--navy); margin:0; }
.ov-step-m{ flex:none; display:grid; place-items:center; width:24px; height:24px; box-sizing:border-box;
  border-radius:50%; border:1.5px solid var(--line-2); }
.ov-step-m svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; display:none }
.ov-step-s{ margin:0; font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--muted); flex:1 1 auto; }
.ov-step-a{ align-self:flex-start; margin-top:4px }
.ov-step.is-done{ background:transparent; border-style:dashed }
.ov-step.is-done .ov-step-m{ background:var(--green, #0F5A4F); border-color:var(--green, #0F5A4F); color:#FAF8F3 }
.ov-step.is-done .ov-step-m svg{ display:block }
.ov-step.is-done .ov-step-a{ display:none }
.ov-step-done{ display:none; margin-top:4px; font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green, #0F5A4F) }
.ov-step.is-done .ov-step-done{ display:block }
.ov-step.is-unknown .ov-step-m{ border-style:dotted }
.ov-start-foot{ margin:14px 0 0; font-family:var(--serif); font-size:13.5px; color:var(--muted) }
.ov-start-foot a{ color:var(--navy); text-underline-offset:3px }
@media (max-width:1080px){ .ov-steps{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
/* On a phone four stacked cards ran to 700px, so each step is a row: the
   title and its button on one line, the reason under it. */
@media (max-width:560px){
  .ov-steps{ grid-template-columns:minmax(0,1fr); gap:10px }
  .ov-start-head{ flex-direction:column; gap:6px } .ov-start-hide{ margin-top:0 }
  .ov-step{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:4px;
    align-items:center; padding:12px 14px }
  .ov-step-k{ grid-column:1; grid-row:1; font-size:14.5px }
  .ov-step-s{ grid-column:1 / -1; grid-row:2; font-size:13px }
  .ov-step-a, .ov-step-done{ grid-column:2; grid-row:1; margin-top:0; align-self:center }
}

/* My jobs: the checklist sits on the same cream sheet as its neighbours */
.ov-grid > .ov-start{ background:var(--cream); border:1px solid var(--line); border-radius:4px;
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(16px,1.8vw,22px);
  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); }