/* =========================================================
   Sacred Circle — design tokens
   Palette is drawn from temple interiors at dusk rather than
   the usual "wellness cream": indigo ink, cool stone, brass.
   ========================================================= */
:root {
  --ink:        #14162B;
  --ink-soft:   #3A3F5C;
  --muted:      #6E7490;
  --mist:       #EDEFF6;
  --card:       #FFFFFF;
  --line:       #DEE2EE;
  --line-soft:  #EAEDF5;

  --violet:     #5B4BE0;
  --violet-dim: #EEECFD;
  --marigold:   #DC8A12;
  --marigold-dim:#FDF2DF;
  --water:      #2B7A9B;
  --water-dim:  #E4F1F6;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(20, 22, 43, .05), 0 8px 24px -18px rgba(20, 22, 43, .35);

  --display: "Marcellus", Georgia, serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --shell-max: 1240px;
}

* { box-sizing: border-box; }

body {
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  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);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}

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: 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: var(--card);
  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-size: 1.22rem;
  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);
}

.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: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color .14s, transform .14s;
}
.post:hover { border-color: #C9CFE2; }

/* 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.08rem;
  line-height: 1.35;
  margin: 0 0 6px;
}
@media (min-width: 768px) { .post-title { font-size: 1.18rem; } }
.post-title a { color: var(--ink); }
.post-title a:hover { color: var(--violet); text-decoration: none; }

.post-excerpt {
  color: var(--ink-soft);
  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: .66rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--body);
}
.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: 3px;
  font-size: .68rem;
  font-weight: 600;
  color: #96590A;
  background: var(--marigold-dim);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .02em;
}
.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: var(--ink); color: #fff; }

/* ---------- 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(--line-soft); text-decoration: none; color: var(--ink); }
.rail-link.on { background: var(--violet-dim); color: var(--violet); }

.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: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: .72rem;
  color: #fff;
  flex-shrink: 0;
}

/* ---------- Comments ---------- */
.comment { padding: 10px 0; }
.comment-body { font-size: .92rem; color: var(--ink-soft); }
.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: .97rem;
  line-height: 1.72;
  color: var(--ink-soft);
}
.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: 9px 12px;
  font-size: .93rem;
  font-family: var(--body);
}
.form-control:focus, .form-select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px 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: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: .88rem;
  font-weight: 600;
}
.btn-ink:hover { background: #22254170; background: #232744; color: #fff; }

.btn-violet {
  background: var(--violet);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: .88rem;
  font-weight: 600;
}
.btn-violet:hover { background: #4A3BC9; color: #fff; }

.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; }
}