/* ══ THE REVIEW, AS A REAL POPUP ═══════════════════════════════ 29 Sep 2026 ══
   Sir: the review popup should be reduced in size and act as a real popup.
   It was a 1020px card on a painted stand-in for the dashboard, with a photo
   panel taking a third of it. Now it is one column, 600px, and it opens over
   the real page it was pressed on (assets/hyyryn-review-pop.js puts it in a
   <dialog>; the page is loaded with ?embed=1). Opened on its own, by a link
   from an email say, it is the same 600px card on the old blurred ground.

   THE BAND IS THE POINT OF THE PAGE. A review here is tied to a job someone
   paid for through payment protection, and nothing else on the web can say
   that. So the photo panel's markup becomes a docket under the heading: the
   job, who did it, what was released and why, and that only people who paid
   can review. The form under it asks for the stars, and words if she wants.

   IN THE DASHBOARD'S TYPE: labels 9.5px / 500 / .17em, sentences in the serif
   at 14 and 12, the job's name at 17. The title keeps the house dialog title
   (hyyryn-dialog-title.css, Sir's, 6 Sep). The dialog is exactly 600px wide,
   so the page's own max-width:600px phone rules apply inside it on a desk;
   these rules are written to win over them rather than lean on them.
   Loaded after hyyryn-jobmodal.css, which quote.html shares and which is not
   changed. */

html body .jsm-card{ display:block; max-width:600px; border-radius:4px; overflow-y:auto; overscroll-behavior:contain;
  max-height:calc(100vh - 48px) }

/* the title and the cross stay put while the form scrolls under them */
html body .jsm-close{ position:sticky; top:14px; float:right; z-index:3; margin:14px 16px -48px 0; width:34px; height:34px;
  background:#fff; box-shadow:0 0 0 1px var(--line) }
html body .jsm-close:focus-visible{ outline:2px solid var(--navy); outline-offset:2px }
html body .jsm-main{ overflow:visible; padding:0 28px }
html body .jsm-main .jsm-h{ position:sticky; top:0; z-index:2; margin:0 -28px; padding:22px 76px 14px 28px; background:#fff }
html body .jsm-h:focus{ outline:none }
html body .jsm-main .jsm-sub{ margin-top:0; font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--muted) }
html body .jsm-main .jsm-rule{ margin:20px 0 }

/* the docket: the job, who did it, what was released and why */
html body .jsm-main .jsm-side{ min-height:0; margin:16px 0 0; padding:14px 16px 12px; border-radius:4px;
  background:var(--cream-2, #F3EFE4) none; color:var(--ink); display:block }
html body .jsm-main .jsm-side::before, html body .jsm-main .jsm-side-foot,
html body .jsm-main .jsm-side .jsm-fact:not(:first-child):not(.is-seal){ display:none }
html body .jsm-main .jsm-eyebrow{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; color:var(--muted) }
@media (max-width: 760px) { html body .jsm-main .jsm-eyebrow { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body .jsm-main .jsm-side-title{ margin-top:6px; font-family:var(--serif); font-size:17px; line-height:1.3; color:var(--navy) }
html body .jsm-main .jsm-side-sub{ margin-top:2px; font-family:var(--serif); font-size:12px; line-height:1.5; color:var(--muted) }
/* hyyryn-jobmodal.css hides the facts under 860px, and the dialog is 600px */
html body .jsm-main .jsm-facts{ display:grid; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line-2, #D8CFB8) }
html body .jsm-main .jsm-fact{ grid-template-columns:14px minmax(0,1fr); gap:9px }
html body .jsm-main .jsm-fact svg{ width:13px; height:13px; margin-top:3px; stroke:var(--green) }
html body .jsm-main .jsm-fact > div{ display:flex; flex-wrap:wrap; column-gap:6px; align-items:baseline }
html body .jsm-main .jsm-fact-t{ font-family:var(--serif); font-size:14px; color:var(--ink) }
html body .jsm-main .jsm-fact-d{ margin:0; font-family:var(--serif); font-size:12px; color:var(--muted) }
html body .jsm-main .jsm-fact:first-child .jsm-fact-d::before{ content:'\00b7\00a0' }
/* on a phone the date takes its own line, and a line does not start with a dot */
@media (max-width:480px){ html body .jsm-main .jsm-fact:first-child > div{ display:block } html body .jsm-main .jsm-fact:first-child .jsm-fact-d::before{ content:none } }
html body .jsm-main .jsm-fact.is-seal > div{ display:block }
html body .jsm-main .jsm-fact.is-seal .jsm-fact-t{ font-size:12px }

/* the form: a rating, and words if she wants */
html body .jsm-main :is(.rating-section, .review-text-section){ margin-bottom:22px }
html body .jsm-main :is(.rating-label, .review-text-label){ margin:0 0 8px; font-family:var(--sans); font-size:9.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--navy) }
@media (max-width: 760px) { html body .jsm-main :is(.rating-label, .review-text-label) { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body .jsm-main .review-text-hint{ margin:-2px 0 10px; font-family:var(--serif); font-size:12px; color:var(--muted) }
html body .jsm-main .rating-section{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"l l" "s t"; align-items:center; column-gap:14px }
html body .jsm-main .rating-label{ grid-area:l }
html body .jsm-main .stars{ grid-area:s; gap:6px }
html body .jsm-main .rating-text{ grid-area:t; margin:0; min-height:0; font-family:var(--serif); font-size:14px; color:var(--ink) }
html body .jsm-main .star{ width:34px; height:34px }
html body .jsm-main .star:not(.active):not(.hover-preview) .star-fill{ fill:#fff; stroke:var(--muted); stroke-width:1.5 }
html body .jsm-main .review-textarea{ min-height:96px; padding:12px 14px; font-family:var(--serif); font-size:14px; color:var(--ink) }
html body .jsm-main .char-count{ font-size:12px }

/* the buttons stay in reach while the form scrolls under them */
html body .jsm-main .jsm-foot{ position:sticky; bottom:0; z-index:2; margin:18px -28px 0; padding:14px 28px 16px;
  background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; column-gap:16px }
html body .jsm-main .jsm-cancel{ padding-top:14px; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase }
@media (max-width: 760px) { html body .jsm-main .jsm-cancel { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body .jsm-main .jsm-cta{ min-height:44px; padding:0 22px; font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase }
@media (max-width: 760px) { html body .jsm-main .jsm-cta { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
/* a disabled control still has to be readable (measured-values: --cream-3 ground, --muted ink) */
html body .jsm-main .jsm-cta[disabled]{ opacity:1; background:var(--cream-3, #EFE8D4); color:var(--muted); box-shadow:none }
html body .jsm-main .jsm-consequence{ margin-top:8px; font-family:var(--serif); font-size:12px; text-wrap:pretty }
html body .jsm-main .rvp-need{ display:none; margin:8px 0 0; font-family:var(--serif); font-size:12px; color:var(--ink) }
html body .jsm-main .jsm-cta[disabled] ~ .rvp-need{ display:block }

/* thanks */
html body .jsm-card > .success-state.active{ padding:40px 28px 32px }
html body .jsm-card .success-state h2{ font-size:26px }
html body .jsm-card .success-state p{ font-family:var(--serif); font-size:14px }
html body .jsm-card .momentum{ gap:12px; grid-template-columns:1fr 1fr }
html body .jsm-card .momentum-card{ padding:16px }
html body .jsm-card .momentum-card h3{ font-family:var(--serif); font-size:17px; font-weight:400 }
html body .jsm-card .momentum-card p{ font-family:var(--serif); font-size:12px }
@media (max-width:480px){
  html body .jsm-main{ padding:0 18px }
  html body .jsm-main .jsm-h{ margin:0 -18px; padding:20px 64px 12px 18px }
  html body .jsm-main .jsm-foot{ margin:18px -18px 0; padding:12px 18px 14px }
  html body .jsm-card .momentum{ grid-template-columns:1fr }
}

/* ── inside the dialog (?embed=1): the dialog is the card ────────────────── */
html.is-embed, html.is-embed body{ background:#fff }
html.is-embed body.jsm-body{ min-height:0; overflow:auto }
html.is-embed .jsm-backdrop, html.is-embed .skip{ display:none }
html.is-embed .jsm-scrim{ position:static; display:block; padding:0; background:none; backdrop-filter:none; overflow:visible }
html.is-embed body .jsm-card{ max-width:none; max-height:none; overflow:visible; border-radius:0; box-shadow:none; animation:none }