/* Silence the Shame x Worth Making - caregiver concept
   Exploratory palette from 02_Design/DESIGN_SYSTEM_AND_REFERENCE_RULES.md.
   Not official Silence the Shame brand styling. */

:root{
  --ink:#142024;
  --cream:#FCF9F3;
  --turquoise:#28C1CE;
  --green:#137D42;
  --lime:#D9F36A;
  --yellow:#FFDB50;
  --aqua:#C7EDF1;

  /* NOT VERIFIED against any authentic brand asset.
     Used only for the strike through SHAME in the concept wordmark. */
  --concept-red:#D8232A;

  --line:rgba(20,32,36,.14);
  --line-soft:rgba(20,32,36,.08);
  --shadow:0 1px 2px rgba(20,32,36,.05), 0 8px 24px -12px rgba(20,32,36,.18);

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pad:20px;
  --radius:18px;
  --tap:48px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100svh;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;
}
.skip:focus{left:0}

/* ---------- focus ---------- */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:6px;
}
.hero :focus-visible{outline-color:var(--ink)}
/* Each screen moves focus to its h1 so screen readers announce the new
   view. The heading is not interactive and the visitor did not tab to
   it, so it takes focus without drawing a ring. Real controls keep theirs. */
h1:focus,h1:focus-visible{outline:none}

/* ---------- top bar ---------- */
.topbar{
  background:var(--cream);
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20;
}
.topbar-in{
  max-width:720px;margin:0 auto;
  padding:11px var(--pad);
  display:flex;align-items:center;gap:8px;
  /* wraps only when the text is scaled up; fits one row at default size */
  flex-wrap:wrap;
}
.wordmark{
  flex:none;margin:0;font-weight:800;line-height:.98;
  font-size:0.9375rem;letter-spacing:-.02em;
  text-transform:uppercase;
}
.wm-l1,.wm-l2{display:block}
.wm-strike{position:relative;white-space:nowrap}
.wm-strike::after{
  content:"";position:absolute;left:-4%;right:-4%;top:52%;
  height:2.5px;background:var(--concept-red);
  transform:rotate(-1.5deg);border-radius:2px;
}
.wm-div{width:1px;align-self:stretch;background:var(--line);margin:2px 0}
.wm-tag{
  margin:0;font-size:0.625rem;line-height:1.25;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;opacity:.62;
  flex:none;
}
.wm-tag .wm-tag-2{display:none}
@media (min-width:430px){
  .wm-tag{font-size:0.6562rem;letter-spacing:.09em}
  .wm-tag .wm-tag-2{display:inline}
}
.support-btn{
  margin-left:auto;
  max-width:100%;
  min-height:44px;flex:none;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--yellow);color:var(--ink);
  border:1.5px solid rgba(20,32,36,.22);
  border-radius:999px;
  padding:8px 13px;
  font:inherit;font-size:0.8438rem;font-weight:750;
  white-space:nowrap;
  cursor:pointer;
}
.support-btn:hover{background:#ffd22e}
.support-btn span{font-size:0.75rem}

/* ---------- disclosure ---------- */
.disclosure{
  max-width:720px;margin:0 auto;
  padding:10px var(--pad) 0;
  font-size:0.7812rem;line-height:1.45;opacity:.68;
}

/* ---------- main ---------- */
main{
  flex:1;
  max-width:720px;width:100%;margin:0 auto;
  padding:var(--pad) var(--pad) 48px;
}
main:focus{outline:none}

.screen{animation:rise .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- type ---------- */
.eyebrow{
  margin:0 0 10px;
  font-size:0.7812rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);
}
h1{
  margin:0 0 14px;
  overflow-wrap:break-word;
  font-size:clamp(2.125rem,9.5vw,2.875rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
}
h2{
  margin:0 0 10px;
  font-size:1.3125rem;line-height:1.2;letter-spacing:-.02em;font-weight:800;
}
h3{margin:0 0 6px;font-size:1.0938rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.lede{margin:0 0 24px;font-size:1.0938rem;line-height:1.5;opacity:.82;max-width:34em}
.note{font-size:0.8438rem;line-height:1.5;opacity:.68}

.mark{
  background:var(--lime);
  padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- hero ---------- */
.hero{
  background:var(--turquoise);
  border-radius:var(--radius);
  padding:30px 24px 34px;
  margin:4px 0 20px;
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-70px;bottom:-110px;
  width:260px;height:260px;border-radius:50%;
  background:var(--lime);opacity:.9;
}
.hero > *{position:relative;z-index:1}
.hero h1{margin-bottom:12px}
.hero p{margin:0;font-size:1.0625rem;line-height:1.45;max-width:20em;font-weight:500}

/* ---------- cards / choices ---------- */
.stack{display:flex;flex-direction:column;gap:12px}

.choice{
  display:flex;align-items:flex-start;gap:14px;
  width:100%;min-height:var(--tap);
  text-align:left;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  font:inherit;color:inherit;
  cursor:pointer;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.choice:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow)}
.choice-ic{
  flex:none;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;font-size:1.1875rem;
}
.ic-lime{background:var(--lime)}
.ic-aqua{background:var(--aqua)}
.ic-cream{background:#F0EDE5}
.choice-tx{flex:1;min-width:0}
.choice-tx strong{display:block;font-size:1.0938rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.choice-tx span{display:block;margin-top:4px;font-size:0.9062rem;line-height:1.45;opacity:.72}
.choice-ar{flex:none;align-self:center;font-size:1.0625rem;opacity:.4}

/* ---------- selectable chips ---------- */
.chips{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;padding:0;border:0}
.chips legend{padding:0;margin:0 0 12px;font-size:0.9375rem;opacity:.75}

.chip{
  display:flex;align-items:center;gap:13px;
  min-height:var(--tap);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:13px 16px;
  cursor:pointer;
  font-size:1.0312rem;font-weight:650;line-height:1.3;
  transition:background .14s ease,border-color .14s ease;
}
.chip:hover{border-color:rgba(20,32,36,.4)}
.chip input{
  flex:none;width:21px;height:21px;margin:0;
  accent-color:var(--green);cursor:pointer;
}
.chip:has(input:checked){background:var(--lime);border-color:var(--ink)}
.chip:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}

/* ---------- text input ---------- */
.field{margin:0 0 20px}
.field label{display:block;font-size:0.9062rem;font-weight:700;margin-bottom:8px}
.field .hint{display:block;font-weight:400;opacity:.65;font-size:0.8438rem;margin-top:3px}
textarea{
  width:100%;min-height:116px;resize:vertical;
  font:inherit;font-size:1.0312rem;line-height:1.45;
  color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:14px;
  padding:14px;
}
textarea::placeholder{color:rgba(20,32,36,.38)}
.count{margin:6px 0 0;font-size:0.7812rem;opacity:.6;text-align:right}

/* ---------- buttons ---------- */
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.btn{
  min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  font:inherit;font-size:1.0312rem;font-weight:750;
  border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;
}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:#000}
.btn-primary[disabled]{opacity:.32;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-quiet{
  background:transparent;border:0;padding:12px 4px;
  font:inherit;font-size:0.9375rem;font-weight:650;
  color:var(--ink);opacity:.68;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;min-height:var(--tap);
}
.btn-quiet:hover{opacity:1}

/* persistent moment-for-myself */
.moment-bar{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line-soft);
}
.moment-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:var(--tap);
  background:#F3F0E8;border:1.5px solid var(--line-soft);
  border-radius:999px;padding:12px 20px;
  font:inherit;font-size:1.0rem;font-weight:700;color:inherit;
  cursor:pointer;text-align:left;
}
.moment-btn:hover{background:#ECE8DE;border-color:var(--line)}
.moment-btn .choice-ar{margin-left:auto}

/* ---------- approach cards ---------- */
.approach{
  border-radius:var(--radius);
  border:1.5px solid var(--line);
  padding:20px;
  background:#fff;
  margin-bottom:14px;
}
.approach.lime{background:#F3FADF;border-color:rgba(20,32,36,.16)}
.approach.aqua{background:#E6F6F9;border-color:rgba(20,32,36,.16)}
.approach .eyebrow{color:var(--ink);opacity:.5}
.approach ul{margin:12px 0 0;padding-left:20px}
.approach li{margin-bottom:7px;font-size:0.9688rem;line-height:1.45}

.quote{
  margin:16px 0 0;padding:14px 16px;
  background:rgba(255,255,255,.78);
  border-left:4px solid var(--ink);
  border-radius:0 12px 12px 0;
  font-size:1.0rem;line-height:1.5;font-style:italic;
}
.quote + .note{margin-top:8px}

.expect{
  margin:14px 0 0;font-size:0.9062rem;line-height:1.45;
  padding-top:12px;border-top:1px solid rgba(20,32,36,.12);opacity:.78;
}

.diff{
  margin:0 0 20px;padding:14px 16px;
  background:#F3F0E8;border-radius:14px;
  font-size:0.9375rem;line-height:1.5;
}

/* ---------- source cards ---------- */
.source{
  border:1.5px solid var(--line);
  border-radius:14px;padding:16px;background:#fff;margin-bottom:12px;
}
.source-top{display:flex;gap:11px;align-items:flex-start}
.source-ic{
  flex:none;width:34px;height:34px;border-radius:10px;
  background:var(--lime);display:grid;place-items:center;font-size:0.9375rem;
}
.source-title{margin:0;font-size:1.0rem;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.source-meta{margin:5px 0 0;font-size:0.8125rem;opacity:.7;line-height:1.45}
.source-ex{
  margin:12px 0 0;padding:11px 13px;background:#F7F5EE;border-radius:10px;
  font-size:0.9062rem;line-height:1.5;
}
.source-ex b{display:block;font-size:0.7188rem;letter-spacing:.07em;text-transform:uppercase;opacity:.6;margin-bottom:5px;font-weight:800}
.source-limit{
  margin:11px 0 0;font-size:0.8438rem;line-height:1.5;
  padding:10px 12px;background:#FFF6DC;border-radius:10px;
  border:1px solid rgba(20,32,36,.1);
}
.source-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;min-height:44px;
  font-size:0.9375rem;font-weight:750;color:var(--green);
  text-decoration:underline;text-underline-offset:3px;
}
.source-link:hover{color:var(--ink)}

/* ---------- support screen ---------- */
.support-card{
  background:var(--yellow);
  border-radius:var(--radius);
  padding:24px;margin-bottom:14px;
}
.support-card h2{margin-bottom:8px}
.support-card p{margin:0 0 16px;font-size:1.0rem;line-height:1.5}
.support-actions{display:flex;flex-direction:column;gap:10px}
.tel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;
  background:var(--ink);color:var(--cream);
  border-radius:14px;padding:14px 20px;
  font-size:1.125rem;font-weight:800;text-decoration:none;
  letter-spacing:-.01em;
}
.tel small{font-size:0.8125rem;font-weight:600;opacity:.8;letter-spacing:0}
.tel:hover{background:#000}
.tel-alt{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.tel-alt:hover{background:#F7F5EE}

/* ---------- moment screen ---------- */
.calm{
  background:#EFEAF7;
  border-radius:var(--radius);padding:24px;margin-bottom:16px;
}
.calm h2{margin-bottom:10px}
.calm p{margin:0 0 12px;font-size:1.0rem;line-height:1.55}
.calm p:last-child{margin-bottom:0}

.reflect{
  background:var(--aqua);border-radius:var(--radius);
  padding:22px 24px;margin:0 0 22px;
  font-size:1.125rem;line-height:1.45;font-weight:650;letter-spacing:-.01em;
}

.done-mark{
  width:54px;height:54px;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;
  font-size:1.5625rem;margin-bottom:16px;
}

/* ---------- misc ---------- */
.provenance{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 0 18px;padding:6px 12px;
  background:#EDEAE1;border-radius:999px;
  font-size:0.75rem;font-weight:700;letter-spacing:.02em;opacity:.8;
}
.provenance::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

.live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.foot{
  max-width:720px;margin:0 auto;width:100%;
  padding:22px var(--pad) 34px;
  border-top:1px solid var(--line-soft);
  font-size:0.8125rem;line-height:1.5;opacity:.62;
}
.foot p{margin:0 0 4px}
.foot-sm{font-size:0.75rem}

.back{
  background:none;border:0;padding:12px 4px;margin:0 0 6px -4px;
  font:inherit;font-size:0.9375rem;font-weight:650;opacity:.68;
  cursor:pointer;color:inherit;min-height:44px;
  display:inline-flex;align-items:center;gap:6px;
}
.back:hover{opacity:1}

@media (min-width:600px){
  :root{--pad:28px}
  body{font-size:1.0938rem}
  .hero{padding:44px 40px 48px}
  .choice{padding:20px 22px}
}

/* ============================================================
   v2 additions. Same tokens, same type scale, no redesign.
   ============================================================ */

/* Feelings grid: two columns where there is room, one on a small phone. */
.chips-grid{
  display:grid;grid-template-columns:1fr;gap:10px;
  margin:0 0 20px;padding:0;border:0;
}
.chips-grid legend{padding:0;margin:0 0 12px;font-size:0.9375rem;opacity:.75}
@media (min-width:352px){
  .chips-grid{grid-template-columns:1fr 1fr;gap:9px}
  .chips-grid legend{grid-column:1 / -1}
  .chip-wide{grid-column:1 / -1}
  /* a little tighter so two columns fit a 360px phone without clipping */
  .chips-grid .chip{padding:13px 12px;gap:10px;font-size:0.9688rem}
}
@media (min-width:430px){
  .chips-grid .chip{padding:13px 16px;gap:13px;font-size:1.03rem}
}
.chips-grid .chip{margin:0}

/* Progressive disclosure. One control, no library. */
.disclose{margin-top:14px;border-top:1px solid rgba(20,32,36,.12);padding-top:4px}
.disclose summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 0;
  font-size:0.9375rem;font-weight:750;
  color:var(--ink);
}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary::after{
  content:"";width:8px;height:8px;margin-left:2px;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease;
}
.disclose[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.disclose summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.disclose summary:hover{opacity:.72}
.disclose-body{padding:2px 0 10px}
.disclose-body p{margin:0 0 10px;font-size:0.9688rem;line-height:1.5}
.disclose-body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){ .disclose summary::after{transition:none} }

/* The model's one-line reading of what they said. */
.reading{
  margin:0 0 20px;padding:14px 16px;
  background:#F3F0E8;border-radius:14px;
  font-size:1rem;line-height:1.5;
}

/* Reflection conversation */
.said{
  margin:0 0 14px;padding:12px 16px;
  background:#fff;border:1.5px solid var(--line);
  border-radius:14px 14px 14px 4px;
  font-size:0.9688rem;line-height:1.5;
}
.said b{
  display:block;font-size:0.7188rem;letter-spacing:.07em;text-transform:uppercase;
  opacity:.55;margin-bottom:5px;font-weight:800;
}
.heard{
  margin:0 0 18px;padding:18px 20px;
  background:var(--aqua);border-radius:var(--radius);
  font-size:1.0625rem;line-height:1.5;
}
.heard p{margin:0 0 12px}
.heard p:last-child{margin-bottom:0}
.heard .ask{font-weight:750}

/* honest provenance chips */
/* NOTE: do not call these "live". `.live` is the visually hidden screen
   reader region further up, and the collision hid this chip completely. */
.provenance.is-scripted::before{background:#8A7E5E}
.provenance.is-generated::before{background:var(--green)}

/* thinking state */
.thinking{
  display:flex;align-items:center;gap:10px;
  padding:18px 0;font-size:1rem;opacity:.7;
}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--ink);
  animation:pulse 1.1s ease-in-out infinite;
}
.dot:nth-child(2){animation-delay:.18s}
.dot:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .dot{animation:none;opacity:.6} }

.err{
  margin:0 0 18px;padding:14px 16px;
  background:#FFF6DC;border:1px solid rgba(20,32,36,.12);
  border-radius:14px;font-size:0.9688rem;line-height:1.5;
}