/* ============================================================================
   The Janus Gate — Writing Assistant
   Theme: SLATE — soft blue-grey, low contrast. Chosen by Chris Falla from the
   eight-scheme picker (mockup/theme-picker.html), 4 Sep 2026.
   A quiet study: neutral charcoal surfaces, parchment-cool ink, steel accents.
   All colours in :root. System/self-hosted fonts only (SPEC 10).
   ========================================================================== */

:root {
  /* surfaces — near-neutral charcoal with a cool cast */
  --paper:   #17191c;
  --paper-2: #1a1c20;
  --card:    #1e2126;
  --card-2:  #22252b;
  --sunken:  #1c1f24;
  --field:   #191b1f;

  /* ink */
  --ink:       #e1e4e8;
  --ink-soft:  #c6cbd2;
  --ink-dim:   #9ba2ab;
  --ink-faint: #70767f;

  /* structure */
  --line:      #2b2f35;
  --line-soft: #23262b;

  /* accents */
  --accent:      #a9b6c4;   /* steel blue-grey — links, buttons, highlights */
  --accent-soft: #8492a1;
  --accent-ink:  #14171b;   /* text on accent fills */

  /* status colours (kept legible on slate) */
  --green:       #8fbb9d;   /* OK / ACCEPTED */
  --amber:       #c9a24a;   /* REVIEW */
  --red:         #cd7b6d;   /* BROKEN / errors */
  --proposed:    #b8c2ce;   /* PROPOSED badges — quiet silver-blue, as picker */
  --reddot:      #c9756a;   /* unpaid promise marker */
  --muted:       #6f7680;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.22), 0 6px 20px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

/* ---------------------------------------------------------------- header */

header.top {
  border-bottom: 1px solid var(--line-soft);
  background: var(--card);
}
header.top .wrap {
  max-width: 68rem; margin: 0 auto; padding: 1rem 1.4rem;
  display: flex; align-items: baseline; gap: .8rem;
}
header .brand {
  font-size: 1.35rem; font-weight: bold; letter-spacing: .02em;
}
header .sub {
  color: var(--accent); font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase;
}
header .logout { margin-left: auto; }

/* ---------------------------------------------------------------- layout */

main { max-width: 68rem; margin: 2rem auto 3.5rem; padding: 0 1.4rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.9rem;
  margin-bottom: 1.4rem;
}

h1 {
  font-size: 2rem; line-height: 1.2; margin: .1rem 0 .6rem;
  font-weight: bold; letter-spacing: .01em;
}
h2 {
  font-size: 1.25rem; margin: .2rem 0 .8rem;
  color: var(--ink); letter-spacing: .01em;
}
h3 { font-size: 1.08rem; margin: .2rem 0 .5rem; }

.overline {
  margin: 0 0 .4rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft);
}

/* ---------------------------------------------------------------- text */

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(169,182,196,.35);
  transition: border-color .15s ease, color .15s ease; }
a:hover { color: #c6d2de; border-bottom-color: rgba(198,210,222,.7); }

.quiet { color: var(--ink-dim); font-style: italic; }
.error { color: var(--red); }
code {
  background: var(--sunken); padding: .05rem .4rem; border-radius: 5px;
  font-family: Consolas, monospace; font-size: .85em; color: var(--ink-soft);
}
pre {
  background: var(--sunken); border: 1px solid var(--line-soft);
  padding: .9rem 1.1rem; border-radius: 8px; overflow-x: auto; white-space: pre-wrap;
  color: var(--ink-soft);
}
pre.diff { max-height: 30rem; overflow-y: auto; font-size: .85rem; }

/* ---------------------------------------------------------------- forms */

label { display: block; margin: .8rem 0; color: var(--ink-soft); }

input[type=text], input[type=password] {
  width: 100%; padding: .55rem .75rem; font: inherit; color: var(--ink);
  background: var(--field); border: 1px solid var(--line);
  border-radius: 7px; margin-top: .15rem;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  outline: none; border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(169,182,196,.12);
}
input::placeholder { color: var(--ink-faint); font-style: italic; }

button {
  font: inherit; background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: 7px;
  padding: .5rem 1.2rem; cursor: pointer; font-weight: bold;
  transition: filter .15s ease;
}
button:hover { filter: brightness(1.1); }
button:active { filter: brightness(.95); }

.quietbtn {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
}
.quietbtn:hover { border-color: var(--accent-soft); color: var(--ink); filter: none; }

textarea {
  width: 100%; font: inherit; padding: .55rem .75rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 7px;
}

/* ---------------------------------------------------------------- tabs */

nav.tabs {
  display: flex; gap: .1rem; flex-wrap: wrap;
  max-width: 68rem; margin: 1.2rem auto 0; padding: 0 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}
nav.tabs a {
  text-decoration: none; border-bottom: none;
  color: var(--ink-dim); font-size: .95rem;
  padding: .45rem 1rem .5rem;
  border-radius: 9px 9px 0 0;
  position: relative; top: 1px;
}
nav.tabs a:hover { color: var(--ink); background: rgba(169,182,196,.06); }
nav.tabs a.active {
  color: var(--accent);
  background: var(--card-2);
  border: 1px solid var(--line-soft); border-bottom-color: var(--card-2);
}

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  font-size: .72rem; letter-spacing: .09em;
  padding: .12rem .55rem .16rem; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim); background: transparent;
  vertical-align: middle; text-transform: uppercase; font-style: normal;
}
.badge.accepted { color: var(--green); border-color: rgba(143,187,157,.45); }
.badge.proposed { color: var(--proposed); border-color: rgba(169,182,196,.38); }
.badge.missing  { color: var(--muted); border-color: var(--line); }
.badge.ok      { color: var(--green); border-color: rgba(143,187,157,.45); }
.badge.review  { color: var(--amber); border-color: rgba(201,162,74,.45); }
.badge.broken  { color: var(--red);  border-color: rgba(205,123,109,.5); }

/* ---------------------------------------------------------------- tables */

table.chapters { width: 100%; border-collapse: collapse; }
table.chapters th {
  text-align: left; padding: .4rem .6rem;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: normal;
  border-bottom: 1px solid var(--line);
}
table.chapters td {
  padding: .68rem .6rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.chapters tr:last-child td { border-bottom: none; }
table.chapters tbody tr { transition: background .12s ease; }
table.chapters tbody tr:hover { background: rgba(169,182,196,.05); }
td.num { color: var(--ink-dim); white-space: nowrap; }
a.chapter-link { font-size: 1.02em; }
td.era { font-size: .92em; }

/* ---------------------------------------------------------------- login */

.login-card { max-width: 24rem; margin: 5rem auto; }
.login-card h1 { margin-bottom: .2rem; }

/* ---------------------------------------------------------------- home title page */

.titlepage { text-align: center; padding: 2.6rem 2rem 2.3rem; }
.titlepage h1 { font-size: 2.5rem; margin: .2rem 0 .5rem; }
.titlepage .tagline { color: var(--ink-soft); font-style: italic; margin: .2rem 0 .3rem; }
.titlepage .quiet { font-size: .9rem; }
.titlepage::after {
  content: "~ · ~"; display: block; margin-top: 1.1rem;
  color: var(--accent-soft); letter-spacing: .4em; font-size: .85rem;
}

/* ---------------------------------------------------------------- chapter page */

.chapter-head { max-width: 46rem; margin: 0 auto 1.4rem; padding: 0 .4rem; }
.chapter-head h1 { font-size: 1.9rem; }
.chapter-head .summary { color: var(--ink-soft); font-style: italic; }

.prose-card .padlock { margin: 0 0 1rem; font-size: .92rem; }

.prose {
  max-width: 40rem; margin: 0 auto;
  font-size: 1.06rem; line-height: 1.85;
}
.prose p { margin: .85rem 0; }
.prose p:first-child::first-letter {
  font-size: 2.6em; line-height: .85; float: left;
  padding: .08em .12em 0 0; color: var(--accent);
}
.prose em { color: var(--ink); }

/* lock points — numbered, calm, structured */
.lock-card .lockpt {
  display: flex; gap: .9rem;
  margin: 1.05rem 0; padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
}
.lock-card .lockpt:last-of-type { border-bottom: none; padding-bottom: .3rem; }
.locknum {
  flex: 0 0 1.7rem; height: 1.7rem; margin-top: .15rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(169,182,196,.4); border-radius: 50%;
  color: var(--accent); font-size: .85rem;
}
.locklabel {
  display: block; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: .25rem;
}
.locktext { color: var(--ink-soft); }
.formnote { margin-left: .8rem; font-size: .92rem; }
.editline { margin: 1rem 0 0; }

/* ---------------------------------------------------------------- chain */

.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 50rem) { .join-grid { grid-template-columns: 1fr; } }
.join { border-left: 4px solid var(--line); }
.join.ok     { border-left-color: var(--green); }
.join.review { border-left-color: var(--amber); }
.join.broken { border-left-color: var(--red); }
.join h3 { margin-bottom: .8rem; }
.ok-line { color: var(--green); }

/* ---------------------------------------------------------------- promises */

.reddot {
  display: inline-block; width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--reddot); vertical-align: middle;
  box-shadow: 0 0 6px rgba(201,117,106,.5);
}
.promises details summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.promises input[type=text], .promises select {
  font: inherit; font-size: .92rem; padding: .3rem .5rem; margin: .2rem .35rem .2rem 0;
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); background: var(--field);
}
.promises select { padding: .3rem .35rem; }
.promises button { padding: .3rem .9rem; font-size: .92rem; }

/* ---------------------------------------------------------------- questions */

.question input[type=text] { width: 60%; }
.question form { margin: .5rem 0; }
.inline { display: inline-block; margin-left: .5rem; }

/* ---------------------------------------------------------------- decisions */

.decision { border-bottom: 1px solid var(--line-soft); padding: .6rem 0; }
.decision:last-child { border-bottom: none; }
.decision b { color: var(--ink-soft); font-weight: normal; }

/* ---------------------------------------------------------------- export */

.btnlike {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  padding: .5rem 1.15rem; border-radius: 7px; text-decoration: none; border-bottom: none;
  font-weight: bold; transition: filter .15s ease;
}
.btnlike:hover { filter: brightness(1.1); }
.btnlike.quietbtn { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btnlike.quietbtn:hover { border-color: var(--accent-soft); color: var(--ink); filter: none; }

/* ---------------------------------------------------------------- misc */

ul { padding-left: 1.3rem; }
li { margin: .25rem 0; }
hr { border: none; border-top: 1px solid var(--line-soft); }