/* diy-guide 2026-10-31 · self-filing guide · core styles (pages-a). Plan 6.3.
   Rules live under .diy only. Font sizes are only plain var(--fs-*) (no px sizes, no font shorthand, no new --fs-*).
   Colours are the site's existing tokens: --pt-* on guide pages (portal shell), with app.css tokens as the fallback so
   the same components work on the public intro page (site shell). No dark-theme blocks here: the tokens switch.
   County screenshots and the tax-bill schematic keep a white frame. Layout: rail 184 / content 680 / card 300. */

/* ---------- token aliases (no new colours) ---------- */
.diy {
  --d-ink: var(--pt-ink, var(--ink));
  --d-ink-2: var(--pt-ink-2, var(--ink-2));
  --d-ink-3: var(--pt-ink-3, var(--ink-3));
  --d-surface: var(--pt-surface, var(--bg));
  --d-inset: var(--pt-inset, var(--bg-2));
  --d-line: var(--pt-line, var(--line));
  --d-field: var(--pt-field, var(--line-2));
  --d-link: var(--pt-link, var(--brand-ink));
  --d-accent: var(--pt-link, var(--brand));
  --d-soft: var(--brand-soft);
  --d-money: var(--pt-done, var(--money));
  --d-warn: var(--pt-due, var(--warn));
  --d-warn-soft: var(--pt-due-soft, var(--warn-soft));
  --d-err: var(--pt-err, var(--danger));
  --d-err-soft: var(--pt-err-soft, var(--danger-soft));
  --d-radius: var(--pt-radius, var(--r-btn));
  color: var(--d-ink);
  line-height: 1.7;
}
.diy *, .diy *::before, .diy *::after { box-sizing: border-box; }
.diy [hidden] { display: none !important; }
.diy p { margin: 0 0 var(--sp-3); }
.diy a:not(.btn) { color: var(--d-link); text-underline-offset: 3px; }
.diy code { font-family: var(--font-num); }
.diy ul, .diy ol { margin: 0 0 var(--sp-3); padding-left: 22px; }
.diy li { margin: 2px 0; }
.diy :focus-visible { outline: 2px solid var(--d-link); outline-offset: 2px; }
.diy .diy-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.diy .diy-nw, .diy .diy-nb { white-space: nowrap; }
.diy p, .diy li, .diy td, .diy .diy-lede, .diy .diy-note, .diy .diy-hint { text-wrap: pretty; }
.diy .diy-numtxt, .diy .diy-tnum { font-variant-numeric: tabular-nums; }

/* ---------- page width: the guide needs more than the portal's 720px column ---------- */
[data-shell=portal] main:has(> .diy-page),
main:has(> .diy-intro) { max-width: none; }
.diy-page { max-width: 1232px; margin: 0 auto; }

/* ---------- grid (notes/pages-a_api.md C1) ---------- */
.diy-grid {
  display: grid; justify-content: center; align-items: start;
  grid-template-columns: minmax(0, 680px);
  grid-template-areas: "mstep" "head" "hire" "body" "foot";
  column-gap: var(--sp-5);
}
.diy .diy-grid > .diy-rail { grid-area: rail; display: none; }
.diy .diy-grid > .diy-mstep { grid-area: mstep; display: flex; }
.diy-grid > .diy-head { grid-area: head; min-width: 0; }
.diy-grid > .diy-body { grid-area: body; min-width: 0; }
.diy-grid > .diy-foot { grid-area: foot; min-width: 0; }
.diy-grid > aside.diy-hire { grid-area: hire; min-width: 0; margin: 0 0 var(--sp-4); }
@media (min-width: 1100px) {
  .diy-grid {
    grid-template-columns: minmax(0, 680px) 300px;
    grid-template-areas: "mstep hire" "head hire" "body hire" "foot hire";
    grid-template-rows: auto auto auto 1fr;
  }
  .diy-grid > aside.diy-hire { position: sticky; top: var(--sp-3); align-self: start; margin: 0; }
  .diy-grid > aside.diy-hire.diy-unstick { position: static; }
}
@media (min-width: 1280px) {
  .diy-grid {
    grid-template-columns: 184px minmax(0, 680px) 300px;
    grid-template-areas: "rail head hire" "rail body hire" "rail foot hire";
    grid-template-rows: auto auto 1fr;
  }
  .diy .diy-grid > .diy-rail { display: block; position: sticky; top: var(--sp-3); align-self: start; }
  .diy .diy-grid > .diy-mstep { display: none; }
}
@media (max-width: 699px) {
  .diy-grid { grid-template-areas: "mstep" "head" "body" "foot"; }
  .diy-grid > aside.diy-hire { display: none; }
}

/* ---------- head: kicker, title, one sentence ---------- */
.diy .diy-head { margin: 0 0 var(--sp-4); }
.diy .diy-kicker { margin: 0 0 var(--sp-2); font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; color: var(--d-link); }
.diy .diy-head h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); font-weight: 800; line-height: 1.25;
  letter-spacing: -.01em; text-wrap: balance; color: var(--d-ink); }
.diy .diy-head h1:focus { outline: none; }
.diy .diy-lede { margin: 0; font-size: var(--fs-max-other); line-height: 1.65; color: var(--d-ink-2); }
.diy .diy-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--d-ink-3); }
.diy .diy-head .diy-hint { margin-top: var(--sp-2); }

/* ---------- body text ---------- */
.diy .diy-body { font-size: var(--fs-max-other); }
.diy .diy-body h2, .diy .diy-h3 { margin: var(--sp-5) 0 var(--sp-2); padding: 0; border: 0; font-size: var(--fs-h3);
  font-weight: 700; line-height: 1.4; letter-spacing: 0; text-wrap: balance; }
.diy .diy-body h3 { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-max-other); font-weight: 700; line-height: 1.45; }
.diy .diy-small { font-size: var(--fs-body); line-height: 1.65; }
.diy .diy-tiny { font-size: var(--fs-small); line-height: 1.55; color: var(--d-ink-3); }
.diy .diy-muted { color: var(--d-ink-2); }
.diy .diy-tight { margin: 0 0 var(--sp-2); }
.diy .diy-p { margin: var(--sp-4) 0 0; }
.diy .diy-vals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.diy .diy-vals .diy-nw { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ---------- top bar ---------- */
.diy .diy-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4);
  padding: 0 0 var(--sp-3); margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--d-line); }
.diy .diy-where { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); }
.diy .diy-prop { font-weight: 700; font-size: var(--fs-body); }
.diy .diy-ain { font-size: var(--fs-small); color: var(--d-ink-3); font-family: var(--font-num); white-space: nowrap; }
.diy .diy-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); }
.diy .diy-count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-count b { font-size: var(--fs-max-other); font-weight: 800; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.diy .diy-count.is-soon, .diy .diy-count.is-soon b { color: var(--d-warn); }
.diy .diy-count.is-ok { color: var(--d-ink); font-weight: 600; }
.diy .diy-ico { flex: none; }
.diy .diy-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  font-family: var(--font); font-size: var(--fs-body); color: var(--d-ink-2); text-decoration: none; cursor: pointer; }
.diy a.diy-tool { color: var(--d-ink-2); text-decoration: none; }
.diy .diy-tool:hover, .diy a.diy-tool:hover { color: var(--d-link); }
.diy .diy-notes > * { margin: 0 0 var(--sp-3); }
.diy .diy-notes:empty { display: none; }
.diy .diy-flash { padding: var(--sp-2) var(--sp-3); border-radius: var(--d-radius); background: var(--d-inset);
  font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-flash.is-ok { color: var(--d-money); }
.diy .diy-hire-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3); border-radius: var(--d-radius); background: var(--d-soft); font-size: var(--fs-body); }
.diy .diy-hire-banner p { margin: 0; flex: 1 1 240px; }
.diy .diy-hire-banner .btn { flex: none; margin-left: auto; }

/* ---------- rail + compact progress row ---------- */
.diy .diy-rail { font-size: var(--fs-body); }
.diy .diy-prog { display: flex; align-items: center; gap: 12px; padding: 0 6px var(--sp-3); margin: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--d-line); }
.diy .diy-prog b { display: block; font-size: var(--fs-small); line-height: 1.35; }
.diy .diy-prog > div > span { display: block; font-size: var(--fs-tiny); line-height: 1.4; color: var(--d-ink-3); }
.diy .diy-prog > div > span.is-bad { color: var(--d-err); }
.diy .diy-ring { flex: none; }
.diy .diy-ring-track { stroke: var(--d-line); }
.diy .diy-ring-val { stroke: var(--d-accent); }
.diy .diy-rail-a { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px;
  color: var(--d-ink); text-decoration: none; line-height: 1.35; }
.diy .diy-rail-a:hover { background: var(--d-inset); }
.diy .diy-rail-a.is-on { background: var(--d-soft); }
.diy .diy-rail-t { display: block; font-weight: 600; }
.diy .diy-rail-s { display: block; margin-top: 1px; font-size: var(--fs-tiny); color: var(--d-ink-3); text-wrap: balance; }
/* v5 (v4final note): Chinese may break between any two characters, so 「已递交」 split as 「已递」/「交 …」 in the 1280 rail.
   keep-all leaves only the space after the label as a break point (the date's own spaces are no-break). */
.diy:lang(zh) .diy-rail-s { word-break: keep-all; }
/* v5 county pages (_diy_cty.html): the record fold sits inside the record card (no rule line or top gap of its own);
   the county's notice box keeps a gap before the facts below it. */
.diy .diy-record > .diy-cty-rec { margin: 0; border-top: 0; }
.diy .diy-cty > .diy-warn { margin: 0 0 var(--sp-4); }
/* v6fix 11-01: a county's late-request paragraph (Kings) keeps a gap above the form button below it */
.diy .diy-cty > .diy-p + .diy-open { margin-top: var(--sp-4); }
.diy .diy-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--d-field); background: var(--d-surface); color: var(--d-ink-3);
  font-family: var(--font-num); font-size: var(--fs-tiny); font-weight: 700; line-height: 1; }
.diy .diy-rail-a.is-done .diy-n { background: var(--d-accent); border-color: var(--d-accent); color: var(--d-surface); }
.diy .diy-rail-a.is-on:not(.is-done) .diy-n { border-color: var(--d-accent); color: var(--d-link); }
.diy .diy-subs { margin: 2px 0 4px; }
.diy .diy-sub { display: flex; padding: 4px 8px 4px 42px; border-radius: 8px; font-size: var(--fs-small);
  color: var(--d-ink-2); text-decoration: none; }
.diy .diy-sub:hover { background: var(--d-inset); }
.diy .diy-sub.is-on { color: var(--d-ink); font-weight: 600; background: var(--d-soft); }
.diy .diy-sub.is-done::after { content: "✓"; margin-left: auto; padding-left: 8px; color: var(--d-link); font-weight: 700; }
.diy .diy-mstep { align-items: center; gap: 12px; margin: 0 0 var(--sp-4); font-size: var(--fs-small); color: var(--d-ink-2); }
.diy .diy-mstep a { white-space: nowrap; }
.diy .diy-bars { display: flex; flex: 1; gap: 4px; max-width: 200px; }
.diy .diy-bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--d-line); }
.diy .diy-bars i.on { background: var(--d-accent); }

/* ---------- end of content: checked date + disclaimer ---------- */
.diy .diy-foot { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--d-line);
  font-size: var(--fs-small); line-height: 1.6; color: var(--d-ink-3); }
.diy .diy-foot p { margin: 0 0 4px; }

/* ---------- components: expert tip, note, warning, fold ---------- */
.diy .diy-tip { margin: var(--sp-4) 0; padding: 14px 18px 14px 16px; border-left: 3px solid var(--d-accent);
  border-radius: 0 16px 16px 0; background: var(--d-inset); font-size: var(--fs-body); line-height: 1.65; }
.diy .diy-tip-l { display: block; margin-bottom: 2px; font-size: var(--fs-tiny); font-weight: 800; letter-spacing: .06em; color: var(--d-link); }
.diy .diy-tip p { margin: 0; }
.diy .diy-note { margin: var(--sp-3) 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--d-field);
  font-size: var(--fs-body); line-height: 1.65; color: var(--d-ink); }
.diy .diy-note p { margin: 0 0 var(--sp-1); }
.diy .diy-note p:last-child { margin-bottom: 0; }
.diy .diy-warn { padding: 12px 16px; border-left: 3px solid var(--d-warn); border-radius: 8px; background: var(--d-warn-soft);
  font-size: var(--fs-body); line-height: 1.65; color: var(--d-ink); }
.diy .diy-warn p { margin: 0; }
.diy .diy-warn b { color: var(--d-warn); }
.diy .diy-more { margin: var(--sp-5) 0 0; border-top: 1px solid var(--d-line); }
.diy .diy-more > summary, .diy .diy-flat > summary { display: flex; align-items: center; gap: 10px; min-height: 44px;
  list-style: none; cursor: pointer; }
.diy .diy-more > summary::-webkit-details-marker, .diy .diy-flat > summary::-webkit-details-marker { display: none; }
.diy .diy-more > summary { font-size: var(--fs-body); font-weight: 600; color: var(--d-ink-2); }
.diy .diy-more > summary:hover { color: var(--d-link); }
.diy .diy-more > summary::before, .diy .diy-flat > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.diy .diy-more[open] > summary::before, .diy .diy-flat[open] > summary::before { transform: rotate(45deg); }
.diy .diy-more-body { padding: 0 0 var(--sp-3) 22px; font-size: var(--fs-body); line-height: 1.7; }
.diy .diy-more-body h3:first-child { margin-top: 0; }
.diy .diy-flat { margin: var(--sp-3) 0; }
.diy .diy-flat > summary { font-size: var(--fs-body); font-weight: 600; color: var(--d-link); }

/* ---------- glossary term + popover ---------- */
.diy .diy-term { padding: 0; border: 0; border-bottom: 1.5px dotted var(--d-link); background: none; cursor: help;
  font: inherit; color: inherit; }
.diy .diy-pop { position: absolute; z-index: 60; max-width: 320px; padding: 10px 14px; border: 1px solid var(--d-field);
  border-radius: 8px; background: var(--d-surface); box-shadow: var(--sh-lg); font-size: var(--fs-body); line-height: 1.6; color: var(--d-ink); }
.diy .diy-pop b { color: var(--d-link); }

/* ---------- copy value ---------- */
.diy .diy-val { display: inline-flex; align-items: stretch; max-width: 100%; min-height: 47px; overflow: hidden; vertical-align: middle;
  border: 1px solid var(--d-field); border-radius: 8px; background: var(--d-surface); }
.diy .diy-val code { display: flex; align-items: center; padding: 6px 12px; background: var(--d-inset); color: var(--d-ink);
  font-size: var(--fs-body); font-weight: 700; white-space: pre-wrap; word-break: break-word; }
.diy .diy-copy { min-width: 78px; min-height: 45px; padding: 0 14px; border: 0; border-left: 1px solid var(--d-field);
  background: var(--d-surface); color: var(--d-link); font-family: var(--font); font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.diy .diy-copy:hover, .diy .diy-copy.is-ok { background: var(--d-soft); }
.diy .diy-copy.is-bad { background: var(--d-err-soft); color: var(--d-err); }
.diy .diy-val.is-last { box-shadow: 0 0 0 2px var(--d-accent); }
.diy .diy-inline-input { width: 180px; min-height: 47px; padding: 8px 12px; border: 1px solid var(--d-field); border-radius: 8px;
  background: var(--d-surface); color: var(--d-ink); font-family: var(--font); font-size: var(--fs-max-other); }

/* ---------- buttons (the site's .btn; text buttons) ---------- */
.diy .btn { white-space: normal; text-align: center; }
.diy .diy-btn-sm { min-height: 40px; padding: 0 var(--sp-3); font-size: var(--fs-body); }
.diy .diy-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--d-link); font-family: var(--font); font-size: var(--fs-body); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; text-align: left; }
.diy .diy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--sp-4); margin: var(--sp-5) 0 0; }
.diy .diy-actions form, .diy .diy-opform, .diy form.diy-inline { margin: 0; }
.diy .diy-opform { display: inline-flex; }
.diy .diy-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.diy .diy-saved-at { font-size: var(--fs-small); font-weight: 600; color: var(--d-ink-2); }
.diy .diy-saved-at.is-bad { color: var(--d-err); }
.diy .diy-skip { margin: var(--sp-5) 0 0; font-weight: 600; }
.diy .diy-err { margin: 6px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--d-err); }

/* ---------- forms ---------- */
.diy .diy-form-sec { margin: var(--sp-5) 0 0; }
.diy .diy-form-sec > .diy-h3 { margin: 0 0 var(--sp-2); }
.diy .diy-frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--sp-3); }
.diy .diy-frow.diy-addr4 { grid-template-columns: 2fr 1fr 70px 110px; }
.diy .diy-fld { margin: 0 0 var(--sp-2); }
.diy .diy-fld label { display: block; margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--d-ink-2); }
.diy .diy-fld input, .diy .diy-fld select, .diy .diy-cf input:not([type=radio]), .diy .diy-cf select, .diy .diy-rate input {
  width: 100%; min-height: 47px; padding: 8px 12px; border: 1.5px solid var(--d-field); border-radius: 8px;
  background: var(--d-surface); color: var(--d-ink); font-family: var(--font); font-size: var(--fs-max-other); }
.diy .diy-rate input { width: 140px; }
.diy .diy-radios { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.diy .diy-radio { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 8px;
  font-size: var(--fs-body); font-weight: 400; line-height: 1.5; color: var(--d-ink); cursor: pointer; }
.diy .diy-radio:hover { background: var(--d-inset); }
.diy .diy-radio:has(input:checked) { background: var(--d-soft); }
.diy .diy-radio:has(input:checked) > span { font-weight: 600; }
.diy .diy-radio input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--d-accent); }
.diy .diy-radio small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--d-ink-3); }
/* 2a: what shows for which choice (diy.js keeps data-who / data-mail current) */
.diy .diy-who .diy-whonote, .diy .diy-who .diy-rel, .diy .diy-who .diy-ent, .diy .diy-who .diy-mailrow { display: none; }
.diy .diy-who[data-who="self"] [data-for~="self"], .diy .diy-who[data-who="joint"] [data-for~="joint"],
.diy .diy-who[data-who="family"] [data-for~="family"], .diy .diy-who[data-who="trust"] [data-for~="trust"],
.diy .diy-who[data-who="llc"] [data-for~="llc"], .diy .diy-who[data-who="other"] [data-for~="other"] { display: block; }
.diy .diy-who[data-who="family"] .diy-rel { display: block; max-width: 320px; margin: 8px 0 0 44px; }
.diy .diy-who[data-who="trust"] .diy-ent, .diy .diy-who[data-who="llc"] .diy-ent { display: block; margin-top: 12px; }
.diy .diy-who[data-who="other"] .diy-who-more { display: none; }
.diy .diy-who[data-mail="other"] .diy-mailrow { display: block; }

/* ---------- step 1 ---------- */
.diy .diy-figure { padding: var(--sp-4); border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-surface); }
.diy .diy-figure p { margin: 0; }
.diy .diy-figure-k { font-size: var(--fs-body); font-weight: 600; color: var(--d-ink-2); }
.diy .diy-figure-v { margin: 6px 0 !important; font-family: var(--font-num); font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.diy .diy-figure-split, .diy .diy-figure-x { font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-figure-x { margin-top: var(--sp-2) !important; }
.diy .diy-facts { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); margin-top: var(--sp-3) !important; padding-top: var(--sp-3);
  border-top: 1px solid var(--d-line); font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-facts b { color: var(--d-ink); }
.diy .diy-facts-src { margin-left: auto; font-size: var(--fs-small); color: var(--d-ink-3); }
.diy .diy-status { display: flex; align-items: flex-start; gap: 12px; margin: var(--sp-4) 0 0; font-size: var(--fs-max-other); line-height: 1.6; }
.diy .diy-status p { margin: 0; }
.diy .diy-status i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
  background: var(--d-soft); color: var(--d-link); font-style: normal; font-weight: 800; font-size: var(--fs-small); }
/* the user's own estimate: outlined, never filled (only the hire card's "our estimate" has a green fill) */
.diy .diy-save { margin: var(--sp-4) 0 0; padding: 16px 20px; border: 1px solid var(--money-line, var(--d-line)); border-radius: 16px; background: var(--d-surface); }
.diy .diy-save.is-empty { border-color: var(--d-line); }
.diy .diy-save p { margin: 0; }
.diy .diy-save-k { font-size: var(--fs-body); font-weight: 600; color: var(--d-ink-2); }
.diy .diy-save-v { margin: 4px 0 !important; font-family: var(--font-num); font-size: var(--fs-val); font-weight: 800; line-height: 1.15; color: var(--d-money); }
.diy .diy-save-x { font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-mine { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--d-field); border-radius: 6px;
  font-size: var(--fs-tiny); font-weight: 700; color: var(--d-ink-2); vertical-align: 1px; }
.diy .diy-c4 { margin-top: var(--sp-4); }

/* ---------- overview ---------- */
.diy .diy-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--d-line); }
.diy .diy-steps li { margin: 0; }
.diy .diy-steps a, .diy .diy-steps-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-3) 12px; border-bottom: 1px solid var(--d-line); color: inherit; text-decoration: none; }
.diy .diy-steps a:hover { background: var(--d-inset); }
.diy .diy-steps .diy-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--d-field);
  font-family: var(--font-num); font-size: var(--fs-small); font-weight: 700; color: var(--d-ink-3); }
.diy .diy-steps li.is-done .diy-num { background: var(--d-accent); border-color: var(--d-accent); color: var(--d-surface); }
.diy .diy-steps li.is-next a, .diy .diy-steps li.is-next .diy-steps-row { background: var(--d-inset); }
.diy .diy-steps li.is-next .diy-num { border-color: var(--d-accent); color: var(--d-link); }
.diy .diy-steps-h { display: block; font-size: var(--fs-max-other); font-weight: 700; line-height: 1.4; }
.diy .diy-steps-d { display: block; font-size: var(--fs-body); line-height: 1.5; color: var(--d-ink-2); }
.diy .diy-steps-st { font-size: var(--fs-small); color: var(--d-ink-3); white-space: nowrap; }
.diy .diy-steps li.is-done .diy-steps-st { color: var(--d-link); font-weight: 600; }
.diy .diy-steps li.is-next .diy-steps-st { color: var(--d-link); font-weight: 700; }
.diy .diy-start .diy-hint { flex-basis: 100%; margin: 0; }
.diy .diy-need-h { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-body); }
.diy .diy-need3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.diy .diy-need3 li { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--d-inset); font-size: var(--fs-body); line-height: 1.5; }
.diy .diy-need3 b { display: block; }
.diy .diy-need3 li > span { color: var(--d-ink-2); }
.diy .diy-quiet { margin: var(--sp-4) 0 0; font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-quiet p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); margin: 0; }
.diy .diy-resume { margin: 0 0 var(--sp-4); }

/* ---------- tables ---------- */
.diy .diy-tblwrap { overflow-x: auto; }
.diy .diy-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.55; }
.diy .diy-table th, .diy .diy-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--d-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.diy .diy-table th { text-transform: none; letter-spacing: 0; }
.diy .diy-table thead th { font-size: var(--fs-small); font-weight: 700; color: var(--d-ink-3); }
.diy .diy-table tbody th { font-size: var(--fs-body); font-weight: 600; color: var(--d-ink-2); white-space: nowrap; }
.diy .diy-table .diy-tnum { text-align: right; white-space: nowrap; overflow-wrap: normal; padding-left: 8px; padding-right: 0; }
.diy .diy-county td:first-child { white-space: normal; }

/* ---------- step 2b / 2c pictures ---------- */
.diy .diy-fig { margin: var(--sp-3) 0 var(--sp-2); }
.diy .diy-shot { position: relative; margin-left: 30px; line-height: 0; }
.diy .diy-shot.is-plain { margin-left: 0; }
.diy .diy-shot img { display: block; width: 100%; height: auto; border: 1px solid #c8ced6; border-radius: 8px; background: #fff; cursor: zoom-in; }
.diy .diy-shot.is-narrow { width: min(305px, calc(100% - 30px)); }
.diy .diy-fig-stack .diy-shot + .diy-shot { margin-top: 12px; }
.diy .diy-hl { position: absolute; border: 3px solid #378ce8; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.diy .diy-hl.is-dim { border: 2px solid rgba(74, 100, 120, .6); }
.diy .diy-hl.is-avoid { border: 2px dashed #c0392b; }
.diy .diy-pin { position: absolute; right: calc(100% + 4px); top: 50%; margin-top: -11px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: #1a64b8; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.diy .diy-pin::before { content: attr(data-n); font-family: var(--font); font-size: var(--fs-tiny); font-weight: 800; line-height: 1; }
.diy .diy-hl.is-dim .diy-pin { background: #4a6478; }
.diy .diy-hl.is-avoid .diy-pin { background: #c0392b; }
.diy .diy-hl.is-r .diy-pin { right: auto; left: calc(100% + 4px); }
.diy .diy-hl.is-t .diy-pin { top: auto; bottom: calc(100% + 4px); right: auto; left: 0; margin-top: 0; }
.diy .h-w1a { left: 8.6%; top: 26%; width: 90.4%; height: 15%; }
.diy .h-w1b { left: .4%; top: 81.8%; width: 98.4%; height: 15.7%; }
.diy .h-w2a { left: 3.6%; top: 12%; width: 32.9%; height: 4.9%; }
.diy .h-w2b { left: 28.5%; top: 49.6%; width: 13.6%; height: 9%; }
.diy .h-w2c { left: 52.6%; top: 46.2%; width: 15.4%; height: 3%; }
.diy .h-w2d { left: 46.3%; top: 64.5%; width: 18.8%; height: 20%; }
.diy .h-w2e { left: 21.5%; top: 64.5%; width: 23.5%; height: 20%; }
.diy .h-w3a { left: 6.8%; top: 2.6%; width: 14.1%; height: 17.3%; }
.diy .h-w3c { left: 2.1%; top: 46.4%; width: 53.6%; height: 24.8%; }
.diy .h-w3b { left: 8.2%; top: 2.6%; width: 29.2%; height: 17.3%; }
.diy .h-w3d { left: 8.2%; top: 90.8%; width: 26.2%; height: 7.8%; }
.diy .diy-legend { margin: 6px 0 var(--sp-2); padding-left: 52px; font-size: var(--fs-body); line-height: 1.6; }
.diy .diy-fig-bill .diy-legend { padding-left: 22px; }
.diy .diy-figcap { margin: 0 0 var(--sp-3); font-size: var(--fs-small); line-height: 1.6; color: var(--d-ink-3); }
.diy .diy-walk h3 { display: flex; align-items: center; gap: 10px; margin: var(--sp-4) 0 var(--sp-1); }
.diy .diy-walk p { font-size: var(--fs-body); }
.diy .diy-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--sp-3); margin: var(--sp-3) 0; padding: 0; list-style: none; }
.diy .diy-rules.is-one { grid-template-columns: minmax(0, 1fr); }
.diy .diy-rules li { display: flex; gap: 10px; margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.diy .diy-rules li::before { content: "✓"; flex: none; font-weight: 800; color: var(--d-link); }
.diy .diy-zoom { position: fixed; inset: 0; z-index: 96; display: grid; place-items: start center; padding: 56px 24px 24px;
  overflow: auto; background: rgba(13, 43, 62, .86); cursor: zoom-out; }
.diy .diy-zoom img { max-width: none; width: auto; height: auto; border-radius: 8px; background: #fff; }
.diy .diy-zoom .diy-x { position: fixed; top: 10px; right: 12px; background: #fff; color: #0d2b3e; }

/* ---------- step 2c: the sales ---------- */
.diy .diy-comp { margin-top: var(--sp-3); border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-surface); }
.diy .diy-comp > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; list-style: none; cursor: pointer;
  font-size: var(--fs-max-other); font-weight: 700; }
.diy .diy-comp > summary::-webkit-details-marker { display: none; }
.diy .diy-comp > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.diy .diy-comp[open] > summary::before { transform: rotate(45deg); }
.diy .diy-cstate { font-size: var(--fs-small); font-weight: 600; color: var(--d-ink-3); }
.diy .diy-cf { padding: 0 18px 18px; }
.diy .diy-cf-r { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 4px 14px; margin: 0; padding: 8px 0; }
.diy .diy-cf-k { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--d-ink-2); }
.diy .diy-cf-k small { display: block; font-family: var(--font-num); font-size: var(--fs-small); font-weight: 600; color: var(--d-ink-3); }
.diy .diy-cf-r .diy-hint { grid-column: 2; margin: 0; }
.diy .diy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diy .diy-three { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.diy .diy-opts { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); font-size: var(--fs-body); }
.diy .diy-opts label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; color: var(--d-ink); }
.diy .diy-opts input { width: 20px; height: 20px; margin: 0; accent-color: var(--d-accent); }
.diy .diy-cmsg { margin-top: var(--sp-2); }
.diy .diy-cm-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); line-height: 1.65; }
.diy .diy-cm-list li { margin: 0 0 4px; }
.diy .diy-cm-err { color: var(--d-err); font-weight: 700; }
.diy .diy-cm-err .diy-opform { margin-top: 6px; display: flex; }
.diy .diy-cm-ok { color: var(--d-link); font-weight: 700; }
.diy .diy-cm-inf { color: var(--d-ink); }
.diy .diy-cm-nt, .diy .diy-cm { color: var(--d-ink-2); }
.diy .diy-cm-nt .diy-opform { display: inline-flex; }
.diy .diy-cf-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.diy .diy-addcomp { margin: var(--sp-3) 0 0; }
.diy .diy-addcomp .diy-hint { margin: 0; }
.diy .diy-compsbad { margin-top: var(--sp-4); }
.diy .diy-compsbad-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2) !important; }

/* ---------- step 2d: opinion of value ---------- */
.diy .diy-ov-used { margin: 0 0 var(--sp-3); font-size: var(--fs-max-other); font-weight: 700; }
.diy .diy-ov-card { padding: 20px 24px; border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-surface); }
.diy .diy-ov-card p { margin: 0; }
.diy .diy-ov-from { font-size: var(--fs-body); font-weight: 600; color: var(--d-ink-2); }
.diy .diy-ov-big { margin: 4px 0 !important; font-family: var(--font-num); font-size: var(--fs-h1); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.diy .diy-ov-card.is-high .diy-ov-big { font-size: var(--fs-h2); }
.diy .diy-ov-label { font-size: var(--fs-body); color: var(--d-ink); }
.diy .diy-ov-gap { margin-top: 2px !important; font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-ov-card .diy-ov-how-h { margin: var(--sp-3) 0 var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--d-line);
  font-size: var(--fs-body); font-weight: 700; }
.diy .diy-ov-how { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); line-height: 1.6; }
.diy .diy-ov-how li { display: flex; gap: 10px; margin: 0 0 6px; }
.diy .diy-ov-how .diy-n, .diy .diy-ov-next .diy-n { margin-top: 1px; }
.diy .diy-ov-excl-line, .diy .diy-ov-morecomps { margin-top: var(--sp-2) !important; font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-ov-card.is-none h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.diy .diy-ov-card.is-none p { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.diy .diy-ov-card.is-none .diy-actions { margin-top: var(--sp-3); }
.diy .diy-ov-nonelist { margin: 0 0 var(--sp-2); padding-left: 20px; font-size: var(--fs-body); }
.diy .diy-ov-actions { margin-top: var(--sp-4); }
.diy .diy-ov-adj { margin: var(--sp-4) 0 0; padding: 16px 20px; border-radius: 16px; background: var(--d-inset); }
.diy .diy-ov-adj > .diy-h3 { margin-top: 0; }
.diy .diy-ov-adj .diy-actions { margin-bottom: var(--sp-3); }
.diy .diy-ov-adj .diy-fld input { max-width: 280px; }
.diy .diy-ov-why { margin-top: var(--sp-2); }
.diy .diy-ov-why legend { margin: 0 0 var(--sp-1); padding: 0; font-size: var(--fs-body); font-weight: 700; color: var(--d-ink); }
.diy .diy-ov-note { display: none; margin: 4px 0 0 44px; }
.diy .diy-ov-why:has(input[value="other"]:checked) .diy-ov-note { display: block; }
.diy .diy-ov-facts { font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-ov-facts p { margin: var(--sp-2) 0 0; padding-left: 14px; border-left: 3px solid var(--d-field); }
.diy .diy-ov-facts p.is-stop { color: var(--d-ink); }
.diy .diy-ov-next { list-style: none; margin: 0; padding: 0; }
.diy .diy-ov-next > li { display: flex; gap: 12px; margin: 0 0 var(--sp-4); }
.diy .diy-ov-next > li > div { min-width: 0; flex: 1; }
.diy .diy-ov-next p { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.diy .diy-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--d-inset);
  font-size: var(--fs-tiny); font-weight: 700; line-height: 1.7; color: var(--d-ink-2); white-space: nowrap; vertical-align: 1px; }
.diy .diy-tag.is-line { border: 1px solid var(--d-field); background: transparent; }
.diy .diy-tag.is-mid { background: var(--d-soft); color: var(--d-link); }
.diy .diy-ov-m { display: none; font-size: var(--fs-small); color: var(--d-ink-3); }
.diy .diy-ov-fact { display: block; font-size: var(--fs-small); color: var(--d-ink-3); }
.diy .diy-ov-lab { font-weight: 700; }
.diy .diy-ov-excl { list-style: none; margin: 0; padding: 0; }
.diy .diy-ov-excl .diy-note { color: var(--d-ink-2); }
.diy .diy-ov-excl .diy-opform { display: inline-flex; margin-left: var(--sp-2); }
.diy .diy-split { max-width: 520px; }
.diy .diy-ov-sqft { margin: 0 0 var(--sp-4); }

/* ---------- intro page (site shell) ---------- */
.diy-intro { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-4); }
.diy-intro-grid { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; grid-template-areas: "head" "hire" "body"; column-gap: var(--sp-6); }
.diy-intro-grid > .diy-head { grid-area: head; min-width: 0; }
.diy-intro-grid > .diy-body { grid-area: body; min-width: 0; }
.diy-intro-grid > aside.diy-hire { grid-area: hire; min-width: 0; margin: 0 0 var(--sp-4); }
@media (min-width: 1100px) {
  .diy-intro-grid { grid-template-columns: minmax(0, 720px) 300px; grid-template-areas: "head hire" "body hire"; grid-template-rows: auto 1fr; justify-content: space-between; }
  .diy-intro-grid > aside.diy-hire { position: sticky; top: var(--sp-3); align-self: start; margin: 0; }
}
@media (max-width: 699px) {
  .diy-intro-grid { grid-template-areas: "head" "body"; }
  .diy-intro-grid > aside.diy-hire { display: none; }
}
.diy-intro .diy-head h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.22; margin: 0 0 var(--sp-3); }
.diy-intro .diy-head .diy-lede { margin-bottom: var(--sp-5); }
.diy .diy-points { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.diy .diy-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin: 0; }
.diy .diy-points .diy-n { width: 28px; height: 28px; border-color: var(--d-accent); color: var(--d-link); }
.diy .diy-points b { display: block; font-size: var(--fs-max-other); }
.diy .diy-points li > div > span { display: block; font-size: var(--fs-body); color: var(--d-ink-2); }
.diy .diy-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.diy .diy-five li { margin: 0; padding: 10px 0 0; border-top: 2px solid var(--d-line); font-size: var(--fs-body); line-height: 1.5; }
.diy .diy-five-n { display: block; margin-bottom: 2px; font-family: var(--font-num); font-size: var(--fs-small); font-weight: 800; color: var(--d-link); }
.diy .diy-five b { display: block; }
.diy .diy-five li > span:not(.diy-five-n) { font-size: var(--fs-small); color: var(--d-ink-3); }
.diy-intro .diy-body h2 { border: 0; padding: 0; }
/* intro v8 (owner 11-01 20:40): two ways (free / hire us), why both, how long, one Get started */
.diy .diy-in8 { margin: 0 0 var(--sp-5); }
.diy .diy-in8 > h2 { margin-top: var(--sp-5); }
.diy .diy-in8-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.diy .diy-in8-way { padding: 16px 18px; border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-surface); }
.diy .diy-in8-way.diy-in8-hire { border-color: transparent; background: var(--d-soft); }
.diy .diy-in8-way h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-max-other); font-weight: 800; line-height: 1.35; }
.diy .diy-in8-way > p { margin: 0 0 var(--sp-2); font-size: var(--fs-body); line-height: 1.6; }
.diy .diy-in8 .diy-in8-slogan { font-weight: 800; color: var(--d-link); }
.diy .diy-in8-list { margin: 0 0 var(--sp-3); padding: 0; list-style: none; font-size: var(--fs-body); line-height: 1.6; }
.diy .diy-in8-list li { position: relative; margin: 0 0 var(--sp-2); padding-left: 18px; }
.diy .diy-in8-list li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--d-accent); }
.diy .diy-in8-way .diy-in8-list:last-child, .diy .diy-in8-way > .diy-in8-more { margin-bottom: 0; }
.diy .diy-in8-note { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--d-ink-2); }
.diy .diy-in8 .diy-five { margin-top: var(--sp-3); }
.diy .diy-in8-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: var(--sp-5) 0 var(--sp-2); }
.diy .diy-in8-time { font-size: var(--fs-small); font-weight: 700; color: var(--d-ink-2); }
.diy .diy-in8-next { margin: 0 0 var(--sp-3); font-size: var(--fs-body); color: var(--d-ink-2); }
@media (max-width: 699px) {
  .diy .diy-in8-ways { grid-template-columns: minmax(0, 1fr); }
}
/* intro1102 (owner 11-02 22:05): "Two ways to do it" = the homepage's two cards (_diy_home.html diy_part 'cards' with
   diy_home.css, linked after this file; that file stays as it is so the homepage keeps its stamp) + one fee line.
   Here they sit in the body column: no side padding of their own, and .diy's list margin / indent are taken off. Side by
   side (equal height, shared rows: diy_home.css subgrid) only while the column holds two readable cards (704px: below
   340px a card wraps "Expert-Built Filing Tool"); a narrower column (the 300px hire card beside it from 1100px, a narrow
   window) gets one column, as diy_home.css does at 760px and below. */
.diy .diy-in8-cards { container: diy-in8-ways / inline-size; }
.diy .diy-in8-cards .dhp-cards { max-width: none; margin: 0; padding: 0; }
.diy .diy-in8-cards .dhp-list { margin: 0; padding: var(--sp-4); }
.diy .diy-in8-cards .dhp-big { text-wrap: balance; }
/* 2026-11-02 c1b: side by side (container >= 704px) the English slogan "No savings, no fee" needs ~312 px at 38 px and
   wraps in the ~296 px card; --fs-h2 (32 px; portal typography allows only a bare var(--fs-*)) keeps both big lines on one line (homepage untouched: diy_home.css) */
@container diy-in8-ways (min-width: 704px) {
  html:lang(en) .diy .diy-in8-cards .dhp-big { font-size: var(--fs-h2); }
}
@container diy-in8-ways (max-width: 703px) {
  .diy .diy-in8-cards .dhp-cards { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
  .diy .diy-in8-cards .dhp-card { display: flex; grid-row: auto; }
  .diy .diy-in8-cards .dhp-card > .btn { align-self: stretch; }
}
/* es / ko: the card names and the big line need about 380px a card to stay within two lines (at 340px a Spanish name
   takes three lines and the Korean slogan three), so two cards need 800px; the body column is at most 720px */
@container diy-in8-ways (max-width: 799px) {
  html:lang(es) .diy .diy-in8-cards .dhp-cards, html:lang(ko) .diy .diy-in8-cards .dhp-cards {
    grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
  html:lang(es) .diy .diy-in8-cards .dhp-card, html:lang(ko) .diy .diy-in8-cards .dhp-card { display: flex; grid-row: auto; }
  html:lang(es) .diy .diy-in8-cards .dhp-card > .btn, html:lang(ko) .diy .diy-in8-cards .dhp-card > .btn { align-self: stretch; }
}

/* ---------- overlays (outside main): toast, sheet, scrim, popover, paste tip, mobile bar slot ---------- */
.diy-layer .diy-toast { position: fixed; left: 50%; bottom: 22px; z-index: 90; max-width: min(560px, 92vw); padding: 10px 18px;
  transform: translateX(-50%); border-radius: 8px; background: var(--d-ink); color: var(--d-surface); font-size: var(--fs-body); }
.diy-layer .diy-toast.is-top { top: 16px; bottom: auto; }
.diy-layer .diy-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(13, 43, 62, .42); }
.diy-layer .diy-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 90vh; overflow: auto; overscroll-behavior: contain;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--d-surface); box-shadow: var(--sh-lg); }
.diy-layer .diy-grab { display: block; width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 2px; background: var(--d-field); }
.diy .diy-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--d-ink-2); font-family: var(--font); font-size: var(--fs-h3); line-height: 1; cursor: pointer; }
.diy-layer .diy-mbar-slot { display: none; }
.diy-layer .diy-paste { position: fixed; left: 16px; bottom: 16px; z-index: 79; width: min(380px, 92vw); padding: 12px 16px;
  border: 1px solid var(--d-field); border-radius: 8px; background: var(--d-surface); box-shadow: var(--sh-lg); font-size: var(--fs-body); }
.diy-layer .diy-paste p { margin: 0 0 6px; }
.diy-layer .diy-paste-h { font-weight: 700; }
.diy-layer .diy-paste-off { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 0 0; font-size: var(--fs-small); font-weight: 400; }
html.diy-kb .diy-layer .diy-mbar-slot { display: none !important; }
html:has(.diy-sheet:not([hidden])) { overflow: hidden; }

/* touch screens vs mouse (diy.js adds html.diy-touch for (hover:none) and (pointer:coarse)) */
.diy .diy-touch-only { display: none; }
html.diy-touch .diy .diy-touch-only { display: block; }
html.diy-touch .diy .diy-desk-only { display: none; }
html.diy-touch .diy span.diy-touch-only { display: inline; }

/* ---------- 1100-1279 / tablet / phone ---------- */
@media (max-width: 1099px) {
  .diy .diy-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .diy-layer .diy-mbar-slot { display: block; }
  body:has(.diy-mbar-slot > *) { padding-bottom: 88px; }
  .diy-layer .diy-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .diy .diy-topbar { gap: 4px var(--sp-3); }
  .diy .diy-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .diy .diy-printlink { display: none; }
  .diy .diy-hire-banner .btn { display: none; }
  .diy .diy-need3, .diy .diy-rules, .diy .diy-frow, .diy .diy-frow.diy-addr4 { grid-template-columns: minmax(0, 1fr); }
  .diy .diy-cf { padding: 0 14px 14px; }
  .diy .diy-cf-r { grid-template-columns: minmax(0, 1fr); }
  .diy .diy-cf-r .diy-hint { grid-column: 1; }
  .diy .diy-steps a, .diy .diy-steps-row { grid-template-columns: 32px minmax(0, 1fr); padding: 14px 8px; }
  .diy .diy-steps-st { grid-column: 2; white-space: normal; }
  .diy .diy-five { grid-template-columns: 1fr 1fr; }
  .diy .diy-ov-card { padding: 16px; }
  .diy .diy-ov-tbl .diy-c-date, .diy .diy-ov-tbl .diy-c-div { display: none; }
  .diy .diy-ov-m { display: block; }
  .diy .diy-ov-adj { padding: 14px 16px; }
  .diy .diy-ov-adj .diy-fld input { max-width: none; }
  .diy .diy-actions .btn, .diy .diy-actions .diy-opform, .diy .diy-actions .diy-opform .btn { width: 100%; }
  .diy .diy-actions > [data-diy-ov-main] { flex: 1 1 100%; }
  .diy .diy-table tbody th { white-space: normal; }
  .diy .diy-split th, .diy .diy-split td { padding-right: 6px; }
  .diy .diy-figure-v { font-size: var(--fs-h1); }
  .diy .diy-legend { padding-left: 44px; }
  .diy .diy-shot.is-narrow { width: calc(100% - 30px); }
  .diy .diy-facts-src { margin-left: 0; }
  .diy-intro { padding: 0; }
}
@media (max-height: 720px) {
  .diy .diy-grid > .diy-rail { position: static; }
}

/* ---------- print: the guide page itself prints plainly (the checklist page has its own sheet) ---------- */
@media print {
  .diy .diy-rail, .diy .diy-mstep, .diy .diy-tools, .diy-grid > aside.diy-hire, .diy-layer { display: none !important; }
  .diy-grid { display: block; }
}

/* ---------- v4 build: 2c "Your sales" one-line rows + the ONE open form (spec §3.11) ---------- */
.diy .diy-comp-list { margin: 0 0 var(--sp-3); padding: 0; list-style: none; border-top: 1px solid var(--d-line); }
.diy .diy-comp-row { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--d-line); }
.diy .diy-comp-row.is-open { background: var(--d-inset); }
.diy .diy-comp-line { margin: 0; font-size: var(--fs-body); line-height: 1.6; overflow-wrap: anywhere; }
.diy .diy-comp-l { color: var(--d-ink); }
.diy .diy-cstate.is-ok { color: var(--d-money); }
.diy .diy-cstate.is-bad { color: var(--d-err); }
.diy .diy-comp-row .diy-cmsg-short ul { margin: 4px 0 0; }
.diy .diy-comp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-4); margin: 2px 0 0; font-size: var(--fs-body); }
.diy .diy-comp-act .diy-opform { margin: 0; }
.diy .diy-comp-open { margin-top: var(--sp-3); padding: 0 0 4px; }
.diy .diy-comp-open .diy-cf-h { margin: 0; padding: 14px 18px 4px; font-size: var(--fs-max-other); }

/* v6: the overview's next-filing card (design §1.3 G4) and the paper appeal walkthrough (BOE-305-AH) */
.diy-nycard { margin-bottom: 18px; }
.diy-nycard .diy-monitor { margin-top: 10px; }
.diy-boe-rows .diy-row-l { font-size: var(--fs-small); }

/* ---------- addr1102 (owner 2026-11-02 23:25): the address box of the guide's find step and of "See potential savings"
   (templates/_diy_addr.html, on /account/diy and /file-yourself/savings, portal shell). The input itself is the portal's
   (portal.css: 48 px, 14 px side padding, 1.5 px border, --fs-body); the suggestion list is app.css .ac (the same rows as
   /start); the placeholder is drawn by .diy-addr-ph over the empty box, like the homepage's .q-ph, so it can carry the
   light sweep. The real placeholder attribute stays for screen readers; it is made transparent only where the drawn one
   shows (:placeholder-shown), and Windows high-contrast mode shows the real one only.
   b2 addr 2026-11-03 (browser verifier of the live release): the open list covered the submit button (it hung from
   .pt-field, right under the box). The list now hangs from the whole form - the form is its positioned box and .pt-field
   no longer is (also on the savings page's form.search, where app.css .search .pt-field, the /start box's rule, made it
   one) - so app.css .ac (top: 100%, 8 px gap) opens UNDER the button, like the homepage's #q-ac under its .row, and the
   button stays clickable while the list is open. The markup is unchanged (the .ac div still follows the box).
   On screen (the site is dark there, portal.css / app.css @media screen) the drawn placeholder takes the homepage hero's
   colours (app.css .hero-map: words #6f8aa3, the band --ink), so the sweep shows as clearly as the homepage's
   (band : words = 3.1 : 1; it was 2.2 : 1 with --pt-ink-3 / --pt-ink); the words stay 4.6 : 1 on the portal's box
   (--pt-surface). Printed / light pages keep the --pt-ink-3 token. ---------- */
.diy-addr { position: relative; }
form.diy-addr .pt-field { position: static; }
.diy-addr .diy-addr-box { position: relative; }
.diy-addr .diy-addr-ph { display: none; }
@supports selector(:placeholder-shown) {
  .diy-addr .diy-addr-box input::placeholder { color: transparent; }
  .diy-addr .diy-addr-box input:placeholder-shown + .diy-addr-ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; padding: 0 15.5px; font-family: var(--font); font-size: var(--fs-body); line-height: 1.4;
    color: var(--pt-ink-3, var(--ink-3)); pointer-events: none; }
  .diy-addr .diy-addr-ph > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media screen {
  :root:not([data-theme="light"]) .diy-addr .diy-addr-box input:placeholder-shown + .diy-addr-ph { color: #6f8aa3; }
}
@media (forced-colors: active) { .diy-addr .diy-addr-box input:placeholder-shown + .diy-addr-ph { display: none; } }
/* The light sweep (owner: the placeholder words brighten from left to right, again and again): a band of the text colour
   (near white on the dark site) crosses the placeholder colour (currentColor), clipped to the letters; 2.8 s per round,
   the band crossing ~80 % of it, then a short rest. Never moves or resizes anything (background only); hidden with the
   placeholder as soon as a letter is typed. Reduced motion, or a browser without text clipping: the plain placeholder. */
@keyframes diy-ph-sweep { 0% { background-position: 100% 0; } 80%, 100% { background-position: 0 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) and (-webkit-text-fill-color: transparent) {
    .diy-addr .diy-addr-ph > span {
      background-image: linear-gradient(90deg, currentColor 0%, currentColor 35%, var(--ink) 50%, currentColor 65%, currentColor 100%);
      background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      animation: diy-ph-sweep 2.8s linear infinite; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .diy-addr .diy-addr-ph > span { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
}