/* The hand-over page. Direction: calm, exact, plain-spoken, private.
   asksj.com's paper and ink; system fonts only, so nothing is loaded from anywhere else.
   Spacing on an 8px grid; one left edge; four type sizes: 31 / 18 / 16 / 14. */

:root {
  --bg: #f4f1ea;          /* warm paper (asksj.com) */
  --bg-soft: #ece7dd;
  --bg-card: #faf7f0;
  --bg-field: #fffdf9;
  --ink: #1a1814;         /* warm near-black, never #000 */
  --ink-2: #4a463e;
  --ink-3: #6a6358;       /* 5.2:1 on paper */
  --line: #d9d2c3;
  --line-field: #857e70;  /* 3.6:1 on the card: a field's edge can be seen */
  --accent: #2a726b;      /* asksj.com's teal for text and focus, 5.3:1 on paper */
  --error: #a3291f;       /* 7:1 on the card */
  --radius: 8px;          /* soft corners, never pills */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}
[hidden] { display: none !important; }
p, h1, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* one column, one left edge */
.page_wrap { max-width: 720px; margin: 0 auto; padding: 24px 24px 48px; }
.main_column { padding-top: 48px; }
.view_section > * + * { margin-top: 24px; }

.header_bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.header_brand { display: flex; align-items: center; gap: 8px; }
.header_logo { display: block; fill: var(--ink); }
.header_name { font-size: 16px; font-weight: 600; }

.lang_switch { display: flex; gap: 8px; }
.lang_button {
  min-height: 44px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; cursor: pointer;
}
.lang_button:hover { background: var(--bg-soft); color: var(--ink); }
.lang_button:active { background: var(--line); }
.lang_button[aria-pressed="true"] { border-color: var(--line-field); color: var(--ink); font-weight: 600; }

.eyebrow_text { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.heading_main { font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.heading_main:focus { outline: none; }
.eyebrow_text + .heading_main { margin-top: 8px; }
.lead_text { font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.sign_text { font-size: 14px; color: var(--ink-3); }
.lead_text + .sign_text { margin-top: 8px; }
.text-muted { font-size: 14px; color: var(--ink-3); max-width: 62ch; }

.note_card { padding: 24px; border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--bg-soft); }
.note_label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.note_text { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* a login: one card, fields stacked, labels above */
.rows_list > * + * { margin-top: 24px; }
.row_card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.row_card > * + * { margin-top: 16px; }
.row_head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row_title { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.field_group > * + * { margin-top: 8px; }
.field_label { display: block; font-size: 16px; font-weight: 600; }
.field_hint { font-size: 14px; color: var(--ink-3); }
.field_wrap { display: flex; gap: 8px; }
.field_input {
  display: block; width: 100%; min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--line-field); border-radius: var(--radius);
  background: var(--bg-field); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.5;
}
.field_input.is-area { min-height: 96px; padding: 16px; resize: vertical; }
.field_input.is-tall { min-height: 192px; font-family: var(--mono); font-size: 14px; }
.field_input.is-masked { -webkit-text-security: disc; }
.field_input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field_input:disabled { background: var(--bg-soft); color: var(--ink-3); }
.field_error { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--error); }
.field_error::before, .notice_box.is-error::before {
  content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--error); color: var(--bg-field); font-size: 12px; font-weight: 700; line-height: 1;
}

.button_primary, .button_secondary, .button_quiet {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.button_primary { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.button_primary:hover { background: #2e2a24; }
.button_primary:active { transform: translateY(1px); }
.button_secondary { border: 1px solid var(--line-field); background: transparent; color: var(--ink); }
.button_secondary:hover { background: var(--bg-soft); }
.button_secondary:active { background: var(--line); }
.button_quiet { min-height: 44px; padding: 0 16px; border: 1px solid transparent; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.button_quiet:hover { background: var(--bg-soft); color: var(--ink); }
.button_quiet:active { background: var(--line); }
/* wide enough for the longer of its two words in both languages, so the field beside it does not move */
.button_quiet.is-fixed { flex: none; min-width: 112px; min-height: 48px; border-color: var(--line-field); }
button:disabled { opacity: 0.55; cursor: default; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.paste_details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.paste_summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none; }
.paste_summary::-webkit-details-marker { display: none; }
/* the open/close sign (the flex layout takes the browser's own marker away) */
.paste_summary::after { content: "+"; flex: none; width: 24px; text-align: center; font-size: 25px; font-weight: 400; line-height: 1; color: var(--ink-2); }
.paste_details[open] > .paste_summary::after { content: "\2212"; }
.paste_summary:hover, .paste_summary:hover::after { color: var(--accent); }
.paste_body { padding-bottom: 24px; }
.paste_body > * + * { margin-top: 16px; }

.send_block { padding-top: 24px; }
.send_block > * + * { margin-top: 16px; }
.notice_box { display: flex; gap: 8px; align-items: baseline; padding: 16px; border: 1px solid var(--error); border-radius: var(--radius); background: var(--bg-card); color: var(--error); font-weight: 600; }

.done_list > li { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
/* the count and its list belong together */
.view_section > .lead_text + .done_list { margin-top: 16px; }
.receipt_card { padding: 24px; border: 1px solid var(--line-field); border-radius: var(--radius); background: var(--bg-card); }
.receipt_card > * + * { margin-top: 8px; }
.receipt_label { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.receipt_code { font-family: var(--mono); font-size: 31px; line-height: 1.3; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.receipt_help { color: var(--ink-2); max-width: 62ch; }

.footer_bar { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer_bar > * + * { margin-top: 8px; }
.footer_text { font-size: 14px; color: var(--ink-3); }

@media (min-width: 720px) {
  .page_wrap { padding: 32px 48px 64px; }
  .main_column { padding-top: 64px; }
  .view_section > * + * { margin-top: 32px; }
  .eyebrow_text + .heading_main { margin-top: 8px; }
  .lead_text + .sign_text { margin-top: 8px; }
}
@media (max-width: 480px) {
  .heading_main { font-size: 25px; }
  .receipt_code { font-size: 25px; }
  .row_card, .note_card, .receipt_card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button_primary:active { transform: none; }
}