/* assets/site.css — Didachio
   Palette: mist paper, deep ink, verdigris for action, old gold for scripture,
   and a cool-to-hot heat scale reserved for the sermon energy map. */

:root {
  --ink: #16232C;
  --ink-2: #4A5A66;
  --muted: #7E8C96;
  --paper: #EEF1EF;
  --page: #FFFFFF;
  --line: #D6DDD9;
  --line-2: #E6EBE8;
  --verd: #1E6472;
  --verd-dark: #164C57;
  --verd-soft: #DCEBEC;
  --gold: #B08A3E;
  --danger: #A83A2A;
  --heat-cool: #4C6A9C;
  --heat-warm: #E3B04B;
  --heat-hot: #C9432B;
  --cat-scripture: #B08A3E;
  --cat-exposition: #1E6472;
  --cat-story: #7A5195;
  --cat-application: #3E8A5B;
  --cat-prayer: #8FA3B5;
  --cat-transition: #C4CCC8;
  --cat-call: #C9432B;
  --cat-other: #9AA5A0;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1360px;
  --r: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--verd); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 40, "opsz" 72;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.12;
  margin: 0 0 .5rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
button, .btn { font: inherit; }
:focus-visible { outline: 2px solid var(--verd); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- chrome ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.5rem;
}
.brand { font-family: var(--serif); font-variation-settings: "SOFT" 80; font-weight: 600; font-size: 1.4rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 1.5rem; align-items: center; }
.top nav a { color: var(--ink-2); font-weight: 500; }
.top nav a.btn { color: #fff; }
.foot {
  max-width: var(--maxw); margin: 3rem auto 0; padding: 1.5rem 1.5rem 2.5rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- controls ---------- */
.btn, button.btn {
  display: inline-block; background: var(--verd); color: #fff; border: 0; border-radius: var(--r);
  padding: .62rem 1.15rem; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--verd-dark); text-decoration: none; }
.btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.quiet:hover { background: #fff; border-color: var(--ink-2); }
.btn.small { padding: .35rem .7rem; font-size: .85rem; }
.btn:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--verd); outline: none; box-shadow: 0 0 0 3px var(--verd-soft); }
textarea { resize: vertical; }
label { display: block; font-weight: 500; font-size: .88rem; margin: .9rem 0 .3rem; color: var(--ink-2); }
.hint { color: var(--muted); font-size: .85rem; }
.error { color: var(--danger); font-size: .9rem; margin-top: .6rem; min-height: 1.2em; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: .9rem;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); }

/* ---------- landing ---------- */
.hero {
  max-width: var(--maxw); margin: 2.5rem auto 0; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center;
}
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 3.8rem); max-width: 15ch; font-variation-settings: "SOFT" 60, "opsz" 144; }
.hero .lede { font-family: var(--serif); font-size: 1.28rem; color: var(--ink-2); max-width: 36ch; line-height: 1.45; }
.hero .cta { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; }
.hero .cta .hint { margin: 0; }

/* the energy map demonstration */
.heromap { background: var(--page); border: 1px solid var(--line); padding: 1.4rem 1.6rem 1.2rem; }
.heromap .hm-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; }
.heromap .hm-title b { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; }
.heromap .hm-title span { color: var(--muted); font-size: .85rem; }
.heromap .hm-foot { color: var(--ink-2); font-size: .9rem; margin: .9rem 0 0; }

.section { max-width: var(--maxw); margin: 4.5rem auto 0; padding: 0 1.5rem; }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 2.5rem; margin-top: 1.5rem; }
.tools h3 { margin-bottom: .3rem; }
.tools p { color: var(--ink-2); margin: 0; }
.tools .tier { color: var(--muted); font-size: .82rem; margin-top: .3rem; }
.tools .tier i { font-style: normal; color: var(--verd); }

.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.plan:first-child { border-left: 0; }
.plan.featured { background: var(--page); }
.plan h3 { font-size: 1.15rem; }
.plan .price { font-family: var(--serif); font-size: 2rem; margin: .2rem 0 .8rem; }
.plan .price span { font-family: var(--sans); font-size: .9rem; color: var(--muted); }
.plan ul { list-style: none; margin: 0 0 1.2rem; padding: 0; color: var(--ink-2); flex: 1; }
.plan li { padding: .3rem 0; }

/* ---------- auth ---------- */
.auth { max-width: 420px; margin: 3rem auto; padding: 0 1.5rem; }
.auth h1 { font-size: 2rem; }
.auth .switch { margin-top: 1.2rem; color: var(--ink-2); }

/* ---------- workspace ---------- */
.ws {
  max-width: var(--maxw); margin: .25rem auto 0; padding: 0 1.5rem;
  display: grid; grid-template-columns: 220px 360px minmax(0, 1fr); gap: 1.5rem; align-items: start;
}
.rail { position: sticky; top: 1rem; }
.rail-title { font-size: .8rem; color: var(--muted); padding: .4rem 0 .5rem; }
.rail .group { color: var(--muted); font-size: .78rem; padding: .9rem 0 .25rem; border-top: 1px solid var(--line); margin-top: .35rem; }
.rail .group:first-of-type { border-top: 0; margin-top: 0; padding-top: .2rem; }
.rail button {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent;
  padding: .5rem .7rem .5rem .8rem; cursor: pointer; color: var(--ink); line-height: 1.3; border-radius: 0;
}
.rail button:hover { background: rgba(255,255,255,.7); }
.rail button.on { border-left-color: var(--verd); background: var(--page); }
.rail button small { display: block; color: var(--muted); font-size: .76rem; margin-top: .1rem; }
.rail button .eng { display: inline-block; font-size: .68rem; color: var(--verd); margin-left: .35rem; vertical-align: 1px; }
.rail button.locked { color: var(--muted); }
.rail button.locked small { color: var(--gold); }

.ws .left { position: sticky; top: 1rem; }
.ws .tabs { display: flex; gap: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.ws .tabs button { background: none; border: 0; padding: .5rem 0; color: var(--muted); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ws .tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.ws textarea.manuscript {
  min-height: calc(100vh - 220px); font-family: var(--serif); font-variation-settings: "SOFT" 30, "opsz" 12;
  font-size: 1rem; line-height: 1.6; padding: 1.1rem 1.2rem; background: var(--page);
}
.ws .msmeta { display: flex; gap: 1rem; color: var(--muted); font-size: .84rem; margin-top: .5rem; }
.ws .msmeta #saved { margin-left: auto; }
.ws .msmeta .pace:not(:empty)::before { content: "·"; margin-right: .6rem; }
.ws .saved .manuscript { border-color: var(--verd); }

.right { min-width: 0; }
.runhead { background: var(--page); border: 1px solid var(--line); border-bottom: 0; padding: 1rem 1.6rem .9rem; }
.runinfo { display: flex; align-items: baseline; gap: .8rem; }
.runtool { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.runengine { color: var(--muted); font-size: .84rem; }
.runengine:not(:empty)::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verd); margin-right: .45rem; vertical-align: 1px; }
.options { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; margin: 0; }
.options label { margin: .7rem 0 .25rem; }
.options .opt { flex: 1 1 160px; }
.options .opt.wide { flex-basis: 100%; }
.options .platforms label { display: inline-flex; gap: .35rem; align-items: center; margin: 0 .8rem .3rem 0; font-weight: 400; }
.options .styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-top: .3rem; }
.options .styles button { text-align: left; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: .55rem .7rem; cursor: pointer; color: var(--ink); line-height: 1.3; }
.options .styles button b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1rem; }
.options .styles button small { color: var(--muted); font-size: .76rem; }
.options .styles button.on { background: var(--page); border-color: var(--verd); box-shadow: inset 0 0 0 1px var(--verd); }
.runbar { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 0; }
.runbar .status { color: var(--muted); font-size: .86rem; }

.result { background: var(--page); border: 1px solid var(--line); padding: 1.6rem 1.9rem 2rem; min-height: 60vh; }
.result.empty { color: var(--ink-2); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-size: 1.1rem; }
.result.empty .hint { font-family: var(--sans); display: inline-block; margin-top: .4rem; }
.live { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; }
.live::after { content: "▍"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.result-head .tools-r { display: flex; gap: .5rem; flex-shrink: 0; }
.result h2 { font-size: 1.6rem; }
.result .idea { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-2); font-style: italic; max-width: 60ch; }
.result .ref { color: var(--gold); font-size: .88rem; }
.result .prose { font-family: var(--serif); font-variation-settings: "SOFT" 30, "opsz" 14; white-space: pre-wrap; line-height: 1.68; font-size: 1.02rem; max-width: 72ch; }
.result ul, .result ol { padding-left: 1.3rem; max-width: 72ch; }

.post { padding: 1.1rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
.result-head + .post { border-top: 0; }
.post .platform { font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.post .hook { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin-bottom: .3rem; }
.post .body { white-space: pre-wrap; }
.post .tags { color: var(--verd); font-size: .88rem; margin-top: .4rem; }
.post .img { color: var(--muted); font-size: .82rem; margin-top: .4rem; }

.outline .sec { padding: .9rem 0; border-top: 1px solid var(--line); }
.outline .sec:first-child { border-top: 0; }
.outline .sec .kind { font-size: .78rem; color: var(--muted); }
.outline .sec .kind i { font-style: normal; color: var(--gold); margin-left: .5rem; }
.outline .sec h3 { margin: .1rem 0 .3rem; }
.outline .sec .content { font-family: var(--serif); white-space: pre-wrap; line-height: 1.6; }

.script .seg { padding: .8rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 1rem; }
.script .seg:first-child { border-top: 0; }
.script .who { font-size: .82rem; color: var(--muted); }
.script .who b { display: block; color: var(--ink); font-weight: 600; }
.script .words { font-family: var(--serif); white-space: pre-wrap; line-height: 1.65; }
.script .dir { color: var(--muted); font-size: .85rem; font-style: italic; margin-top: .3rem; }

.study h3 { margin-top: 1.2rem; }
.study .term { display: grid; grid-template-columns: 140px 130px 1fr; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--line); font-size: .93rem; }

.coach .issue { padding: .9rem 0; border-top: 1px solid var(--line); }
.coach .issue .cat { font-size: .78rem; color: var(--muted); }
.coach .issue .loc { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin: .2rem 0 .4rem; }
.coach .one { background: var(--paper); border-left: 3px solid var(--gold); padding: .8rem 1rem; margin-top: 1.2rem; font-family: var(--serif); }

.series .week { padding: 1rem 0; border-top: 1px solid var(--line); }
.series .week.pending { color: var(--muted); }
.series .week h3 { margin-bottom: .2rem; }
.series .week .pt { padding: .3rem 0 .3rem .8rem; border-left: 2px solid var(--line); margin: .3rem 0; }
.series .week .pt b { display: block; }
.series .week .pt span { color: var(--ink-2); white-space: pre-wrap; }
.progress { height: 3px; background: var(--line); margin: .5rem 0 1rem; }
.progress i { display: block; height: 100%; background: var(--verd); transition: width .4s; }

.history { margin-top: 1.5rem; }
.history a { display: block; padding: .45rem 0; border-top: 1px solid var(--line); color: var(--ink); }
.history a span { color: var(--muted); font-size: .85rem; float: right; }

/* ---------- sermon analytics: the energy map ---------- */
.analytics .facts { display: flex; gap: 1.8rem; margin: .2rem 0 1.4rem; flex-wrap: wrap; }
.analytics .facts div b { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.1; }
.analytics .facts div span { color: var(--muted); font-size: .84rem; }
.analytics .facts .measured { color: var(--verd); }

.emap { margin: 0 0 1.6rem; }
.emap svg { display: block; width: 100%; height: auto; overflow: visible; }
.emap .seg { cursor: pointer; }
.emap .seg:hover rect.heat, .emap .seg.on rect.heat { stroke: var(--ink); stroke-width: 1.5; }
.emap .tick { fill: var(--muted); font: 15px var(--sans); }
.emap .wpm { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: .85; }
.emap .peak { fill: var(--ink); font: 500 15px var(--sans); }
.emap .reco { fill: var(--page); stroke: var(--ink); stroke-width: 1.5; cursor: pointer; }
.emap .reco:hover { fill: var(--verd-soft); }
.emap-legend { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .8rem; margin-top: .5rem; }
.emap-legend .scale { display: inline-block; width: 110px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--heat-cool), var(--heat-warm), var(--heat-hot)); vertical-align: middle; margin: 0 .4rem; }
.emap-detail {
  margin-top: .8rem; padding: .85rem 1rem; background: var(--paper); border-left: 3px solid var(--ink);
  min-height: 3.2rem; font-size: .93rem;
}
.emap-detail b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin-right: .5rem; }
.emap-detail .meta { color: var(--muted); font-size: .82rem; }
.emap-detail .meta i { font-style: normal; display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; margin-right: .3rem; }

.mix { margin: 1.2rem 0 1.4rem; }
.mix .bar { display: flex; height: 22px; overflow: hidden; border-radius: 2px; }
.mix .bar i { display: block; height: 100%; }
.mix .keys { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .6rem; font-size: .86rem; }
.mix .keys span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: .4rem; vertical-align: -1px; }
.mix .keys span b { font-weight: 500; margin-left: .25rem; }
.mix .keys span small { color: var(--muted); margin-left: .25rem; }

.analytics .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.5rem; margin-top: 1.2rem; }
.analytics .cols h3 { margin-top: 0; }
.analytics .cols p { max-width: 60ch; }
.analytics .strengths li { margin-bottom: .35rem; }
.analytics .recos { list-style: none; padding: 0; margin: 0; }
.analytics .recos li { padding: .7rem 0; border-top: 1px solid var(--line); }
.analytics .recos li:first-child { border-top: 0; padding-top: .2rem; }
.analytics .recos .at { display: inline-block; min-width: 3rem; margin-right: .4rem; color: var(--verd); font-weight: 500; font-variant-numeric: tabular-nums; }
.analytics .recos .why { color: var(--ink-2); font-size: .9rem; margin-top: .15rem; }

.cat-scripture { --c: var(--cat-scripture); } .cat-exposition { --c: var(--cat-exposition); } .cat-story { --c: var(--cat-story); }
.cat-application { --c: var(--cat-application); } .cat-prayer { --c: var(--cat-prayer); } .cat-transition { --c: var(--cat-transition); }
.cat-call_to_response { --c: var(--cat-call); } .cat-other { --c: var(--cat-other); }

/* ---------- sermon restyle ---------- */
.restyle .voice { display: inline-block; background: var(--verd-soft); color: var(--verd-dark); padding: .15rem .55rem; border-radius: 2px; font-size: .82rem; margin-bottom: .4rem; }
.restyle .mv { padding: 1.3rem 0 .6rem; border-top: 1px solid var(--line); }
.restyle .mv:first-of-type { border-top: 0; }
.restyle .mv h3 { margin-bottom: .6rem; }
.restyle .compare { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.restyle.side .compare { grid-template-columns: 220px 1fr; gap: 1.6rem; }
.restyle .orig { color: var(--ink-2); font-size: .88rem; }
.restyle .orig b { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; margin-bottom: .2rem; }
.restyle .changed { color: var(--muted); font-size: .84rem; margin-top: .5rem; font-style: italic; }
.restyle .notes { background: var(--paper); border-left: 3px solid var(--verd); padding: .9rem 1rem; margin-top: 1.6rem; font-family: var(--serif); max-width: 72ch; }
.restyle .toggle { display: inline-flex; gap: .4rem; align-items: center; color: var(--ink-2); font-size: .86rem; margin: .4rem 0 .8rem; cursor: pointer; }

/* ---------- account / admin ---------- */
.page { max-width: 760px; margin: 1.5rem auto 0; padding: 0 1.5rem; }
.page.wide { max-width: var(--maxw); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .k { color: var(--ink-2); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .5rem; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; border-top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat { display: inline-block; margin: 0 2rem 1rem 0; }
.stat b { display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; }
.stat span { color: var(--muted); font-size: .85rem; }
.ok { color: var(--verd); } .bad { color: var(--danger); }
pre.log { background: var(--page); border: 1px solid var(--line); padding: 1rem; font-size: .78rem; max-height: 320px; overflow: auto; white-space: pre-wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .ws { grid-template-columns: 200px minmax(0, 1fr); }
  .ws .left { grid-column: 2; position: static; }
  .ws .right { grid-column: 1 / -1; }
  .ws textarea.manuscript { min-height: 34vh; }
  .tools { grid-template-columns: 1fr 1fr; }
  .analytics .cols { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .pricing { grid-template-columns: 1fr 1fr; }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .ws { grid-template-columns: 1fr; gap: 1rem; }
  .rail, .ws .left, .ws .right { grid-column: 1; position: static; }
  .rail .group { padding-top: .5rem; }
  .top { padding: .9rem 1rem; } .top nav { gap: .9rem; font-size: .9rem; }
  .tools, .pricing { grid-template-columns: 1fr; }
  .plan { border-left: 0; }
  .post, .script .seg { grid-template-columns: 1fr; }
  .study .term { grid-template-columns: 1fr; gap: .2rem; }
  .restyle.side .compare { grid-template-columns: 1fr; }
  .result { padding: 1.2rem 1.1rem 1.6rem; }
  .runhead { padding: .9rem 1.1rem .8rem; }
}