/* VowPress site theme: the newspaper identity (blackletter brand, Old Standard headlines, typewriter labels) in a
   light, rounded, paper-card style with soft wedding tints. Shared by the homepage, the editor and the questionnaire;
   load it after app.css. */
@import url('/fonts/courier-prime/400.css');
@import url('/fonts/courier-prime/700.css');

:root {
  /* Near-white paper rather than beige, one quiet tint, hairline edges and soft shadows: closer to fine
     stationery than to a craft site. */
  --bg: #fafaf8;
  --paper: #ffffff;
  --surface: #ffffff;
  /* One quiet stone tint for panels and picture backdrops, a lighter note-paper for cards that sit on it, and one
     dark ink band for the showcase section and the footer. The older tint names all map onto these. */
  --tint: #f1f0ec; --tint-2: #e9e7e2; --note: #f8f7f3;
  --band: #1c1b19; --band-ink: #f2f0eb; --band-muted: #a39e94; --band-line: #38352f;
  --blush: var(--tint); --sage: var(--tint); --butter: var(--note); --sky: var(--tint); --clay: var(--tint-2);
  --red: #9b3b2c;
  --edge: #d8d5ce;
  --line: #e6e4df;
  --lift: 0 1px 2px rgba(40, 30, 20, .04), 0 18px 40px -24px rgba(40, 30, 20, .22);
  --mono: 'Courier Prime', ui-monospace, Menlo, monospace;
  --r-lg: 16px; --r-md: 12px; --r-sm: 8px;
  --radius: 8px;
  --warn-soft: var(--butter);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15130f; --paper: #1e1b17; --surface: #1e1b17;
    --tint: #201e1a; --tint-2: #26231f; --note: #23211d;
    --band: #0e0d0b; --band-ink: #efe9de; --band-muted: #9d968a; --band-line: #2e2a25;
    --blush: var(--tint); --sage: var(--tint); --butter: var(--note); --sky: var(--tint); --clay: var(--tint-2);
    --red: #e7988a; --edge: #3d372f; --line: #332e27;
    --lift: 0 18px 40px -24px rgba(0, 0, 0, .7);
  }
}
body { background: var(--bg); }
input[type=text], input[type=date], input[type=email], input[type=number], textarea, select { border-radius: var(--r-sm); background-color: var(--paper); }
.btn { border-radius: 999px; }
.btn.small { padding: 6px 18px; }
.btn.secondary { border-color: var(--ink); }
.display { font-family: var(--headline); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
.script-word { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.mono { font-family: var(--mono); }
.tag { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 3px 10px; border: 1px solid var(--edge); border-radius: 4px; background: var(--paper); color: var(--ink); }
.card2 { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--lift); }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-link { color: var(--ink); text-underline-offset: 3px; }
.notice { border-radius: var(--r-sm); border-color: var(--line); background: var(--tint); }
.notice.error { background: var(--blush); border-color: var(--err); }
.notice.ok { background: var(--sage); border-color: var(--edge); }
.chip span { border-radius: 999px; }
.topbar { background: var(--bg); border-bottom-color: var(--line); }
/* Info pages (contact, privacy, terms): hairlines and a white card instead of black rules. */
.doc .box { border-color: var(--line); border-radius: var(--r-md); background: var(--paper); }
body > footer:not(.foot2) { border-top-color: var(--line); }
/* Sign-in and credits dialog (public/js/signin.js). */
.vp-modal { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 30px 26px; width: min(440px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }
.vp-modal::backdrop { background: rgba(20, 18, 15, .45); }
.vp-modal h2 { font-family: var(--headline); font-weight: 700; font-size: 28px; line-height: 1.1; margin: 0 28px 8px 0; }
.vp-modal .vp-lede { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
.vp-modal .vp-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px; }
.vp-modal .vp-form { display: grid; gap: 10px; }
.vp-modal label { font-weight: 600; font-size: 14px; margin: 0; }
.vp-modal input { font-size: 17px; }
.vp-modal #vp-code { font-family: var(--mono); letter-spacing: .3em; font-size: 22px; text-align: center; }
.vp-modal .btn { width: 100%; }
.vp-modal .vp-err { color: var(--err, #b42318); font-size: 14px; margin: 0; }
.vp-modal .vp-sent, .vp-modal .vp-small { font-size: 14.5px; color: var(--muted); margin: 0 0 4px; }
.vp-modal .vp-dev { font-size: 13.5px; background: var(--tint); border-radius: var(--r-sm); padding: 10px 12px; margin: 6px 0 0; }
.vp-modal .link-btn { justify-self: start; font-size: 14px; color: var(--muted); }
.vp-plans { display: grid; gap: 10px; }
.vp-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vp-plan:hover, .vp-plan:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }
.vp-plan[disabled] { opacity: .6; cursor: progress; }
.vp-plan.popular { border-color: var(--ink); }
.vp-plan-main { display: grid; gap: 2px; min-width: 0; }
.vp-plan-name { font-family: var(--headline); font-weight: 700; font-size: 19px; line-height: 1.2; }
.vp-plan-tag { justify-self: start; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.vp-plan-blurb { font-size: 14px; color: var(--muted); line-height: 1.35; }
.vp-plan-credits { font-size: 13px; color: var(--muted); }
.vp-plan-price { font-family: var(--headline); font-weight: 700; font-size: 22px; white-space: nowrap; }
.vp-modal .vp-refund { margin: 12px 0 2px; font-size: 13px; }
.vp-modal .vp-plans + .vp-err { margin-top: 8px; }
/* "Writing your newspaper" screen (public/js/writing.js). */
.writing-card { text-align: left !important; max-width: 440px !important; padding: 30px 30px 26px !important; border-radius: var(--r-lg); }
.writing-card .w-kicker { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.writing-card .w-title { font-family: var(--headline); font-size: 28px; line-height: 1.1; margin: 0 0 16px; }
.writing-card .w-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.writing-card .w-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; transition: color .3s; }
.writing-card .w-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--edge); flex: none; position: relative; }
.writing-card .w-steps li.now { color: var(--ink); font-weight: 600; }
.writing-card .w-steps li.now .w-dot { border-color: var(--ink); border-top-color: transparent; animation: vp-spin .9s linear infinite; }
.writing-card .w-steps li.done { color: var(--ink); }
.writing-card .w-steps li.done .w-dot { background: var(--ink); border-color: var(--ink); }
.writing-card .w-steps li.done .w-dot::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.writing-card .w-clock { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.writing-card .w-note { font-size: 13.5px; color: var(--muted); margin: 0; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .writing-card .w-steps li.now .w-dot { animation: none; border-top-color: var(--ink); } }