/* Sense of Self — app UI kit */
@import url('../../colors_and_type.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

:root {
  --sos-paper: #FDFCF7;
  --sos-ink:   #023b3b;
  --sos-ink-2: #046363;
  --sos-ink-3: #434343;
  --sos-mute:  #717171;
  --sos-line:  #e2e2e2;
  --sos-teal:  #058c8c;
  --sos-heat:  #a1665e;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:'Inter',sans-serif; color: var(--sos-ink); }
body { background:#eee; min-height:100vh; display:grid; place-items:center; padding:32px; }

/* phone bezel reused from ../app but copy minimal shell here */
.phone { display:flex; justify-content:center; }
.phone__bezel {
  width:402px; height:874px; background:var(--sos-paper); border-radius:44px;
  box-shadow:0 30px 80px rgba(0,0,0,0.2), 0 0 0 10px #0a0a0a, 0 0 0 12px #2a2a2a;
  position:relative; overflow:hidden;
}
.phone__notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:120px; height:28px; border-radius:20px; background:#000; z-index:10; }
.phone__statusbar { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center; justify-content:space-between; padding:16px 28px 0; font-size:14px; font-weight:600; z-index:5; }
.phone__screen { position:absolute; top:44px; left:0; right:0; bottom:0; overflow-y:auto; background:var(--sos-paper); }
.phone__home { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:#000; z-index:10; }

/* shared tokens */
.sos-eyebrow { font-family: var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sos-teal); }
.sos-btn {
  height:48px; padding:0 22px; border-radius:2px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.02em; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.sos-btn:active { transform: translateY(1px); }
.sos-chip {
  padding:6px 12px; border-radius:100px; background:#fff; border:1px solid var(--sos-line);
  font-family:'Inter',sans-serif; font-size:13px; color:var(--sos-ink-3); cursor:pointer;
}
.sos-chip.is-active { background:var(--sos-ink); color:#fff; border-color:var(--sos-ink); }
.sos-icon-btn { width:40px; height:40px; border-radius:100px; background:transparent; border:none; display:grid; place-items:center; color:var(--sos-ink); cursor:pointer; }
.sos-header { padding:16px 24px 24px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.sos-title  { margin:8px 0 0; font-family:var(--font-primary); font-weight:700; font-size:32px; letter-spacing:-0.03em; line-height:1.05; color:var(--sos-ink); }
.sos-title em { font-style:italic; color:var(--sos-heat); }
.sos-header__right { display:flex; gap:8px; padding-top:18px; }

.sos-mood-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* onboarding */
.onb { padding:48px 32px 32px; height:100%; display:flex; flex-direction:column; }
.onb__dots { display:flex; gap:6px; }
.onb__dot { width:24px; height:2px; background:var(--sos-line); }
.onb__dot.is-active { background:var(--sos-ink); }
.onb__body { flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.onb__title { font-family:var(--font-primary); font-weight:700; font-size:40px; line-height:1; letter-spacing:-0.04em; margin:0; color:var(--sos-ink); white-space:pre-line; }
.onb__lede  { font-size:16px; line-height:1.55; color:var(--sos-ink-2); margin:0; max-width:30ch; }
.onb__footer { display:flex; justify-content:space-between; align-items:center; }
.onb__skip { background:none; border:none; font-family:'Inter',sans-serif; font-size:14px; color:var(--sos-mute); cursor:pointer; }

/* today */
.today { padding-bottom:90px; }
.streak { margin:0 24px 24px; padding:16px 20px; background:#fff; border:1px solid var(--sos-line); border-radius:2px; }
.streak__label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--sos-teal); text-transform:uppercase; }
.streak__row { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:12px 0 8px; }
.streak__day { display:flex; flex-direction:column; align-items:center; gap:6px; }
.streak__dot { width:12px; height:12px; border-radius:50%; background:var(--sos-line); }
.streak__day.is-done .streak__dot { background:var(--sos-teal); }
.streak__day.is-today .streak__dot { background:var(--sos-heat); box-shadow:0 0 0 3px rgba(161,102,94,0.2); }
.streak__letter { font-size:11px; color:var(--sos-mute); font-weight:600; }
.streak__meta { font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; color:var(--sos-mute); }
.streak__meta .heat { color:var(--sos-heat); font-weight:700; }

.prompt-card { margin:0 24px 24px; padding:24px; background:var(--sos-ink); color:#fff; border-top:3px solid var(--sos-heat); }
.prompt-card .sos-eyebrow { color:#8ccaca; }
.prompt-card__q { font-family:var(--font-primary); font-weight:700; font-size:28px; line-height:1.1; letter-spacing:-0.03em; margin:12px 0 8px; }
.prompt-card__q em { color:var(--sos-heat); font-style:italic; }
.prompt-card__hint { margin:0 0 24px; font-size:14px; line-height:1.5; color:#b2dbdb; }
.prompt-card .sos-btn { background:#fff; color:var(--sos-ink); width:100%; }

.mood { margin:0 24px 24px; }
.mood__row { display:flex; gap:8px; margin-top:10px; overflow-x:auto; }
.mood__pill { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; border:1px solid var(--sos-line); background:#fff; font-size:13px; color:var(--sos-ink-3); font-family:'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
.mood__pill.is-active { background:var(--sos-ink); color:#fff; border-color:var(--sos-ink); }

.today__footnote { margin:32px 24px 0; padding-top:16px; border-top:1px solid var(--sos-line); display:flex; flex-direction:column; gap:4px; }
.coords-mono { font-family:var(--font-mono); font-size:11px; color:var(--sos-mute); letter-spacing:0.05em; }

/* reflect */
.reflect { padding:0 24px 90px; background:var(--sos-paper); min-height:100%; }
.reflect__top { display:flex; justify-content:space-between; align-items:center; padding:12px 0 16px; border-bottom:1px solid var(--sos-line); margin-bottom:16px; }
.reflect__back, .reflect__save { background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-size:14px; color:var(--sos-ink); font-weight:600; }
.reflect__q { font-family:var(--font-primary); font-weight:700; font-size:28px; letter-spacing:-0.03em; line-height:1.1; margin:8px 0 20px; }
.reflect__q em { color:var(--sos-heat); font-style:italic; }
.reflect__input { width:100%; min-height:240px; font-family:var(--font-primary); font-size:17px; line-height:1.55; color:var(--sos-ink); background:transparent; border:none; outline:none; resize:vertical; padding:0; }
.reflect__meter { display:flex; align-items:center; gap:12px; margin-top:16px; }
.reflect__meter-bar { flex:1; height:2px; background:var(--sos-line); position:relative; }
.reflect__meter-bar span { position:absolute; left:0; top:0; bottom:0; background:var(--sos-teal); transition:width 0.2s; }
.reflect__meter-num { font-family:var(--font-mono); font-size:10px; color:var(--sos-mute); letter-spacing:0.05em; }
.reflect__mood { margin-top:24px; }

/* prompts */
.prompts { padding-bottom:90px; }
.prompts__theme { padding:0 24px 20px; }
.prompts__list { list-style:none; padding:0; margin:12px 0 0; background:#fff; border:1px solid var(--sos-line); }
.prompts__row { padding:14px 16px; border-bottom:1px solid var(--sos-line); display:flex; justify-content:space-between; align-items:center; font-size:15px; color:var(--sos-ink); cursor:pointer; gap:12px; }
.prompts__row:last-child { border-bottom:none; }
.prompts__row:hover { background:var(--sos-paper); }

/* library */
.library { padding-bottom:90px; }
.library__index { position:relative; padding-left:60px; margin:0 24px; min-height:450px; }
.library__ruler { position:absolute; top:0; left:0; width:52px; height:100%; border-right:1px solid var(--sos-teal); }
.library__rtick { position:absolute; left:0; right:0; height:0; }
.library__rmark { position:absolute; right:0; top:0; width:6px; height:1px; background:var(--sos-teal); }
.library__rmark.major { width:12px; }
.library__rmark.heat  { background:var(--sos-heat); height:2px; }
.library__rnum { position:absolute; right:18px; top:-7px; font-family:var(--font-mono); font-size:9px; color:var(--sos-teal); letter-spacing:0.08em; }
.library__rnum.heat  { color:var(--sos-heat); }
.library__list { list-style:none; padding:0; margin:0; }
.library__row { display:grid; grid-template-columns:56px 1fr 20px; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid var(--sos-line); cursor:pointer; }
.library__date { font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; color:var(--sos-heat); }
.library__title { font-family:var(--font-primary); font-weight:700; font-size:16px; letter-spacing:-0.01em; color:var(--sos-ink); line-height:1.2; }
.library__meta { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:11px; color:var(--sos-mute); font-family:var(--font-mono); letter-spacing:0.04em; }
.library__chev { color:var(--sos-mute); }

/* profile */
.profile { padding-bottom:90px; }
.profile__section { padding:0 24px 28px; }
.profile__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.profile__tag { padding:6px 12px; background:#fff; border:1px solid var(--sos-teal); color:var(--sos-ink); font-size:13px; font-family:'Inter',sans-serif; }
.profile__values { list-style:none; padding:0; margin:12px 0 0; }
.profile__values li { display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--sos-line); font-size:15px; line-height:1.4; align-items:flex-start; }
.profile__values em { color:var(--sos-mute); font-style:italic; font-weight:400; display:block; font-size:13px; margin-top:2px; }
.profile__n { font-family:var(--font-primary); font-weight:700; font-size:18px; color:var(--sos-heat); min-width:28px; }

.sliders { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:12px; }
.slider { display:grid; grid-template-columns:80px 1fr 80px; gap:8px; align-items:center; font-size:11px; color:var(--sos-mute); font-family:var(--font-mono); letter-spacing:0.04em; text-transform:uppercase; }
.slider__l { text-align:right; }
.slider__track { position:relative; height:1px; background:var(--sos-line); }
.slider__mark { position:absolute; top:-5px; width:12px; height:12px; transform:translateX(-50%); background:var(--sos-teal); border-radius:50%; border:2px solid var(--sos-paper); }

/* bottom nav */
.sos-nav { position:absolute; bottom:0; left:0; right:0; height:72px; background:var(--sos-paper); border-top:1px solid var(--sos-line); display:flex; padding-bottom:12px; }
.sos-nav__item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:transparent; border:none; color:var(--sos-mute); font-family:'Inter',sans-serif; font-size:11px; font-weight:500; cursor:pointer; padding-top:8px; }
.sos-nav__item.is-active { color:var(--sos-ink); }
.sos-nav__item.is-active .material-symbols-outlined { font-variation-settings:'FILL' 1; color:var(--sos-heat); }