/* Athanor — calm furnace. Dark, warm, no noise. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0d0906; --panel: #171009; --panel2: #1f150c;
  --ember: #ff8c3b; --ember-dim: #b35a1f; --gold: #e8c47a;
  --text: #e9ded0; --muted: #9a8a75; --line: #2c2013;
  --ok: #7fb069; --no: #c65f4a;
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* --- Splash: held ~4s, then a slow fade --- */
#splash {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; transition: opacity 1.4s ease;
}
#splash.fade { opacity: 0; pointer-events: none; }
#splash h1 { letter-spacing: .45em; font-weight: 300; color: var(--gold); padding-left: .45em; }
.motto { color: var(--muted); font-size: .85rem; font-style: italic; }
.ember {
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, #ffd9a0 0%, var(--ember) 34%, #7a3410 68%, transparent 72%);
  filter: drop-shadow(0 0 26px rgba(255, 140, 59, .55));
  animation: breathe 3.2s ease-in-out infinite; position: relative;
}
.ember.small { width: 56px; height: 56px; }
.flame {
  position: absolute; inset: 22%;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff3d6 0%, #ffb35e 45%, transparent 78%);
  animation: flicker 1.7s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes flicker { 0%,100% { opacity: .95; transform: translateY(0) } 50% { opacity: .7; transform: translateY(-3px) } }

/* --- Login --- */
#login {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; padding: 2rem;
}
#login h2 { font-weight: 300; letter-spacing: .3em; color: var(--gold); }
#login input {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: .8rem 1rem; border-radius: 10px; font-size: 1.1rem; text-align: center;
  letter-spacing: .2em; width: min(280px, 80vw); outline: none;
}
#login input:focus { border-color: var(--ember-dim); }
#login button {
  background: var(--ember-dim); color: #fff; border: 0; padding: .7rem 2.4rem;
  border-radius: 10px; font-size: 1rem;
}
#faceBtn { background: var(--panel2); border: 1px solid var(--ember-dim); color: var(--ember); }
.note-item { border-top: 1px solid var(--line); padding: .55rem 0; }
.note-item small { color: var(--muted); display: block; margin-bottom: .15rem; }
.err { color: var(--no); font-size: .85rem; min-height: 1.2em; }

/* --- App shell --- */
#app { height: 100%; display: flex; flex-direction: column; }
header {
  padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem;
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: .5rem;
  background: var(--panel);
}
.mark { color: var(--ember); }
header .title { letter-spacing: .25em; color: var(--gold); font-weight: 400; }
#dateline { margin-left: auto; color: var(--muted); font-size: .8rem; }

main { flex: 1; overflow-y: auto; padding: 1rem; -webkit-overflow-scrolling: touch; }

nav#tabs {
  display: flex; border-top: 1px solid var(--line); background: var(--panel);
  padding-bottom: env(safe-area-inset-bottom);
}
nav#tabs button {
  flex: 1; background: none; border: 0; color: var(--muted); padding: .55rem 0 .5rem;
  font-size: 1.15rem; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  position: relative;
}
nav#tabs button span { font-size: .65rem; letter-spacing: .08em; }
nav#tabs button.active { color: var(--ember); }
nav#tabs em {
  position: absolute; top: 2px; right: 22%; background: var(--ember); color: #1a0d02;
  font-style: normal; font-size: .65rem; font-weight: 700; border-radius: 9px;
  padding: 0 5px; min-width: 17px;
}

/* --- Content blocks --- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: .9rem;
}
.card h3 { color: var(--gold); font-size: .95rem; margin-bottom: .4rem; font-weight: 600; }
.md h1, .md h2 { color: var(--gold); font-size: 1.1rem; margin: .8rem 0 .35rem; font-weight: 600; }
.md h3, .md h4 { color: var(--gold); font-size: .95rem; margin: .7rem 0 .3rem; font-weight: 600; }
.md p { margin: .35rem 0; }
.md ul { margin: .3rem 0 .3rem 1.2rem; }
.md li { margin: .2rem 0; }
.md strong { color: var(--gold); }
.md em { color: var(--muted); }
.md a { color: var(--ember); }
.md code { background: var(--panel2); padding: 0 .3em; border-radius: 4px; font-size: .85em; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: .8rem 0; }
.muted { color: var(--muted); font-size: .85rem; }
.pill {
  display: inline-block; font-size: .7rem; letter-spacing: .06em; padding: .1rem .55rem;
  border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-right: .4rem;
}
.pill.draft { border-color: var(--ember-dim); color: var(--ember); }

.stamp-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.stamp-actions button {
  flex: 1; border: 0; border-radius: 10px; padding: .65rem; font-size: .95rem; color: #fff;
}
.approve { background: #3e5f33; } .reject { background: #6b3527; }

.list button.row {
  width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: .75rem 1rem; margin-bottom: .55rem; color: var(--text);
  font-size: .95rem;
}
.list button.row small { display: block; color: var(--muted); }

textarea#noteBox {
  width: 100%; min-height: 9rem; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: .8rem; font-size: 1rem;
  outline: none; resize: vertical;
}
button.send {
  margin-top: .7rem; width: 100%; background: var(--ember-dim); color: #fff; border: 0;
  border-radius: 10px; padding: .8rem; font-size: 1rem;
}
.flash { color: var(--ok); font-size: .85rem; margin-top: .5rem; min-height: 1.2em; }
.backlink { background: none; border: 0; color: var(--ember); font-size: .9rem; padding: 0 0 .8rem; }