/* pages.css: the small standalone pages (/login, /patron, /account) and the read pages
   (/terms, /privacy). The same world as styles.css, with the tokens and the font from
   tokens.css (loaded first by every page). Structural values are repeated here because these
   pages do not load styles.css (it lays out the chat shell). */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15.5px; line-height: 1.55; letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; min-height: 100dvh;
}
::selection { background: var(--accent-tint); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; font-size: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input { caret-color: var(--accent); }
::placeholder { color: var(--ink-3); opacity: 1; }
.inner { width: 100%; max-width: var(--col); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* band */
.band { flex: none; background: var(--band); color: var(--ink); border-bottom: 1px solid var(--rule); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.wordmark { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.wordmark a { color: var(--ink); text-decoration: none; }
.masthead-nav { display: flex; align-items: center; gap: 14px; font-size: .84rem; font-weight: 500; }
.masthead-nav a, .masthead-nav button { color: var(--ink-2); text-decoration: none; background: transparent; border: 0; padding: 0; cursor: pointer; }
.masthead-nav a:hover, .masthead-nav button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.theme-mark {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid transparent !important; border-radius: 999px; color: var(--ink-2) !important;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.theme-mark svg { width: 15px; height: 15px; display: block; }
.theme-mark:hover, .theme-mark:focus-visible { border-color: var(--accent) !important; color: var(--accent-hover) !important; background: var(--accent-tint); text-decoration: none !important; }

/* the sheet */
main.sheet { flex: 1; padding: 32px 0 40px; }
.page-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.sub { margin: 0 0 18px; max-width: 60ch; color: var(--ink-2); text-wrap: pretty; }
.note { border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); color: var(--ink); padding: 12px 14px; margin: 0 0 18px; max-width: 60ch; font-size: .92rem; }
.note[hidden] { display: none; }
form.typed { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .88rem; font-weight: 500; color: var(--ink); }
.field input {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--ink); font: inherit; letter-spacing: inherit; padding: 10px 12px;
  -webkit-appearance: none; appearance: none; outline: none; width: 100%; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.btn {
  display: inline-block; align-self: flex-start; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r); padding: 10px 18px;
  font: inherit; letter-spacing: inherit; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.secondary { background: var(--well); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
:root[data-theme="dark"] .btn.secondary:hover { color: var(--ink); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.msg { font-size: .92rem; margin: 12px 0 0; min-height: 1.2em; max-width: 60ch; }
.msg.err { color: var(--danger); font-weight: 600; }
.msg.ok { color: var(--accent-hover); font-weight: 600; }
:root[data-theme="dark"] .msg.ok { color: #8fd3b4; }
.hint { color: var(--ink-2); font-size: .88rem; margin-top: 28px; max-width: 60ch; }
.hint a { color: var(--accent); }

/* the subscription record (account): key and value on hairlines */
.record { list-style: none; margin: 0 0 20px; padding: 0; max-width: 520px; border-top: 1px solid var(--rule); }
.record li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.record .k { flex: none; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.record .v { flex: 0 1 auto; text-align: right; overflow-wrap: anywhere; }
.record .v .stamp { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-hover); font-size: .78rem; font-weight: 500; }
:root[data-theme="dark"] .record .v .stamp { background: transparent; border: 1px solid var(--accent); }

/* appearance: the three-state control on the account page (theme.js fills it) */
.appearance { margin: 26px 0 0; max-width: 520px; }
.appearance-label { font-size: .9rem; font-weight: 500; color: var(--ink-2); margin: 0 0 8px; }
.appearance-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); padding: 3px; gap: 2px; }
.appearance-seg button {
  font: inherit; letter-spacing: inherit; font-size: .88rem; font-weight: 500; color: var(--ink-2); background: transparent; border: 0; border-radius: 7px;
  padding: 6px 14px; cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease);
}
.appearance-seg button:hover { color: var(--ink); }
.appearance-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.appearance-note { font-size: .82rem; color: var(--ink-2); margin: 8px 0 0; max-width: 52ch; }

/* read pages */
.page { padding-top: 32px; padding-bottom: 60px; }
.page h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 4px; }
.updated { color: var(--ink-2); font-size: .88rem; margin: 0 0 26px; }
.page h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 34px 0 8px; }
.page p, .page li { max-width: 66ch; text-wrap: pretty; }
.page ul { padding-left: 1.4em; }
.page li { margin: 6px 0; }
.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); padding: 14px 18px; margin: 14px 0; max-width: 66ch; }
.card p { margin: 6px 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 14px 0; }
th, td { text-align: left; padding: 9px 12px 9px 0; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
th { font-size: .85rem; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
.footer { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .88rem; }
.footer a { color: var(--accent); }
@media (min-width: 600px) { body { font-size: 16px; } .wordmark { font-size: 1.3rem; } }
@media (max-width: 480px) { table, thead, tbody, tr, th, td { display: block; } thead { display: none; } td { padding: 4px 0; border: 0; } td:first-child { font-weight: 600; padding-top: 10px; } tr { border-bottom: 1px solid var(--rule); padding-bottom: 8px; } }

/* Eric's approval points (agreement A9): hidden from visitors, shown at ?review=1 (Christo 09-25) */
.for-eric { display: none; }
html.review .for-eric { display: block; margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 8px 8px 0; color: var(--ink); }