/*
Theme Name: Systems Connect
Theme URI: https://systemsconnect.org
Author: Scott Beach
Description: Trauma-informed community theme for Systems Connect. A modern self-help portal for people with Dissociative Identity Disorder, their partners, and clinicians.
Version: 0.1.0
Text Domain: sc-theme
*/

:root{
  --sc-ink:#1f2a37;
  --sc-ink-soft:#45556c;
  --sc-paper:#f7f5f0;
  --sc-card:#ffffff;
  --sc-sage:#7aa098;
  --sc-teal:#3a7a7a;
  --sc-navy:#223a5e;
  --sc-gold:#b58b3a;
  --sc-rule:#d9d3c3;
  --sc-warn:#8a3a3a;
  --sc-ok:#2f6d4a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--sc-ink);
  background:var(--sc-paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Lora',Georgia,serif;
  color:var(--sc-navy);
  letter-spacing:-0.01em;
  line-height:1.2;
}

a{color:var(--sc-teal);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--sc-navy)}

.sc-wrap{max-width:980px;margin:0 auto;padding:32px}

.sc-header{
  background:linear-gradient(160deg,var(--sc-navy),var(--sc-teal));
  color:#fff;
  padding:64px 32px 48px;
  /* Lift the whole <header> above <main> so dropdowns inside the nav
     (take-a-break, etc.) paint over page content below. Both <header>
     and <main> are body siblings with no default position; without this
     rule, <main> wins by being later in the DOM. */
  position:relative;
  z-index:100;
}
/* Contain <main>'s stacking. Animated transforms inside (bubble map
   orbits, breathe pulses) can promote elements to GPU compositing
   layers; without `isolation: isolate` those promoted layers can paint
   above the header even with a high z-index. Isolation forces main
   into its own stacking context so its descendants stay inside. */
main, main.sc-wrap{
  isolation:isolate;
  position:relative;
  z-index:1;
}
.sc-header .sc-wrap{padding:0;max-width:980px}
.sc-header h1{
  color:#fff;
  font-size:2.4rem;
  margin:0 0 10px 0;
}
.sc-header .tag{margin:0;font-size:1.1rem;opacity:0.92}

.sc-card{
  background:var(--sc-card);
  border:1px solid var(--sc-rule);
  border-radius:10px;
  padding:28px 32px;
  margin-bottom:20px;
}

.sc-coming-soon{text-align:center;padding:60px 32px}
.sc-coming-soon .badge{
  display:inline-block;
  padding:6px 14px;
  background:var(--sc-sage);
  color:#fff;
  border-radius:999px;
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.sc-coming-soon h2{font-size:1.8rem;margin:0 0 12px}
.sc-coming-soon p{color:var(--sc-ink-soft);max-width:640px;margin:12px auto}

.sc-noindex-banner{
  background:#fff4d6;
  color:#5b4117;
  border-bottom:1px solid #d6b356;
  padding:8px 16px;
  font-size:0.82rem;
  text-align:center;
}

.sc-footer{
  color:var(--sc-ink-soft);
  font-size:0.85rem;
  text-align:center;
  padding:28px 16px 40px;
}

/* ---- Forms ---- */
.sc-form-card{padding:32px}
.sc-form-narrow{max-width:520px;margin:0 auto}
.sc-form .sc-field{margin-bottom:20px}
.sc-form label{display:block;font-weight:600;margin-bottom:6px;color:var(--sc-navy)}
.sc-form input[type=email],
.sc-form input[type=text],
.sc-form input[type=password],
.sc-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  font:inherit;
  background:#fff;
  color:var(--sc-ink);
}
.sc-form textarea{min-height:90px;resize:vertical}
.sc-form input:focus,.sc-form textarea:focus{outline:2px solid var(--sc-teal);outline-offset:1px;border-color:var(--sc-teal)}
.sc-help{font-size:0.85rem;color:var(--sc-ink-soft);margin:6px 0 0}
.sc-help.sc-ok{color:var(--sc-ok);font-weight:500}
.sc-help.sc-err{color:var(--sc-warn);font-weight:500}
.sc-muted{color:var(--sc-ink-soft)}
.sc-center{text-align:center}

.sc-form fieldset{border:0;padding:0;margin:0 0 20px}
.sc-form legend{font-weight:600;margin-bottom:8px;color:var(--sc-navy)}
.sc-radio{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  margin-bottom:8px;
  cursor:pointer;
}
.sc-radio input{margin-top:4px}
.sc-radio:has(input:checked){border-color:var(--sc-teal);background:#f3f9f7}
.sc-radio span{display:block}
.sc-radio small{display:block;color:var(--sc-ink-soft);font-weight:400}
.sc-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;font-weight:400}

.sc-btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:999px;
  border:1px solid transparent;
  font:inherit;font-weight:600;
  cursor:pointer;
  min-height:44px;
  text-decoration:none;
  transition:background 150ms ease-out, border-color 150ms ease-out;
}
.sc-btn-primary{background:var(--sc-teal);color:#fff}
.sc-btn-primary:hover{background:var(--sc-navy)}
.sc-btn-ghost{background:transparent;color:var(--sc-navy);border-color:var(--sc-rule)}
.sc-btn-ghost:hover{border-color:var(--sc-teal);color:var(--sc-teal)}

/* ---- Flash messages ---- */
.sc-flash{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-size:0.95rem}
.sc-flash-error{background:#fbecea;color:var(--sc-warn);border-left:3px solid var(--sc-warn)}
.sc-flash-ok{background:#e8f1ea;color:var(--sc-ok);border-left:3px solid var(--sc-ok)}

/* ---- Me page ---- */
.sc-me-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- Badges ---- */
.sc-badge{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  vertical-align:middle;
  margin-left:6px;
}
.sc-badge-system   {background:#e0ecef;color:var(--sc-navy)}
.sc-badge-partner  {background:#f1eae0;color:var(--sc-gold)}
.sc-badge-ally     {background:#e8f1ea;color:var(--sc-ok)}
.sc-badge-clinician{background:#e0e6ef;color:var(--sc-navy);border:1px solid var(--sc-navy)}
.sc-badge-staff    {background:var(--sc-teal);color:#fff}

/* Scope badges on /me/ section headings + /profile/?edit=1 — disambiguates
   whether a section is system-wide or only affects the current front. */
.sc-scope-badge{
  display:inline-block;
  padding:1px 9px;
  border-radius:999px;
  font-size:0.65rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  vertical-align:middle;
  margin-left:8px;
  white-space:nowrap;
}
.sc-scope-badge-system{background:#e0ecef;color:var(--sc-navy)}
.sc-scope-badge-front {background:#efe6f1;color:#5d2a99}

/* Video picker — used both in /me/ (radio cards) and in the admin pool preview
   (anchor cards). Each card shows a YouTube thumbnail + title. */
.sc-video-picker{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  margin-top:10px;
}
.sc-video-card{
  position:relative;
  display:block;
  cursor:pointer;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  background:#f6f7f7;
  text-align:left;
  text-decoration:none;
  color:var(--sc-ink, #222);
  transition:border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.sc-video-card:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.sc-video-card input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
}
.sc-video-card:has(input:checked){
  border-color:var(--sc-teal, #5d9aa0);
  box-shadow:0 0 0 3px rgba(93,154,160,0.18);
}
.sc-video-card-thumb{
  display:flex;
  width:100%;
  height:90px;
  align-items:center;
  justify-content:center;
  object-fit:cover;
  background:#222;
  color:#fff;
  font-size:1rem;
  font-weight:600;
  letter-spacing:0.02em;
}
.sc-video-card-thumb-auto{
  background:linear-gradient(135deg, var(--sc-teal, #5d9aa0), #a37bc9);
}
.sc-video-card-thumb-none{
  background:#dcdcdc;
  color:#666;
  font-size:1.8rem;
  font-weight:300;
}
.sc-video-card-title{
  display:block;
  font-size:0.85rem;
  line-height:1.3;
  padding:8px 10px 2px;
  font-weight:600;
  /* clamp to 2 lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sc-video-card-meta{
  display:block;
  font-size:0.72rem;
  padding:0 10px 8px;
  color:var(--sc-ink-soft, #6c6c6c);
}
.sc-video-card-badge{
  display:inline-block;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(93,154,160,0.15);
  color:var(--sc-teal, #5d9aa0);
  font-size:0.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-right:4px;
  vertical-align:middle;
}
.sc-video-card-auto-pick{ border-color:rgba(93,154,160,0.35); }
body.sc-theme-dark .sc-video-card{ background:#26221c; }
body.sc-theme-dark .sc-video-card-thumb-none{ background:#3a3530; color:#a8a098; }

/* ============================================================== *
 * /creative/ index — featured carousel + filterable grid (v0.32.0)
 * ============================================================== */

.sc-creative-featured-row{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:8px;
  padding-bottom:6px;
}
.sc-creative-featured-card{
  flex:0 0 280px;
  scroll-snap-align:start;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:var(--sc-card,#fff);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  transition:transform 150ms ease, box-shadow 150ms ease;
}
.sc-creative-featured-card:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.10); }
.sc-creative-featured-link{
  display:block;
  text-decoration:none;
  color:var(--sc-ink, #222);
}
.sc-creative-featured-thumb{
  display:block;
  width:100%;
  height:170px;
  object-fit:cover;
  background:#eee;
}
.sc-creative-featured-thumb-text{
  padding:14px 14px 10px;
  background:linear-gradient(135deg, #faf6ec, #efe6f1);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sc-creative-featured-thumb-text p{
  margin:0;
  font-size:0.92rem;
  line-height:1.45;
  color:var(--sc-ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sc-creative-featured-meta{
  display:block;
  padding:8px 12px 12px;
  font-size:0.88rem;
}
.sc-creative-feature-form{
  position:absolute;
  top:6px;
  right:6px;
  margin:0;
  z-index:2;
}
.sc-creative-feature-form .sc-btn{
  background:rgba(255,255,255,0.92);
  font-size:0.7rem;
  padding:3px 9px;
}

.sc-creative-filters{
  display:flex;
  gap:6px;
  margin:12px 0 14px;
  flex-wrap:wrap;
}
.sc-creative-filters .sc-tag{
  text-decoration:none;
  cursor:pointer;
}
.sc-creative-filters .sc-tag-active{
  background:var(--sc-teal, #5d9aa0);
  color:#fff;
}

.sc-creative-index-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.sc-creative-index-tile{
  position:relative;
  background:var(--sc-card,#fff);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  transition:transform 150ms ease, box-shadow 150ms ease;
}
.sc-creative-index-tile:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.sc-creative-index-link{
  display:block;
  text-decoration:none;
  color:var(--sc-ink, #222);
}
.sc-creative-index-thumb{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  background:#eee;
}
.sc-creative-index-thumb-text{
  padding:12px 14px;
  background:linear-gradient(135deg, #faf6ec, #efe6f1);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sc-creative-index-thumb-text p{
  margin:0;
  font-size:0.92rem;
  line-height:1.45;
  color:var(--sc-ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sc-creative-index-meta{
  display:block;
  padding:10px 12px 12px;
  font-size:0.88rem;
  line-height:1.4;
}

.sc-pager{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}
.sc-pager-link{
  padding:5px 12px;
  border-radius:6px;
  background:#f0ece2;
  color:var(--sc-ink, #222);
  text-decoration:none;
  font-size:0.9rem;
}
.sc-pager-current{
  background:var(--sc-teal, #5d9aa0);
  color:#fff;
}

body.sc-theme-dark .sc-creative-featured-card,
body.sc-theme-dark .sc-creative-index-tile{ background:#26221c; }
body.sc-theme-dark .sc-creative-featured-thumb-text,
body.sc-theme-dark .sc-creative-index-thumb-text{ background:linear-gradient(135deg, #2a2620, #3a2f3a); }
body.sc-theme-dark .sc-pager-link{ background:#3a3530; color:#e8dfca; }

/* ============================================================== *
 * /crisis/ — full-screen on-demand crisis route (v0.32.0)
 * ============================================================== */

.sc-crisis-card{
  border-left:6px solid #b11226;
}
.sc-nav-cta-crisis{
  background:#b11226 !important;
  color:#fff !important;
}
.sc-nav-cta-crisis:hover{ background:#8b0e1e !important; }

.sc-crisis-grid{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}
.sc-crisis-tile{
  background:var(--sc-card,#fff);
  border:1px solid var(--sc-rule, #e6e3dc);
  border-radius:10px;
  padding:16px 18px;
}
.sc-crisis-tile-primary{
  background:linear-gradient(135deg, #fef4f4, #fff);
  border-color:#e8a4ad;
}
.sc-crisis-tile-emergency{
  background:linear-gradient(135deg, #fffaf2, #fff);
  border-color:#dcc18a;
}
.sc-crisis-tile-line{
  font-family:'Lora', Georgia, serif;
  font-size:2.4rem;
  font-weight:700;
  margin:0 0 4px;
  color:#b11226;
  letter-spacing:0.02em;
}
.sc-crisis-tile-emergency .sc-crisis-tile-line{ color:#8b6914; }
.sc-crisis-tile-label{
  margin:0 0 6px;
  font-weight:600;
  font-size:1.05rem;
}
.sc-crisis-tile-help{
  margin:0 0 12px;
  color:var(--sc-ink-soft);
  font-size:0.92rem;
  line-height:1.45;
}
.sc-crisis-tile-cta{
  margin:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sc-crisis-notes{
  margin:8px 0 0;
  padding-left:20px;
  color:var(--sc-ink-soft);
  font-size:0.92rem;
  line-height:1.6;
}
body.sc-theme-dark .sc-crisis-tile{ background:#26221c; }
body.sc-theme-dark .sc-crisis-tile-primary{ background:linear-gradient(135deg, #2e1c1c, #26221c); }
body.sc-theme-dark .sc-crisis-tile-emergency{ background:linear-gradient(135deg, #2a2418, #26221c); }
body.sc-theme-dark .sc-crisis-tile-line{ color:#e07a87; }

/* ---- Tag list ---- */
.sc-taglist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.sc-taglist li{
  background:#ece7d8;
  color:var(--sc-ink);
  padding:4px 12px;
  border-radius:999px;
  font-size:0.88rem;
}

.sc-bio{white-space:pre-wrap}

.sc-photo-preview{
  display:inline-block;
  margin:0 0 10px;
  padding:4px;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  background:#fff;
}
.sc-photo-preview img{
  display:block;
  max-width:140px;
  max-height:140px;
  height:auto;
  border-radius:6px;
}
.sc-photo-preview-round img{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:50%;
}

.sc-readonly-field{
  display:inline-block;
  background:#f1ede3;
  padding:6px 12px;
  border-radius:6px;
  font-weight:500;
  color:var(--sc-navy);
  margin:0 0 6px 0;
}

.sc-form select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  font:inherit;
  background:#fff;
  color:var(--sc-ink);
}
.sc-form select:focus{outline:2px solid var(--sc-teal);outline-offset:1px;border-color:var(--sc-teal)}

/* ---- Identity strip + front switcher (logged-in header) ---- */
.sc-id-strip{
  background:#ece7d8;
  border-bottom:1px solid var(--sc-rule);
  padding:6px 16px;
  font-size:0.88rem;
}
.sc-id-strip-inner{display:flex;align-items:center;gap:10px}
.sc-id-strip-label{color:var(--sc-ink-soft)}

.sc-front-switcher{position:relative}
.sc-front-switcher summary{
  cursor:pointer;
  padding:4px 12px;
  border:1px solid var(--sc-rule);
  border-radius:999px;
  background:#fff;
  list-style:none;
  display:inline-block;
}
.sc-front-switcher summary::-webkit-details-marker{display:none}
.sc-front-switcher summary::after{
  content:" \25BE";
  margin-left:6px;
  color:var(--sc-ink-soft);
}
.sc-front-switcher[open] summary{border-color:var(--sc-teal)}
.sc-front-switcher-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:240px;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  padding:6px 0;
  z-index:50;
}
.sc-front-switcher-item{
  display:block;
  width:100%;
  padding:0;
  margin:0;
}
.sc-front-switcher-item button,
.sc-front-switcher-item.is-active{
  display:block;
  width:100%;
  padding:8px 14px;
  background:transparent;
  border:0;
  text-align:left;
  font:inherit;
  color:var(--sc-ink);
  cursor:pointer;
}
.sc-front-switcher-item button:hover,
.sc-front-switcher-item button:focus{
  background:#f1ede3;
}
.sc-front-switcher-item.is-active{
  background:#e8f1ef;
  cursor:default;
}
.sc-front-switcher-foot{
  border-top:1px solid var(--sc-rule);
  padding:6px 14px;
  font-size:0.82rem;
}
.sc-front-switcher-foot a{color:var(--sc-teal)}

/* ---- Names list on /me/ ---- */
.sc-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.sc-front-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
.sc-front-row{
  border:1px solid var(--sc-rule);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:#fff;
}
.sc-front-row.is-primary{
  background:#fbf7eb;
  border-color:#d6c693;
}
.sc-front-row.is-private{
  background:#f3eef3;
}
.sc-front-row-main{flex:1;min-width:200px}
.sc-front-row-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.sc-front-name strong{font-size:1.05rem}
.sc-tag{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-left:6px;
  vertical-align:middle;
}
.sc-tag-primary{background:var(--sc-gold);color:#fff}
.sc-tag-private{background:#7d5a8a;color:#fff}
.sc-tag-active {background:var(--sc-teal);color:#fff}

.sc-btn-sm{padding:6px 12px;font-size:0.85rem;min-height:36px}
.sc-btn-danger{color:var(--sc-warn);border-color:#f0d3cf}
.sc-btn-danger:hover{background:#fbecea;border-color:var(--sc-warn);color:var(--sc-warn)}

.sc-front-form{margin-top:14px}

/* ---- Public profile ---- */
.sc-front-avatar{
  display:block;
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:14px;
  border:1px solid var(--sc-rule);
}
.sc-other-voices{
  list-style:none;
  margin:0;
  padding:0;
}
.sc-other-voices li{
  padding:8px 0;
  border-bottom:1px solid var(--sc-rule);
}
.sc-other-voices li:last-child{border-bottom:0}

/* ---- System landing page ---- */
.sc-system-header{
  text-align:center;
}
.sc-system-photo{
  width:140px;height:140px;
  border-radius:50%;object-fit:cover;
  border:1px solid var(--sc-rule);
  margin:0 auto 14px;
  display:block;
}

.sc-parts-grid{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.sc-part-tile{
  border:1px solid var(--sc-rule);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  transition:border-color 150ms ease-out;
}
.sc-part-tile:hover{border-color:var(--sc-teal)}
.sc-part-tile-anonymous{
  background:#f4f1ea;
  border-style:dashed;
}
.sc-part-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 12px;
  text-decoration:none;
  color:var(--sc-ink);
  gap:6px;
}
.sc-part-link strong{font-size:1rem}
.sc-part-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--sc-rule);
  background:#f1ede3;
}
.sc-part-avatar-empty{
  background:linear-gradient(135deg,#ece7d8,#dfd9c5);
}
.sc-part-tagline{
  font-size:0.84rem;
  color:var(--sc-ink-soft);
  font-style:italic;
}
.sc-part-pronouns{
  font-size:0.78rem;
  color:var(--sc-ink-soft);
}

.sc-system-backlink a{color:var(--sc-teal)}

/* ---- Journal ---- */
.sc-journal{
  /* Background tint set inline based on the day's feeling color */
  transition: background 250ms ease;
}

.sc-feeling-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;
  margin-top:6px;
}
.sc-feeling-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1px solid var(--sc-rule);
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  font-size:0.9rem;
  color:var(--sc-ink);
  transition:transform 120ms ease-out, box-shadow 120ms ease-out;
  min-height:38px;
}
.sc-feeling-chip:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.sc-feeling-chip.is-current{
  outline:2px solid var(--sc-teal);
  outline-offset:1px;
}
.sc-feeling-tick{
  font-size:0.78rem;
  color:var(--sc-teal);
  font-weight:600;
}

.sc-feeling-log{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:14px;
  padding:10px 12px;
  background:rgba(255,255,255,0.6);
  border-radius:8px;
}
.sc-feeling-log-stop{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  padding:4px 10px;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  font-size:0.82rem;
  line-height:1.2;
}
.sc-feeling-log-stop strong{font-weight:600}
.sc-feeling-log-stop small{color:var(--sc-ink-soft);font-size:0.72rem}

.sc-journal-list{
  list-style:none;
  margin:0;
  padding:0;
}
.sc-journal-entry{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  margin-bottom:8px;
}
.sc-journal-entry.is-pinned{
  border-color:var(--sc-gold);
  background:#fbf7eb;
}
.sc-journal-body{flex:1;color:var(--sc-ink)}
.sc-journal-actions{display:flex;gap:6px;flex-shrink:0}

.sc-template-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:10px;
}
.sc-template-cat h5{
  margin:0 0 6px;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--sc-teal);
}
.sc-template-btn{
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  padding:8px 12px;
  margin-bottom:6px;
  font:inherit;
  cursor:pointer;
  transition:border-color 120ms ease;
}
.sc-template-btn:hover{border-color:var(--sc-teal)}

.sc-day-strip{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.sc-day-square{
  width:36px;
  height:36px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.78rem;
  color:#fff;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}

/* Week stack: 7 horizontal feeling-pattern strips, today on top.
   Each strip is a 24h timeline; left=midnight, right=midnight.  */
.sc-week-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
  border-radius:6px;
  overflow:hidden;
}
.sc-week-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.78rem;
  color:var(--sc-ink-soft);
}
.sc-week-row.is-today .sc-week-label{
  color:var(--sc-ink);
  font-weight:600;
}
.sc-week-label{
  flex:0 0 88px;
  text-align:right;
  white-space:nowrap;
}
.sc-week-strip{
  flex:1 1 auto;
  height:14px;
  border-radius:3px;
  background:#f1ece1;
  border:1px solid var(--sc-rule);
  display:block;
  min-width:0;
  position:relative;
  overflow:hidden;
}
.sc-week-band{
  position:absolute;
  top:0;
  bottom:0;
  background:transparent;
  cursor:help;
}
.sc-week-band:hover{
  background:rgba(255,255,255,0.18);
  outline:1px solid rgba(0,0,0,0.18);
}
.sc-week-row.is-empty .sc-week-strip{
  background:repeating-linear-gradient(
    45deg,
    #f5f0e3,
    #f5f0e3 4px,
    #ece6d5 4px,
    #ece6d5 8px
  );
  opacity:0.55;
}
.sc-week-row.is-today .sc-week-strip{
  border-color:var(--sc-ink-soft);
}
.sc-week-card{
  /* Profile context: keep the panel quiet so the gradient strips read as data,
     not decoration. */
  padding-bottom:14px;
}
@media (max-width:520px){
  .sc-week-label{flex:0 0 70px;font-size:0.72rem}
  .sc-week-strip{height:12px}
}

/* Nearby list */
.sc-nearby-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sc-nearby-row{
  border:1px solid var(--sc-rule);
  border-radius:8px;
  background:#fff;
}
.sc-nearby-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  text-decoration:none;
  color:var(--sc-ink);
}
.sc-nearby-link:hover{background:#fdfaf2}
.sc-nearby-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:#ece6d5;
}
.sc-nearby-avatar-empty{display:inline-block}
.sc-nearby-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.sc-nearby-name{font-size:1.02rem}
.sc-nearby-tag{
  color:var(--sc-ink-soft);
  font-size:0.85rem;
  font-style:italic;
}
.sc-nearby-near{
  color:var(--sc-ink-soft);
  font-size:0.75rem;
}

/* Anchor editor disclosure */
.sc-anchor-editor summary{font-size:0.85rem;outline:none}
.sc-anchor-editor[open] summary{margin-bottom:6px}

/* /me/ section nav */
.sc-me-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:10px 14px;
  background:#fdfaf2;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  font-size:0.9rem;
}
.sc-me-nav a{
  color:var(--sc-ink);
  text-decoration:none;
  padding:4px 10px;
  border-radius:14px;
  background:#f5efde;
}
.sc-me-nav a:hover{background:var(--sc-teal);color:#fff}

/* Feed */
.sc-feed-card{position:relative}
.sc-feed-composer{
  margin:8px 0 14px;
  padding:10px;
  background:#fdfaf2;
  border:1px solid var(--sc-rule);
  border-radius:8px;
}
.sc-feed-composer textarea{
  width:100%;
  resize:vertical;
  min-height:48px;
  padding:8px 10px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  font:inherit;
}
.sc-feed-list{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sc-feed-post{
  border:1px solid var(--sc-rule);
  border-radius:10px;
  padding:14px 16px;
  background:#fff;
  position:relative;
}
.sc-feed-post-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:0.86rem;
  color:var(--sc-ink-soft);
  margin-bottom:8px;
}
.sc-feed-post-head strong{color:var(--sc-ink);font-size:0.96rem}
.sc-feed-post-body{
  white-space:pre-wrap;
  line-height:1.5;
  margin-bottom:10px;
  color:var(--sc-ink);
}
.sc-feed-post-delete{position:absolute;top:10px;right:10px}

.sc-feed-react-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0;
}
.sc-feed-react-row-sm{margin:4px 0}
.sc-feed-react{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:14px;
  font-size:0.78rem;
  color:var(--sc-ink-soft);
  cursor:pointer;
  transition:background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sc-feed-react.sc-feed-react-sm{padding:2px 8px;font-size:0.74rem}
.sc-feed-react:hover{background:#f5efde;color:var(--sc-ink);border-color:var(--sc-teal)}
.sc-feed-react.is-mine{
  background:var(--sc-teal);
  color:#fff;
  border-color:var(--sc-teal);
}
.sc-feed-react.is-mine .sc-feed-react-count{color:#fff}
.sc-feed-react.is-readonly{cursor:default;background:#fdfaf2}
.sc-feed-react-count{
  font-weight:600;
  color:var(--sc-ink);
  font-size:0.74rem;
}

.sc-feed-comments{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid var(--sc-rule);
  padding-top:10px;
}
.sc-feed-comment{
  background:#fdfaf2;
  border-radius:8px;
  padding:8px 10px;
  position:relative;
}
.sc-feed-comment-meta{font-size:0.78rem;color:var(--sc-ink-soft);margin-bottom:2px}
.sc-feed-comment-meta a{color:var(--sc-ink);text-decoration:none}
.sc-feed-comment-meta a:hover{color:var(--sc-teal)}
.sc-feed-comment-body{white-space:pre-wrap;line-height:1.45;color:var(--sc-ink)}
.sc-feed-comment-delete{position:absolute;top:6px;right:6px}

.sc-feed-comment-form{
  display:flex;
  gap:6px;
  margin-top:10px;
}
.sc-feed-comment-form input[type="text"]{
  flex:1;
  padding:6px 10px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  font:inherit;
  min-width:0;
}

/* Homepage hero */
.sc-hero{text-align:center}
.sc-hero-logo{
  display:block;
  margin:0 auto 14px;
  max-width:300px;
  width:60%;
  height:auto;
}
.sc-hero-lede{
  font-size:1.05rem;
  line-height:1.5;
  max-width:560px;
  margin:0 auto;
  color:var(--sc-ink);
}
.sc-hero-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}

/* Site announcement banner on homepage */
.sc-announce{
  background:#fff8e6;
  border:1px solid #e8d8a8;
  border-left:4px solid var(--sc-gold,#b58b3a);
}

/* Homepage where-to-go nav */
.sc-home-nav-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
}
.sc-home-nav-list a{
  display:block;
  padding:14px 16px;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  text-decoration:none;
  color:var(--sc-ink);
  background:#fff;
  transition:border-color 120ms ease, background 120ms ease;
}
.sc-home-nav-list a:hover{border-color:var(--sc-teal);background:#fdfaf2}
.sc-home-nav-list strong{display:block;margin-bottom:4px;font-size:1rem}
.sc-home-nav-list span{display:block;color:var(--sc-ink-soft);font-size:0.85rem;line-height:1.4}

/* Owner edit bar on /profile/ */
.sc-profile-owner-bar{
  display:flex;
  justify-content:flex-end;
  margin:-6px 0 12px;
}
.sc-front-edit{max-width:720px}

/* Recording banner — always-on above any embedded room */
.sc-recording-banner{
  max-width:980px;
  margin:0 auto 14px;
  padding:14px 18px;
  border-radius:8px;
  background:#7d1f1f;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline;
  border:1px solid #5a1414;
  font-size:0.95rem;
  line-height:1.4;
}
.sc-recording-banner strong{
  font-size:1rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  flex:0 0 auto;
}
.sc-recording-banner span{flex:1 1 280px}

/* Sessions list + master calendar */
.sc-session-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sc-session-row{
  display:grid;
  grid-template-columns:160px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  background:#fff;
}
.sc-session-list-past .sc-session-row{background:#fdfaf2;opacity:0.85}
.sc-session-when{font-size:0.9rem}
.sc-session-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:0.9rem;min-width:0}
.sc-session-title{color:var(--sc-ink);text-decoration:none}
.sc-session-title:hover strong{color:var(--sc-teal)}
.sc-session-kind{
  background:#f1eae0;
  color:var(--sc-gold,#b58b3a);
  padding:2px 8px;
  border-radius:10px;
  font-size:0.78rem;
  text-transform:lowercase;
}
.sc-session-cta{justify-self:end}
@media (max-width:640px){
  .sc-session-row{grid-template-columns:1fr;gap:6px}
  .sc-session-cta{justify-self:start}
}

/* Master calendar on homepage */
.sc-home-calendar .sc-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sc-home-cal-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sc-home-cal-list li a{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:6px;
  background:#fdfaf2;
  text-decoration:none;
  color:var(--sc-ink);
  font-size:0.9rem;
}
.sc-home-cal-list li a:hover{background:#f5efde}
.sc-home-cal-when{color:var(--sc-ink-soft);font-size:0.85rem}
.sc-home-cal-host{color:var(--sc-ink-soft);font-size:0.82rem}
.sc-home-cal-live{
  background:#7d1f1f;
  color:#fff;
  padding:2px 8px;
  border-radius:10px;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
@media (max-width:520px){
  .sc-home-cal-list li a{grid-template-columns:1fr;gap:2px}
}

/* Two-column row on the new-session form */
.sc-field-row{display:flex;gap:14px;flex-wrap:wrap}
.sc-field-row .sc-field{flex:1 1 220px;min-width:0}

/* Video room page */
.sc-room-card{padding:14px 16px}
.sc-room-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.sc-room-frame-wrap{
  position:relative;
  width:100%;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--sc-rule);
  background:#1a1a1a;
}
.sc-room-frame{
  width:100%;
  height:78vh;
  min-height:480px;
  border:0;
  display:block;
}
@media (max-width:520px){
  .sc-room-frame{height:70vh;min-height:420px}
}

/* Full-cover background on video pages AND the homepage. Set on
   <body class="sc-page-video"> for video routes, and on <body class="home">
   automatically by WordPress on the front page. Cards on top stay opaque so
   text remains readable. */
body.sc-page-video,
body.home{
  background-image:url('assets/images/sc-bg-video.png');
  background-size:cover;
  /* Image top sits flush with the viewport top. */
  background-position:center 0;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
@media (max-width:520px){
  body.sc-page-video,
  body.home{background-position:center 10px}
}
/* Soften the image with a translucent overlay so cards still pop */
body.sc-page-video::before,
body.home::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(245,239,222,0.55);
  pointer-events:none;
  z-index:0;
}
body.sc-page-video > *,
body.home > *{position:relative;z-index:1}

/* 3-column room layout: chat | video | participants */
.sc-room-3col{
  display:grid;
  grid-template-columns:240px 1fr 240px;
  gap:10px;
  align-items:stretch;
}
.sc-room-mount{
  position:relative;
  min-height:78vh;
  min-width:0;
  background:#1a1a1a;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--sc-rule);
}
.sc-room-mount iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.sc-room-pane{
  background:#fdfaf2;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height:78vh;
  min-width:0;
}
.sc-room-pane h4{
  margin:0 0 8px;
  font-size:0.92rem;
  color:var(--sc-ink);
}
.sc-room-chat-list{
  list-style:none;
  margin:0;
  padding:0;
  flex:1 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.85rem;
}
.sc-room-chat-msg{
  background:#fff;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid var(--sc-rule);
  word-wrap:break-word;
}
.sc-room-chat-msg.is-mine{
  background:var(--sc-teal,#5d9aa0);
  color:#fff;
  border-color:transparent;
  align-self:flex-end;
  max-width:90%;
}
.sc-room-chat-msg.is-mine .sc-room-chat-who{color:rgba(255,255,255,0.85)}
.sc-room-chat-who{font-weight:600;color:var(--sc-ink-soft);margin-right:4px;display:block;font-size:0.72rem}
.sc-room-chat-text{display:block}
.sc-room-chat-form{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.sc-room-chat-form input{
  flex:1;
  padding:6px 8px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  font:inherit;
  font-size:0.85rem;
  min-width:0;
}

.sc-room-participants{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
}
.sc-room-participant-btn{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:18px;
  padding:6px 12px;
  font:inherit;
  font-size:0.85rem;
  cursor:pointer;
  color:var(--sc-ink);
  transition:background 120ms ease, border-color 120ms ease;
}
.sc-room-participant-btn:hover{background:var(--sc-teal,#5d9aa0);color:#fff;border-color:var(--sc-teal,#5d9aa0)}
.sc-room-participants-empty{color:var(--sc-ink-soft);font-size:0.78rem;font-style:italic}

/* DM bubbles inside the right pane */
.sc-room-dms{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
  overflow-y:auto;
  margin-top:6px;
}
.sc-room-dm{
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  max-height:280px;
  overflow:hidden;
}
.sc-room-dm header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  background:#f5efde;
  border-bottom:1px solid var(--sc-rule);
  font-size:0.8rem;
}
.sc-room-dm-close{
  background:transparent;
  border:0;
  font-size:1.2rem;
  cursor:pointer;
  line-height:1;
  padding:0 4px;
  color:var(--sc-ink-soft);
}
.sc-room-dm-list{
  list-style:none;
  margin:0;
  padding:6px 8px;
  flex:1 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.82rem;
}
.sc-room-dm-msg{
  padding:5px 8px;
  border-radius:10px;
  background:#f0eada;
  word-wrap:break-word;
  max-width:90%;
}
.sc-room-dm-msg.is-mine{background:var(--sc-teal,#5d9aa0);color:#fff;align-self:flex-end}
.sc-room-dm-form{display:flex;gap:4px;padding:6px 8px;border-top:1px solid var(--sc-rule)}
.sc-room-dm-form input{
  flex:1;
  padding:4px 8px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  font:inherit;
  font-size:0.82rem;
  min-width:0;
}
.sc-room-dm-form button{
  padding:4px 10px;
  border:0;
  background:var(--sc-teal,#5d9aa0);
  color:#fff;
  border-radius:6px;
  font:inherit;
  cursor:pointer;
}

@media (max-width:980px){
  .sc-room-3col{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .sc-room-pane{min-height:0;max-height:240px}
  .sc-room-mount{min-height:60vh}
}

/* ---- Forum ---- */
.sc-forum-cat-list{list-style:none;margin:0;padding:0}
.sc-forum-cat-row{
  padding:14px 16px;
  border-bottom:1px solid var(--sc-rule);
}
.sc-forum-cat-row:last-child{border-bottom:0}
.sc-forum-cat-link{display:block;color:var(--sc-ink);text-decoration:none}
.sc-forum-cat-link strong{font-size:1.05rem}
.sc-forum-cat-link:hover strong{color:var(--sc-teal)}

.sc-tag-systems  {background:#e0ecef;color:var(--sc-navy)}
.sc-tag-partners {background:#f1eae0;color:var(--sc-gold)}
.sc-tag-allies   {background:#e8f1ea;color:var(--sc-ok)}
.sc-tag-open     {background:#ece7d8;color:var(--sc-ink)}
.sc-tag-staff    {background:var(--sc-teal);color:#fff}

.sc-thread-list{list-style:none;margin:0;padding:0}
.sc-thread-row{
  padding:14px 18px;
  border-bottom:1px solid var(--sc-rule);
  background:#fff;
}
.sc-thread-row:last-child{border-bottom:0}
.sc-thread-row.is-sticky{background:#fbf7eb}
.sc-thread-row.is-locked{opacity:0.85}
.sc-thread-link{display:block;color:var(--sc-ink);text-decoration:none}
.sc-thread-title{font-size:1.04rem}
.sc-thread-title strong{color:var(--sc-navy)}
.sc-thread-link:hover .sc-thread-title strong{color:var(--sc-teal)}
.sc-thread-meta{font-size:0.85rem;color:var(--sc-ink-soft);margin-top:4px}

.sc-pagination{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  margin:16px 0;
}
.sc-pagination a{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  text-decoration:none;
  color:var(--sc-ink);
  font-size:0.88rem;
}
.sc-pagination a.is-current{background:var(--sc-teal);color:#fff;border-color:var(--sc-teal)}
.sc-pagination a:hover:not(.is-current){border-color:var(--sc-teal);color:var(--sc-teal)}

.sc-mod-tools{margin-top:8px;display:flex;gap:6px}

.sc-forum-post{padding:18px 20px}
.sc-post-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.sc-post-avatar{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;border:1px solid var(--sc-rule);
  background:#f1ede3;flex-shrink:0;
}
.sc-post-avatar-empty{background:linear-gradient(135deg,#ece7d8,#dfd9c5)}
.sc-post-body{margin-top:6px;line-height:1.6}
.sc-post-body p{margin:0 0 10px}
.sc-post-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.sc-tw-row{margin:8px 0;display:flex;gap:6px;flex-wrap:wrap}
.sc-tw-blur{
  background:#f1ede3;
  border:1px dashed var(--sc-rule);
  border-radius:8px;
  padding:14px 16px;
}
.sc-tw-blur summary{
  cursor:pointer;
  color:var(--sc-warn);
  font-weight:500;
}
.sc-tw-blur[open] summary{margin-bottom:10px}

.sc-react-row{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sc-react-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:999px;
  font:inherit;
  font-size:0.85rem;
  cursor:pointer;
  color:var(--sc-ink);
  transition:border-color 120ms;
}
.sc-react-chip:hover{border-color:var(--sc-teal)}
.sc-react-chip.is-mine{
  background:#e8f1ef;
  border-color:var(--sc-teal);
}
.sc-react-count{
  background:var(--sc-teal);
  color:#fff;
  border-radius:999px;
  padding:0 6px;
  font-size:0.78rem;
  font-weight:600;
}

/* ---- Pinned section on public profile ---- */
.sc-pinned-card{background:#fbf7eb;border-color:#d6c693}
.sc-pinned-list{list-style:none;margin:0;padding:0}
.sc-pinned-entry{padding:10px 0;border-bottom:1px solid #d6c693}
.sc-pinned-entry:last-child{border-bottom:0}
.sc-pinned-body{font-size:1.02rem}
.sc-pinned-meta{font-size:0.82rem;color:var(--sc-ink-soft);margin-top:2px}

/* ---- Non-clinical disclaimer callout (signup, about, etc.) ---- */
.sc-nonclinical-callout{
  background:#e8f1ef;
  border-left:4px solid var(--sc-sage);
  border-radius:4px;
  padding:14px 18px;
  margin:24px 0;
  font-size:0.95rem;
}
.sc-nonclinical-callout p{margin:0 0 8px 0}
.sc-nonclinical-callout p:last-child{margin-bottom:0}

/* ---- Crisis strip (before footer, on every page) ---- */
.sc-crisis-strip{
  background:#f1ede3;
  border-top:1px solid var(--sc-rule);
  border-bottom:1px solid var(--sc-rule);
  padding:24px 16px;
  margin-top:40px;
}
.sc-crisis-lede{
  margin:0 0 14px 0;
  color:var(--sc-navy);
  font-size:1rem;
}
.sc-crisis-lines{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  font-size:0.9rem;
}
.sc-crisis-lines li{
  padding:8px 12px;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:6px;
}
.sc-crisis-lines strong{
  display:inline-block;
  color:var(--sc-teal);
  font-weight:700;
  margin-right:8px;
}
.sc-crisis-lines span{color:var(--sc-ink-soft)}

/* ---- Footer ---- */
.sc-footer .sc-wrap{max-width:900px;margin:0 auto}
.sc-nonclinical-footer{
  font-size:0.88rem;
  color:var(--sc-ink-soft);
  text-align:center;
  margin:0 0 12px;
  font-style:italic;
}
.sc-footer-links{
  text-align:center;
  font-size:0.88rem;
  margin:0 0 10px;
}
.sc-footer-links a{color:var(--sc-teal);text-decoration:none;margin:0 4px}
.sc-footer-links a:hover{text-decoration:underline}
.sc-footer-legal{
  text-align:center;
  font-size:0.8rem;
  color:var(--sc-ink-soft);
  margin:0;
}

/* ---- Static page (about, for-clinicians) ---- */
.sc-static-page h3{margin-top:28px}
.sc-static-page blockquote{
  border-left:4px solid var(--sc-sage);
  padding:4px 20px;
  margin:18px 0;
  font-style:italic;
  color:var(--sc-ink-soft);
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Per-member override: same rules when body has .sc-motion-reduced (set from
   the member's prefs). This also kicks in when the OS setting is off but the
   member has chosen to reduce motion site-wide. */
.sc-motion-reduced *, .sc-motion-reduced *::before, .sc-motion-reduced *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ---- Trust gate + reports + mod queue (v0.16) ---- */
.sc-banner-info{
  background: var(--sc-cream, #fbf6e9);
  border-left: 4px solid var(--sc-sage, #6b8e6b);
  padding: 14px 18px;
}
.sc-forum-post.is-held{
  opacity: 0.92;
  border-left: 3px solid var(--sc-sage, #6b8e6b);
}
.sc-held-banner{
  background: rgba(107, 142, 107, 0.08);
  border: 1px solid rgba(107, 142, 107, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--sc-ink, #2c2c2c);
}
.sc-report-toggle{
  display: inline-block;
  margin-left: 8px;
  font-size: 0.85rem;
}
.sc-report-toggle summary{
  cursor: pointer;
  color: var(--sc-ink-soft, #666);
  list-style: none;
}
.sc-report-toggle summary::-webkit-details-marker{display:none}
.sc-report-form{
  margin-top: 8px;
  padding: 10px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}
.sc-report-form label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.sc-report-form select, .sc-report-form input[type=text]{
  padding: 6px 8px;
  border: 1px solid var(--sc-line, #ddd);
  border-radius: 4px;
  font-size: 0.9rem;
}
.sc-mod-row{
  border-bottom: 1px solid var(--sc-line, #eee);
  padding: 14px 0;
}
.sc-mod-row:last-child{border-bottom:0}
.sc-mod-meta{font-size: 0.9rem; margin-bottom: 6px}
.sc-mod-body{margin: 8px 0}
.sc-mod-body p{margin: 6px 0}
.sc-mod-actions{display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px}
.sc-mod-resolve{display: flex; gap: 6px; align-items: center; flex-wrap: wrap}

/* ---- Notifications + bell (v0.17) ---- */
.sc-header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sc-header-logo-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  background:#f5efde;       /* warm cream behind transparent PNG (no harsh white) */
  border-radius:18px;
  padding:6px 10px;
}
.sc-header-logo{
  display:block;
  height:280px;
  width:auto;
  max-width:400px;
  object-fit:contain;
}
.sc-header-title{flex:1 1 auto;min-width:0}
@media (max-width:520px){
  /* v0.32.3: shrink the header on mobile — 220px logo was eating ~30% of
     the viewport before content ever appeared. */
  .sc-header-logo-link{padding:3px 5px;border-radius:10px}
  .sc-header-logo{height:120px;max-width:160px}
  .sc-header h1{font-size:1.6rem;margin:0 0 2px}
  .sc-header .tag{font-size:0.92rem}
  .sc-header{padding:14px 14px 10px}
  .sc-wrap{padding:18px}
}

/* Top primary nav (under the header title row) */
.sc-main-nav{
  background:var(--sc-navy,#243a4a);
  margin-top:14px;
  border-radius:8px;
  /* Establish a stacking context so the take-a-break dropdown (and any
     other open menu inside the nav) floats above page content below. */
  position:relative;
  z-index:1000;
}
.sc-main-nav-inner{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  padding:6px 8px;
  align-items:center;
}
.sc-main-nav a{
  color:#fff;
  text-decoration:none;
  padding:8px 14px;
  border-radius:6px;
  font-size:0.95rem;
  white-space:nowrap;
  transition:background 120ms ease;
}
.sc-main-nav a:hover{background:rgba(255,255,255,0.12)}
.sc-main-nav .sc-nav-cta{
  background:var(--sc-teal,#5d9aa0);
  margin-left:6px;
}
.sc-main-nav .sc-nav-cta:hover{background:rgba(93,154,160,0.85)}
.sc-main-nav .sc-nav-cta-donate{
  background:var(--sc-gold,#b58b3a);
}
.sc-main-nav .sc-nav-cta-donate:hover{background:rgba(181,139,58,0.85)}

/* Donate page */
.sc-donate-hero{text-align:center;background:#fffaf0}
.sc-donate-lede{
  font-size:1.05rem;
  line-height:1.55;
  max-width:640px;
  margin:0 auto;
  color:var(--sc-ink);
}
.sc-donate-cta{text-align:center;background:#fff8e6;border-color:#e8d8a8}
.sc-donate-cta .sc-btn-lg{
  font-size:1.05rem;
  padding:14px 26px;
}
.sc-donate-uses{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sc-donate-uses li{
  background:#fdfaf2;
  border:1px solid var(--sc-rule);
  border-left:3px solid var(--sc-gold,#b58b3a);
  border-radius:6px;
  padding:12px 14px;
  line-height:1.5;
}
.sc-donate-uses strong{color:var(--sc-ink)}

.sc-donate-stripe{
  background:#f5f0e0;
  border-color:#e3d8b8;
  text-align:center;
}
.sc-donate-stripe-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:16px;
}

/* Creative works gallery */
.sc-creative-composer{margin-bottom:14px}
.sc-creative-composer summary{cursor:pointer;display:inline-block}
.sc-creative-composer[open] summary{margin-bottom:8px}
.sc-creative-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.sc-creative-piece{
  border:1px solid var(--sc-rule);
  border-radius:10px;
  padding:14px 16px;
  background:#fff;
}
.sc-creative-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin-bottom:8px;
}
.sc-creative-title{font-size:1.05rem;color:var(--sc-ink)}
.sc-creative-kind-tag{
  background:#f1eae0;
  color:var(--sc-gold,#b58b3a);
  padding:2px 9px;
  border-radius:10px;
  font-size:0.74rem;
  text-transform:lowercase;
  letter-spacing:0.04em;
}
.sc-creative-art{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:6px;
  margin-bottom:8px;
}
.sc-creative-caption{margin:6px 0 0;color:var(--sc-ink);font-size:0.9rem}
.sc-creative-poetry{
  font-family:Georgia,serif;
  font-size:1rem;
  line-height:1.55;
  white-space:pre-wrap;
  background:#fdfaf2;
  padding:14px 16px;
  border-radius:6px;
  margin:0;
  border-left:3px solid var(--sc-teal,#5d9aa0);
}
.sc-creative-story{
  line-height:1.6;
  font-size:0.96rem;
  color:var(--sc-ink);
}
.sc-creative-tw summary{cursor:pointer;margin-bottom:8px}
.sc-creative-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--sc-rule);
  font-size:0.82rem;
}
.sc-creative-foot-actions{display:inline-flex;gap:6px;align-items:center}

/* Single-piece detail page: tighten spacing and make the piece feel
   like the page's primary subject rather than a list item. */
.sc-creative-detail .sc-creative-list{margin:6px 0 0}
.sc-creative-detail .sc-creative-piece{
  border:0;
  padding:0;
  background:transparent;
}

/* ============================================================== *
 * Photo gallery (separate from creative works) — 2x5 grid + lightbox
 * ============================================================== */
.sc-gallery-card{padding-bottom:14px}
.sc-gallery-composer summary{cursor:pointer;display:inline-block}
.sc-gallery-composer[open] summary{margin-bottom:8px}
.sc-gallery-grid{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
}
.sc-gallery-grid-full{
  /* On the full /gallery/ pages, allow more flexible columns */
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
}
@media (max-width:680px){
  .sc-gallery-grid{grid-template-columns:repeat(3, 1fr)}
}
.sc-gallery-tile{
  position:relative;
  aspect-ratio:1;
  background:#f5efde;
  border-radius:8px;
  overflow:hidden;
}
.sc-gallery-thumb{
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  display:block;
}
.sc-gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 200ms ease;
}
.sc-gallery-thumb:hover img{transform:scale(1.05)}
.sc-gallery-tile-delete{
  position:absolute;
  top:4px;
  right:4px;
  margin:0;
}
.sc-gallery-tile-delete button{
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:0;
  border-radius:50%;
  width:24px;
  height:24px;
  font-size:0.95rem;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.sc-gallery-tile-delete button:hover{background:rgba(125,31,31,0.85)}
.sc-gallery-more-wrap{text-align:center;margin:14px 0 0}
.sc-gallery-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
}

/* Lightbox */
.sc-lightbox[hidden]{display:none}
.sc-lightbox{
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sc-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,12,8,0.92);
  cursor:zoom-out;
}
.sc-lightbox-frame{
  position:relative;
  z-index:1;
  max-width:90vw;
  max-height:90vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.sc-lightbox-frame img{
  max-width:90vw;
  max-height:80vh;
  width:auto;
  height:auto;
  border-radius:6px;
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
  background:#000;
}
.sc-lightbox-frame figcaption{
  color:#e8dfca;
  font-size:0.95rem;
  text-align:center;
  max-width:680px;
  display:none;
}
.sc-lightbox-close,
.sc-lightbox-prev,
.sc-lightbox-next{
  position:absolute;
  z-index:2;
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:0;
  border-radius:50%;
  width:48px;
  height:48px;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background 120ms ease;
}
.sc-lightbox-close:hover,
.sc-lightbox-prev:hover,
.sc-lightbox-next:hover{background:rgba(0,0,0,0.85)}
.sc-lightbox-close{top:24px;right:24px}
.sc-lightbox-prev{left:24px;top:50%;transform:translateY(-50%)}
.sc-lightbox-next{right:24px;top:50%;transform:translateY(-50%)}
@media (max-width:520px){
  .sc-lightbox-close{top:14px;right:14px;width:40px;height:40px}
  .sc-lightbox-prev{left:8px;width:40px;height:40px}
  .sc-lightbox-next{right:8px;width:40px;height:40px}
  .sc-lightbox-frame img{max-width:96vw;max-height:75vh}
}
body.sc-lightbox-open{overflow:hidden}

/* "Take a break" — global pause overlay */
.sc-pause-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(245,239,222,0.55);
  backdrop-filter:blur(14px) saturate(0.85);
  -webkit-backdrop-filter:blur(14px) saturate(0.85);
}
.sc-pause-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.sc-pause-card{
  background:#fdfaf2;
  border:1px solid var(--sc-rule);
  border-radius:14px;
  max-width:520px;
  width:100%;
  padding:28px 28px 24px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
}
.sc-pause-card h2{font-size:1.4rem;line-height:1.3;color:var(--sc-ink)}
.sc-pause-card p{line-height:1.55;color:var(--sc-ink)}
.sc-pause-crisis{
  margin-top:18px;
  padding:14px 16px;
  background:#fff;
  border-left:3px solid var(--sc-teal,#5d9aa0);
  border-radius:6px;
}
.sc-pause-crisis-lede{margin:0 0 8px;font-size:0.95rem}
.sc-pause-crisis ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.9rem;
}
.sc-pause-crisis ul li strong{color:var(--sc-teal,#5d9aa0)}
.sc-pause-end{text-align:center}

/* "Take a break" trigger inside the top nav */
.sc-nav-pause{position:relative}
.sc-nav-pause summary{
  list-style:none;
  cursor:pointer;
  color:#fff;
  text-decoration:none;
  padding:8px 14px;
  border-radius:6px;
  font-size:0.95rem;
  white-space:nowrap;
  font-style:italic;
  transition:background 120ms ease;
}
.sc-nav-pause summary::-webkit-details-marker{display:none}
.sc-nav-pause summary::marker{content:""}
.sc-nav-pause summary:hover{background:rgba(255,255,255,0.12)}
.sc-nav-pause{z-index:1000}
.sc-nav-pause[open]{z-index:1001}
.sc-nav-pause-menu{
  position:absolute;
  top:100%;
  right:0;
  margin-top:6px;
  background:#fff;
  border:1px solid var(--sc-rule);
  border-radius:8px;
  padding:12px;
  min-width:180px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:1001;
}
.sc-nav-pause-menu button{
  text-align:left;
  background:#fdfaf2;
  border:1px solid var(--sc-rule);
  border-radius:6px;
  padding:8px 12px;
  font:inherit;
  font-size:0.9rem;
  cursor:pointer;
  color:var(--sc-ink);
}
.sc-nav-pause-menu button:hover{background:var(--sc-teal,#5d9aa0);color:#fff;border-color:var(--sc-teal,#5d9aa0)}

/* Safety-practices intro modal (homepage first-visit) */
.sc-safety-modal[hidden]{display:none}
.sc-safety-modal{
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.sc-safety-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(34,34,34,0.55);
  cursor:pointer;
}
.sc-safety-modal-card{
  position:relative;
  background:#fdfaf2;
  border-radius:14px;
  max-width:760px;
  width:100%;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 36px rgba(0,0,0,0.18);
}
.sc-safety-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px 22px 12px;
  border-bottom:1px solid var(--sc-rule);
}
.sc-safety-modal-head h2{
  font-size:1.15rem;
  line-height:1.35;
  color:var(--sc-ink);
  flex:1 1 auto;
}
.sc-safety-modal-close{
  background:transparent;
  border:0;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  padding:0 6px;
  color:var(--sc-ink-soft);
}
.sc-safety-modal-close:hover{color:var(--sc-ink)}
.sc-safety-modal-body{
  padding:18px 22px;
  overflow-y:auto;
  flex:1 1 auto;
  font-size:0.95rem;
  line-height:1.55;
}
.sc-safety-modal-body h3{
  font-size:1rem;
  margin-top:18px;
  margin-bottom:6px;
  color:var(--sc-ink);
}
.sc-safety-modal-body h3:first-child{margin-top:0}
.sc-safety-modal-body ul{padding-left:20px;margin:6px 0 12px}
.sc-safety-modal-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  border-top:1px solid var(--sc-rule);
  background:#fff;
}
body.sc-safety-modal-open{overflow:hidden}

/* Static page version */
.sc-safety-page h3{
  font-size:1.05rem;
  margin-top:22px;
  color:var(--sc-ink);
}
.sc-safety-page ul{padding-left:22px}

/* Book page */
.sc-book-hero{text-align:center}
.sc-book-subtitle{
  font-size:1.05rem;
  font-style:italic;
  color:var(--sc-ink);
  margin:6px 0 6px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* Study page */
.sc-study-hero{text-align:center}
.sc-study-lede{
  font-size:1rem;
  line-height:1.55;
  max-width:640px;
  margin:0 auto;
  color:var(--sc-ink);
}
.sc-study-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.sc-study-item{
  border:1px solid var(--sc-rule);
  border-left:3px solid var(--sc-teal,#5d9aa0);
  border-radius:8px;
  padding:14px 16px;
  background:#fff;
}
.sc-study-item-head{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.sc-study-item-title{font-size:1.02rem;line-height:1.4}
.sc-study-item-title a{color:var(--sc-ink);text-decoration:none}
.sc-study-item-title a:hover{color:var(--sc-teal,#5d9aa0);text-decoration:underline}
.sc-study-item-why{margin:0;line-height:1.55;color:var(--sc-ink)}

/* Dark mode tweaks */
body.sc-theme-dark .sc-study-item{background:#26221c}

/* Local discovery map (Leaflet, jittered pins) */
.sc-map-canvas{
  width:100%;
  height:560px;
  margin-top:14px;
  border-radius:8px;
  border:1px solid var(--sc-rule);
  background:#e9e3d3;
  z-index:1; /* keep below header nav + modals */
}
@media (max-width:520px){
  .sc-map-canvas{height:420px}
}
/* Dark mode: tile imagery from OSM stays as-is; just darken the empty
   bg shown before tiles paint. */
body.sc-theme-dark .sc-map-canvas{background:#1c1814}

/* ============================================================== *
 * Dark mode (v0.30.5)
 *
 * The theme pref (auto/light/dark) lands as body.sc-theme-light or
 * body.sc-theme-dark when explicit. With no class, OS prefers-color-scheme
 * decides. Trauma-informed palette: warm darks (no pure black), warm
 * off-white text (no #fff blast), accents kept but slightly brightened
 * for AA contrast.
 * ============================================================== */

@media (prefers-color-scheme: dark) {
  body:not(.sc-theme-light){
    --sc-paper:#1c1814;
    --sc-card:#26221c;
    --sc-ink:#e8dfca;
    --sc-ink-soft:#a89b85;
    --sc-rule:#3d352b;
  }
}
body.sc-theme-dark{
  --sc-paper:#1c1814;
  --sc-card:#26221c;
  --sc-ink:#e8dfca;
  --sc-ink-soft:#a89b85;
  --sc-rule:#3d352b;
}

/* Surfaces with hardcoded light backgrounds — override in dark mode.
   Grouped under one selector list to keep this block scannable.       */
body.sc-theme-dark .sc-card,
body.sc-theme-dark .sc-feed-post,
body.sc-theme-dark .sc-feed-comment,
body.sc-theme-dark .sc-creative-piece,
body.sc-theme-dark .sc-session-row,
body.sc-theme-dark .sc-nearby-row,
body.sc-theme-dark .sc-room-pane,
body.sc-theme-dark .sc-room-frame-wrap,
body.sc-theme-dark .sc-room-dm,
body.sc-theme-dark .sc-front-row,
body.sc-theme-dark .sc-pinned-card,
body.sc-theme-dark .sc-week-strip,
body.sc-theme-dark .sc-room-participant-btn,
body.sc-theme-dark .sc-feed-react,
body.sc-theme-dark .sc-week-row,
body.sc-theme-dark .sc-home-nav-list a,
body.sc-theme-dark input[type="text"],
body.sc-theme-dark input[type="email"],
body.sc-theme-dark input[type="url"],
body.sc-theme-dark input[type="password"],
body.sc-theme-dark input[type="date"],
body.sc-theme-dark input[type="datetime-local"],
body.sc-theme-dark textarea,
body.sc-theme-dark select{
  background:#26221c;
  color:var(--sc-ink);
  border-color:var(--sc-rule);
}

/* Slightly elevated ("soft cream" → "soft cocoa") surfaces */
body.sc-theme-dark .sc-id-strip,
body.sc-theme-dark .sc-feed-composer,
body.sc-theme-dark .sc-room-pane,
body.sc-theme-dark .sc-feed-comment,
body.sc-theme-dark .sc-room-dm header,
body.sc-theme-dark .sc-pause-card,
body.sc-theme-dark .sc-safety-modal-card,
body.sc-theme-dark .sc-safety-modal-foot,
body.sc-theme-dark .sc-donate-cta,
body.sc-theme-dark .sc-donate-stripe,
body.sc-theme-dark .sc-donate-uses li,
body.sc-theme-dark .sc-home-cal-list li a,
body.sc-theme-dark .sc-feed-comment-form input[type="text"],
body.sc-theme-dark .sc-creative-poetry,
body.sc-theme-dark .sc-pause-crisis{
  background:#2f2922;
}

/* Header logo cream panel — keep the panel but darken so the transparent
   PNG still pops without harsh light. */
body.sc-theme-dark .sc-header-logo-link{background:#2f2922}

/* Hover states */
body.sc-theme-dark .sc-feed-react:hover,
body.sc-theme-dark .sc-room-participant-btn:hover{background:var(--sc-teal);color:#fff;border-color:var(--sc-teal)}
body.sc-theme-dark .sc-home-nav-list a:hover{background:#332d24}

/* Text color cleanup on still-hardcoded muted text */
body.sc-theme-dark .sc-muted{color:var(--sc-ink-soft)}

/* Accent chips on dark — keep visible */
body.sc-theme-dark .sc-session-kind,
body.sc-theme-dark .sc-creative-kind-tag{
  background:#3a3022;
  color:#e0c997;
}
body.sc-theme-dark .sc-tag-systems{background:#1c3a45;color:#9bd1e0}
body.sc-theme-dark .sc-tag-partners{background:#3a3022;color:#e0c997}
body.sc-theme-dark .sc-tag-allies{background:#1f3a2a;color:#9bd6a8}

/* Bell badge stays bright (urgency); recording banner stays bright (warning) */

/* Backgrounds with image overlay (homepage + video pages) — darker tint */
body.sc-theme-dark.sc-page-video::before,
body.sc-theme-dark.home::before{background:rgba(28,24,20,0.7)}
@media (prefers-color-scheme: dark) {
  body:not(.sc-theme-light).sc-page-video::before,
  body:not(.sc-theme-light).home::before{background:rgba(28,24,20,0.7)}
}

/* The crisis strip in the footer is already navy — stays. */

/* ============================================================== *
 * System map — animated bubble visualization (v0.30.6)
 * ============================================================== */

.sc-system-map-card{
  /* dial back the card padding so the map can breathe to the edges */
  padding:18px 12px;
  text-align:center;
  overflow:hidden;
}

/* Optional ambient YouTube video behind the bubble map (admin-toggleable).
   Content cards inside the card sit on top via z-index; the iframe is
   non-interactive (pointer-events:none, tabindex:-1) and respects reduced
   motion via inline JS that simply skips the iframe injection. */
.sc-system-map-card-with-video{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:12px;
}
.sc-system-map-card-with-video > *{ position:relative; z-index:2; }
.sc-system-map-video-bg,
.sc-system-map-video-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}
.sc-system-map-video-bg{
  z-index:0;
  overflow:hidden;
  background:#000; /* until iframe loads */
}
.sc-system-map-video-overlay{
  z-index:1;
  /* Light wash so the bubbles still contrast, but the video stays vivid.
     Was 0.62 in v0.31.11; dialed back in v0.31.15 per "it's not bright". */
  background:rgba(255,255,255,0.30);
}
body.sc-theme-dark .sc-system-map-video-overlay{
  background:rgba(28,24,20,0.40);
}
.sc-system-map-video-bg iframe{
  position:absolute;
  top:50%;
  left:50%;
  /* Oversize the iframe by ~40% so YouTube's title strip (top) and any
     watermark/branding (bottom) fall outside the visible area. The container
     clips via overflow:hidden. Width scales proportionally to preserve 16:9 so
     the video itself isn't letterboxed inside the iframe. */
  height:140%;
  width:calc(140% * 16 / 9);  /* = 248.89%, keeps 16:9 */
  min-width:100%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}
/* When the video is on, the help paragraph below the map sits over a darker
   surface — flip its color to white with a soft shadow for legibility. */
.sc-system-map-card-with-video .sc-help{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.55);
}
/* When the video is on, swap the teal spoke lines for a white gradient + halo
   so they read against any video frame. The breathing depth animation is
   preserved; just the palette and minimum opacity change. */
.sc-system-map-card-with-video .sc-map-line{
  background:linear-gradient(to right, rgba(255,255,255,0.35), rgba(255,255,255,0.95));
  animation-name:sc-map-line-depth-on-video;
}
@keyframes sc-map-line-depth-on-video{
  0%   {
    transform:translateY(-50%) scaleY(0.35);
    opacity:0.55;
    box-shadow:none;
  }
  100% {
    transform:translateY(-50%) scaleY(2.4);
    opacity:1;
    box-shadow:0 0 10px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.4);
  }
}
.sc-system-map{
  position:relative;
  width:100%;
  max-width:560px;
  /* v0.31.19: 4/3 ratio = 25% shorter than the previous square. Bubbles at
     near-vertical angles may clip slightly during max breath; acceptable for
     ambient texture. Drop the breath range to compensate if needed. */
  aspect-ratio:4/3;
  margin:0 auto;
}

/* Center: system photo + name */
.sc-system-map-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:3;
  pointer-events:none;
}
.sc-system-map-center-bubble{
  width:128px;
  height:128px;
  border-radius:50%;
  overflow:hidden;
  background:var(--sc-card,#fff);
  border:3px solid var(--sc-teal,#5d9aa0);
  box-shadow:0 0 0 8px rgba(93,154,160,0.12), 0 4px 18px rgba(0,0,0,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:sc-map-center-pulse 6s ease-in-out infinite alternate;
}
.sc-system-map-center-bubble img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.sc-system-map-initials{
  font-size:2.4rem;
  font-weight:700;
  color:var(--sc-teal,#5d9aa0);
}
.sc-system-map-center-label{
  margin-top:10px;
  font-weight:600;
  color:var(--sc-ink);
  background:var(--sc-card,#fff);
  border-radius:10px;
  padding:4px 10px;
  font-size:0.92rem;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
@keyframes sc-map-center-pulse{
  0%   { box-shadow:0 0 0 8px rgba(93,154,160,0.12), 0 4px 18px rgba(0,0,0,0.10); }
  100% { box-shadow:0 0 0 14px rgba(93,154,160,0.18), 0 6px 22px rgba(0,0,0,0.14); }
}

/* Each spoke is a zero-size element at the center; the orbit child rotates,
   the extender child sets the radial reach, and the bubble sits at the far end. */
.sc-system-map-spoke{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  /* per-spoke base angle (set inline) */
  transform:rotate(var(--sc-map-angle, 0deg));
}
.sc-map-orbit{
  position:absolute;
  top:0; left:0;
  width:0; height:0;
  /* pendulum swing around the center */
  transform-origin:0 0;
  animation:sc-map-orbit var(--sc-map-orbit-dur, 9s) ease-in-out infinite alternate;
  animation-delay:var(--sc-map-orbit-delay, 0s);
}
@keyframes sc-map-orbit{
  0%   { transform:rotate(-14deg); }
  100% { transform:rotate(14deg); }
}
.sc-map-extender{
  position:absolute;
  top:-2px;
  left:0;
  height:3px;
  /* radial reach — animated to make the line breathe in/out.
     v0.31.9: wider swing so the bubble visibly moves toward/away from center. */
  width:200px;
  animation:sc-map-extend var(--sc-map-breathe-dur, 6s) ease-in-out infinite alternate;
  animation-delay:var(--sc-map-breathe-delay, 0s);
}
@keyframes sc-map-extend{
  0%   { width:168px; }
  100% { width:240px; }
}
.sc-map-line{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:3px;
  transform:translateY(-50%) scaleY(1);
  transform-origin:center;
  background:linear-gradient(to right, rgba(93,154,160,0.08), rgba(93,154,160,0.75));
  border-radius:2px;
  /* line thickens/thins in sync with bubble pulse to read as depth.
     v0.31.9: bigger scaleY range + opacity range + a soft glow at the bright end. */
  animation:sc-map-line-depth var(--sc-map-breathe-dur, 6s) ease-in-out infinite alternate;
  animation-delay:var(--sc-map-breathe-delay, 0s);
}
@keyframes sc-map-line-depth{
  0%   {
    transform:translateY(-50%) scaleY(0.3);
    opacity:0.3;
    box-shadow:none;
  }
  100% {
    transform:translateY(-50%) scaleY(2.4);
    opacity:1;
    box-shadow:0 0 8px rgba(93,154,160,0.45);
  }
}

/* Wrapper sits at the far end of the extender — its only job is positioning.
   The bubble inside counter-rotates around its own center to stay upright,
   without interfering with the wrapper's translate. Fixes the bubble drift
   bug seen pre-v0.30.7 where translate + rotate were composed on the same
   element, making the bubble's apparent position depend on its angle. */
.sc-map-bubble-wrap{
  position:absolute;
  right:0;
  top:50%;
  transform:translate(50%, -50%);
  z-index:2;
}
.sc-map-bubble{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:var(--sc-ink);
  /* upright relative to the page despite the spoke's angular rotation */
  transform:rotate(calc(var(--sc-map-angle, 0deg) * -1));
  transform-origin:50% 50%;
  pointer-events:auto;
}
.sc-map-bubble-photo{
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sc-card,#fff);
  border:2px solid rgba(93,154,160,0.55);
  box-shadow:0 3px 10px rgba(0,0,0,0.10);
  font-size:1.6rem;
  font-weight:600;
  color:var(--sc-ink-soft);
  overflow:hidden;
  transition:border-color 200ms ease;
  /* depth pulse — bubble reads as moving toward / away from the viewer.
     All bubbles share the same scale range, just different phases, so no
     single front is "larger than another" on average. */
  animation:sc-map-bubble-depth var(--sc-map-breathe-dur, 6s) ease-in-out infinite alternate;
  animation-delay:var(--sc-map-breathe-delay, 0s);
}
/* v0.31.9: dramatized depth pulse — wider scale range + atmospheric perspective
   (slight blur + desaturation when "far", crisp + saturated when "close") to
   sell the 3D illusion. All bubbles share the same range, just different phases. */
@keyframes sc-map-bubble-depth{
  0%   {
    transform:scale(0.7);
    box-shadow:0 0 2px rgba(0,0,0,0.05);
    filter:brightness(0.82) saturate(0.85) blur(0.6px);
  }
  100% {
    transform:scale(1.34);
    box-shadow:0 16px 38px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.14);
    filter:brightness(1.12) saturate(1.08) blur(0);
  }
}
.sc-map-bubble:hover .sc-map-bubble-photo{
  border-color:var(--sc-teal,#5d9aa0);
}
.sc-map-bubble-empty{display:inline-flex}
.sc-map-bubble-label{
  margin-top:6px;
  font-size:0.82rem;
  font-weight:600;
  background:var(--sc-card,#fff);
  border-radius:10px;
  padding:2px 8px;
  white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Anonymous front: dimmed presence, no link */
.sc-system-map-spoke.sc-map-vis-anonymous .sc-map-bubble{cursor:default;opacity:0.7}
.sc-system-map-spoke.sc-map-vis-anonymous .sc-map-bubble-photo{
  background:repeating-linear-gradient(45deg, #efe9da, #efe9da 6px, #e6dfcc 6px, #e6dfcc 12px);
  border-color:rgba(93,154,160,0.25);
  color:var(--sc-ink-soft);
}

/* Friends-only spoke gets a slightly different tint */
.sc-system-map-spoke.sc-map-vis-friends .sc-map-bubble-photo{
  border-color:rgba(181,139,58,0.55);
}

/* Reduced motion: kill all map animations. Bubbles still render at their
   natural angles + radius, just stationary. Members with
   prefers-reduced-motion (OS) or motion=always_reduced (pref) get this. */
@media (prefers-reduced-motion: reduce){
  .sc-map-orbit, .sc-map-extender, .sc-map-line,
  .sc-map-bubble-photo, .sc-system-map-center-bubble{animation:none}
}
body.sc-motion-reduced .sc-map-orbit,
body.sc-motion-reduced .sc-map-extender,
body.sc-motion-reduced .sc-map-line,
body.sc-motion-reduced .sc-map-bubble-photo,
body.sc-motion-reduced .sc-system-map-center-bubble{animation:none}

/* Mobile: tighten the radius + bubble sizes */
@media (max-width:520px){
  .sc-system-map{max-width:340px}
  .sc-system-map-center-bubble{width:88px;height:88px}
  .sc-system-map-initials{font-size:1.7rem}
  .sc-map-extender{width:130px}
  @keyframes sc-map-extend{
    0%{width:120px} 100%{width:148px}
  }
  .sc-map-bubble-photo{width:54px;height:54px;font-size:1.2rem}
  .sc-map-bubble-label{font-size:0.74rem;max-width:96px}
}

/* Dark mode tweaks for the map */
body.sc-theme-dark .sc-system-map-center-bubble,
body.sc-theme-dark .sc-system-map-center-label,
body.sc-theme-dark .sc-map-bubble-photo,
body.sc-theme-dark .sc-map-bubble-label{
  background:#26221c;
}
body.sc-theme-dark .sc-map-line{
  background:linear-gradient(to right, rgba(93,154,160,0.22), rgba(93,154,160,0.7));
}
@media (max-width:520px){
  /* v0.32.3: nav now wraps onto multiple rows on mobile instead of clipping
     off the right edge with an invisible horizontal scroll. All items visible
     at once, trauma-informed (nothing hidden behind swipe gestures). */
  .sc-main-nav{margin-top:10px}
  .sc-main-nav-inner{flex-wrap:wrap;justify-content:center;gap:4px;padding:6px 6px}
  .sc-main-nav a{padding:6px 10px;font-size:0.85rem}
  .sc-main-nav .sc-nav-cta{margin-left:0}
}
.sc-bell{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--sc-ink, #2c2c2c);
  text-decoration:none;
  flex: 0 0 auto;
  transition: background 0.15s;
}
.sc-bell:hover{background:rgba(0,0,0,0.06)}
.sc-bell-badge{
  position:absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sc-warm, #c97a52);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px var(--sc-bg, #fff);
}
.sc-notif-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sc-notif-list{list-style:none;padding:0;margin:0}
.sc-notif-row{
  padding: 12px 0;
  border-bottom: 1px solid var(--sc-line, #eee);
  display: flex; flex-direction: column; gap: 4px;
}
.sc-notif-row:last-child{border-bottom:0}
.sc-notif-row.is-unread{
  background: rgba(107, 142, 107, 0.04);
  margin: 0 -12px;
  padding: 12px;
  border-radius: 6px;
}
.sc-notif-text{
  color: var(--sc-ink, #2c2c2c);
  text-decoration: none;
  line-height: 1.45;
}
.sc-notif-text:hover{text-decoration: underline}
.sc-notif-meta{font-size: 0.85rem; display: flex; align-items: center; gap: 6px}
.sc-notif-dot{
  display:inline-block; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sc-warm, #c97a52);
}

/* ---- @-mention links in post bodies (v0.18) ---- */
.sc-mention{
  color: var(--sc-sage, #6b8e6b);
  text-decoration: none;
  font-weight: 500;
  background: rgba(107, 142, 107, 0.08);
  padding: 0 4px;
  border-radius: 3px;
}
.sc-mention:hover{
  background: rgba(107, 142, 107, 0.16);
  text-decoration: underline;
}

/* ---- Forum search (v0.19) ---- */
.sc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sc-search-form{display:flex;gap:8px;margin-top:12px;align-items:center}
.sc-search-form input[type=search]{
  flex: 1 1 auto;
  padding: 8px 12px;
  border: 1px solid var(--sc-line, #ddd);
  border-radius: 6px;
  font-size: 0.95rem;
  min-width: 0;
}
.sc-search-form input[type=search]:focus{outline:2px solid var(--sc-sage, #6b8e6b);outline-offset:1px}
.sc-search-results{list-style:none;margin:0;padding:0}
.sc-search-row{
  padding: 14px 16px;
  border-bottom: 1px solid var(--sc-line, #eee);
}
.sc-search-row:last-child{border-bottom:0}
.sc-search-title{color:var(--sc-ink, #2c2c2c);text-decoration:none}
.sc-search-title:hover{text-decoration:underline}
.sc-search-meta{font-size: 0.85rem; margin: 4px 0}
.sc-search-snippet{
  margin-top: 6px;
  color: var(--sc-ink-soft, #555);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* ---- Trust state panel + hint (v0.20) ---- */
.sc-trust-stats{list-style:none;margin:8px 0;padding:0}
.sc-trust-stats li{padding:4px 0}
.sc-trust-explain{margin-top:14px}
.sc-trust-explain summary{cursor:pointer;color:var(--sc-ink-soft, #555)}
.sc-trust-explain p{margin:8px 0;font-size:0.95rem}
.sc-trust-hint{
  background: rgba(107, 142, 107, 0.06);
  border-left: 3px solid var(--sc-sage, #6b8e6b);
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 0 6px 6px 0;
  margin: 0 0 12px;
}
.sc-trust-hint a{color:inherit;text-decoration:underline}

/* ---- Friendships (v0.21) ---- */
.sc-friend-list{list-style:none;margin:0;padding:0}
.sc-friend-row{
  padding: 8px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--sc-line, #eee);
}
.sc-friend-row:last-child{border-bottom: 0}

/* ---- DMs (v0.22) ---- */
.sc-dm-inbox{list-style:none;margin:0;padding:0}
.sc-dm-row{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sc-line, #eee);
}
.sc-dm-row:last-child{border-bottom: 0}
.sc-dm-row.is-unread{background: rgba(107, 142, 107, 0.04)}
.sc-dm-link{flex: 1 1 auto; color: var(--sc-ink, #2c2c2c); text-decoration: none}
.sc-dm-link:hover{text-decoration: underline}
.sc-dm-preview{font-size: 0.92rem; margin-top: 4px}
.sc-dm-meta{font-size: 0.82rem; margin-top: 2px}
.sc-dm-dot{
  display: inline-block; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sc-warm, #c97a52);
  margin-left: 4px; vertical-align: middle;
}
.sc-dm-archive-form{flex: 0 0 auto}
.sc-dm-thread{list-style:none;margin:0;padding:0}
.sc-dm-msg{
  padding: 14px 16px;
  border-bottom: 1px solid var(--sc-line, #eee);
}
.sc-dm-msg:last-child{border-bottom: 0}
.sc-dm-msg.is-mine{background: rgba(107, 142, 107, 0.04)}
.sc-dm-msg-meta{font-size: 0.85rem; margin-bottom: 4px}
.sc-dm-msg-body{line-height: 1.5}
.sc-dm-msg-body p{margin: 6px 0}

/* ---- Soft keyword interventions (v0.24) ---- */
.sc-intervention{
  background: rgba(201, 122, 82, 0.08);
  border-left: 3px solid var(--sc-warm, #c97a52);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--sc-ink, #2c2c2c);
}
.sc-intervention strong{font-weight: 600}