/* base.css: layout and structure only, no colour (tests/css.test.js).
 * Colour lives in clean.css under [data-theme="clean"]; the sheet's own
 * structure and token colours are in sheet.css. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
/* The site's header bar sits above #app on willperlak.com (nav.css sets
 * --wp-site-nav-h); run locally there is no bar and the fallback is 0. */
#app { min-height: calc(100dvh - var(--wp-site-nav-h, 0px)); }
.cs-appbar { display: flex; align-items: center; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 12px 16px 0; }
.cs-brand { font-weight: 700; font-size: var(--text-lg); text-decoration: none; }
.cs-appnav { display: flex; gap: 12px; margin-left: auto; }
.cs-appnav a { display: inline-flex; align-items: center; min-height: 44px; }
#main { max-width: 1240px; margin: 0 auto; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.empty { margin: 32px auto; text-align: center; }
.cs-screen h1, .cs-settings h1 { font-size: var(--text-xl); margin: 8px 0 16px; }
.cs-settings h2 { font-size: var(--text-base); margin: 24px 0 8px; }
.cs-hint { font-size: var(--text-sm); margin: 6px 0 0; }
.cs-attribution { overflow-wrap: anywhere; }

/* The brand is a link: 44 px tall on a phone or a touch screen (A3b-5). */
@media (pointer: coarse), (max-width: 559px) {
  .cs-brand { display: inline-flex; align-items: center; min-height: 44px; }
}