/* ==========================================================================
   IdeaSweetSpot — THREADS mode  ·  Apps 4 That Studio
   A calm, mindful coach for a PORTFOLIO of side quests. The signature visual is
   the silk THREAD: a flowing strand you pick up, tend, and set down to rest
   (never cut). The "whole" is several threads woven together. Spring-zen brand;
   reads iss-theme tokens. No shame mechanics — see SIDEQUEST_COACH_CONCEPT.md.
   ========================================================================== */

.iss-threads { max-width: 980px; margin: 0 auto; padding: 0 0 3rem; }

/* ---- the weekly RETURN beat: "your weave, intact" ---------------------- */
.thr-return {
  position: relative;
  border-radius: var(--iss-radius-card, 28px);
  border: 1px solid var(--iss-n-200, #E7E0D2);
  background: linear-gradient(180deg, var(--iss-paper, #FFFDF7), #F4EFE4);
  box-shadow: var(--iss-shadow);
  padding: clamp(1.3rem, 4vw, 2.2rem) clamp(1.2rem, 4vw, 2.4rem);
  overflow: hidden;
}
.thr-return__eyebrow {
  font-family: var(--iss-font-body); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .76rem; color: var(--iss-accent-ink, #4F6B3E);
  margin: 0 0 .2rem;
}
.thr-return__script {
  font-family: var(--iss-font-accent, "Satisfy", cursive);
  color: var(--iss-blossom-deep, #C75C7E); font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  line-height: 1; margin: 0 0 .15rem;
}
.thr-return__title {
  font-family: var(--iss-font-display, "Playfair Display", serif); font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.1; margin: 0 0 .5rem;
  color: var(--iss-ink, #23262F);
}
.thr-return__lede { color: var(--iss-n-700, #3C3A33); max-width: 60ch; line-height: 1.55; margin: 0; }

/* ---- the woven garden (the whole) -------------------------------------- */
.thr-garden { margin: 1.1rem 0 .2rem; }
.thr-garden svg { display: block; width: 100%; height: auto; }
.thr-strandwrap { cursor: pointer; }
.thr-strand { fill: none; stroke-linecap: round; }
.thr-strand--resting { opacity: .32; }
.thr-strandwrap:hover .thr-strand--resting,
.thr-strandwrap:focus-visible .thr-strand--resting { opacity: .6; }
.thr-strandlabel {
  font-family: var(--iss-font-body); font-weight: 700; font-size: 13px;
  fill: var(--iss-ink, #23262F); opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.thr-strandwrap:hover .thr-strandlabel,
.thr-strandwrap:focus-visible .thr-strandlabel { opacity: 1; transform: translateY(0); }
/* keep the global 3px deep-moss focus ring (it renders on the SVG group) AND
   turn the focused strand ink + thicker — a clearly perceivable indicator. */
.thr-strandwrap:focus-visible .thr-sway { stroke: var(--iss-ink, #23262F); stroke-width: 6; }

.thr-sway { transform-box: fill-box; transform-origin: center; animation: thr-sway 9s ease-in-out infinite; }
@keyframes thr-sway { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.thr-bloom { transform-box: fill-box; transform-origin: center; }
.thr-bloom.go { animation: thr-bloom 1.5s ease-out; }
@keyframes thr-bloom { 0%{opacity:0;transform:scale(.2)} 30%{opacity:.9} 100%{opacity:0;transform:scale(2.6)} }

.thr-garden__caption {
  text-align: center; color: var(--iss-n-500, #6E6A5E); font-size: .88rem; margin: .3rem 0 0;
}
.thr-garden__caption b { color: var(--iss-ink); font-weight: 700; }

/* ---- the Weekly Tend call ---------------------------------------------- */
.thr-tendcta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.1rem; }
.thr-tendcta .btn { white-space: nowrap; }
.thr-tend-when { color: var(--iss-n-500, #6E6A5E); font-size: .86rem; }

/* ---- the threads list (last-touched order, NEVER score-sorted) --------- */
.thr-listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2rem 0 .6rem; }
.thr-listhead h2 {
  font-family: var(--iss-font-display, "Playfair Display", serif); font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0; color: var(--iss-ink);
}
.thr-listhead__order { font-size: .82rem; color: var(--iss-n-500, #6E6A5E); }

.thr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.thr-card {
  position: relative;
  display: grid; grid-template-columns: 10px 1fr auto; gap: 0 .9rem; align-items: start;
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.78); border: 1px solid var(--iss-n-200, #E7E0D2);
  border-radius: 18px; padding: .95rem 1.1rem;
  box-shadow: var(--iss-shadow-sm); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  font-family: inherit; color: inherit;
}
.thr-card:hover { box-shadow: var(--iss-shadow); transform: translateY(-1px); }
.thr-card:focus-visible { outline: 3px solid var(--iss-accent-ink, #4F6B3E); outline-offset: 2px; }
.thr-card--spotlight { border-color: var(--iss-moss, #6F8F5B); box-shadow: 0 0 0 1px var(--iss-moss, #6F8F5B), var(--iss-shadow); }
.thr-card--resting { opacity: .82; }

.thr-card__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .5rem; border: 1px solid rgba(35,38,47,.12); }
.thr-card__body { min-width: 0; }
.thr-card__name { font-weight: 700; font-size: 1.02rem; color: var(--iss-ink); margin: 0; line-height: 1.25; }
.thr-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: .35rem 0 0; font-size: .86rem; color: var(--iss-n-700, #3C3A33); }
.thr-card__barrier { color: var(--iss-accent-ink, #4F6B3E); }
.thr-card__move { color: var(--iss-n-700, #3C3A33); }
.thr-card__move b { color: var(--iss-ink); font-weight: 700; }
.thr-card__right { text-align: right; display: grid; gap: .25rem; justify-items: end; }
.thr-state {
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.thr-state--spotlight { background: var(--iss-moss, #6F8F5B); color: #fff; }
.thr-state--flowing   { background: rgba(136,215,178,.40); color: #1F5F49; }
.thr-state--resting   { background: rgba(220,199,242,.45); color: #5B4480; }
.thr-state--earning   { background: rgba(255,224,154,.55); color: #6B4E12; }
.thr-touched { font-size: .78rem; color: var(--iss-n-500, #6E6A5E); }

/* ---- catch a tangent (capture, don't chase) ---------------------------- */
.thr-tangent {
  margin-top: 1.6rem; border: 1px dashed var(--iss-n-300, #D8D2C6); border-radius: 18px;
  background: rgba(255,253,247,.6); padding: 1rem 1.1rem;
}
.thr-tangent__lead { font-size: .9rem; color: var(--iss-n-700, #3C3A33); margin: 0 0 .55rem; }
.thr-tangent__lead b { color: var(--iss-ink); }
.thr-tangent__form { display: flex; flex-wrap: wrap; gap: .5rem; }
.thr-tangent__form .input { flex: 1 1 16rem; }

/* ---- empty / first-run ------------------------------------------------- */
.thr-empty { text-align: center; padding: clamp(1.4rem,5vw,2.6rem) 1rem; }
.thr-empty__art { width: min(420px, 80%); height: auto; margin: 0 auto .4rem; display: block; }
.thr-empty h2 {
  font-family: var(--iss-font-display, "Playfair Display", serif); font-weight: 700;
  font-size: clamp(1.4rem,3.6vw,2rem); margin: .2rem 0 .3rem; color: var(--iss-ink);
}
.thr-empty p { color: var(--iss-n-700, #3C3A33); max-width: 52ch; margin: 0 auto 1rem; line-height: 1.55; }
.thr-empty__form { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 32rem; margin: 0 auto; }
.thr-empty__form .input { flex: 1 1 18rem; }
.thr-empty__demo { margin-top: 1rem; font-size: .86rem; }

/* ---- the Weekly Tend panel --------------------------------------------- */
[data-threads-tend] { margin-top: 1rem; }
.thr-tendpanel { border: 1px solid var(--iss-n-200, #E7E0D2); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: var(--iss-shadow); padding: clamp(1rem,3vw,1.5rem); }
.thr-tend__q { font-family: var(--iss-font-display, "Playfair Display", serif); font-weight: 600; font-size: clamp(1.15rem,2.8vw,1.4rem); margin: .1rem 0 .3rem; color: var(--iss-ink); }
.thr-tend__hint { color: var(--iss-n-500, #6E6A5E); margin: 0 0 .9rem; font-size: .9rem; line-height: 1.5; }
.thr-focuschips { display: flex; flex-wrap: wrap; gap: .5rem; }
.thr-focuschip.is-on { background: var(--iss-ink); color: #fff; border-color: var(--iss-ink); }
.thr-rule { border: none; border-top: 1px solid var(--iss-n-200, #E7E0D2); margin: 1.3rem 0; }
.thr-ifthen { display: grid; gap: .6rem; margin: .2rem 0 1rem; }
.thr-ifthen__row { display: flex; align-items: center; gap: .6rem; }
.thr-ifthen__row > span { font-weight: 700; color: var(--iss-accent-ink, #4F6B3E); flex: 0 0 auto; min-width: 3.8rem; text-align: right; }
.thr-ifthen__row .input { flex: 1 1 auto; }
.thr-shrink { margin: .2rem 0 1rem; }
.thr-shrink__lbl { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.thr-shrink__scale { display: flex; gap: .3rem; flex-wrap: wrap; }
.thr-conf { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--iss-n-300, #D8D2C6); background: var(--iss-paper, #FFFDF7); color: var(--iss-n-500, #6E6A5E); font-weight: 700; font-size: .82rem; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.thr-conf.is-on { background: var(--iss-moss, #6F8F5B); color: #fff; border-color: var(--iss-moss, #6F8F5B); }
/* the 1-10 control is a slider (role=slider, arrow-key operable) — the dots
   are presentational; the wrapper carries focus + the keyboard interaction. */
.thr-shrink__scale { cursor: pointer; border-radius: 999px; padding: 2px; }
.thr-shrink__scale:focus-visible { outline: 3px solid var(--iss-accent-ink, #4F6B3E); outline-offset: 4px; }
.thr-conf { -webkit-user-select: none; user-select: none; }
.thr-eg { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--iss-n-500, #6E6A5E); background: rgba(220,199,242,.40); border-radius: 999px; padding: .1rem .42rem; vertical-align: middle; margin-left: .25rem; }
.thr-shrink__nudge { margin: .6rem 0 0; font-size: .9rem; color: var(--iss-accent-ink, #4F6B3E); background: var(--iss-accent-soft, #EAF3E4); border-radius: 12px; padding: .6rem .8rem; }
.thr-tend__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---- the Threads door on the landing ----------------------------------- */
.iss-doors3 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.iss-door3--threads .iss-door3__icon { background: var(--iss-accent-soft, #EAF3E4); color: var(--iss-accent-ink, #4F6B3E); }

/* ---- close-the-loop quote --------------------------------------------- */
.thr-quote { margin: .2rem 0 .8rem; padding: .7rem 1rem; border-left: 3px solid var(--iss-moss, #6F8F5B); background: var(--iss-accent-soft, #EAF3E4); border-radius: 0 12px 12px 0; font-style: italic; color: var(--iss-ink, #23262F); }
.thr-toast { display: inline-block; margin-top: .6rem; font-size: .88rem; font-weight: 600; color: var(--iss-accent-ink, #4F6B3E); }
.thr-witness { width: 100%; margin: .2rem 0 .9rem; }

/* ---- re-entry + example banners --------------------------------------- */
.thr-reentry, .thr-example {
  border: 1px solid var(--iss-n-200, #E7E0D2); border-radius: 18px;
  background: rgba(255,253,247,.85); box-shadow: var(--iss-shadow-sm);
  padding: 1rem 1.15rem; margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
}
.thr-example { background: rgba(220,199,242,.18); border-color: rgba(220,199,242,.6); }
.thr-reentry p, .thr-example p { margin: 0; color: var(--iss-n-700, #3C3A33); line-height: 1.5; max-width: 56ch; }
.thr-reentry b, .thr-example b { color: var(--iss-ink, #23262F); }
.thr-reentry__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- decay doors (a fresh-start moment) -------------------------------- */
.thr-decay { margin: 2rem 0 0; padding: 1.2rem 1.3rem; border: 1px solid var(--iss-n-200, #E7E0D2); border-radius: var(--iss-radius-card, 28px); background: linear-gradient(180deg, rgba(220,199,242,.14), rgba(255,253,247,.7)); }
.thr-decay__title { font-family: var(--iss-font-display, "Playfair Display", serif); font-weight: 600; font-size: clamp(1.2rem,3vw,1.5rem); margin: .1rem 0 .3rem; color: var(--iss-ink); }
.thr-decay__list { display: grid; gap: .7rem; margin-top: 1rem; }
.thr-decay__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; background: rgba(255,255,255,.8); border: 1px solid var(--iss-n-200, #E7E0D2); border-radius: 16px; padding: .85rem 1rem; }
.thr-decay__name { font-weight: 700; color: var(--iss-ink, #23262F); }
.thr-decay__name em { font-weight: 500; font-style: normal; color: var(--iss-n-500, #6E6A5E); font-size: .86rem; }
.thr-decay__doors { display: flex; flex-wrap: wrap; gap: .4rem; }
.thr-decay__doors .btn { font-size: .85rem; padding: .5rem .8rem; }
.thr-release { width: 100%; }
.thr-release__lead { margin: 0 0 .6rem; color: var(--iss-n-700, #3C3A33); line-height: 1.5; }
.thr-release .input { margin-bottom: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .thr-sway { animation: none; }
  .thr-bloom.go { animation: none; opacity: 0; }
  .thr-card:hover { transform: none; }
}