/* Theme additions on top of the design's own styles (design.css). */

/* Photo frames: a block filling its box, photo centred and cropped. */
[data-slot] { display:block; position:relative; width:100%; height:100%; aspect-ratio:3/2; overflow:hidden; }
[data-slot][data-shape="circle"] { border-radius:50%; }
[data-slot] > img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block; }
[data-slot] > [hidden] { display:none; }
.lpg-slot-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; font:500 13px/1.3 'Plus Jakarta Sans',system-ui,sans-serif; color:rgba(38,51,34,.45); background:rgba(127,127,127,.08); }

/* Component state wrappers ({{#if}} branches) draw no box of their own. */
lpg-if { display:contents; }
lpg-if[hidden] { display:none; }

/* Pages outside the design (privacy notice, policies …). */
.lpg-prose { font-size:16.5px; line-height:1.75; color:#555E51; }
.lpg-prose > :first-child { margin-top:0; }
.lpg-prose h2 { margin:1.6em 0 .5em; font-size:clamp(24px,2.4vw,32px); font-weight:600; line-height:1.2; letter-spacing:-.02em; color:#263322; }
.lpg-prose h3 { margin:1.4em 0 .4em; font-size:20px; font-weight:600; letter-spacing:-.01em; color:#263322; }
.lpg-prose a { color:#435C3A; }
.lpg-prose ul, .lpg-prose ol { padding-left:1.3em; }

/* Phones and tablets. Text fields at 16px: under that, iOS zooms the page
   when one is tapped. Small controls get an invisible hit area of up to
   44×44 (Apple's minimum) — sized by lpg.js so it never reaches more than
   halfway to the next control; nothing on screen moves. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size:16px !important; }
  .lpg-tap-rel { position:relative; }
  .lpg-tap::after { content:""; position:absolute; top:var(--lpg-ty); bottom:var(--lpg-ty); left:var(--lpg-tx); right:var(--lpg-tx); }
}

/* OPT intake, child rows: beside the 110px age box the name field shrank to
   34px at 320px wide (~100px at 390). On narrow screens the name gets its own
   line, with age and the remove button beneath it — the one place the phone
   layout deliberately differs from the design. */
@media (max-width: 440px) {
  [style*="grid-template-columns:minmax(0,1fr) 110px 44px"] { grid-template-columns:minmax(0,1fr) 44px !important; }
  [style*="grid-template-columns:minmax(0,1fr) 110px 44px"] > :first-child { grid-column:1 / -1; }
}

/* The design's ≤1040px rule pads inline-flex links 12px and pulls them back
   with -12px margins (a taller tap, same layout). A link with its own padding
   keeps that padding, so only the -12px margins applied: the OPT intake's
   step chips then wrapped onto rows 24px apart and covered each other. They
   keep their own size; lpg.js gives them their tap area. */
@media (max-width:1040px) {
  a[style*="inline-flex"][style*="padding:"]:not([data-btn]):not([data-hdr-util] a) { margin-top:0; margin-bottom:0; }
}