/* Echo — app styles on top of the kit design system (core.css).
   Tokens only; no raw colours outside the brand mark. */

:root { --mark-bg: var(--ochre); }

.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.dots i.on { background: var(--ochre); }

/* dimension colours */
.tag.dim-personality, .trait-chip.dim-personality { --dim: var(--moss); --dim-soft: var(--moss-soft); }
.tag.dim-values, .trait-chip.dim-values { --dim: var(--ochre); --dim-soft: var(--ochre-soft); }
.tag.dim-thinking, .trait-chip.dim-thinking { --dim: var(--slate); --dim-soft: var(--slate-soft); }
.tag.dim-morals, .trait-chip.dim-morals { --dim: var(--rust); --dim-soft: var(--rust-soft); }
.tag.dim-relationships, .trait-chip.dim-relationships { --dim: var(--clay); --dim-soft: var(--clay-soft); }
.tag.dim-style, .trait-chip.dim-style { --dim: var(--ink-2); --dim-soft: var(--surface-2); }
.tag[class*="dim-"] { color: var(--dim); background: var(--dim-soft); border-color: transparent; }
.trait-chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: var(--dim-soft); color: var(--ink); font-size: 13px; }
.trait-chip b { color: var(--dim); font-weight: 650; }
.trait-chip span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }

/* today */
.today-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.today-title { font-size: clamp(28px, 4vw, 40px); margin: 4px 0 6px; }
.streak { display: grid; justify-items: center; padding: 14px 22px; border-radius: var(--r-lg); background: var(--ochre-soft); color: var(--ochre-ink); }
.streak b { font-size: 38px; line-height: 1; }
.streak span { font-size: 13px; }
.rituals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ritual { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: inherit; transition: border-color 0.2s, transform 0.2s; }
.ritual:hover { border-color: var(--line-2); transform: translateY(-1px); }
.ritual b { display: block; font-size: 15px; }
.ritual span { display: block; font-size: 12.5px; color: var(--ink-3); }
.ritual-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.ritual.done { border-color: var(--moss-line); background: var(--moss-soft); }
.ritual.done .ritual-ic { background: var(--moss); color: var(--on-accent); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--ink-3); }
.ach b { display: block; font-size: 14px; color: var(--ink-2); }
.ach-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.ach.on { border-style: solid; border-color: var(--ochre-soft); background: var(--surface); }
.ach.on b { color: var(--ink); }
.ach.on .ach-ic { background: var(--ochre-soft); color: var(--ochre); }

/* garden (generative SVG) */
.garden { width: 100%; height: auto; max-height: 240px; }
.garden .soil { fill: var(--surface-2); }
.garden .seed { fill: var(--ink-3); opacity: 0.6; }
.garden .stem { fill: none; stroke: var(--moss); stroke-width: 2.5; stroke-linecap: round; }
.garden .leaf { fill: var(--moss-soft); stroke: var(--moss); stroke-width: 1.2; }
.garden .bud { fill: var(--moss); }
.garden .heart { fill: var(--ochre); }
.garden .plant-label { font: 500 11.5px var(--font-sans); fill: var(--ink-3); }
.garden .f-openness .petal { fill: var(--slate-soft); stroke: var(--slate); }
.garden .f-conscientiousness .petal { fill: var(--moss-soft); stroke: var(--moss); }
.garden .f-extraversion .petal { fill: var(--ochre-soft); stroke: var(--ochre); }
.garden .f-agreeableness .petal { fill: var(--clay-soft); stroke: var(--clay); }
.garden .f-stability .petal { fill: var(--rust-soft); stroke: var(--rust); }
.garden .plant { transform-origin: center bottom; animation: rise 0.6s var(--ease) both; }

/* reflect */
.dim-chips .count { margin-inline-start: 6px; font-size: 11.5px; color: var(--ink-3); }
.dim-chips .count:empty { display: none; }
.q-card { display: grid; gap: 16px; padding: 26px clamp(18px, 3vw, 32px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.q-card.empty { justify-items: center; text-align: center; padding: 48px 20px; }
.q-text { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.45; }
.options { display: grid; gap: 8px; }
.option { text-align: start; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); font-size: 15px; line-height: 1.5; transition: border-color 0.2s, background-color 0.2s; }
.option:hover { border-color: var(--ink-3); }
.option[aria-pressed="true"] { border-color: var(--ochre); background: var(--ochre-soft); }
.insight { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--ochre-soft); color: var(--ink); animation: rise 0.4s var(--ease); }
.insight > .icon { flex: none; color: var(--ochre); margin-top: 3px; }
.insight-text { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; }
.h-item { display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.h-q { font-weight: 560; }
.h-a { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }

/* diary */
.diary { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.diary-cal { padding: 16px; display: grid; gap: 12px; position: sticky; top: calc(var(--top-h, 86px) + 12px); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head b { font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-wd { font-size: 11px; color: var(--ink-3); padding: 4px 0; }
.cal-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; font-size: 13px; color: var(--ink-2); }
.cal-day:hover { background: var(--surface-2); }
.cal-day.today { color: var(--ochre-ink); font-weight: 700; }
.cal-day.sel { background: var(--ink); color: var(--paper); }
.cal-day.future { opacity: 0.45; }
.cal-day .mood-dot { position: absolute; bottom: 3px; width: 5px; height: 5px; }
.diary-editor { display: grid; gap: 14px; min-width: 0; }
.diary-date { font-size: 24px; }
.diary-text { min-height: 46vh; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chip.mood { display: inline-flex; align-items: center; gap: 6px; }
.mood-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.mood-joyful { --m: var(--ochre); } .mood-calm { --m: var(--slate); } .mood-grateful { --m: var(--moss); } .mood-hopeful { --m: var(--moss); }
.mood-tired { --m: var(--ink-3); } .mood-anxious { --m: var(--clay); } .mood-sad { --m: var(--slate); } .mood-angry { --m: var(--rust); }
.mood-dot[class*="mood-"] { background: var(--m); }
.chip.mood[aria-pressed="true"] { border-color: var(--m); background: var(--surface); color: var(--ink); font-weight: 560; }
.assist-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.analysis .events { padding-inline-start: 1.2em; color: var(--ink-2); font-size: 14px; }

/* stories */
.new-story .chips { gap: 6px; }
.story-head { display: grid; gap: 10px; max-width: 760px; margin: 0 auto 10px; }
.story-title { font-size: clamp(26px, 3.4vw, 34px); }
.story { max-width: 760px; margin-inline: auto; display: grid; gap: 34px; padding-bottom: 60px; }
.scene { display: grid; gap: 10px; }
.scene + .scene { padding-top: 30px; border-top: 1px solid var(--line); }
.scene-title { font-size: 24px; }
.scene-body { font-family: var(--font-serif); font-size: 17.5px; line-height: 1.95; }
:root:is(:lang(zh-CN), :lang(zh-TW), :lang(ja), :lang(ko)) .scene-body { font-family: var(--cjk-serif), var(--font-serif); letter-spacing: 0.02em; }
.chosen { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; }
.chosen .icon { flex: none; margin-top: 3px; color: var(--ochre); }
.chosen b { display: block; color: var(--ink); font-weight: 560; }
.motive { margin-top: 6px; white-space: normal; height: auto; padding: 3px 9px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: flex-start; text-align: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); font-size: 15.5px; line-height: 1.55; transition: border-color 0.2s, transform 0.2s; }
.choice:hover:not([disabled]) { border-color: var(--ochre); transform: translateX(3px); }
.choice[disabled] { opacity: 0.55; }
.choice.picked { opacity: 1; border-color: var(--ochre); background: var(--ochre-soft); }
.choice-n { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--ochre-soft); color: var(--ochre-ink); font: 600 12px var(--font-mono); }
.own-choice { display: flex; gap: 8px; }
.own-choice .input { flex: 1; }
.story-analysis ul { padding-inline-start: 1.2em; color: var(--ink-2); }

/* portrait */
.portrait-top { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 22px; align-items: center; }
.radar-panel { padding: 12px; }
.radar { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }
.radar .ring { fill: none; stroke: var(--line); }
.radar .axis { stroke: var(--line); }
.radar .axis-label { font: 500 12.5px var(--font-sans); fill: var(--ink-2); }
.radar .axis-label.none { fill: var(--ink-3); font-style: italic; }
.radar .shape { fill: var(--ochre-soft); stroke: var(--ochre); stroke-width: 2; stroke-linejoin: round; }
.radar .vertex { fill: var(--ochre); }
.factor-list { display: grid; gap: 10px; }
.factor { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.factor .progress { height: 8px; }
.factor .progress > i { background: var(--ochre); }
.factor .f-openness > i { background: var(--slate); } .factor .f-conscientiousness > i { background: var(--moss); }
.factor .f-agreeableness > i { background: var(--clay); } .factor .f-stability > i { background: var(--rust); }
.portrait-text { font-size: 16px; line-height: 1.85; }
.portrait-text + .muted { margin-top: 12px; }
.dim-card { gap: 12px; }
.dim-trait { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.dim-trait span.muted { grid-column: 1; }
.dim-trait .dots { grid-column: 2; grid-row: 1; }
.trait-row { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.trait-row .evidence { font-style: italic; }

/* twin */
.twin { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.twin > .chat { flex: 1; min-height: 0; }
.twin-note { padding: 10px clamp(16px, 4vw, 48px) 0; max-width: 916px; width: 100%; margin-inline: auto; }
.twin-note p { text-align: center; }
.twin-mark { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--ochre-soft); color: var(--ochre); }
.twin-mark .icon { width: 26px; height: 26px; }

@media (max-width: 980px) {
  .diary { grid-template-columns: 1fr; }
  .diary-cal { position: static; }
  .portrait-top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .rituals { grid-template-columns: 1fr; }
  .factor { grid-template-columns: 6.5em minmax(0, 1fr); }
  .factor > .tnum { grid-column: 2; }
  .own-choice { flex-direction: column; }
}