/* ==========================================================================
   AMICA Divorce - client portal
   Calmer and roomier than the admin: clients use this once a fortnight, not
   all day, so nothing is dense and every action is obvious.
   ========================================================================== */

:root {
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-400:#38bdf8;
  --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1; --sky-900:#0c4a6e;

  --ink:#0f172a; --body:#475569; --muted:#94a3b8;
  --line:#e2e8f0; --line-soft:#f1f5f9; --white:#fff; --page:#f6f9fb;

  --ok:#047857;   --ok-bg:#ecfdf5;
  --warn:#b45309; --warn-bg:#fffbeb;
  --err:#b91c1c;  --err-bg:#fef2f2;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --radius:12px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 4px 16px rgba(15,23,42,.07);
  --ring:0 0 0 3px rgba(2,132,199,.35);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--page); color:var(--body);
  font:400 16px/1.65 var(--font); -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { color:var(--ink); margin:0; line-height:1.25; }
h1 { font-family:var(--serif); font-size:1.625rem; font-weight:600; }
h2 { font-size:1.125rem; font-weight:650; }
p { margin:0; }
a { color:var(--sky-700); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:8px; }

.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:0; top:0; z-index:100; background:var(--sky-700); color:#fff; padding:.75rem 1.25rem; }

.t-muted { color:var(--muted); }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}

/* ------------------------------------------------------------- topbar ---- */
.pbar { background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.pbar-in {
  max-width:1060px; margin:0 auto; padding:.875rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.pbar-brand { display:flex; flex-direction:column; text-decoration:none; }
.pbar-brand strong { font-family:var(--serif); font-size:1.0625rem; color:var(--ink); letter-spacing:.02em; }
.pbar-brand span { font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.pbar-nav { display:flex; gap:.25rem; flex-wrap:wrap; }
.pbar-nav a {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:8px;
  color:var(--body); text-decoration:none; font-size:.9375rem; font-weight:500;
}
.pbar-nav a:hover { background:var(--sky-50); color:var(--sky-800); }
.pbar-nav a.on { background:var(--sky-100); color:var(--sky-900); }
.pbar-site { font-size:.9375rem; text-decoration:none; }

/* --------------------------------------------------------------- main ---- */
.pmain { min-height:70vh; padding:1.5rem 1.25rem 3rem; }
.pwrap   { max-width:1060px; margin:0 auto; }
.pnarrow { max-width:640px;  margin:0 auto; }

.phead {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
}

.pback {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.9375rem; text-decoration:none; margin-bottom:1rem;
}
.pback:hover { text-decoration:underline; }

.pcard {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow-sm);
}
.pcard-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.pempty { text-align:center; padding:3rem 1.5rem; color:var(--muted); }
.pempty svg { color:var(--sky-300); }
.pempty h2 { margin-top:.75rem; }

.pgrid { display:grid; gap:1.5rem; grid-template-columns:1fr; }
.pgrid > * { min-width:0; }

/* --------------------------------------------------------- case cards ---- */
.pcases { display:grid; gap:1rem; }
.pcase {
  display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.25rem; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pcase { position:relative; align-items:flex-start; }
.pcase:hover { border-color:var(--sky-400); box-shadow:var(--shadow); }
.pcase-main { min-width:0; flex:1 1 18rem; }
.pcase-main h2 { margin-top:.5rem; }
.pcase-ref { font-size:.8125rem; color:var(--muted); margin-top:.25rem; }

/* The card is not an <a> any more - it holds a real button - so the heading
   link is stretched over the card to keep the whole thing clickable. */
.pcase-link { color:inherit; text-decoration:none; }
.pcase-link::after { content:""; position:absolute; inset:0; border-radius:var(--radius-lg); }
.pcase-link:focus-visible { box-shadow:none; }
.pcase-link:focus-visible::after { box-shadow:var(--ring); }

.pcase-meta {
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin-top:.85rem;
  font-size:.8125rem; color:var(--muted);
}
.pcase-meta span { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }

/* ---- checklist progress on the card ---- */
.pcase-side {
  position:relative; z-index:1;               /* sits above the stretched link */
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  min-width:11rem; padding-left:1rem; border-left:1px solid var(--line-soft);
}
.pcase-cta { width:100%; justify-content:center; }

.pring { position:relative; width:76px; height:76px; }
.pring svg { width:100%; height:100%; transform:rotate(-90deg); }
.pring circle { fill:none; stroke-width:5; stroke-linecap:round; }
.pring-track { stroke:var(--line); }
.pring-fill  { stroke:var(--sky-600); transition:stroke-dasharray .4s ease; }
.pring.is-ok   .pring-fill { stroke:var(--ok); }
.pring.is-warn .pring-fill { stroke:var(--warn); }

/* One inline child, centred as a whole. Two children here would be laid out
   as separate items - grid stacks them, and baseline pins the line to the top
   of the ring instead of its middle. */
.pring-num {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.0625rem; font-weight:700; color:var(--ink); line-height:1;
}
.pring-num small { font-size:.6875rem; font-weight:600; color:var(--muted); margin-left:1px; }

.pring-cap { text-align:center; font-size:.8125rem; color:var(--muted); line-height:1.45; }
.pring-cap strong { color:var(--ink); }
.pring.is-warn ~ .pring-cap .pring-sub { color:var(--warn); font-weight:600; }

@media (max-width:560px) {
  .pcase-side {
    width:100%; padding-left:0; padding-top:1rem;
    border-left:0; border-top:1px solid var(--line-soft);
  }
}

.ppill {
  display:inline-block; font-size:.75rem; font-weight:650; line-height:1.4;
  padding:.25rem .65rem; border-radius:999px;
}
.ppill.blue  { background:var(--sky-100); color:var(--sky-900); }
.ppill.green { background:var(--ok-bg);   color:var(--ok); }
.ppill.amber { background:var(--warn-bg); color:var(--warn); }
.ppill.grey  { background:var(--line-soft); color:var(--body); }

/* ----------------------------------------------------------- timeline ---- */
.ptimeline { list-style:none; margin:0; padding:0; }
.ptimeline li { padding:.85rem 0 .85rem 1.25rem; border-left:2px solid var(--sky-200); position:relative; }
.ptimeline li::before {
  content:""; position:absolute; left:-5px; top:1.15rem;
  width:8px; height:8px; border-radius:50%; background:var(--sky-500);
}
.ptimeline time { display:block; font-size:.8125rem; color:var(--muted); margin-bottom:.2rem; }

/* ---------------------------------------------------------- documents ---- */
.pdocs { list-style:none; margin:0; padding:0; }
.pdocs li {
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft);
}
.pdocs li:last-child { border-bottom:0; }
.pdoc-icon { color:var(--sky-600); flex:0 0 auto; }
.pdoc-name { flex:1; min-width:0; }
.pdoc-name strong { display:block; color:var(--ink); font-size:.9375rem; font-weight:600; word-break:break-word; }
.pdoc-name span { font-size:.8125rem; }

.psessions { list-style:none; margin:0; padding:0; }
.psessions li { padding:.6rem 0; border-bottom:1px solid var(--line-soft); display:flex; flex-direction:column; gap:.15rem; }
.psessions li:last-child { border-bottom:0; }
.psessions li > span:first-child { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }

.pdl { display:grid; gap:0; }
.pdl > div { padding:.6rem 0; border-bottom:1px solid var(--line-soft); }
.pdl > div:last-child { border-bottom:0; }
.pdl dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.pdl dd { margin:.2rem 0 0; color:var(--ink); }

/* -------------------------------------------------------------- forms ---- */
.pfield { margin-bottom:1.125rem; }
.pfield-row { display:grid; gap:1.125rem; grid-template-columns:1fr; }
label { display:block; font-weight:600; color:var(--ink); font-size:.9375rem; margin-bottom:.4rem; }
.phint { display:block; font-size:.8125rem; color:var(--muted); font-weight:400; margin-top:.35rem; }
label .phint { display:inline; margin-left:.35rem; }

.pinput {
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:.75rem .875rem;
}
.pinput:focus { outline:none; border-color:var(--sky-500); box-shadow:var(--ring); }
.pinput:disabled { background:var(--line-soft); color:var(--muted); }
.ptextarea { min-height:130px; resize:vertical; }

.pcode {
  font-size:1.75rem; letter-spacing:.5em; text-align:center;
  font-variant-numeric:tabular-nums; padding-left:1.25rem;
}

.pcheck { display:flex; gap:.7rem; align-items:flex-start; font-weight:400; font-size:.9375rem; color:var(--body); }
.pcheck input { margin-top:.3rem; flex:0 0 auto; width:1.05rem; height:1.05rem; }

.pbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font:inherit; font-size:1rem; font-weight:600; line-height:1;
  padding:.8rem 1.25rem; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.pbtn-primary { background:var(--sky-700); color:#fff; }
.pbtn-primary:hover { background:var(--sky-900); }
.pbtn-secondary { background:var(--white); color:var(--sky-800); border-color:var(--line); }
.pbtn-secondary:hover { border-color:var(--sky-400); background:var(--sky-50); }
.pbtn-danger { background:var(--err-bg); color:var(--err); border-color:#fecaca; }
.pbtn-danger:hover { background:#fee2e2; }
.pbtn-block { width:100%; }
.pbtn-sm { font-size:.875rem; padding:.5rem .8rem; }
.pbtn-row { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ------------------------------------------------------ notes & flash ---- */
.pflash, .pnote {
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.9rem 1.05rem; border-radius:var(--radius);
  font-size:.9375rem; line-height:1.55; border:1px solid transparent;
}
.pflash svg, .pnote svg { flex:0 0 auto; margin-top:2px; }
.pflash { max-width:1060px; margin:0 auto 1.25rem; }
.pflash-ok   { background:var(--ok-bg);   color:var(--ok);   border-color:#a7f3d0; }
.pflash-err  { background:var(--err-bg);  color:var(--err);  border-color:#fecaca; }
.pflash-warn { background:var(--warn-bg); color:var(--warn); border-color:#fde68a; }
.pnote       { background:var(--sky-50);  color:var(--sky-900); border-color:var(--sky-200); }
.pnote-warn  { background:var(--warn-bg); color:var(--warn);    border-color:#fde68a; }
.pnote a, .pflash a { color:inherit; }

/* ------------------------------------------------------------- footer ---- */
.pfoot {
  border-top:1px solid var(--line); background:var(--white);
  padding:1.5rem 1.25rem; text-align:center;
  font-size:.8125rem; color:var(--muted);
}
.pfoot p + p { margin-top:.5rem; }
.pfoot-links a { color:var(--muted); }

/* ------------------------------------------------------------- 700px+ ---- */
@media (min-width:700px) {
  .pfield-row { grid-template-columns:1fr 1fr; }
  .pmain { padding:2rem 1.5rem 4rem; }
  h1 { font-size:1.875rem; }
}

/* ------------------------------------------------------------- 960px+ ---- */
@media (min-width:960px) {
  .pgrid { grid-template-columns:1.55fr 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

/* --- "or" divider between sign-in methods ------------------------------- */
.palt { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .875rem; }
.palt::before, .palt::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* --- retainer + signature ---------------------------------------------- */
.retainer-body { font-size: .9375rem; line-height: 1.75; }
.retainer-body h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; }
.retainer-body p { margin: 0 0 1rem; }
.sig-pad {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.sig-pad canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.sig-actions {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem; border-top: 1px solid var(--line); background: var(--page);
}
.sig-image {
  max-width: 320px; max-height: 110px; display: block;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; background: #fff;
}
.pdoc-actions { display: flex; gap: .4rem; align-items: center; flex: 0 0 auto; }
.pdoc-actions form { margin: 0; }

/* --- document checklist ------------------------------------------------- */
.cl-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.cl-bar span { display: block; height: 100%; background: var(--sky-600); border-radius: 999px; transition: width .3s ease; }

.cl-req {
  align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--err); background: var(--err-bg);
  padding: .1rem .4rem; border-radius: 4px;
}
.cl-note {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
  font-size: .8125rem; color: var(--warn);
}

.cl-files { list-style: none; margin: .6rem 0 0; padding: 0; }
.cl-files li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .6rem; background: var(--sky-50); border-radius: 8px; margin-bottom: .35rem;
  font-size: .875rem;
}
.cl-files svg { color: var(--sky-600); flex: 0 0 auto; }
.cl-files a { word-break: break-word; }
.cl-files form { margin: 0 0 0 auto; }
.cl-remove {
  background: none; border: 0; color: var(--err); font: inherit; font-size: .8125rem;
  cursor: pointer; padding: .15rem .3rem; border-radius: 5px;
}
.cl-remove:hover { background: var(--err-bg); }

/* --- checklist stepper ----------------------------------------------------
   Twenty-five upload boxes on one page is a wall. The sections become steps:
   the rail on the left says where you are, the panel on the right shows only
   the section you are on, and the panel keeps one height so the buttons never
   move under the cursor.
   -------------------------------------------------------------------------- */
.clx { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }

/* ---- the rail ---- */
.clx-rail {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1rem; box-shadow: var(--shadow-sm);
}
.clx-rail-top { margin-bottom: .85rem; }
.clx-rail-count { font-weight: 650; color: var(--ink); font-size: .9375rem; margin-bottom: .45rem; }

.clx-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; overflow-x: auto; }
.clx-steps li { position: relative; flex: 0 0 auto; }

.clx-step {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .65rem; border-radius: 10px;
  text-decoration: none; color: var(--body);
}
.clx-step:hover { background: var(--line-soft); }
.clx-step.on { background: var(--sky-50); }

.clx-dot {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; line-height: 1; color: var(--white);
  background: var(--white);
}
.clx-step.on .clx-dot { border-color: var(--sky-600); box-shadow: 0 0 0 3px rgba(2,132,199,.16); }
.clx-step.is-done .clx-dot      { background: var(--ok);   border-color: var(--ok); }
.clx-step.is-attention .clx-dot { background: var(--warn); border-color: var(--warn); }
.clx-step.is-done .clx-dot svg  { stroke-width: 3; }

.clx-step-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.clx-step-name { font-size: .875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.clx-step-sub  { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.clx-step.on .clx-step-name { color: var(--sky-900); }
.clx-step.is-attention .clx-step-sub { color: var(--warn); }

.clx-safe {
  display: none; gap: .55rem; align-items: flex-start;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft);
  font-size: .8125rem; color: var(--muted);
}
.clx-safe svg { flex: 0 0 auto; margin-top: 2px; color: var(--sky-600); }

/* ---- the panel ---- */
.clx-panel {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.clx-panel-head { padding: 1.15rem 1.25rem 1rem; border-bottom: 1px solid var(--line-soft); }
.clx-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sky-700); margin-bottom: .3rem;
}
.clx-panel-head h2 { font-family: var(--serif); font-size: 1.375rem; }
.clx-lede { margin-top: .35rem; font-size: .875rem; color: var(--muted); }

.clx-items { padding: 1rem 1.25rem; }

.clx-item {
  border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem .95rem; margin-bottom: .6rem; background: var(--white);
}
.clx-item:last-child { margin-bottom: 0; }
.clx-item.is-done { border-color: #cdeadb; background: #fbfefc; }
.clx-item.is-fresh { animation: clxflash 1.6s ease-out 1; }
@keyframes clxflash {
  from { box-shadow: 0 0 0 3px rgba(4,120,87,.28); }
  to   { box-shadow: 0 0 0 3px rgba(4,120,87,0); }
}

.clx-item-head { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.clx-item-name { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.clx-item-name strong { color: var(--ink); font-size: .9375rem; }

.clx-up { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }

.clx-pick { flex: 1 1 14rem; min-width: 0; cursor: pointer; }
.clx-pick input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.clx-pick-face {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem; border: 1px dashed var(--sky-200); border-radius: 9px;
  background: var(--sky-50); color: var(--sky-800); font-size: .875rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clx-pick-face svg { flex: 0 0 auto; }
.clx-pick:hover .clx-pick-face { background: var(--sky-100); border-color: var(--sky-400); }
.clx-pick input:focus-visible + .clx-pick-face { box-shadow: var(--ring); }
.clx-item.is-done .clx-pick-face { background: var(--white); border-color: var(--line); color: var(--body); }

.clx-up.has-js .clx-send { display: none; }
.clx-up.is-busy .clx-pick-face { border-style: solid; color: var(--muted); }

.clx-add { margin-top: .9rem; }

.clx-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.25rem; border-top: 1px solid var(--line); background: var(--page);
}

@media (min-width: 900px) {
  .clx { grid-template-columns: 268px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .clx-rail { position: sticky; top: calc(var(--pbar-h, 64px) + 1rem); }
  .clx-steps { flex-direction: column; gap: .1rem; overflow-x: visible; }
  .clx-steps li { flex: 1 1 auto; }
  /* Section names run long ("Separation and existing agreements"); on the
     rail they wrap, and only the mobile strip keeps them on one line. */
  .clx-step-name, .clx-step-sub { white-space: normal; }

  /* Stripe's connecting thread between the dots. */
  .clx-steps li + li::before {
    content: ""; position: absolute; left: 1.31rem; top: -.35rem; height: .7rem;
    border-left: 2px solid var(--line);
  }
  .clx-safe { display: flex; }

  /* One height, whatever the section holds, so Back and Next never move. */
  .clx-panel { height: clamp(30rem, calc(100vh - 15rem), 44rem); }
  .clx-items { overflow-y: auto; flex: 1 1 auto; }
}

/* --- legal dialog ---------------------------------------------------------
   Terms and Privacy open here rather than in a new tab: somebody half way
   through choosing a password should not lose the page they are on.
   -------------------------------------------------------------------------- */
.pdialog {
  width:min(660px, calc(100vw - 2rem));
  max-height:min(85vh, 46rem);
  padding:0;
  border:none;
  border-radius:var(--radius-lg);
  background:var(--white);
  color:var(--body);
  box-shadow:0 18px 50px rgba(15,23,42,.22);
  overflow:hidden;
}
.pdialog::backdrop { background:rgba(15,23,42,.55); }
.pdialog[open] { display:flex; flex-direction:column; }

.pdialog-bar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.pdialog-bar h2 { font-family:var(--serif); font-size:1.25rem; }

.pdialog-x {
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  border:1px solid var(--line); border-radius:10px;
  background:var(--white); color:var(--body); cursor:pointer;
}
.pdialog-x:hover { background:var(--line-soft); color:var(--ink); }

.pdialog-body {
  overflow-y:auto;
  padding:1.25rem;
  font-size:.95rem;
}
.pdialog-body:focus-visible { box-shadow:inset var(--ring); }

/* The legal partials are written for the marketing site's .prose rules, so
   the readable defaults they expect are restated here. */
.pdialog-body h2 { font-size:1.0625rem; margin:1.6rem 0 .5rem; }
.pdialog-body h3 { font-size:1rem; margin:1.2rem 0 .35rem; }
.pdialog-body > *:first-child { margin-top:0; }
.pdialog-body p { margin:0 0 .85rem; }
.pdialog-body ul, .pdialog-body ol { margin:.6rem 0 .9rem; padding-left:1.3rem; }
.pdialog-body li + li { margin-top:.4rem; }
.pdialog-body table { width:100%; border-collapse:collapse; margin:.9rem 0; font-size:.875rem; }
.pdialog-body th, .pdialog-body td { text-align:left; padding:.6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.pdialog-body th { color:var(--ink); font-weight:600; background:var(--sky-50); }
.pdialog-body .notice {
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.85rem; margin:0 0 1rem;
  border:1px solid; border-radius:var(--radius); font-size:.875rem;
}
.pdialog-body .notice svg { flex:0 0 auto; margin-top:3px; }
.pdialog-body .notice p { margin:0; }
.pdialog-body .notice-warn { background:var(--warn-bg); border-color:#fde68a; color:#78350f; }
.pdialog-body .notice-info { background:var(--sky-50);  border-color:var(--sky-200); color:var(--sky-900); }
.pdialog-body .t-muted { color:var(--muted); font-size:.8125rem; }

.pdialog-foot {
  display:flex; justify-content:flex-end;
  padding:.9rem 1.25rem;
  border-top:1px solid var(--line);
  background:var(--page);
}
.pdialog-foot .pbtn { min-width:8rem; }

@media (max-width:560px) {
  .pdialog { width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .pdialog-foot .pbtn { width:100%; }
}


/* --- typed retainer signature ---
   No image, so present the typed name clearly as the record. */
.sig-typed {
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--ink);
  padding: .75rem 1rem;
  background: var(--sky-50);
  border-left: 3px solid var(--sky-600);
  border-radius: 4px;
}
.sig-typed strong { font-style: italic; }
.sig-name-input { font-family: var(--serif); font-size: 1.125rem; }