/* Age and 18+ works (assets/age.js): the date of birth dialog, placeholders, blur mode, the settings panel and the
   order request lines. Tokens from assets/v2.css; selects and checkboxes come from assets/controls.css. */

/* ---------- date of birth dialog ---------- */
html.age-lock { overflow: hidden; }
dialog.age-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--rad-l);
  background: var(--surface); color: var(--text); box-shadow: 0 40px 120px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--hair); overflow: auto; }
dialog.age-dlg::backdrop { background: rgba(3, 3, 7, .7); }
[data-theme="light"] dialog.age-dlg::backdrop { background: rgba(20, 20, 28, .42); }
@media (prefers-reduced-motion: no-preference) { dialog.age-dlg[open] { animation: age-in var(--t-panel) var(--ease-out) both; } }
@keyframes age-in { from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.age-dlg-body { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.age-dlg-body h2 { margin: 0; font: 800 var(--fs-h2)/1.2 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }
.age-dlg-p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--muted); }
.age-dlg-act { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-1); }
.age-dlg-act .btn { min-height: var(--ctl); justify-content: center; }
.age-dlg-link { justify-self: start; font-size: var(--fs-sm); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.age-dlg-link:hover { color: var(--text); }
.age-err { margin: 0; font-size: var(--fs-sm); color: var(--bad-ink); }
.age-err[hidden] { display: none; }
@media (max-width: 560px) {
  .age-dlg-body { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .age-dlg-act .btn { flex: 1 1 auto; }
}

/* month / day / year */
.age-dob { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); gap: var(--sp-2); min-width: 0; max-width: 460px; }
.age-dob select { width: 100%; min-width: 0; }
.age-in { box-sizing: border-box; width: 100%; min-width: 0; height: var(--ctl); padding: 0 16px; border-radius: 999px; font: inherit; font-size: 1rem; color: var(--text);
  background: linear-gradient(180deg, rgba(var(--lg-ink, 255, 255, 255), .02), rgba(var(--lg-ink, 255, 255, 255), .06)); border: 1px solid rgba(var(--lg-ink, 255, 255, 255), .12); }
[data-theme="light"] .age-in { background: #fff; border-color: rgba(0, 0, 0, .12); }
.age-in::placeholder { color: var(--muted); opacity: 1; }
.age-in:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.age-in-why { max-width: 460px; }

/* ---------- placeholders (portfolio .pw-empty panel) ---------- */
.age-gate-panel { margin-top: var(--sp-2); }

/* ---------- blur mode ---------- */
.age-blur-host { position: relative; overflow: hidden; }
.age-blur { filter: blur(28px) saturate(.8); transform: scale(1.08); }
@media (prefers-reduced-transparency: reduce) { .age-blur { filter: brightness(0); } }
.age-show { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ctl); padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 var(--fs-sm)/1 "Hanken Grotesk", system-ui, sans-serif; color: #fff; background: rgba(12, 12, 17, .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.age-show .ico { width: 18px; height: 18px; }
.age-show:hover { background: rgba(12, 12, 17, .74); }
.age-show:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Settings > Age and 18+ works ---------- */
.cs-age { display: grid; gap: var(--sp-4); align-content: start; }
.age-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin: 0; }
.age-rows dt { margin: 0; font: 600 var(--fs-sm)/1.5 "Hanken Grotesk", system-ui, sans-serif; color: var(--text); }
.age-rows dd { display: grid; gap: var(--sp-3); margin: 0; min-width: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.age-lockline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.age-lockline .ico { width: 16px; height: 16px; flex: none; }
.age-note { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.age-mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.age-mode-row .ff-label { margin: 0; }
@media (max-width: 560px) {

  .age-rows dd + dt { margin-top: var(--sp-2); }
  .age-mode-row .age-segc { flex: 1 1 100%; }
}

/* ---------- order request lines ---------- */
.age-req-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.age-req-note .ico { width: 18px; height: 18px; flex: none; }
.age-req-note.is-bad { color: var(--bad-ink); }

/* ---------- owner: client card ---------- */
.age-own { display: grid; gap: var(--sp-2); justify-items: start; }
.age-log { margin: 0; padding: 0 0 0 18px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.age-rules a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }