/* style.css — one small stylesheet, no framework, dark by preference.
   Both schemes are defined so the shell looks deliberate either way. */

:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #d9dde3;
  --ink: #16191d;
  --muted: #5d666f;
  --accent: #2f6fd0;
  --accent-ink: #ffffff;
  --ok: #1c7c4a;
  --warn: #9a5b00;
  --bad: #b3261e;
  --code-bg: #eef1f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151a;
    --panel: #1a1f26;
    --line: #2b323c;
    --ink: #e7ecf2;
    --muted: #98a3b0;
    --accent: #6ea8ff;
    --accent-ink: #0d1116;
    --ok: #62d29a;
    --warn: #e8b25c;
    --bad: #ff8a80;
    --code-bg: #0f1318;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1.5rem 1rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

.tagline {
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1rem;
}

.panel[hidden] {
  display: none;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.75rem 0 0.25rem;
}

input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

input[inputmode="numeric"] {
  letter-spacing: 0.3em;
  font-size: 1.2rem;
}

.row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

button {
  font: inherit;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
}

.status {
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--code-bg);
  font-size: 0.9rem;
  min-height: 1.2rem;
}

.status.ok {
  border-color: var(--ok);
  color: var(--ok);
}

.status.warn {
  border-color: var(--warn);
  color: var(--warn);
}

.status.bad {
  border-color: var(--bad);
  color: var(--bad);
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.steps li[aria-current="step"] {
  color: var(--ink);
  font-weight: 600;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.45;
  max-height: 24rem;
}

footer {
  max-width: 34rem;
  margin: 2rem auto 0;
  color: var(--muted);
  font-size: 0.85rem;
}

a {
  color: var(--accent);
}

/* ── messages (build order step 3) ─────────────────────────────────────────
   Same tokens as everything else, so the chat inherits both colour schemes
   without a second palette. */

.row.compact {
  margin-top: 0.5rem;
  flex-wrap: nowrap;
}

.row.compact input,
.row.compact select {
  flex: 1 1 auto;
  min-width: 0;
}

select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

h3 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--muted);
}

.conversations {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

button.convo {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

button.convo.active {
  border-color: var(--accent);
}

h4 {
  font-size: 0.85rem;
  margin: 1rem 0 0.4rem;
  color: var(--muted);
}

/* The member list: one row per leaf in the ratchet tree, with its remove
   control. Build order step 4. */
.members {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.members li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.members button {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.member-who {
  word-break: break-all;
}

/* Mute, Block and Remove, in that order: the two reversible ones first. The
   row wraps rather than squeezing, because three controls and an email address
   do not fit across a phone. */
.member-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.members li {
  flex-wrap: wrap;
}

/* The four mute durations, revealed under the person they apply to. */
.mute-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  flex-basis: 100%;
  margin-top: 0.2rem;
}

.mute-choices .hint {
  margin: 0;
  flex-basis: 100%;
}

/* A folded message from a muted person. Quiet, but present: the whole point is
   that it is visible as something that arrived, unlike a blocked message, which
   never reached this device at all. */
.msg.muted {
  opacity: 0.7;
  border-style: dashed;
}

.msg-folded {
  font-size: 0.85rem;
  color: var(--muted);
}

.msg.muted button {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}

.messages {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  padding: 0.6rem;
  min-height: 8rem;
  max-height: 20rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 85%;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.92rem;
}

.msg.mine {
  align-self: flex-end;
  border-color: var(--accent);
}

.msg.theirs {
  align-self: flex-start;
}

.msg-who {
  font-size: 0.72rem;
  color: var(--muted);
}

.msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── attachments and receipts (spec §6, §5a) ─────────────────────────────── */

/* Every colour below is a variable, so both schemes are covered by the two
   blocks at the top of this file rather than by a second set of rules. */

.att {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.att-name {
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.att-image {
  max-width: 100%;
  max-height: 16rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--code-bg);
  object-fit: contain;
}

.att-link {
  color: var(--accent);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.att .hint {
  margin: 0;
  font-size: 0.72rem;
}

.attach-progress {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Delivered comes from the server (it deleted a delivery cursor); read comes
   out of an encrypted watermark. Sent is deliberately the quietest of the
   three, because it is the state that means "nobody has it yet". */
.msg-state {
  align-self: flex-end;
  font-size: 0.68rem;
  color: var(--muted);
}

.msg-state.delivered {
  color: var(--ink);
}

.msg-state.read {
  color: var(--ok);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
}

.check input {
  width: auto;
  margin: 0;
}

/* ── "stay unlocked on this device" ──────────────────────────────────────────
   Boxed and inset so the checkbox and the sentence explaining what it costs
   read as one thing. The warning is the point of the control, not fine print
   underneath it, so it is not shrunk or greyed further than a .hint already is
   and it sits inside the same border. */
.remember {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  margin: 0.7rem 0 0;
}

.remember .check {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.remember .row.compact {
  align-items: center;
  margin: 0.5rem 0 0;
}

.remember .row.compact label {
  margin: 0;
  flex: 0 0 auto;
}

.remember select {
  width: auto;
}

.remember .hint {
  margin: 0.5rem 0 0;
}

/* ── settings and honesty panel (build order step 8) ─────────────────────────
   Every colour below is a variable, so the dark block at the top of this file
   covers all of it: there is no second set of rules to keep in step. */

.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  margin: 0.9rem 0 0;
  background: var(--bg);
}

.card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--ink);
}

.card .hint {
  margin: 0;
}

.card .row {
  margin-top: 0.6rem;
}

.card .check {
  margin: 0 0 0.4rem;
}

/* The honesty list (spec §7). A list rather than a paragraph because these are
   separate claims and each one is meant to be read on its own. */
.hint.plain {
  margin: 0;
  padding-left: 1.05rem;
}

.hint.plain li {
  margin: 0 0 0.4rem;
}

.hint.plain li:last-child {
  margin-bottom: 0;
}