/* Shared chrome: reset, body, header. Page-specific styles live with their app. */
* { box-sizing: border-box; }
/* min-height + column flex keeps the footer pinned to the bottom of the
   viewport on short pages (e.g. login), instead of floating right under
   the content with empty space below it. main grows to fill the gap;
   page-specific main styles (merge.css's grid, .auth-form's centering)
   are unaffected since flex here only governs main's own sizing as a
   flex item of body, not how it lays out its own children. */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
a { color: var(--link); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.header { height: 72px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--border); position: relative; }
.left, .right { display: flex; align-items: center; }
.left { gap: 48px; }
.menu-panel { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; }
.header nav { display: flex; gap: 28px; font-size: 15px; }
.header nav a { color: var(--muted); text-decoration: none; padding: 24px 0; border-bottom: 2px solid transparent; }
.header nav a[aria-current] { color: var(--text); font-weight: 500; border-bottom-color: var(--accent); }

.site-footer { max-width: 1440px; margin: 0 auto; padding: 32px 64px 48px; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }

/* Long-form prose (privacy/terms/cookies pages): narrower than the merge
   layout, comfortable line length and spacing for reading, not scanning. */
.legal-page { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
.legal-page h1 { font-size: 34px; margin: 0 0 8px; }
.legal-page .legal-updated { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.legal-page .draft-notice { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; color: var(--text); margin: 0 0 32px; }
.legal-page h2 { font-size: 20px; margin: 36px 0 12px; }
.legal-page h3 { font-size: 16px; margin: 24px 0 8px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.7; color: var(--text); }
.legal-page ul, .legal-page ol { padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--link); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal-page th, .legal-page td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); vertical-align: top; }
.legal-page th { background: var(--well); font-weight: 600; }
.legal-page .placeholder { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 4px; padding: 0 4px; }
.legal-page code { background: var(--well); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--muted); }
.link-btn { height: 44px; display: flex; align-items: center; padding: 0 16px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; }
.soft-btn { height: 44px; display: flex; align-items: center; padding: 0 18px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-soft-text); text-decoration: none; font-weight: 600; font-size: 15px; }

.messages { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.message { padding: 12px 16px; border-radius: var(--radius-md); background: var(--well); color: var(--text); font-size: 14px; border: 1px solid var(--border); }
.message-error { border-color: color-mix(in srgb, var(--accent) 40%, red); }

/* Simple auth forms (accounts app) reuse .field/.primary from merge.css but
   need their own container width since they're not part of the merge layout.
   Wider than a typical auth form (420px -> 520px) so a full email address
   is visible without scrolling inside the input. */
.auth-form { max-width: 520px; margin: 64px auto; display: flex; flex-direction: column; gap: 24px; }
/* <form> itself isn't a flex child's concern - without this its own children
   (each .field, the submit button) have zero gap and sit flush against
   each other, regardless of .auth-form's own gap above. */
.auth-form form { display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 720px) {
  .header { padding-left: 20px; padding-right: 20px; }
  .header nav { display: none; }
  .menu-toggle { display: flex; }
  .menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 20px;
    left: 20px;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-page);
    z-index: 20;
  }
  .menu-panel.open { display: flex; }
  .menu-panel .icon-btn { align-self: flex-start; }
  .menu-panel .link-btn,
  .menu-panel .soft-btn {
    width: 100%;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-footer { padding-left: 20px; padding-right: 20px; flex-direction: column; align-items: flex-start; }
}