/* =========================================================
   Sacred Circle — design tokens

   The palette is warm-neutral, not cool grey. A blue-grey
   background reads as "software"; a warm parchment ground
   reads as paper and lets the indigo and brass feel like ink
   and metal on it. That single change does most of the work
   of making the interface feel considered rather than default.
   ========================================================= */
:root {
  /* EDEAURA — warm, editorial, "conscious living". A sand/cream ground
     with a serif display face and gradient accents drawn from dawn light. */

  /* Ink */
  --ink:        #2A2320;
  --ink-soft:   #5A4F48;
  --muted:      #8A7E74;

  /* Ground — warm sand, not grey */
  --mist:       #F6F1E9;
  --mist-deep:  #EFE7DA;
  --card:       #FFFDF9;
  --line:       #E7DDCD;
  --line-soft:  #F1EADD;

  /* Accents — dawn violet, marigold, temple teal */
  --violet:     #7A5CD6;
  --violet-dim: #EFE9FB;
  --violet-deep:#5E42B8;
  --marigold:   #D99A32;
  --marigold-dim:#F8EDD6;
  --water:      #2F8C93;
  --water-dim:  #DFF0F0;
  --sage:       #6E8F5E;

  /* The hero/CTA gradient */
  --grad-dawn:  linear-gradient(135deg, #E0A93F 0%, #C97C4A 48%, #8E5FBF 100%);
  --grad-soft:  linear-gradient(160deg, #F3E4C8, #EBD9F0);

  --radius:     20px;
  --radius-sm:  12px;

  --shadow:     0 1px 2px rgba(74,58,42,.05),
                0 3px 6px rgba(74,58,42,.04),
                0 14px 32px -22px rgba(74,58,42,.32);
  --shadow-lift:0 2px 4px rgba(74,58,42,.06),
                0 8px 18px rgba(74,58,42,.07),
                0 26px 48px -26px rgba(74,58,42,.4);

  /* Fraunces gives the editorial, slightly literary display voice the
     mockup has; Inter keeps the body clean and modern. */
  --display: "Fraunces", "Outfit", Georgia, serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --shell-max: 1240px;

  color-scheme: light;
}

/* ---------- Dark mode ---------- */
/* A warm-dark, not a cold slate — deep aubergine-brown so the same
   marigold and violet accents still feel at home. Applied via a class on
   <html> that the toggle sets and remembers. */
html[data-theme="dark"] {
  --ink:        #F4ECE2;
  --ink-soft:   #C9BDB0;
  --muted:      #9B8E80;

  --mist:       #1A1512;
  --mist-deep:  #241C17;
  --card:       #241D18;
  --line:       #3A2F27;
  --line-soft:  #2E251F;

  --violet:     #A88AF0;
  --violet-dim: #2E2440;
  --violet-deep:#8A6BE0;
  --marigold:   #E6B454;
  --marigold-dim:#3A2E17;
  --water:      #4FB0B6;
  --water-dim:  #17322F;
  --sage:       #8DAE7A;

  --grad-soft:  linear-gradient(160deg, #2C2114, #2A1E33);

  --shadow:     0 1px 2px rgba(0,0,0,.4),
                0 14px 32px -22px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5),
                0 26px 48px -26px rgba(0,0,0,.8);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Nothing should ever scroll the page sideways on a phone. These are the
   three things that usually cause it: an unbreakable word, an oversized
   media element, and a grid track that refuses to shrink. */
html, body { max-width: 100%; overflow-x: hidden; }

img, video, iframe, svg, table, pre { max-width: 100%; }
img, video { height: auto; }

.post-title, .post-excerpt, .comment-body, .prose, .sg-title, .display,
h1, h2, h3, h4, p, li, td, a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Long URLs in member text are the most common offender. */
.prose a, .comment-body a { overflow-wrap: anywhere; }

body {
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  /* A whisper of warmth in the ground plane, so large empty areas
     are not a flat slab of one colour. */
  color: var(--ink);
  padding-bottom: 68px; /* clears the mobile bottom bar */
}

@media (min-width: 992px) { body { padding-bottom: 0; } }

h1, h2, h3, h4, .display {
  font-family: var(--display);
  /* Headings carry the page here, so they are set genuinely bold in a
     near-black rather than relying on a serif's stroke contrast. */
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.16;
  color: var(--ink);
}

/* Optical sizing: display serifs need tighter tracking as they grow. */
h1, .display--xl { letter-spacing: -0.02em; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Shell ---------- */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 18px 14px 40px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px)  { .shell { padding: 22px 20px 40px; } }
@media (min-width: 992px)  { .shell { grid-template-columns: 216px minmax(0, 1fr); } }
@media (min-width: 1200px) { .shell { grid-template-columns: 216px minmax(0, 1fr) 300px; } }

.rail-left  { display: none; }
.rail-right { display: none; }
@media (min-width: 992px)  { .rail-left  { display: block; } }
@media (min-width: 1200px) { .rail-right { display: block; } }

.sticky-rail { position: sticky; top: 76px; }

/* ---------- Top bar ---------- */
.topbar {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.topbar-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 14px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.028em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; color: var(--violet); }
.wordmark .deva {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .06em;
  display: none;
}
@media (min-width: 576px) { .wordmark .deva { display: inline; } }

.searchbar {
  flex: 1;
  max-width: 520px;
  position: relative;
}
.searchbar input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--mist);
  border-radius: 999px;
  padding: 8px 16px 8px 38px;
  font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.searchbar input:focus {
  background: var(--card);
  border-color: var(--violet);
  outline: none;
}
.searchbar svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

/* ---------- The yantra vote control (signature element) ----------
   Upward triangle = fire, downward = water. The two together are the
   oldest diagram in the tradition, and here they are also the control.  */
.yantra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
  flex-shrink: 0;
}

.yantra button {
  width: 30px; height: 26px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 6px;
  transition: background .12s;
}
.yantra button:hover { background: var(--line-soft); }

.tri {
  width: 15px; height: 13px;
  background: var(--muted);
  transition: background .14s, transform .14s;
}
.tri-up   { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tri-down { clip-path: polygon(0 0, 100% 0, 50% 100%); }

.yantra button:hover .tri-up   { background: var(--marigold); transform: translateY(-1px); }
.yantra button:hover .tri-down { background: var(--water);    transform: translateY(1px); }

.yantra.is-up   .tri-up   { background: var(--marigold); }
.yantra.is-down .tri-down { background: var(--water); }

.yantra .score {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
}
.yantra.is-up   .score { color: var(--marigold); }
.yantra.is-down .score { color: var(--water); }

/* Horizontal variant for comments */
.yantra--inline { flex-direction: row; align-items: center; gap: 1px; padding-top: 0; }
.yantra--inline .score { min-width: 24px; font-size: .74rem; }
.yantra--inline button { width: 24px; height: 22px; }
.yantra--inline .tri { width: 11px; height: 10px; }

/* ---------- Cards ---------- */
.card-x {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* A one-pixel light edge along the top reads as a physical bevel and
   is most of what separates a "card" from a "rectangle". */
.card-x, .post {
  position: relative;
}
/* On a white card over light grey the bevel highlight is invisible and
   only costs a paint, so it is dropped in favour of a cleaner edge. */

.panel { padding: 16px; }
.panel-title {
  font-family: var(--display);
  font-size: .95rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Post card ---------- */
.post {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  padding: 12px 14px 12px 10px;
  margin-bottom: 11px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.post:hover {
  border-color: #D6CBBC;
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

/* The circle's accent reads as a hairline down the spine of the card. */
.post::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--violet));
  opacity: .85;
}

.post-main { min-width: 0; flex: 1; }

.post-meta {
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.post-meta a { color: var(--ink-soft); font-weight: 500; }
.post-meta .dot { opacity: .45; }

.post-title {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.012em;
  margin: 0 0 7px;
}
@media (min-width: 768px) { .post-title { font-size: 1.35rem; } }
.post-title a { color: var(--ink); }
.post-title a:hover { color: var(--violet); text-decoration: none; }

.post-excerpt {
  color: #3A414C;
  font-size: .9rem;
  margin: 0 0 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.act {
  font-size: .78rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-weight: 500;
}
.act:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }

/* ---------- Kind chips ---------- */
.kind {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .085em;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--body);
  box-shadow: inset 0 0 0 1px rgba(27,23,38,.05);
  vertical-align: 2px;
}
.kind--question   { background: var(--water-dim);    color: #17607E; }
.kind--teaching   { background: var(--marigold-dim); color: #96590A; }
.kind--experience { background: #F0EAF7;             color: #6B3D96; }
.kind--discussion { background: var(--line-soft);    color: var(--ink-soft); }

/* ---------- Verification badge ---------- */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .67rem;
  font-weight: 650;
  color: #8A5407;
  background: linear-gradient(180deg, #FDF6E8, var(--marigold-dim));
  border-radius: 5px;
  padding: 2px 7px;
  letter-spacing: .015em;
  box-shadow: inset 0 0 0 1px rgba(200,122,14,.22);
}
.verified svg { width: 10px; height: 10px; }

.pending-badge {
  font-size: .68rem;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---------- Sort tabs ---------- */
.sorts {
  display: flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sorts::-webkit-scrollbar { display: none; }

.sorts a {
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.sorts a:hover { background: var(--line-soft); text-decoration: none; color: var(--ink); }
.sorts a.on {
  background: linear-gradient(180deg, #2A2338, var(--ink));
  color: #fff;
  box-shadow: 0 1px 2px rgba(27,23,38,.2), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- Sidebar ---------- */
.rail-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 500;
}
.rail-link:hover { background: var(--mist-deep); text-decoration: none; color: var(--ink); }
.rail-link.on {
  background: var(--violet-dim);
  color: var(--violet-deep);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(91,75,224,.1);
}

.rail-heading {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  margin: 18px 0 6px 10px;
}

.circle-dot {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 1px 2px rgba(27,23,38,.16);
}

/* ---------- Comments ---------- */
.comment { padding: 10px 0; }
.comment-body { font-size: .95rem; color: var(--ink); }
.comment-body p:last-child { margin-bottom: 0; }

.thread {
  margin-left: 13px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  transition: border-color .14s;
}
.thread:hover { border-color: #C4CADD; }
@media (min-width: 768px) { .thread { margin-left: 17px; padding-left: 18px; } }

.avatar {
  border-radius: 6px;
  background: var(--line-soft);
  flex-shrink: 0;
}

/* ---------- Prose ---------- */
.prose {
  font-size: 1.03rem;
  line-height: 1.78;
  color: var(--ink);
  letter-spacing: .001em;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  border-left: 2px solid var(--violet);
  padding-left: 14px;
  margin: 14px 0;
  color: var(--muted);
  font-style: italic;
}
.prose code {
  background: var(--line-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .87em;
  color: var(--ink);
}

/* ---------- Forms & buttons ---------- */
.form-control, .form-select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: .93rem;
  font-family: var(--body);
  background: var(--card);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.form-control::placeholder { color: #A79C8E; }
.form-control:focus, .form-select:focus {
  border-color: var(--violet);
  background: #fff;
  box-shadow: 0 0 0 3.5px var(--violet-dim);
}
.form-label { font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.form-hint  { font-size: .78rem; color: var(--muted); margin-top: 4px; }

.btn-ink {
  background: linear-gradient(180deg, #2A2338 0%, var(--ink) 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(27,23,38,.18),
              0 6px 16px -9px rgba(27,23,38,.7),
              inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .14s ease, filter .14s ease;
}
.btn-ink:hover { color: #fff; filter: brightness(1.14); transform: translateY(-1px); }
.btn-ink:active { transform: translateY(0); }

.btn-violet {
  background: linear-gradient(180deg, #6857E8 0%, var(--violet) 55%, var(--violet-deep) 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .002em;
  box-shadow: 0 1px 1px rgba(27,23,38,.14),
              0 6px 16px -8px rgba(91,75,224,.6),
              inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-violet:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(27,23,38,.14),
              0 10px 22px -8px rgba(91,75,224,.66),
              inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-violet:active { transform: translateY(0); filter: brightness(.98); }

.btn-quiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: .85rem;
  font-weight: 600;
}
.btn-quiet:hover { background: var(--line-soft); color: var(--ink); }
.btn-quiet.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Mobile bottom bar ---------- */
.bottombar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 1040;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { .bottombar { display: none; } }

.bottombar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: .62rem;
  color: var(--muted);
  padding: 4px 0;
  font-weight: 500;
}
.bottombar a.on { color: var(--violet); }
.bottombar a:hover { text-decoration: none; }

/* ---------- Notices ---------- */
.notice {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: .88rem;
  margin-bottom: 14px;
  border: 1px solid;
}
.notice--ok   { background: #E9F7EF; border-color: #BFE5CE; color: #146B3A; }
.notice--bad  { background: #FDECEC; border-color: #F5C6C6; color: #9B2222; }
.notice--care { background: var(--marigold-dim); border-color: #F0DCB4; color: #7A4A08; }

/* The medical disclaimer is a legal requirement, so it is part of the
   layout rather than something bolted into a footer nobody reads. */
.disclaimer {
  font-size: .76rem;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  background: var(--card);
}

/* ---------- Empty states ---------- */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty h3 { font-size: 1.1rem; margin-bottom: 6px; }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-color: var(--ink-soft); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Search type-ahead ---------- */
.searchbar { position: relative; }

.sg-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 6px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 1200;
}

.sg-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 650;
  color: var(--muted);
  padding: 9px 10px 4px;
}

.sg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.sg-item:hover, .sg-item.on { background: var(--mist-deep); text-decoration: none; }

.sg-text { min-width: 0; display: flex; flex-direction: column; }
.sg-title {
  font-size: .89rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-sub {
  font-size: .76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-title mark {
  background: rgba(200,122,14,.2);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.sg-dot {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--display); font-weight: 600; font-size: .8rem; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.sg-avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.sg-doc {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--mist-deep); color: var(--muted);
}

.sg-all {
  display: block;
  text-align: center;
  font-size: .81rem;
  font-weight: 600;
  color: var(--violet);
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.sg-all:hover, .sg-all.on { background: var(--violet-dim); text-decoration: none; }

.sg-empty { padding: 18px 12px; text-align: center; font-size: .85rem; color: var(--muted); }

/* ---------- Composer editor ---------- */
.ed {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ed:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-dim);
}
.ed--drop { border-color: var(--violet); border-style: dashed; background: var(--violet-dim); }

/* Toolbar sits BELOW the writing area, the way current editors do it:
   the text is the thing, the controls are secondary. */
.ed-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 8px;
  background: var(--card);
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
  order: 2;
}
.ed { display: flex; flex-direction: column; }
.ed-area { order: 1; }
.ed-preview { order: 1; }

.ed-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .13s ease, color .13s ease, transform .13s ease;
}
.ed-btn:hover { background: var(--mist-deep); color: var(--ink); }
.ed-btn:active { transform: scale(.94); }

/* The preview toggle is a labelled pill, not an icon square. */
.ed-preview-toggle {
  width: auto;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--mist-deep);
  color: var(--ink-soft);
  font-size: .79rem;
}
.ed-preview-toggle:hover { background: var(--line); }
.ed-preview-toggle.on {
  background: var(--ink);
  color: #fff;
}

.ed-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 6px;
  flex-shrink: 0;
}

.ed-area {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100%;
  min-height: 200px;
  padding: 15px 16px !important;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
}
.ed-area:focus { box-shadow: none !important; outline: none; }
.ed-area::placeholder { color: #9AA1AC; }

.ed-preview {
  padding: 15px 16px;
  min-height: 200px;
}
.ed-preview img { margin: 8px 0; }

@media (max-width: 576px) {
  .ed-btn { width: 30px; height: 30px; }
  .ed-sep { margin: 0 3px; }
}

/* ---------- Avatar picker ---------- */
.av-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--card);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.av-opt:hover { border-color: #CDBFAD; transform: translateY(-1px); }
.av-opt.on {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-dim);
}
.av-opt img { border-radius: 11px; display: block; }
.av-opt span { font-size: .73rem; font-weight: 600; color: var(--ink-soft); }


/* ---------- Admin tab strip ---------- */
/* There are more tabs than fit on a laptop, so the strip scrolls. The
   fade on the right edge is the signal that it does — without it the
   last tab just looks broken, which is how "Payments" read as "Paymer". */
.admin-tabs {
  position: relative;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.admin-tabs a { scroll-snap-align: start; }

/* ---------- Site footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  margin-top: 40px;
}
.site-footer-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 30px 18px 18px;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); }
}

.sf-note {
  font-size: .8rem;
  color: var(--muted);
  margin: 9px 0 0;
  max-width: 44ch;
  line-height: 1.6;
}

.sf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-content: start;
}
.sf-links a {
  font-size: .85rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.sf-links a:hover { color: var(--violet); }

.sf-base {
  border-top: 1px solid var(--line-soft);
  padding: 14px 18px;
  text-align: center;
  font-size: .76rem;
  color: var(--muted);
}
@media (max-width: 991px) { .site-footer { margin-bottom: 62px; } }

/* ---------- "Start a discussion" box ---------- */
.start-box {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px 9px 10px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.start-box:hover {
  border-color: var(--violet);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
}
.start-box img { border-radius: 11px; flex-shrink: 0; }

.start-box-field {
  flex: 1;
  min-width: 0;
  font-size: .92rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.start-box-tools {
  display: flex;
  gap: 10px;
  color: var(--muted);
  flex-shrink: 0;
}
.start-box:hover .start-box-tools { color: var(--violet); }
@media (max-width: 480px) { .start-box-tools { display: none; } }

/* ---------- Repost attribution ---------- */
.repost-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--sage, #4A7C59);
  margin-bottom: 5px;
}
.repost-tag a { color: inherit; text-decoration: underline; }

/* ---------- Write / Preview segmented control ---------- */
.ed-seg {
  display: inline-flex;
  background: var(--mist-deep);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.ed-seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 15px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.ed-seg-btn:hover { color: var(--ink); }
.ed-seg-btn.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(18,20,26,.12);
}

/* ---------- Editor attachment strip ---------- */
.ed-strip {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--mist);
}

.ed-chip {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  flex-shrink: 0;
}
.ed-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-chip.is-uploading img { opacity: .5; }

.ed-chip-spin {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(90,63,240,.25);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: ed-spin .7s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }

.ed-chip-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(18,20,26,.72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.ed-chip-x:hover { background: rgba(18,20,26,.92); }

@media (prefers-reduced-motion: reduce) {
  .ed-chip-spin { animation-duration: 1.4s; }
}

/* ===========================================================
   EDEAURA reskin — components
   =========================================================== */

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}
.display--serif { font-family: var(--display); }

body { background: var(--mist); color: var(--ink); }

/* ---------- Dark-mode toggle ---------- */
.theme-toggle {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: block; }

/* ---------- Gradient buttons ---------- */
.btn-violet {
  background: var(--grad-dawn);
  border: 0;
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  box-shadow: 0 2px 6px -1px rgba(201,124,74,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.btn-violet:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.05); }
.btn-violet:active { transform: translateY(0); }

/* ---------- Homepage hero ---------- */
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  min-height: 300px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow);
  background: var(--grad-dawn);
}
.hero-media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  /* Placeholder dawn scene until a real image is set. */
  background-image:
    radial-gradient(120% 90% at 78% 20%, rgba(255,236,190,.9), transparent 55%),
    linear-gradient(180deg, rgba(70,40,90,.15), rgba(40,25,60,.55)),
    linear-gradient(135deg, #E7B15A 0%, #C97C4A 45%, #6E4C9E 100%);
}
.hero-media::after {
  /* soft mountain silhouette */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background:
    linear-gradient(180deg, transparent, rgba(40,25,55,.4)),
    conic-gradient(from 210deg at 30% 120%, rgba(60,40,80,.7), transparent 40%),
    conic-gradient(from 150deg at 70% 120%, rgba(50,35,70,.7), transparent 40%);
  clip-path: polygon(0 60%, 18% 30%, 34% 55%, 52% 22%, 70% 50%, 86% 28%, 100% 55%, 100% 100%, 0 100%);
  opacity: .8;
}
.hero-inner {
  position: relative;
  padding: 40px 28px;
  max-width: 560px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 2px 20px rgba(40,20,50,.35);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.hero p {
  color: rgba(255,255,255,.92);
  font-size: 1.02rem;
  max-width: 42ch;
  margin: 0 0 20px;
  text-shadow: 0 1px 12px rgba(40,20,50,.4);
}
.hero-quote {
  position: absolute;
  top: 26px; right: 26px;
  max-width: 190px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #fff;
  text-align: right;
  text-shadow: 0 1px 14px rgba(40,20,50,.5);
  display: none;
}
@media (min-width: 768px) { .hero-quote { display: block; } .hero-inner { padding: 52px 44px; } }

/* value-prop strip under the hero */
.value-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  padding: 4px 4px 14px;
  margin-bottom: 8px;
}
@media (min-width: 768px) { .value-strip { grid-template-columns: repeat(4, 1fr); } }
.value-item { display: flex; gap: 10px; align-items: flex-start; }
.value-item .vi-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--violet-dim); color: var(--violet-deep);
}
.value-item strong { display: block; font-size: .86rem; color: var(--ink); }
.value-item span { font-size: .76rem; color: var(--muted); }

/* ---------- Circle cover cards ---------- */
.circle-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display: flex; flex-direction: column;
}
.circle-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }
.circle-cover {
  height: 118px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.circle-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(30,20,15,.35));
}
.circle-card .cc-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.circle-card .cc-name { font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.circle-card .cc-deva { font-family: "Noto Serif Devanagari", serif; font-size: .8rem; color: var(--muted); }
.circle-card .cc-desc { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 10px; flex: 1; }
.circle-card .cc-meta { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }

/* deterministic cover gradients by index */
.cov-0 { background-image: linear-gradient(150deg,#8FB07A,#4E7B52); }
.cov-1 { background-image: linear-gradient(150deg,#B79AE6,#7A5CD6); }
.cov-2 { background-image: linear-gradient(150deg,#E7B15A,#C97C4A); }
.cov-3 { background-image: linear-gradient(150deg,#9A6BC9,#5E42B8); }
.cov-4 { background-image: linear-gradient(150deg,#5FB6BD,#2F8C93); }
.cov-5 { background-image: linear-gradient(150deg,#E39AA8,#C05C77); }
.cov-6 { background-image: linear-gradient(150deg,#7FA9E0,#3F6BB0); }
.cov-7 { background-image: linear-gradient(150deg,#D9A441,#B47A1E); }

/* horizontal scroller for popular circles */
.circle-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.circle-rail > * { scroll-snap-align: start; }
@media (min-width: 992px) {
  .circle-rail { grid-auto-columns: 1fr; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; overflow: visible; }
}