/* Site-wide finishing layer, loaded last: one heading style, one empty state, one notice inset, tablet widths. */
:root{--font-display:'Mersad',ui-sans-serif,system-ui,'Segoe UI',sans-serif;--polish-ink:#2b2530;--polish-muted:#766b73}
h1,h2,h3,.drawer-heading strong,.font-display{letter-spacing:0;text-transform:none}

/* Page heading: icon on a soft tile, plain bold title. */
html body main .page-heading{display:flex;align-items:center;gap:14px;margin:0 0 18px}
html body main .page-heading-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border:0;border-radius:14px;background:var(--rose,#f9e8ef)}
html body main .page-heading-icon .detail-3d-icon{width:28px;height:28px}
html body main .page-heading h1{margin:0;font-weight:700;font-size:24px;line-height:1.25;color:var(--polish-ink);overflow-wrap:anywhere}
html body main .page-heading p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--polish-muted)}

/* Section headings inside a page: plain text instead of a striped bar. */
html body main.community-page>h2,html body main .touch-section-title{margin:28px 0 12px;padding:0;border:0;border-radius:0;background:none;font-weight:700;font-size:17px;line-height:1.4;color:var(--polish-ink)}
html body main h2,html body main h3{font-weight:700}

/* Empty state: compact, no gradient card, centred. */
html body main .empty-state{margin:16px 0;padding:28px 20px;border:1px dashed var(--line,#eed0dc);border-radius:16px;background:none;text-align:center}
html body main .empty-state-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:var(--rose,#f9e8ef);box-shadow:none}
html body main .empty-state-icon .detail-3d-icon{width:30px;height:30px}
html body main .empty-state h2{margin:0 0 6px;font-weight:700;font-size:16px;line-height:1.4;color:var(--polish-ink);text-align:center}
html body main .empty-state p{margin:0 auto 14px;max-width:44ch;font-size:14px;line-height:1.6;color:var(--polish-muted)}
html body main .empty-state p:last-child{margin-bottom:0}

/* Birth-date notice: same inset as the page content, one size everywhere. */
html body .age-notice{flex-shrink:0;margin:12px 16px 16px;padding:10px 14px;border:1px solid var(--line,#eed0dc);border-radius:12px;background:#fff;color:var(--wine,#8c123e);font-size:13px;line-height:1.5}
html body .age-notice a{color:inherit;font-weight:700;text-decoration:underline}

/* File inputs: the browser button follows the site style. */
html body main input[type=file]{max-width:100%;font-size:13px;color:var(--polish-muted)}
html body main input[type=file]::file-selector-button{margin-right:12px;min-height:40px;padding:0 16px;border:1px solid var(--line,#eed0dc);border-radius:10px;background:var(--rose,#f9e8ef);color:var(--wine,#8c123e);font:600 13px/1 var(--font-sans);cursor:pointer}

/* Readable muted text and placeholders (4.5:1 on white and on the soft pink). */
html body main ::placeholder{color:#7f7379;opacity:1}

@media(max-width:599px){
html body main .page-heading{gap:12px;margin-bottom:14px}
html body main .page-heading h1{font-size:21px}
html body main .page-heading p{font-size:13px}
html body .age-notice{margin:10px 12px 12px}
}

/* Tablet: the phone column is widened so less of the screen stays empty. */
@media(min-width:600px) and (max-width:999px){
html body .touch-shell{width:min(100% - 48px,720px)}
html body .touch-bottom{width:min(calc(100% - 48px),720px)}
html body .site-footer{width:min(calc(100% - 48px),720px);margin-left:auto;margin-right:auto}
}

/* From tablet up, lone submit buttons stop stretching across the whole card. */
@media(min-width:600px){
html body main.community-page form>button:not([class]),html body main.community-page>form button:not([class]):only-of-type{width:auto;min-width:200px}
}

@media(prefers-reduced-motion:reduce){
html body main.services-page *,html body main.discover-page *,html body form.member-search *,html body .mini-chat *{transition:none}
}

/* Icon tiles keep their soft background also when they hold the 3D artwork. */
html body main .page-heading-icon:has(.detail-3d-icon){background:var(--rose,#f9e8ef);border:0}
html body main .empty-state-icon:has(.detail-3d-icon){background:var(--rose,#f9e8ef)}

/* Card titles: one size, ink colour. */
html body main.community-page section>h2,html body main.community-page section>h3{font-size:18px;line-height:1.35;color:var(--polish-ink)}

/* "Nothing here yet" panel of the community modules: the same compact look as the shared empty state. */
html body main .welcome-panel{margin:16px 0;padding:24px 20px;border:1px dashed var(--line,#eed0dc);border-radius:16px;background:none;box-shadow:none;text-align:center}
html body main .welcome-panel h2{margin:8px 0 6px;font-size:16px;line-height:1.4;color:var(--polish-ink)}
html body main .welcome-panel p{margin:0 auto;max-width:44ch;font-size:14px;line-height:1.6;color:var(--polish-muted)}

/* The hero panels of the dashboard, earnings and balance results stay cards, without the gradient. */
html body main:not(.module-page) .welcome-panel{border-style:solid;background:#fff;text-align:left}
html body main:not(.module-page) .welcome-panel p{margin-left:0}

/* Sign-in pages: the wordmark is drawn white on the wine header. */
html body.guest-auth .touch-header .brand-logo-image img{filter:brightness(0) invert(1)}

/* New album page: the artwork sits above the title instead of on top of it. */
html body .gallery-album-intro{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
html body .gallery-album-intro .detail-3d-icon,html body .gallery-album-intro>svg,html body .gallery-album-intro>img{position:static;flex:none;width:56px;height:56px;margin:0;transform:none}
html body .gallery-album-intro h1{margin:0;font-size:20px;line-height:1.3}
html body .gallery-album-intro p{margin:0}

/* Quiz rooms: the room icon was white on a transparent tile, so it could not be seen. */
html body main.quiz-page .quiz-room-icon{width:48px;height:48px;border-radius:14px;background:var(--rose,#f9e8ef);color:var(--wine,#8c123e)}
html body main.quiz-page .quiz-room-icon svg{color:var(--wine,#8c123e)}
html body main.quiz-page .quiz-room-card{background:#fff}
html body main.quiz-page .quiz-heading h1{font-size:24px;line-height:1.25;color:var(--polish-ink)}
html body main.quiz-page .quiz-heading p,html body main.quiz-page .quiz-room-card p{font-size:13px;color:var(--polish-muted)}
html body main.quiz-page .quiz-room-card small{font-size:12px}
html body main.quiz-page .quiz-summary{font-size:13px;color:var(--polish-muted)}

/* Settings: switching push off is the quieter of the two buttons. */
html body main #push-disable{border:1px solid var(--line,#eed0dc);background:#fff;color:var(--wine,#8c123e);box-shadow:none}

/* Keyboard focus is always visible on fields, also where a page removed the outline. */
html body main input:not([type=range]):not([type=checkbox]):not([type=radio]):focus-visible,html body main textarea:focus-visible,html body main select:focus-visible,html body .mini-chat .mini-chat-form textarea:focus-visible{outline:2px solid var(--wine,#8c123e)!important;outline-offset:1px}
html body form.member-search input[type=range]:focus-visible{outline:none}
html body form.member-search input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--wine,#8c123e)}
html body form.member-search input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--wine,#8c123e)}

/* The arrow-key hint of the discover card is only useful with a keyboard. */
@media(hover:none){html body main .discover-hint{display:none}}