/* diy-guide 2026-11-02 · home1102 · the homepage blocks shown while the self-filing guide is on (templates/_diy_home.html,
   linked from its 'ways' part). Owner-approved mockup v5 (make_home_mock5.py CSS), class names prefixed dhp-.
   Font sizes only through app.css --fs-* tokens (capped on p-full pages), colours only through tokens. The site is dark on
   screen, so there is no colour-scheme switch here. The nav link's three rules live in _diy_nav.html (every page). */

/* ═══ two ways: two cards ═══ */
.dhp-ways { padding: var(--band) 0; background: var(--bg); }
.dhp-cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); row-gap: 0;
             max-width: 900px; margin: 0 auto; padding: 0 var(--sp-4); text-align: left; }
.dhp-card { display: flex; flex-direction: column; overflow: hidden; text-align: center;
            background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
/* desktop: the two cards share their rows (name / tagline / big line / note / button / list), so the big lines and the
   buttons sit level in every language even when one tagline wraps to two lines */
@supports (grid-template-rows: subgrid) {
  .dhp-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
}
.dhp-card.dhp-hire { border: 2px solid var(--brand); }   /* owner 11-02 21:40: the highlight border is on Expert Full Service */
.dhp-card > p { margin: 0; padding: 0 var(--sp-4); }
.dhp-card > .dhp-nm { display: flex; align-items: center; justify-content: center; gap: 8px;
          padding-top: var(--sp-4); padding-bottom: 6px;
          font-size: var(--fs-h3); font-weight: 800; line-height: 1.3; color: var(--ink); }
.dhp-nm svg { flex: none; width: 26px; height: 26px; color: var(--brand); }
.dhp-card > .dhp-tg { padding-bottom: var(--sp-3); color: var(--ink-2); font-size: var(--fs-small); }
/* 38 px on a computer like the mockup (= 0.95 x --fs-h1), 28.5 px on phones; on a p-full page it would stay under the cap */
.dhp-big { align-self: center; font-family: var(--font-num); font-size: calc(var(--fs-h1) * .95); font-weight: 800;
           line-height: 1.15; color: var(--ink); }
.dhp-diy .dhp-big, .dhp-hire .dhp-big { color: var(--money); }   /* owner 11-02 21:40: No savings, no fee in the same green */
.dhp-card > .dhp-pn { padding-top: 6px; padding-bottom: var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); }
.dhp-card > .btn { display: block; align-self: start; width: auto; margin: 0 var(--sp-4) var(--sp-4); text-align: center; }
.btn.dhp-line { background: transparent; color: var(--brand-ink); border-color: var(--brand); }
.btn.dhp-line:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); }
.dhp-list { list-style: none; margin: 0; padding: var(--sp-4); background: var(--bg-3); text-align: left; }
.dhp-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 var(--sp-3);
               font-size: var(--fs-small); color: var(--ink); }
.dhp-list li:last-child { margin-bottom: 0; }
.dhp-list svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--brand); }

/* ═══ five steps (statband: centred heading + caption) ═══ */
.dhp-steps ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
                max-width: var(--maxw-band); margin: 0 auto; padding: 0 var(--sp-4); text-align: left; }
.dhp-steps li { background: var(--brand-soft); border-radius: 12px; padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.dhp-sn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
          margin: 0 0 var(--sp-2); border-radius: 50%; background: var(--brand); color: var(--on-brand);
          font-family: var(--font-num); font-weight: 700; }
.dhp-steps li b { display: block; margin: 0 0 4px; }
.dhp-steps .dhp-d { color: var(--ink-2); font-size: var(--fs-small); }

/* ═══ compare the two ways: tool column white, service column green (owner 11-02) ═══ */
.dhp-tw { max-width: calc(900px + 2 * var(--sp-4)); margin: 0 auto; padding: 0 var(--sp-4); }   /* the table 900 wide, as in the mockup */
.dhp-cmp table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line);
                 border-radius: 14px; overflow: hidden; font-size: var(--fs-small); }
.dhp-cmp th, .dhp-cmp td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.dhp-cmp thead > tr > * { background: var(--bg-2); font-size: var(--fs-body); }
.dhp-cmp tbody th.dhp-k { font-size: var(--fs-small); font-weight: 400; text-transform: none; letter-spacing: 0; }
.dhp-cmp .dhp-k { width: 34%; text-align: left; color: var(--ink-2); }
.dhp-cmp .dhp-t { color: var(--ink); }
.dhp-cmp .dhp-g { color: var(--money); font-weight: 700; }
.dhp-cmp tbody tr:last-child > * { border-bottom: 0; }
.dhp-cmp .btn { margin: 0; white-space: nowrap; }

/* line breaks: headings balanced (no lone 「时」 on a phone), short text without a one-word last line; Korean breaks between
   words only (as estimate.html does for its cards) */
.dhp-ways h2, .dhp-steps h2, .dhp-cmp h2 { text-wrap: balance; }
.dhp-tg, .dhp-list li, .dhp-cmp th, .dhp-cmp td, .dhp-steps li { text-wrap: pretty; }
html:lang(ko) .dhp-ways, html:lang(ko) .dhp-steps, html:lang(ko) .dhp-cmp, html:lang(ko) .ctaband p.dhp-alt { word-break: keep-all; }

/* ═══ the extra line under the closing band's button ═══ */
.ctaband p.dhp-alt { max-width: var(--maxw-read); margin: var(--sp-3) auto 0; font-size: var(--fs-body); font-weight: 600;
                     color: var(--ink); text-wrap: balance; }

/* ═══ phones and narrow tablets: cards stacked, five steps in one column, the table keeps three columns ═══ */
@media (max-width: 760px) {
  .dhp-cards { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .dhp-card { display: flex; grid-row: auto; }
  .dhp-card > .btn { align-self: stretch; }
  .dhp-steps ol { grid-template-columns: 1fr; }
  .dhp-tw { padding: 0 var(--sp-3); }
  .dhp-cmp th, .dhp-cmp td { padding: 10px 8px; }
  .dhp-cmp thead > tr > * { font-size: var(--fs-small); letter-spacing: .02em; }
  .dhp-cmp .dhp-k { width: 32%; }
  .dhp-cmp .btn { white-space: normal; width: 100%; padding: 10px 8px; }
}

/* ═══ addr1102 (owner 2026-11-02 23:25): the hero box's placeholder (index.html .q-ph, both the condo and the house
   words) brightens from left to right, again and again - the same sweep as the guide's two address boxes (diy.css
   .diy-addr-ph). A band of the hero's input text colour (near white) crosses the placeholder colour (currentColor = app.css
   #6f8aa3), clipped to the letters; 2.8 s per round. Background only: nothing moves or changes size; app.css still shows
   .q-ph only while the box is empty (and only where :has works), so it goes as soon as a letter is typed. Reduced motion,
   or a browser without text clipping: the plain placeholder, as before. app.css is not touched.
   Verifiers 11-03 (the owner's line is "Address or parcel number | Unit #"): the unit box's placeholder (condo tab) is
   drawn the same way - index.html .u-box span.q-ph.u-ph (one line marked diy-guide 2026-11-02, rendered only with the
   switch on; app.css .hero .search .q-ph keeps it hidden until this file shows it), under the same :has condition as the
   address one - and the band runs on into it: its own keyframes cross it in the second half of the same 2.8 s round,
   after the address words. Its size is the unit input's own (app.css .search .row input: --fs-input; phones 16 px). ═══ */
@keyframes dhp-ph-sweep { 0% { background-position: 100% 0; } 80%, 100% { background-position: 0 0; } }
@keyframes dhp-ph-sweep-u { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.hero .search .u-box { position: relative; }
@supports selector(:has(*)) {
  .hero-map .search .u-box input::placeholder { color: transparent; }
  .hero .search .u-box input:placeholder-shown + .u-ph { position: absolute; top: 0; right: 0; bottom: 0; left: var(--sp-3);
    display: flex; align-items: center; padding: var(--sp-2) 0; font-family: var(--font); font-size: var(--fs-input);
    line-height: 1.5; color: #6f8aa3; pointer-events: none; }
}
@media (max-width: 700px) {
  .hero .search .u-box input:placeholder-shown + .u-ph { top: var(--sp-2); left: 0; padding: 6px 0 var(--sp-3);
    font-size: var(--fs-body); }
}
@media (forced-colors: active) { .hero .search .u-box input:placeholder-shown + .u-ph { display: none; } }
@media screen and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) and (-webkit-text-fill-color: transparent) {
    .hero-map .search .q-box input:placeholder-shown + .q-ph > span,
    .hero-map .search .u-box input:placeholder-shown + .u-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: dhp-ph-sweep 2.8s linear infinite; }
    .hero-map .search .u-box input:placeholder-shown + .u-ph > span { animation-name: dhp-ph-sweep-u; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-map .search .q-ph > span { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
}

/* ═══ b2 addr 2026-11-03 (browser verifier of the live release): the hero's placeholder in full on a computer. On the
   condo tab the English and Spanish words ("Address or parcel number" 248 px, "Dirección o número de parcela" 294 px at
   --fs-input) did not fit beside the unit box and the button in the 660 px box (app.css .hero .search) and were cut
   with an ellipsis ("Address or parcel num…"). In those two languages the box now takes the text column's full width
   (.hero .inner: 780 px less its 24 px sides = 732 px), so the address part is about 305 / 301 px. Chinese and Korean
   fit as they were and keep their width. Width only: the tabs, the unit box, the button, the suggestion list and what
   they do are unchanged. From 880 px wide windows only: below that the wider box would run under the map's +/- buttons
   (make_dtla_map.py .dm-zoom, 20 px from the right edge; they touch at 836 px), so 701-879 px keep the 660 px box as
   before, and phones (≤ 700 px, app.css stacks the row) are not touched. Like every rule here it applies once this
   file has loaded (it is linked after the hero): on a first, uncached visit the box can widen a moment after it is
   drawn. ═══ */
@media (min-width: 880px) {
  html:lang(en) .hero-map .search, html:lang(es) .hero-map .search { max-width: none; }
}