/* Twin Studio: claymation pieces on top of the family app's style.css (same Clay Kit tokens).
   Every surface is a puffy clay slab (lit top rim, pressed lip, soft drop shadow); every input,
   track and well is pressed into the clay; chosen things are raised moss-green knobs. */
:root { --slab: inset 0 2px 0 var(--hi), inset 0 -5px 0 var(--lo), var(--shadow);
  --well: inset 0 3px 7px var(--lo), inset 0 -1px 0 var(--hi); }

h2 { font-size: 1.15rem; margin: 1.3rem 0 .7rem; }
.st-spacer { flex: 1; }
.st-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.st-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; box-shadow: var(--slab);
  animation: rise .45s ease-out both; }
.st-card p { margin: 0; }
.btn.big { min-height: 56px; font-size: 1.1rem; }
.small-btn { min-height: 38px; padding: .3rem .9rem; font-size: .92rem; }
.st-badges, .st-tags { display: flex; flex-wrap: wrap; gap: .45rem; }

/* clay art: small sculpted props that sit on the page */
.st-art { display: block; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .18)); animation: bob 5s ease-in-out infinite; }
.login .st-art { width: 150px; height: 130px; margin: -.2rem auto 0; }

/* icons on the studio's own back buttons, same as the family app's */
[data-go]::before, #chat-back::before, #io-back::before {
  content: ""; width: 19px; height: 19px; flex: none; background: currentColor;
  -webkit-mask: var(--i-back) center / contain no-repeat; mask: var(--i-back) center / contain no-repeat; }
[data-go], #chat-back, #io-back { padding-left: .75rem; }

/* ---------- home: each twin is a clay tile ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; margin: 1.3rem 0; }
.st-twin { --c: var(--accent); position: relative; text-align: left; color: var(--text); cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); border-radius: var(--r-l);
  background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--c) 16%, var(--surface)) 0%, var(--surface) 70%);
  box-shadow: inset 0 2px 0 var(--hi), inset 0 -5px 0 color-mix(in srgb, var(--c) 18%, transparent), var(--shadow);
  padding: 1.3rem 1.4rem 1.4rem 6.6rem; min-height: 8rem; display: flex; flex-direction: column; gap: .4rem;
  animation: rise .5s ease-out both; transition: transform .28s var(--press), box-shadow .28s ease; }
.st-twin::before { content: ""; position: absolute; left: 1.1rem; top: 1.2rem; width: 76px; height: 76px;
  background: url(clay/speech-bubbles.webp) center / contain no-repeat; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .15));
  transition: transform .35s var(--press); }
.st-twin:hover { transform: translateY(-5px); box-shadow: inset 0 2px 0 var(--hi), inset 0 -5px 0 color-mix(in srgb, var(--c) 18%, transparent), var(--shadow-lift); }
.st-twin:hover::before { transform: rotate(-4deg) scale(1.05); }
.st-twin:active { transform: scale(1.02, .97); }
.st-twin:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-twin .name { font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.st-twin .meta { color: var(--muted); font-weight: 600; }
.st-empty { align-items: center; text-align: center; padding: 1.8rem 1.4rem 2.2rem; }
.st-empty::before { content: ""; width: 140px; height: 120px; background: url(clay/speech-bubbles.webp) center / contain no-repeat;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .16)); animation: bob 5s ease-in-out infinite; }
.st-empty p { font-size: 1.08rem; }

/* ---------- new twin ---------- */
.st-form { display: flex; flex-direction: column; gap: 1.4rem; max-width: 50rem; margin-top: 1.2rem; }
.st-label { display: flex; flex-direction: column; gap: .5rem; font-weight: 800; font-size: 1.02rem; }
.st-input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .8rem 1rem; font: 600 1.08rem var(--font); color: var(--text); min-height: 52px; width: 100%; box-shadow: var(--well); }
.st-input:focus { border-color: var(--accent); outline: none; }
.st-choice { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.st-choice legend { margin-bottom: .7rem; }
.st-opt { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-l);
  padding: 1.2rem 1.3rem 1.3rem 5.6rem; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; min-height: 7rem;
  box-shadow: var(--slab); transition: transform .25s var(--press), border-color .2s, background-color .2s; }
.st-opt::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 62px; height: 62px;
  background: var(--art) center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .15)); }
.st-opt:nth-of-type(1) { --art: url(clay/open-book.webp); }
.st-opt:nth-of-type(2) { --art: url(clay/clay-grandma.webp); }
.st-opt:hover { transform: translateY(-3px); }
.st-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  transform: translateY(2px); box-shadow: inset 0 3px 7px var(--lo), 0 1px 0 var(--lip); }
.st-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-opt:has(input:checked) .st-opt-title::after { content: "Chosen"; margin-left: .5rem; font-size: .8rem; color: var(--ink);
  background: var(--accent); border-radius: 999px; padding: .1rem .6rem; vertical-align: 2px; box-shadow: 0 2px 0 var(--accent-lip); }
.st-opt-title { font-weight: 800; font-size: 1.15rem; }
.st-form .seg { align-self: flex-start; }
@media (max-width: 640px) { .st-choice { grid-template-columns: 1fr; } }

/* ---------- interview ---------- */
.st-iv { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.6rem; align-items: start; padding: 1.2rem 0 2rem; }
@media (max-width: 900px) { .st-iv { grid-template-columns: 1fr; } }
.st-main { display: flex; flex-direction: column; gap: 1.1rem; }
.st-progress { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-weight: 700; }
/* progress tracks are grooves pressed into the clay, filled with a moss bead */
.st-bar, .st-mini { flex: 1; min-width: 8rem; height: 14px; border-radius: 999px; background: var(--bg); overflow: hidden;
  box-shadow: var(--well); padding: 3px; }
.st-bar.big { height: 18px; flex: none; width: 100%; }
.st-bar span, .st-mini span { display: block; height: 100%; min-width: 8px; background: var(--accent); border-radius: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 var(--accent-lip); transition: width .6s var(--press); }
.st-mini { min-width: 0; height: 10px; padding: 2px; }
/* the question is the hero: a big raised slab */
.st-q { position: relative; background: radial-gradient(100% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, var(--surface) 75%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: var(--r-l); padding: 1.5rem 1.7rem 1.6rem;
  box-shadow: inset 0 2px 0 var(--hi), inset 0 -6px 0 color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-lift);
  animation: rise .45s ease-out both; }
.st-topic { display: inline-block; font-size: .85rem; font-weight: 800; color: var(--ink); background: var(--accent);
  border-radius: 999px; padding: .2rem .8rem; box-shadow: 0 3px 0 var(--accent-lip); letter-spacing: .02em; }
.st-topic:empty { display: none; }
.st-qtext { font-size: 1.6rem; font-weight: 800; line-height: 1.35; margin: .8rem 0 0; word-break: keep-all; letter-spacing: -.01em; }
.st-q .muted { margin: .6rem 0 0; }
.st-answer { display: flex; flex-direction: column; gap: .8rem; }
.st-answer textarea { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; font: 600 1.08rem/1.55 var(--font); color: var(--text); resize: vertical; min-height: 8.5rem; box-shadow: var(--well); }
.st-answer textarea:focus { border-color: var(--accent); outline: none; }
.st-answer textarea::placeholder { color: var(--muted); }
.st-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: .4rem 1.2rem 1.2rem; box-shadow: var(--slab); }
.st-side h2 { display: flex; align-items: center; gap: .5rem; }
.st-side h2:first-child::before { content: ""; width: 34px; height: 34px; flex: none; background: url(clay/open-book.webp) center / contain no-repeat; }
.st-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.st-topics li { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem; align-items: center; gap: .6rem; font-size: .98rem; font-weight: 600; }
.st-topics li.now .t { font-weight: 800; color: var(--accent); }
.st-answers { display: flex; flex-direction: column; gap: .55rem; max-height: 50vh; overflow-y: auto; padding: 2px 2px 6px; }
.st-ans { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .9rem; background: var(--surface2);
  box-shadow: inset 0 2px 0 var(--hi), 0 3px 0 var(--lip); margin-bottom: 3px; }
.st-ans summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.st-ans p { margin: .5rem 0; font-size: .98rem; white-space: pre-wrap; }

/* ---------- fact sheet: a clay page with an open book ---------- */
.st-meta { margin: 1rem 0; }
.st-meta .st-card { padding-left: 7rem; position: relative; }
.st-meta .st-card::before { content: ""; position: absolute; left: 1.3rem; top: 1.3rem; width: 80px; height: 80px;
  background: url(clay/open-book.webp) center / contain no-repeat; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .15)); }
@media (max-width: 560px) { .st-meta .st-card { padding-left: 1.4rem; padding-top: 6.4rem; } }
.st-head { font-weight: 800; font-size: 1.25rem; }
.st-md { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--slab);
  padding: .4rem 1.8rem 1.8rem; margin-bottom: 3rem; }
.st-md:empty { display: none; }
@media (max-width: 560px) { .st-md { padding: .2rem 1.1rem 1.3rem; } }
.st-md h2 { font-size: 1.7rem; margin: 1.1rem 0 .4rem; }
.st-md h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid var(--line); }
.st-md ul { padding-left: 1.3rem; margin: .4rem 0; }
.st-md li { margin: .35rem 0; }
.st-md li::marker { color: var(--accent); }
.st-cite { font-size: .78rem; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 999px; padding: .05rem .45rem;
  white-space: nowrap; box-shadow: var(--well); }

/* ---------- voice and share ---------- */
#v-voice .st-card, #v-share .st-card { max-width: 50rem; margin-top: 1.2rem; }
#v-voice .st-card::before, #v-share .st-card::before { content: ""; width: 110px; height: 96px; margin: -.2rem auto .2rem;
  background: var(--art) center / contain no-repeat; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .18)); animation: bob 5s ease-in-out infinite; }
#v-voice .st-card { --art: url(clay/handset.webp); }
#v-share .st-card { --art: url(clay/padlock.webp); }
.st-check { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; font-weight: 600; }
.st-check input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--accent); flex: none; }
#v-share .st-row .st-input { flex: 1; min-width: 12rem; }

/* ---------- chat ---------- */
.st-sub { margin: .5rem 0 0; font-weight: 600; }
#v-chat .empty::before { background: url(clay/speech-bubbles.webp) center / contain no-repeat; box-shadow: none; }
.ref .st-refq { font-size: .9rem; font-weight: 700; }

/* ---------- busy: the kettle is on ---------- */
.st-busy { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); display: grid; place-items: center;
  z-index: 50; backdrop-filter: blur(3px); }
.st-busy span { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.8rem 1.4rem;
  box-shadow: inset 0 2px 0 var(--hi), inset 0 -5px 0 var(--lo), var(--shadow-lift);
  font-weight: 800; max-width: min(90vw, 26rem); text-align: center; animation: rise .3s ease-out both; }
.st-busy span::before { content: ""; width: 110px; height: 110px; background: url(clay/kettle-steaming.webp) center / contain no-repeat;
  animation: bob 2.6s ease-in-out infinite; }

/* ---------- import: a clay tray to drop files into ---------- */
.st-drop { position: relative; display: flex; flex-direction: column; gap: .4rem; align-items: center; text-align: center; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--r-l); padding: 1.6rem 1.6rem 1.8rem;
  background: var(--bg); box-shadow: var(--well); margin: 1.2rem 0 1rem; font-weight: 600;
  transition: border-color .15s, background-color .15s, transform .25s var(--press); }
.st-drop::before { content: ""; width: 96px; height: 84px; background: url(clay/handset.webp) center / contain no-repeat;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .15)); animation: bob 5s ease-in-out infinite; }
.st-drop:hover, .st-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.st-drop.over { transform: scale(1.01, .99); }
.st-drop:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.st-drop-title { font-weight: 800; font-size: 1.25rem; color: var(--accent); }
.st-imports { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; }
.st-imp { gap: .7rem; }
.st-imp-name { overflow-wrap: anywhere; font-size: 1.08rem; }
.st-media { width: 100%; max-height: 50vh; border-radius: var(--r-l); background: #000; margin: 1.2rem 0 1rem; box-shadow: var(--shadow); }
audio.st-media { background: transparent; max-height: none; box-shadow: none; }
.st-facts { margin: 0; padding-left: 1.2rem; font-weight: 600; }
.st-facts li::marker { color: var(--accent); }
.st-spk { margin: 1.2rem 0; align-items: flex-end; }
.st-spk .st-label { flex: 1; min-width: 14rem; }
.st-tx { display: flex; flex-direction: column; gap: .55rem; padding-bottom: 3rem; }
.st-turn { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .8rem; padding: .75rem 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--hi), 0 3px 0 var(--lip); margin-bottom: 3px; }
.st-turn.me { background: var(--me); border-color: var(--me-line); }
.st-time { border: 1px solid var(--line); background: var(--surface2); color: var(--accent); font: 800 .92rem var(--font); cursor: pointer;
  padding: .3rem .5rem; border-radius: 999px; font-variant-numeric: tabular-nums; min-height: 36px; align-self: start;
  box-shadow: inset 0 2px 0 var(--hi), 0 3px 0 var(--lip); transition: transform .16s var(--press), box-shadow .16s; }
.st-time:active { transform: translateY(3px); box-shadow: inset 0 2px 0 var(--hi), 0 0 0 var(--lip); }
.st-who { font-size: .85rem; font-weight: 800; color: var(--muted); }
.st-turn.me .st-who { color: var(--accent); }
.st-turn p { margin: .1rem 0 0; }
.st-orig { font-weight: 600; }
.st-tr { font-size: .98rem; }

/* live captions while talking */
.st-answer textarea.live, .composer textarea.live { border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }

/* ---------- sections, talk/type, pause and break cards ---------- */
.st-modes { margin: -.2rem 0 .1rem; }
.st-notice { gap: .7rem; }
.st-notice .st-head { font-size: 1.2rem; }
.st-lead { margin: 0 0 .5rem; font-size: 1.02rem; color: var(--muted); font-style: italic; }
.st-side-note { margin: -.3rem 0 .7rem; }
.st-sec { display: block !important; }
.st-sec button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  gap: .25rem .6rem; align-items: center; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px;
  padding: .45rem .55rem; cursor: pointer; color: var(--text); font: inherit; font-weight: 600; }
.st-sec button:hover { background: var(--surface2); }
.st-sec .st-mini { grid-column: 1 / -1; }
.st-sec-st { font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.st-sec.now button { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.st-sec.now .st-sec-st, .st-sec.done .st-sec-st { color: var(--accent); }
.st-sec.unfinished .st-sec-st { color: var(--warn); }

/* come-back reminders */
.st-remind { display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .2rem; }
.st-remind .st-row { align-items: flex-end; }
.st-remind .st-grow { flex: 1; min-width: 12rem; }
.st-remind select.st-input { min-width: 8rem; }

/* add memories: capture buttons, note, photos */
.st-sub2 { margin: -.3rem 0 1rem; max-width: 52rem; }
.st-capture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 560px) { .st-capture { grid-template-columns: 1fr; } }
.st-cap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l, 16px);
  box-shadow: var(--slab, none); cursor: pointer; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.st-cap:hover { border-color: var(--accent); }
.st-cap input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.st-cap.rec { background: var(--danger); border-color: var(--danger); color: #fff; }
.st-cap-i { width: 34px; height: 34px; background: currentColor; color: var(--accent); }
.st-cap.rec .st-cap-i { color: #fff; }
.i-cam { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.i-vid { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.i-mic { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3z'/%3E%3Cpath d='M19 11a7 7 0 0 1-14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3z'/%3E%3Cpath d='M19 11a7 7 0 0 1-14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.st-note { margin: 1rem 0 .4rem; }
.st-note .st-row { flex-wrap: nowrap; align-items: stretch; }
.st-note textarea { flex: 1; resize: vertical; min-height: 3.2rem; }
.st-thumb { max-width: 220px; max-height: 160px; border-radius: 12px; object-fit: cover; }
.st-photo { max-width: 100%; max-height: 60vh; border-radius: var(--r-l, 16px); display: block; margin-bottom: 1rem; }
.st-quote { white-space: pre-wrap; border-left: 4px solid var(--accent); padding-left: 1rem; margin: 0; }

/* ---------- navbar: sticks to the top of every page once signed in ---------- */
.st-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .4rem 1rem;
  margin: -1.6rem 0 1.2rem; padding: .7rem 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.st-brand { display: inline-flex; align-items: center; gap: .55rem; border: 0; background: none; cursor: pointer;
  color: var(--text); font-weight: 800; font-size: 1.1rem; padding: .3rem .2rem; min-height: 44px; flex: none; }
.st-brand img { border-radius: 8px; }
.st-tabs { display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none; padding: 2px; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs-name { font-weight: 700; color: var(--muted); padding: 0 .6rem 0 .4rem; margin-right: .2rem;
  border-right: 1px solid var(--line); white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.st-tabs button { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: .95rem;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 40px;
  transition: background-color .15s, color .15s; }
.st-tabs button:hover { color: var(--text); background: var(--surface2); }
.st-tabs button[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.st-tabs .st-tab-talk { color: var(--accent); }
.st-tabs .st-tab-talk[aria-selected="true"] { background: var(--accent); color: var(--ink); box-shadow: none; }
.st-nav-end { display: flex; gap: .4rem; margin-left: auto; flex: none; }
/* the chat fills one screen: leave room for the navbar */
.page:has(> #v-chat:not([hidden])) .st-nav { margin-bottom: .6rem; }
/* the open twin's tabs move to their own row when the screen is narrow */
@media (max-width: 1100px) {
  .st-nav { flex-wrap: wrap; }
  .st-tabs { order: 3; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .st-nav { margin-top: -1rem; padding: .5rem 0; }
  .st-brand span { font-size: 1rem; }
  .st-tabs-name { display: none; }
}
/* the navbar replaces the interview's own Back button */
#v-interview > .bar > [data-go="v-home"] { display: none; }
#chat-back { display: none !important; }      /* the navbar's tabs take you back */

/* ===================== review fixes (Oct 24) ===================== */
/* home: name, one line, and one quiet status line (no chips) */
.st-status { color: var(--muted); font-size: .95rem; font-weight: 600; }

/* forms and cards fill the page column like every other screen */
.st-form, #v-voice .st-card, #v-share .st-card { max-width: none; }
.st-danger { margin-top: 1.2rem; border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.st-danger::before { display: none !important; }
.btn.st-del { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn.st-del:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

/* boxes grow with their text; no drag handles */
.st-answer textarea, .st-note textarea, .st-note-edit textarea { resize: none; }
.st-note textarea { overflow: hidden; min-height: 3.4rem; }
.st-note-edit { display: flex; flex-direction: column; gap: .6rem; }

/* the intro line no longer slides under the header rule */
.st-sub2 { margin-top: 0; }

/* interview: one main button, clearly the biggest */
.st-save { min-width: 12rem; }
@media (max-width: 560px) { .st-answer .st-row .btn { flex: 1 1 auto; } .st-save { min-width: 0; flex-basis: 100% !important; order: 9; } }

/* side panel: sections or answers, one at a time */
.st-side-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 1rem 0 .8rem; }
.st-side-tabs button { min-height: 44px; }
.st-side-tabs button[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.st-answers { max-height: none; overflow: visible; }
.st-ans summary { min-height: 44px; display: flex; align-items: center; }

/* "read questions aloud" switch, and every checkbox, as a clay toggle */
.st-toggle, .st-check { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 700; min-height: 44px; }
.st-check { align-items: flex-start; }
.st-toggle input, .st-check input { -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 52px; height: 30px; border-radius: 999px; background: var(--surface2); box-shadow: var(--well, inset 0 2px 5px rgba(0,0,0,.25));
  position: relative; cursor: pointer; transition: background-color .2s; }
.st-toggle input::after, .st-check input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 2px 0 var(--hi, rgba(255,255,255,.4)), inset 0 -3px 0 var(--lo, rgba(0,0,0,.2)), 0 2px 4px rgba(0,0,0,.25);
  transition: transform .2s; }
.st-toggle input:checked, .st-check input:checked { background: var(--accent); }
.st-toggle input:checked::after, .st-check input:checked::after { transform: translateX(22px); }
.st-toggle input:focus-visible, .st-check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-toggle .st-knob { display: none; }

/* small green labels: darker green in light mode so they read clearly */
:root:not([data-theme="dark"]) .st-sec.now .st-sec-st, :root:not([data-theme="dark"]) .st-sec.done .st-sec-st,
:root:not([data-theme="dark"]) .st-tabs .st-tab-talk:not([aria-selected="true"]) {
  color: color-mix(in srgb, var(--accent) 62%, #000); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-sec.now .st-sec-st, :root:not([data-theme="light"]) .st-sec.done .st-sec-st,
  :root:not([data-theme="light"]) .st-tabs .st-tab-talk:not([aria-selected="true"]) { color: var(--accent); }
}

/* studio "done/ready" badges get a checkmark, not the family app's speaker */
.st-imp .badge.ok::before, .st-twin .badge.ok::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* add memories: clay camera, film slate and microphone; a clay folder on the upload box */
.st-cap-i { width: 72px; height: 64px; background: var(--art) center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18)); }
.i-cam { --art: url(clay/clay-camera.webp); }
.i-vid { --art: url(clay/clay-film-slate.webp); }
.i-mic { --art: url(clay/microphone.webp); }
.st-drop::before { background-image: url(clay/clay-folder.webp) !important; }
@media (max-width: 560px) {
  .st-capture { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .st-cap { min-height: 6.2rem; font-size: .9rem; padding: .5rem .3rem; text-align: center; }
  .st-cap-i { width: 48px; height: 42px; }
}

/* memories sit in a grid: 3 across on desktop, 2 on tablets, 1 on phones */
.st-imports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1100px) { .st-imports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .st-imports { grid-template-columns: 1fr; } }
.st-imports > p { grid-column: 1 / -1; }
.st-imp-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-thumb { max-width: 100%; width: 100%; max-height: 180px; }

/* the twin's picture: its initials on a sculpted clay disc */
#v-chat #chat-title::before, #v-chat .msg.twin .who::before {
  content: var(--twin-initials, ""); display: grid; place-items: center; color: var(--ink); font-weight: 800;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 6px rgba(0,0,0,.25); }
#v-chat #chat-title::before { font-size: 1.2rem; }
#v-chat .msg.twin .who::before { width: 26px; height: 26px; font-size: .7rem; }
#chat-title .st-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  /* phone chat header: picture, then the name on one line and what they do under it */
  #v-chat #chat-title { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; font-size: 1.2rem; }
  #v-chat #chat-title::before { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 1rem; }
  #v-chat #chat-title .ko { font-size: .9rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #chat-sub { display: none; }
}

/* fact sheet: one topic per tab */
.st-fs-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 .8rem; }
.st-fs-tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-weight: 700;
  border-radius: 999px; padding: .45rem 1rem; min-height: 44px; cursor: pointer; }
.st-fs-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.st-fs-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l, 16px); padding: 1rem 1.4rem; }

/* ---------- review round 2 ---------- */
/* phone: every tab in view (two rows), each a full tap target */
@media (max-width: 760px) {
  .st-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: .25rem; }
  .st-tabs button { min-height: 44px; padding: .4rem .3rem; font-size: .88rem; white-space: normal; line-height: 1.15; }
}
/* the tabs replace each page's own Back button */
#v-import > .bar > [data-go], #v-facts > .bar > [data-go], #v-voice > .bar > [data-go], #v-share > .bar > [data-go],
#v-new > .bar > [data-go] { display: none; }
/* buttons in rows may wrap instead of pushing the page wider */
.st-row .btn { white-space: normal; text-align: center; }
/* off switches stay visible in dark mode */
.st-toggle input, .st-check input { box-shadow: var(--well, inset 0 2px 5px rgba(0,0,0,.25)), inset 0 0 0 2px var(--line); }
.st-toggle input:not(:checked)::after, .st-check input:not(:checked)::after { background: var(--muted); }
/* memory cards: same height in a row, type label always on its own line */
.st-imports { align-items: stretch; }
.st-imp > .st-row:first-child { flex-wrap: wrap; }
.st-imp > .st-row:first-child .st-spacer { flex-basis: 100%; height: 0; }
.st-imp > .st-row:last-child { margin-top: auto; }
/* "where they said it": speech bubbles, not a telephone */
#v-chat .refs-title::before { background-image: url(clay/speech-bubbles.webp); }
.st-sub2 { margin-top: .6rem !important; }
@media (max-width: 760px) { .st-tabs .st-tab-talk { white-space: nowrap; font-size: .82rem; } }
/* same tab order on every screen; hover tint only where there's a mouse, so a tapped tab never looks chosen */
@media (hover: none) { .st-tabs button:hover { background: none; color: var(--muted); } }
.st-tabs button[aria-selected="true"] { background: var(--surface2) !important; color: var(--text) !important; }

/* Google sign-in */
.st-google { min-height: 52px; font-size: 1.05rem; gap: .7rem; width: 100%; }
.st-google svg { width: 22px; height: 22px; background: #fff; border-radius: 50%; padding: 2px; }
.st-family-login { margin-top: .6rem; text-align: left; }
.st-family-login summary { cursor: pointer; text-align: center; padding: .4rem; }
#nav-approvals .badge { margin-left: .2rem; background: var(--danger); color: #fff; border-color: transparent; }