/* Layout shared by the homepage and every tool. Load tokens.css first. */
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.page { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s5); }
@media (max-width: 640px) { .page { padding: var(--s5) var(--s4); } }

/* Masthead: title and dek left, stamp and controls right, full-width rule below */
.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.masthead h1 { margin: 0; }
.masthead .dek { margin: var(--s1) 0 0; font-style: italic; color: var(--text-muted); }
.masthead .meta { display: flex; align-items: center; gap: var(--s4); }
.masthead .meta .label { font-size: 15px; }

.back { display: inline-block; margin-bottom: var(--s3); font-variant: small-caps; letter-spacing: 0.04em; text-decoration: none; }
.back:hover { text-decoration: underline; }

.foot { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: 13px; color: var(--text-muted); }

input, select { font-size: 15px; color: var(--text); background: var(--bg); border: 1px solid var(--rule);
  padding: var(--s2) var(--s3); min-height: 36px; box-sizing: border-box; }
input:focus, select:focus { outline: none; border-color: var(--forest); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
button:hover { color: var(--walnut); border-color: var(--walnut); }

@media (prefers-reduced-motion: no-preference) {
  a, button, input { transition: color 120ms, border-color 120ms; }
}