/* Small screens are the baseline; wider layouts are progressive enhancements. */
:root { --page-width: 100%; --page-gutter: 12px; }
body { font-size: 16px; overflow-wrap: anywhere; }
.wrap { padding: 16px var(--page-gutter) 52px; }
.wrap > *, .card > *, form, fieldset { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
input, textarea, select, button { max-width: 100%; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select { font-size: 16px; }
input[type="file"] { display: block; width: 100%; font: inherit; line-height: 1.5; }
input::file-selector-button { min-height: 44px; max-width: 100%; white-space: normal; font: inherit; }
input[type="range"] { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
button, .btn, .assist-btn, .link-clear, button.mini { min-height: 44px; }
.btn, .assist-btn, button.mini { white-space: normal; text-align: center; overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.chip input:focus-visible + span, .swatch:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.chip { max-width: 100%; }
.chip span { min-height: 44px; white-space: normal; }
.swatch { width: 44px; height: 44px; }
.card { padding: 16px; margin-block: 14px; }
h1, h2, h3, p, dd, li, code, .alert, .hint { overflow-wrap: anywhere; }
h1 { font-size: clamp(1.6rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
.row { gap: 12px; }
.row > * { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.dash-head, .invite-top, .invite-actions, .label-row, .pad-tools, .activity-pager { flex-wrap: wrap; }
.dash-card { flex-wrap: wrap; }
.dash-info { flex-basis: 60%; }
.dash-status { margin-inline-start: auto; }
.share { flex-direction: column; align-items: stretch; }
.share input, .share .btn { width: 100%; min-width: 0; }
.qr-box { max-width: 100%; }
.qr-box img, .qr-box canvas { max-width: 100%; height: auto; }
.admin-tabs a, .member-nav a, .studio-sections a, .help-topics a { min-height: 44px; display: flex; align-items: center; }
.admin-tabs, .member-nav { gap: 8px; }
.admin-tabs a { flex: 1 1 130px; justify-content: center; text-align: center; }
.table-wrap { max-width: 100%; min-width: 0; overscroll-behavior-inline: contain; }
.admin-table td { white-space: normal; min-width: 140px; overflow-wrap: anywhere; }
.admin-table .actions-cell { min-width: 220px; }
.legal-document table { table-layout: fixed; }
.legal-document th, .legal-document td { text-align: start; padding: 8px 4px; }
.activity-summary { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.activity-summary dd { margin-block-end: 12px; }
.activity-filters label { min-width: 0; max-width: 100%; flex-basis: 100%; }
.note { transform: none; }
.note .sig img { width: auto; height: auto; }
.note .author { overflow-wrap: anywhere; }
.toast { max-width: calc(100% - 24px); width: max-content; text-align: center; border-radius: 16px; }
.verification-banner { width: calc(100% - 24px); padding: 14px; }
footer.site { padding: 18px; }
.footer-column a { min-height: 44px; display: flex; align-items: center; }
.legal-links, .wrap-narrow .legal-links { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.footer-column:last-child { grid-column: auto; }
#back-to-top { width: 44px; height: 44px; bottom: max(14px, env(safe-area-inset-bottom)); }

/* A disclosure menu preserves every destination on touch screens. Without JS,
   its contents remain visible and fully usable. */
.site-nav-wrap { padding: 10px var(--page-gutter) 0; }
.site-nav { padding: 10px 12px; border-radius: 20px; gap: 12px; }
.site-nav .brand-logo { width: 140px; }
.site-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #ded5f4; background: #f6f2ff; color: var(--brand); border-radius: 12px; padding: 8px 12px; font: inherit; font-weight: 800; }
.site-menu { width: 100%; min-width: 0; display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid #e9e3f4; }
.site-nav-links, .site-nav-right, .site-auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; min-width: 0; }
.site-nav-links a, .site-auth a { display: flex; align-items: center; min-height: 44px; white-space: normal; padding: 10px 12px; border-radius: 10px; }
.site-auth .acct-hi { display: block; white-space: normal; padding: 10px 12px; }
.site-auth .nav-feedback, .site-auth .nav-admin { display: flex; }
.site-nav .lang-switch { width: 100%; }
.site-nav .lang-switch select { width: 100%; min-height: 44px; font-size: 16px; padding: 8px 12px; border-radius: 10px; }

/* Marketing and guide sections also start as a single readable column. */
.lp-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 0; gap: 24px; }
.lp-hero h1 { font-size: clamp(2rem, 7vw, 3.25rem); }
.lp-hero p.lead { font-size: 18px; }
.lp-stack { display: none; }
.lp-cta-row > .btn { width: 100%; }
.lp-steps, .lp-features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; margin: 16px 0 24px; padding: 20px 12px; }
.lp-stat b { font-size: clamp(20px, 5vw, 26px); }
.lp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-section { padding-block: 20px; }
.lp-final { padding: 30px 18px; }
.lp-occ { min-height: 44px; max-width: 100%; }
.help-hero { padding: 24px 18px; }
.help-hero h1 { font-size: clamp(2rem, 7vw, 3.75rem); }
.help-hero p { max-width: 100%; }
.help-start ol, .help-visual-step { grid-template-columns: minmax(0, 1fr); }
.help-visual-step { padding: 18px; gap: 20px; }
.help-topics { padding: 12px; gap: 8px; }
.help-topics a { max-width: 100%; }
.member-profile-grid { grid-template-columns: minmax(0, 1fr); }
.member-actions .btn { width: 100%; }
.occasion-groups-grid { grid-template-columns: minmax(0, 1fr); }
.tpl-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
.studio-library-grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 600px) {
  :root { --page-gutter: 18px; }
  .card { padding: 22px; }
  .row > * { flex: 1 1 240px; }
  .share { flex-direction: row; }
  .share input { flex: 1; }
  .share .btn { width: auto; flex-shrink: 0; }
  .legal-links, .wrap-narrow .legal-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-summary { grid-template-columns: minmax(100px, auto) minmax(0, 1fr); gap: 8px 18px; }
  .activity-filters label { flex: 1 1 180px; }
  .lp-features, .help-start ol, .occasion-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-cta-row > .btn, .member-actions .btn { width: auto; }
  .help-hero { padding: 36px; }
  .admin-tabs a { flex: 0 1 auto; }
  .studio-library-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (min-width: 768px) {
  :root { --page-width: 94%; }
  .wrap { padding-top: 22px; }
  .lp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .legal-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .verification-banner { width: calc(var(--page-width) - 36px); }
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .member-profile-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .lp-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .help-visual-step { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding: 28px; }
  .help-start ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  :root { --page-width: 70%; }
  .site-nav { border-radius: 24px; padding: 8px 12px 8px 20px; }
  .site-menu { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 500px; width: auto; padding: 0; border: 0; justify-content: space-between; }
  .site-nav-links, .site-nav-right, .site-auth { display: flex; flex-wrap: wrap; width: auto; gap: 8px; }
  .site-nav-right { flex: 1 1 auto; justify-content: flex-end; }
  .site-auth { justify-content: flex-end; }
  .site-nav .lang-switch { width: auto; }
  .site-nav .lang-switch select { width: auto; max-width: 190px; }
  .site-nav-links a, .site-auth a { padding: 8px; }
  .site-auth .acct-hi { max-width: 220px; padding: 8px; }
  .lp-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 36px 0 20px; }
  .lp-stack { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .btn:hover, .dash-card:hover, .tpl:hover, .stat-link:hover { transform: none; }
}
/* Keep controls clear of phone notches and avoid sticky hover movement on touch. */
.wrap, .site-nav-wrap {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
@media (hover: none) {
  .btn:hover, .dash-card:hover, .tpl:hover, .stat-link:hover, .swatch:hover { transform: none; }
}