/* ══ A DISPUTE, AS A CASE FILE ═══════════════════════════════ 25 Sep 2026 ══
   Sir: "difficult to comprehend the dispute section in terms of what has
   happened and what has been submitted", "especially when evidence from each
   user was sent". One case per dispute, the same on both sides of it:
   where it stands (four steps, and who it is waiting on), then what each side
   has said and shown in two columns, theirs and yours, each in the order it
   arrived, with the moment the dispute was raised drawn across both. Used by
   the tradesperson's dashboard and the homeowner's My jobs; drawn by
   assets/hyyryn-dispute-case.js. Tokens are the pages' own. */
.dc-lede { margin: 6px 0 0; max-width: 70ch; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink, #1B2638); }
.dc-case { position: relative; margin: 18px 0 clamp(26px, 3vw, 40px); background: var(--cream, #FAF8F3); border: 1px solid var(--line, #E4DFD3);
  border-radius: 4px; padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 26px);
  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); scroll-margin-top: 130px; }
.dc-case.is-focus { box-shadow: 0 0 0 2px var(--navy, #0A1628), 0 18px 30px -22px rgba(10,22,40,.45); }
.dc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: start; }
.dc-t { margin: 0; font-family: var(--sans, Inter, sans-serif); font-size: 17px; font-weight: 500; color: var(--navy, #0A1628); }
.dc-m { margin: 4px 0 0; font-family: var(--serif); font-size: 13.5px; color: var(--muted, #6B6A63); }
.dc-money { text-align: right; }
.dc-money b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--navy, #0A1628); font-variant-numeric: tabular-nums; }
.dc-money span { font-family: var(--sans, Inter, sans-serif); font-size: 11px; color: var(--muted, #6B6A63); }

/* where it stands */
.dc-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.dc-step { position: relative; padding: 16px 14px 0 0; border-top: 2px solid var(--line, #E4DFD3); }
.dc-step.is-done { border-top-color: var(--navy, #0A1628); }
.dc-step.is-now { border-top-color: var(--gold, #B08A3E); }
.dc-step::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cream, #FAF8F3); box-shadow: inset 0 0 0 2px var(--line-2, #CFC8B8); }
.dc-step.is-done::before { background: var(--navy, #0A1628); box-shadow: none; }
.dc-step.is-now::before { box-shadow: inset 0 0 0 3px var(--gold, #B08A3E); }
.dc-step dt { font-family: var(--sans, Inter, sans-serif); font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted, #6B6A63); }
.dc-step dd { margin: 4px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.4; color: var(--ink, #1B2638); }
.dc-step dd small { display: block; font-family: var(--sans, Inter, sans-serif); font-size: 11.5px; color: var(--muted, #6B6A63); margin-top: 2px; }
.dc-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 0; padding: 12px 14px; border-radius: 4px; background: var(--cream-2, #EFEBE2); }
.dc-who { padding: 3px 9px; border-radius: 999px; font-family: var(--sans, Inter, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; background: var(--navy, #0A1628); color: var(--cream, #FAF8F3); white-space: nowrap; }
.dc-next[data-who="them"] .dc-who, .dc-next[data-who="hyyryn"] .dc-who { background: #FBF3DF; color: #7A5B12; }
.dc-next[data-who="done"] .dc-who { background: var(--cream, #FAF8F3); color: var(--muted, #6B6A63); box-shadow: inset 0 0 0 1px var(--line-2, #CFC8B8); }
.dc-next p { margin: 0; flex: 1 1 320px; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink, #1B2638); }

/* what each side has said and shown */
.dc-k { margin: 26px 0 10px; font-family: var(--sans, Inter, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted, #6B6A63); }
.dc-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(16px, 2.4vw, 32px); }
.dc-col { min-width: 0; }
.dc-col-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gold, #B08A3E); }
.dc-col--you .dc-col-h { border-bottom-color: var(--navy, #0A1628); }
.dc-col-h b { font-family: var(--sans, Inter, sans-serif); font-size: 14px; font-weight: 600; color: var(--navy, #0A1628); }
.dc-col-h span { font-family: var(--sans, Inter, sans-serif); font-size: 11px; color: var(--muted, #6B6A63); }
.dc-list { list-style: none; margin: 0; padding: 0; }
.dc-it { padding: 12px 0; border-bottom: 1px solid var(--line, #E4DFD3); }
.dc-it:last-child { border-bottom: 0; }
.dc-it-k { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 6px; font-family: var(--sans, Inter, sans-serif); font-size: 11px; color: var(--muted, #6B6A63); }
.dc-chip { padding: 1px 8px; border-radius: 999px; background: var(--cream-2, #EFEBE2); font-size: 10.5px; color: var(--ink, #1B2638); }
.dc-chip--bad { background: #FBEDEC; color: var(--danger, #A94442); }
.dc-chip--new { background: var(--navy, #0A1628); color: var(--cream, #FAF8F3); }
.dc-txt { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink, #1B2638); white-space: pre-line; overflow-wrap: anywhere; }
.dc-it--complaint .dc-txt { font-size: 15.5px; }
.dc-ph { display: block; width: 100%; max-width: 260px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: zoom-in;
  background: var(--cream-2, #EFEBE2); box-shadow: inset 0 0 0 1px var(--line, #E4DFD3); }
.dc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-ph:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 2px; }
.dc-ph--none { cursor: default; padding: 12px; box-sizing: border-box; }
.dc-ph--none span { line-height: 1.5; text-align: center; }
.dc-ph--none a { color: var(--navy, #0A1628); }
.dc-ph span { display: grid; place-items: center; height: 100%; font-family: var(--sans, Inter, sans-serif); font-size: 11px; color: var(--muted, #6B6A63); }
.dc-cap { margin: 6px 0 0; font-family: var(--serif); font-size: 13.5px; color: var(--ink, #1B2638); }
.dc-why { margin: 6px 0 0; font-family: var(--serif); font-size: 13px; color: var(--danger, #A94442); }
.dc-none { margin: 12px 0 0; font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--muted, #6B6A63); }
.dc-mark { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-family: var(--sans, Inter, sans-serif); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--danger, #A94442); }
.dc-mark::before, .dc-mark::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; }

/* add to your side */
.dc-add { margin: 22px 0 0; padding: 16px; border: 1px dashed var(--line-2, #CFC8B8); border-radius: 4px; display: grid; gap: 10px; }
.dc-add label.dc-l { font-family: var(--sans, Inter, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted, #6B6A63); }
.dc-add textarea { width: 100%; box-sizing: border-box; min-height: 92px; padding: 10px 12px; border: 1px solid var(--line-2, #CFC8B8); border-radius: 3px;
  background: #fff; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--navy, #0A1628); resize: vertical; }
.dc-add textarea:focus { outline: 2px solid var(--navy, #0A1628); outline-offset: 1px; }
.dc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dc-file { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--line-2, #CFC8B8); border-radius: 999px;
  font-family: var(--sans, Inter, sans-serif); font-size: 12px; color: var(--navy, #0A1628); cursor: pointer; background: #fff; }
.dc-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-file:focus-within { outline: 2px solid var(--navy, #0A1628); outline-offset: 2px; }
.dc-fine { margin: 0; font-family: var(--sans, Inter, sans-serif); font-size: 11.5px; line-height: 1.5; color: var(--muted, #6B6A63); }
.dc-say { margin: 0; font-family: var(--sans, Inter, sans-serif); font-size: 12.5px; color: var(--danger, #A94442); }
.dc-say.is-ok { color: var(--navy, #0A1628); }
.dc-add .btn--sm { align-self: auto; }

/* the decision */
.dc-decided { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--navy, #0A1628); background: var(--cream-2, #EFEBE2); }
.dc-decided p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink, #1B2638); }
.dc-decided p + p { margin-top: 4px; font-size: 13.5px; color: var(--muted, #6B6A63); }

.dc-past { margin: 10px 0 0; }
.dc-past > summary { cursor: pointer; font-family: var(--sans, Inter, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy, #0A1628); padding: 8px 0; }
.dc-past[hidden] { display: none; }
.dc-empty { margin: 16px 0; padding: 22px 20px; border: 1px dashed var(--line-2, #CFC8B8); border-radius: 12px; text-align: center;
  font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--muted, #6B6A63); }
.dc-foot { margin: 8px 0; max-width: 70ch; font-family: var(--serif); font-size: 13.5px; line-height: 1.55; color: #3A4150; }

/* a photograph, full size */
.dc-lb { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(10,22,40,.82); }
.dc-lb[hidden] { display: none; }
.dc-lb figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: grid; gap: 10px; }
.dc-lb img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 3px; background: #111; }
.dc-lb figcaption { font-family: var(--sans, Inter, sans-serif); font-size: 13px; color: #FAF8F3; }
.dc-lb button { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #FAF8F3; color: #0A1628;
  font: 600 18px/40px Inter, sans-serif; cursor: pointer; }

@media (max-width: 760px) {
  .dc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .dc-sides { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .dc-head { grid-template-columns: minmax(0, 1fr); }
  .dc-money { text-align: left; }
}

/* ══ rp112, 12 Oct 2026: how a dispute runs, drawn ═══════════════════════
   The four sentences under the cases became a road with its days on it: a
   navy line, a dot for each stop, the day above, the step and its sentence
   below. On a phone the road runs down the left. */
.dc-road { margin: 26px 0 18px; padding: 22px 24px 20px; background: #FBF7EC; box-shadow: inset 0 0 0 1px var(--line-2, #DDD6C6); position: relative; }
.dc-road::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy, #0A1628); border-bottom: 1px solid #D4A943; }
.dc-road-t { margin: 0 0 18px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #5B4318; }
.dc-road-l { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.dc-road-l li { position: relative; padding-top: 30px; }
.dc-road-l li::before { content: ''; position: absolute; left: 0; right: -20px; top: 22px; border-top: 1px solid var(--navy, #0A1628); }
.dc-road-l li:last-child::before { right: 0; border-top-style: dashed; }
.dc-road-l li::after { content: ''; position: absolute; left: 0; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: #FBF7EC; box-shadow: inset 0 0 0 1.5px var(--navy, #0A1628); }
.dc-road-l li:first-child::after { background: #D4A943; }
.dc-road-d { position: absolute; left: 0; top: 0; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #636976); }
.dc-road-l b { display: block; margin-top: 10px; font-family: var(--serif-display, Georgia, serif); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--navy, #0A1628); }
.dc-road-l li > span:last-child { display: block; margin-top: 4px; font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: #3A4150; }
@media (max-width: 760px) {
  .dc-road { padding: 20px 18px 16px; }
  .dc-road-l { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dc-road-l li { padding: 0 0 18px 26px; }
  .dc-road-l li::before { left: 5px; right: auto; top: 12px; bottom: -4px; border-top: 0; border-left: 1px solid var(--navy, #0A1628); }
  .dc-road-l li:last-child::before { display: none; }
  .dc-road-l li::after { top: 2px; }
  .dc-road-d { position: static; display: block; }
  .dc-road-l b { margin-top: 2px; }
}