/* ══ THE MESSAGES: WHICH JOB A MESSAGE IS ABOUT (rp215, 23 Oct 2026) ═══════════════════════════════════════════════
   Both messages pages. Sir, before the test run: improve the remaining pages, Messages second.
   A conversation holds every job with one person, the platform keeps a thread per job, and the box sent to whichever
   job had the newest message, with nothing on the page saying which. hyyryn-messages.js draws a line over the box
   ("About <job> · <where it stands>", a menu of the jobs when there are several), marks a job with nothing said on it
   yet at the foot of the thread, names the job at the top of the panel, and says where each job stands from the
   reader's side. Night glass, as the rest of the page (Sir, 22 to 25 Sep): the same plate as the place to write. */

/* the line over the box: in the column between the thread and the box, so it never sits on a message */
html body .thread .cp-about {
  position: relative; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0;
  margin: 0; padding: 8px 36px 0;
  font-family: 'Inter', system-ui, sans-serif; color: #F3EEE3;
}
html body .thread .cp-about-k {
  font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: #E2AC68;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
html body .thread .cp-about-b {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; min-height: 34px; margin: 0; padding: 0 12px 0 14px;
  border: 1px solid rgba(243, 238, 227, .18); border-radius: 999px; background: rgba(8, 15, 28, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .7);
  color: #F3EEE3; font: inherit; font-size: 13.5px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
html body .thread a.cp-about-b { cursor: pointer; }
html body .thread .cp-about-b:hover { border-color: rgba(226, 172, 104, .7); background: rgba(14, 26, 46, .86); }
html body .thread .cp-about-b:focus-visible { outline: 2px solid #E2AC68; outline-offset: 3px; }
html body .thread .cp-about-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
html body .thread .cp-about-c { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
html body .thread .cp-about-b[aria-expanded="true"] .cp-about-c { transform: rotate(180deg); }

/* where a job stands, in words and a dot: waiting (gold), money in (cream), done (green) */
.cp-about-s, .ctx-job-s {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(243, 238, 227, .82);
}
.cp-about-s::before, .ctx-job-s::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E2AC68; }
.cp-s--funded::before { background: #F3EEE3; }
.cp-s--complete::before { background: rgb(111, 207, 170); }

/* the menu of jobs, over the line, the chosen one ticked */
html body .thread .cp-about-m {
  position: absolute; left: 30px; bottom: calc(100% + 6px); z-index: 20; display: grid; gap: 2px;
  min-width: min(300px, calc(100vw - 40px)); max-width: min(440px, calc(100vw - 40px)); max-height: 50vh; overflow: auto; padding: 6px;
  border-radius: 16px; background: rgba(8, 15, 28, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 227, .16), 0 24px 48px -16px rgba(0, 0, 0, .75);
}
html body .thread .cp-about-m[hidden] { display: none; }
html body .thread .cp-about-i {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  width: 100%; min-height: 44px; margin: 0; padding: 8px 12px 8px 34px; border: 0; border-radius: 10px; background: transparent;
  color: #F3EEE3; text-align: left; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.3;
}
html body .thread .cp-about-i:hover, html body .thread .cp-about-i:focus-visible { background: rgba(243, 238, 227, .09); outline: none; }
html body .thread .cp-about-i:focus-visible { box-shadow: inset 0 0 0 1.5px #E2AC68; }
html body .thread .cp-about-it { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body .thread .cp-about-i[aria-checked="true"]::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 9px; height: 5px; margin-top: -4px;
  border: solid #E2AC68; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

/* a job with nothing said on it yet, marked at the foot of the thread */
html body .thread .job-mark.jm-new .jm-in { box-shadow: inset 0 0 0 1px rgba(226, 172, 104, .55); }
html body .thread .jm-none {
  width: fit-content; max-width: calc(100% - 32px); margin: 8px auto 4px 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(8, 15, 28, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.4; color: rgba(243, 238, 227, .8); text-align: left;
}

/* the panel names its job */
/* first, above the money the panel moves to its top when it opens */
.ctx-content .ctx-job { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 4px; padding: 12px 2px 0; }
.ctx-content .ctx-job a {
  font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 21px; line-height: 1.2; color: #FAF8F3;
  text-decoration: none; border-bottom: 1px solid rgba(243, 238, 227, .3);
}
.ctx-content .ctx-job a:hover { border-bottom-color: #E2AC68; }
.ctx-content .ctx-job a:focus-visible { outline: 2px solid #E2AC68; outline-offset: 3px; border-radius: 2px; }

/* the trade's side: a homeowner has no public profile, so her name is not a link */
.thread-head .who.who--plain { cursor: default; }
.thread-head .who.who--plain:hover .n, .thread-head .who.who--plain .n { text-decoration: none; }

@media (max-width: 560px) {
  html body .thread .cp-about { padding: 6px 20px 0; }
  html body .thread .cp-about-b { font-size: 13px; min-height: 32px; }
  html body .thread .cp-about-m { left: 14px; right: 14px; min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { html body .thread .cp-about-c, html body .thread .cp-about-b { transition: none; } }
@media (forced-colors: active) {
  html body .thread .cp-about-b, html body .thread .cp-about-m { border: 1px solid CanvasText; }
  .cp-about-s::before, .ctx-job-s::before { forced-color-adjust: none; background: CanvasText; }
}

/* ══ rp216 (23 Oct 2026): ONE MESSAGES PAGE ON BOTH SIDES ═════════════════════════════════════════════════════════
   Sir: "make sure its the same messages as the other user's polished messages". Every element of the two pages was
   compared by its place, property by property, at 1440 and 390, the job's panel shut, open and with every part open.
   They differed only in the job's panel: the trade's lacked the homeowner's spacing under the progress bar, its
   Evidence and disputes row put the count against the title and kept the browser's disclosure mark, and its banner
   sat flush on a phone. Those take the homeowner's values here, so the two read the same (the homeowner's page is
   unchanged by them). And on both, under 1100px, the panel was a cream pop-up carrying the night glass's cream
   words: unreadable. It takes the night glass the desktop sheet already has. */
html body .context-panel details.ctx-card > .ctx-progress { padding-top: 14px; }
html body .context-panel details.ctx-card > .ctx-protect-banner { border-radius: 10px; margin-bottom: 16px; }
html body .context-panel details.dispute-bar { padding-top: 0; padding-bottom: 0; }
html body .context-panel details.dispute-bar > summary.dispute-sum { list-style: none; display: flex; align-items: center; gap: 10px; }
html body .context-panel details.dispute-bar > summary.dispute-sum::-webkit-details-marker { display: none; }
html body .context-panel details.dispute-bar > summary.dispute-sum h4 { margin: 0; flex: 1; }
html body .context-panel details.dispute-bar > summary .ctx-sum { opacity: .75; }
html body .context-panel details.dispute-bar > p { margin-top: 14px; margin-bottom: 14px; }
html body .context-panel details.dispute-bar .ev-none { margin-bottom: 14px; }
html body .context-panel details.dispute-bar > .btn-dispute { margin-bottom: 18px; }
@media (max-width: 1099px) {
  html body .context-panel.context-panel {
    background: rgba(8, 15, 28, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-color: rgba(243, 238, 227, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -24px rgba(0, 0, 0, .75);
  }
  html body .context-panel .ctx-close svg { stroke: #F3EEE3; }
}
/* the count of sealed messages: its words inherited the paper's navy and vanished on the night panel */
html body .context-panel.context-panel .ev-count span:not(.num) { color: rgba(243, 238, 227, .78); }
/* the masthead between 561 and 899px: the homeowner's links sat near the middle, the trade's against the mark (the
   trade pages' sheet gives .brand + .nav a margin, and its account sits outside the right-hand group). Both are put
   at the middle of the bar, as every width from 900 already does. */
@media (min-width: 561px) and (max-width: 899px) {
  html body .topbar .topbar-inner > nav.nav.svc-nav { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
}