/* Cairn — shared stylesheet for prototype/read surfaces.
   Uses CSS logical properties throughout for LTR + RTL parity. */
:root {
  --paper: #FDFCF9;
  --ink: #1A1917;
  --ink-soft: #6B6A67;
  --rule: #E8E6E1;
  --accent: #A83E32;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Serif", "Noto Serif JP", "Noto Serif SC", "Noto Serif TC",
               "Noto Serif KR", "Noto Naskh Arabic", "Noto Serif Hebrew",
               "Noto Serif Devanagari", "Noto Serif Bengali",
               "Noto Serif Tamil", "Noto Serif Telugu", "Noto Serif Gurmukhi",
               "Noto Sans Thai", Georgia, serif;
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
header {
  padding: 2rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  border-block-end: 1px solid var(--rule);
}
.wordmark { font-size: 1.25rem; font-weight: 400; letter-spacing: 0.15em; }
nav a {
  color: var(--ink-soft); text-decoration: none;
  margin-inline-start: 2rem; font-size: 0.9rem; letter-spacing: 0.05em;
}
nav a:hover { color: var(--ink); }
main {
  flex: 1; max-width: 640px; margin: 0 auto;
  padding: 12vh 2rem 8vh; width: 100%;
}
h1 { font-size: 2rem; font-weight: 400; line-height: 1.5; margin-block-end: 2.5rem; }
h2 { font-size: 1.25rem; font-weight: 400; margin-block-end: 1.5rem; letter-spacing: 0.05em; }
p { font-size: 1.05rem; margin-block-end: 1.2rem; }
.rule { border: none; border-block-start: 1px solid var(--rule); margin-block: 3rem; }
.meta { color: var(--ink-soft); font-size: 0.95rem; }
.action { margin-block-start: 3rem; text-align: center; }
.button {
  display: inline-block; padding: 0.9rem 2.5rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
  font-family: inherit; font-size: 1rem; letter-spacing: 0.1em;
  text-decoration: none; cursor: pointer;
  transition: background 300ms, color 300ms;
}
.button:hover, .button:focus { background: var(--ink); color: var(--paper); outline: none; }
.button[disabled] { opacity: 0.35; cursor: not-allowed; }
footer {
  padding: 2rem 3rem; border-block-start: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 0.85rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.lang-switch a { color: inherit; text-decoration: none; margin-inline: 0.5rem; }
.lang-switch a.active { color: var(--ink); }
.doc-nav a { color: inherit; text-decoration: none; margin-inline-end: 1.2rem; }
.doc-nav a:hover { color: var(--ink); }

/* Forms */
label { display: block; color: var(--ink-soft); font-size: 0.9rem;
  letter-spacing: 0.05em; margin: 1.5rem 0 0.5rem; }
input[type=email], input[type=text], select, textarea {
  width: 100%; padding: 0.8rem 0; border: none;
  border-block-end: 1px solid var(--rule);
  background: transparent; color: var(--ink); font: inherit; outline: none;
}
input:focus, select:focus, textarea:focus { border-block-end-color: var(--ink); }
textarea { resize: none; line-height: 1.8; border: 1px solid var(--rule); padding: 1rem; }
.counter { color: var(--ink-soft); font-size: 0.85rem; text-align: end; margin-block-start: 0.4rem; }
.counter.over { color: var(--accent); }

/* Reading surface */
.page-head { color: var(--ink-soft); font-size: 0.85rem;
  letter-spacing: 0.15em; text-transform: uppercase; margin-block-end: 3rem; }
.entry {
  font-size: 1.5rem; line-height: 1.7; font-weight: 400;
  margin-block: 4rem;
}
.entry.retracted { color: var(--ink-soft); font-style: italic; }
.byline { color: var(--ink-soft); font-size: 0.9rem; margin-block-start: 2rem; }
.byline a { color: inherit; }

/* Per-entry direction: an entry in its author's language may flow opposite
   the surrounding UI. isolate + explicit text-align keeps it predictable. */
.entry { unicode-bidi: isolate; }
.entry[dir="rtl"] { text-align: right; }
.entry[dir="ltr"] { text-align: left; }

/* Confirm steps */
.step { border: 1px solid var(--rule); padding: 2rem; margin-block-end: 1.5rem; }
.step.done { opacity: 0.5; }
.step h3 { font-weight: 400; font-size: 1rem; letter-spacing: 0.1em;
  color: var(--ink-soft); text-transform: uppercase; margin-block-end: 1rem; }
.step .final { font-size: 1.3rem; line-height: 1.7; color: var(--ink); }

/* Small screens */
@media (max-width: 520px) {
  header, footer { padding: 1.5rem 1.5rem; }
  main { padding: 6vh 1.5rem 4vh; }
  h1 { font-size: 1.6rem; }
  nav a { margin-inline-start: 1rem; font-size: 0.85rem; }
  footer { flex-direction: column; align-items: flex-start; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Language selector (root index.html)
   Vertically and horizontally centred grid; the wordmark sits above.
   No decorative ornaments between cells; the typography itself does the work.
   ────────────────────────────────────────────────────────────────────────── */
.lang-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 2rem;
  text-align: center;
}
.lang-page .wordmark {
  font-size: 1.5rem;
  letter-spacing: 0.25em;
  font-weight: 400;
  margin-block-end: 4rem;
  color: var(--ink);
}
.lang-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 12rem));
  column-gap: 3rem;
  row-gap: 2rem;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.lang-grid li { text-align: center; }
.lang-grid a {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-block-end: 1px solid transparent;
  transition: border-color 250ms ease, color 250ms ease;
}
.lang-grid a:hover,
.lang-grid a:focus {
  color: var(--accent);
  border-block-end-color: var(--rule);
  outline: none;
}
@media (max-width: 900px) {
  .lang-grid { grid-template-columns: repeat(3, minmax(7rem, 11rem)); column-gap: 2rem; }
}
@media (max-width: 640px) {
  .lang-grid { grid-template-columns: repeat(2, minmax(6rem, 10rem)); column-gap: 1.5rem; row-gap: 1.5rem; }
  .lang-page .wordmark { margin-block-end: 3rem; }
}
@media (max-width: 380px) {
  .lang-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 1.2rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Write success page: section heads, proof frame, invitation list
   ────────────────────────────────────────────────────────────────────────── */
.section-head {
  margin-block-start: 3rem;
  margin-block-end: 1rem;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.proof-frame {
  border: 1px solid var(--rule);
  padding: 2rem 1rem;
  margin-block: 1.5rem;
  text-align: center;
  background: var(--paper);
  position: relative;
}
.proof-frame::before,
.proof-frame::after {
  content: "";
  position: absolute;
  inset-inline: 1.5rem;
  height: 1px;
  background: var(--rule);
}
.proof-frame::before { inset-block-start: 0.6rem; }
.proof-frame::after  { inset-block-end: 0.6rem; }
.proof-hash {
  font-family: "Courier New", "DejaVu Sans Mono", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.6;
}
.proof-warning {
  color: var(--accent);
  font-style: italic;
}
.invitation-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.invitation-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-block-end: 1px solid var(--rule);
}
.invitation-list li:last-child { border-block-end: none; }
.invitation-code {
  font-family: "Courier New", "DejaVu Sans Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.copy-button {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 200ms, color 200ms;
}
.copy-button:hover,
.copy-button:focus {
  border-color: var(--ink);
  color: var(--ink);
  outline: none;
}
.error-text { color: var(--accent); }
.field-hint { font-size: 0.85rem; margin-block-start: 0.3rem; color: var(--ink-soft); }

/* Share buttons on the success page (post-write) */
.share-buttons {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-block: 1rem 2rem;
}
.share-btn {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.share-btn:hover, .share-btn:focus {
  border-color: var(--ink);
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Reading mode (notebook): stacked layout — number above text, byline below
   ────────────────────────────────────────────────────────────────────────── */
.reading-main {
  max-width: 720px;
}
.reading-entry {
  padding-block: 3.5rem;
  border-block-end: 1px solid var(--rule);
  text-align: start;
}
.reading-entry:last-child { border-block-end: none; }
.reading-number {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-block-end: 1.2rem;
  text-transform: uppercase;
}
.reading-text {
  font-size: 1.4rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--ink);
  margin-block: 0;
}
.reading-byline {
  margin-block-start: 2.5rem;
  padding-block-start: 1rem;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.reading-byline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--rule);
}
.reading-text.retracted { color: var(--ink-soft); font-style: italic; }
.reading-number-link { color: inherit; text-decoration: none; border-block-end: 1px solid transparent; transition: border-color 200ms; }
.reading-number-link:hover { border-block-end-color: var(--ink-soft); }
.reading-filters {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  margin-block: 1.5rem 2.5rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--rule);
  align-items: center;
}
.reading-filters label {
  margin: 0; color: var(--ink-soft);
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.reading-filters select {
  width: auto; min-width: 5rem;
  padding: 0.4rem 0.5rem;
  border: none; border-block-end: 1px solid var(--rule);
  background: transparent; color: var(--ink);
  font: inherit; font-size: 0.9rem;
}
@media (max-width: 520px) {
  .reading-entry { padding-block: 2.5rem; }
  .reading-text { font-size: 1.15rem; line-height: 1.7; }
  .reading-byline { margin-block-start: 2rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Ledger / voting page
   ────────────────────────────────────────────────────────────────────────── */
.report-figures { margin-block: 1.5rem; }
.report-body p { margin-block-end: 1rem; }
.vote-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.vote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-block-end: 1px solid var(--rule);
}
.vote-row:last-child { border-block-end: none; }
.vote-label { flex: 1; min-width: 0; }
.vote-label .meta { font-size: 0.85rem; margin-block-start: 0.2rem; word-break: break-word; }
.vote-percent { display: flex; align-items: center; gap: 0.4rem; }
.vote-percent input[type=number] {
  width: 4.5rem;
  text-align: end;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}
.vote-percent input[type=number]:focus { border-color: var(--ink); outline: none; }
@media (max-width: 520px) {
  .vote-row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .vote-percent { justify-content: flex-end; }
}

/* Distribution display (transparency page, read-only tally) */
.distribution-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.distribution-row { padding-block: 1rem; border-block-end: 1px solid var(--rule); }
.distribution-row:last-child { border-block-end: none; }
.distribution-head { font-weight: 400; }
.distribution-bar {
  margin-block: 0.5rem;
  background: var(--rule);
  height: 4px;
  position: relative;
}
.distribution-fill {
  background: var(--ink);
  height: 100%;
  transition: width 400ms ease;
}
.distribution-meta { font-size: 0.85rem; }

/* ──────────────────────────────────────────────────────────────────────────
   Print: produce a clean printable receipt of the success page
   ────────────────────────────────────────────────────────────────────────── */
@media print {
  /* hide chrome / interactive elements */
  header, footer, nav, .no-print, .copy-button { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: 100%; padding: 1cm 1.5cm; }
  h2, h3 { page-break-after: avoid; }
  .proof-frame {
    border: 2px solid #000;
    background: #fff;
    page-break-inside: avoid;
  }
  .proof-frame::before, .proof-frame::after { background: #000; }
  .proof-hash { color: #000; font-size: 1rem; }
  .proof-warning { color: #000; font-style: italic; }
  .invitation-list li { border-color: #000 !important; }
  .invitation-code { color: #000; }
  a { color: #000; text-decoration: none; }
  /* header bar showing site identity at the top of the printout */
  main::before {
    content: "Cairn  ·  one stone, one life";
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 0.5cm;
    margin-bottom: 1cm;
  }
}