:root{
  --sage:#7f9873; --sage-deep:#5f7a55; --sage-soft:#e7eee1;
  --cream:#faf6ee; --cream-2:#f3ecdd; --ink:#33382f; --muted:#7b806f;
  --line:#e2dbc9; --warn:#b06a4f; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
/* never allow horizontal overflow; long words/urls wrap */
.small,.states .nav,.states summary,.cardout .v,.msg .bub,.card-link{overflow-wrap:anywhere;word-break:break-word}
body{
  background:var(--cream); color:var(--ink); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:520px; margin:0 auto; padding:0 18px; min-height:100vh; display:flex; flex-direction:column}
a{color:inherit; text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:14px}

/* home */
.home-hd{padding:44px 4px 12px}
.home-hd h1{font-size:30px; margin:0 0 4px; letter-spacing:1px}
.card-link{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; margin:14px 0; box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card-link h2{margin:0 0 6px; font-size:19px}
.card-link.coach{background:var(--sage-soft); border-color:#d3ddc9}
.badge{
  display:inline-block; font-size:12px; background:var(--sage-deep); color:#fff;
  border-radius:999px; padding:2px 10px; margin-left:8px; vertical-align:middle;
}
.weak-entry{display:none; text-align:center; padding:10px; color:var(--muted); font-size:14px}
.weak-entry.show{display:block}

/* chat (Ami) */
.topbar{display:flex; align-items:center; gap:10px; padding:16px 4px 8px; border-bottom:1px solid var(--line)}
.topbar .dot{width:10px;height:10px;border-radius:50%;background:var(--sage)}
.topbar .back{margin-left:auto; color:var(--muted); font-size:14px}
/* the chat page is a fixed-height column so .stream actually scrolls itself.
   Without this the page just grows and `stream.scrollTop = scrollHeight` is a
   no-op, leaving every new reply below the fold on a phone. */
.wrap.chat{height:100dvh; min-height:0}
.stream{flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 2px 8px}
.msg{margin:10px 0; display:flex}
.msg .bub{max-width:82%; padding:11px 14px; border-radius:14px; white-space:pre-wrap; word-break:break-word}
.msg.ami .bub{background:#fff; border:1px solid var(--line); border-top-left-radius:4px}
.msg.me{justify-content:flex-end}
.msg.me .bub{background:var(--sage); color:#fff; border-top-right-radius:4px}
.msg.sys .bub{background:var(--cream-2); color:var(--muted); font-size:14px; margin:0 auto; text-align:center}
.typing{color:var(--muted); font-size:14px; padding:4px 6px}
.composer{display:flex; gap:8px; padding:10px 2px 18px; position:sticky; bottom:0; background:var(--cream)}
.composer textarea{
  flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:11px 12px;
  font:inherit; background:#fff; max-height:120px;
}
.btn{
  background:var(--sage-deep); color:#fff; border:none; border-radius:12px; padding:0 18px;
  font:inherit; font-weight:600; cursor:pointer;
}
.btn:disabled{opacity:.5; cursor:default}
.btn.ghost{background:transparent; color:var(--sage-deep); border:1px solid var(--sage-deep)}

/* coach */
.gate{padding:36px 4px}
.gate h1{font-size:24px}
.field{margin:14px 0}
.field input{width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; background:#fff}
.err{color:var(--warn); font-size:14px; min-height:0}
.err:empty{display:none}
/* coach state map (3x3) — Round 7: state NAME only, so all nine cells fit one
   390×844 screen together with the header and the locate entry. The grid takes
   the remaining column height (capped), so the map reads as one calm screen
   instead of a small block with dead space under it. */
.coach-tool-shell{display:flex; flex-direction:column; flex:1; min-height:0}
#home-view{display:flex; flex-direction:column; flex:1; min-height:0; padding:0 0 max(16px,env(safe-area-inset-bottom))}
.grid9{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:10px; margin:14px 0 0; flex:1 1 auto; max-height:600px; min-height:360px;
}
.cell{
  text-align:center; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:8px 4px 7px; min-height:92px; font:inherit; cursor:pointer; color:var(--sage-deep);
  display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center;
  transition:border-color .12s, box-shadow .12s;
}
.cell:active{transform:scale(.99)}
.cell:focus-visible{outline:2px solid var(--sage-deep); outline-offset:1px}
.state-icon{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.cell .cn{font-weight:500; font-size:12px; line-height:1.2; color:#788071; white-space:nowrap; letter-spacing:-.2px}
.cell.hi{border-color:var(--sage-deep); box-shadow:0 0 0 2px rgba(95,122,85,.18); background:var(--sage-soft)}
.cell.hi .state-icon{opacity:1;stroke-width:1.8}
.result{background:var(--sage-soft); border:1px solid #d3ddc9; border-radius:12px; padding:10px 12px; margin-top:8px}
.result .rline{font-size:16px}
.locate .field input{width:100%}
/* coach detail */
.dsec{margin:14px 0}
.dsec .dk{font-size:12.5px; color:var(--muted); letter-spacing:.5px; margin-bottom:2px}
.dsec .nav{color:var(--sage-deep)}
.eyebrow{font-size:11px;line-height:1.2;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.state-card,.interpret-card{position:relative;overflow:hidden;border-radius:18px;padding:20px 18px;margin:4px 0 16px;border:1px solid var(--line)}
.state-card{background:linear-gradient(145deg,#fff 0%,#f0f3e9 100%);min-height:570px;display:flex;flex-direction:column;justify-content:center}
.state-card h2{font-size:24px;line-height:1.3;margin:0;color:var(--ink)}
.state-card-head{display:flex;align-items:center;margin-bottom:12px}
.detail-icon{width:54px;height:54px;margin-bottom:12px;color:var(--sage-deep)}
.state-watermark{position:absolute;right:-30px;bottom:-28px;color:var(--sage);opacity:.08;pointer-events:none}
.state-watermark .state-icon{width:190px;height:190px;stroke-width:1}
.state-card .dsec,.state-card-head{position:relative;z-index:1}
.note-sec{margin-top:auto;padding-top:14px;border-top:1px solid rgba(95,122,85,.18)}
.interpret-card{background:#fff;border-color:#cfdac7;box-shadow:0 10px 30px rgba(76,94,68,.08)}
.interpret-card blockquote{margin:10px 0 18px;padding:11px 13px;border-left:3px solid var(--sage);background:var(--sage-soft);border-radius:0 10px 10px 0;font-size:15px}
.coach-tag{display:inline-block; font-size:12px; color:var(--sage-deep); border:1px solid var(--sage-deep); border-radius:999px; padding:1px 9px}
hr.soft{border:none; border-top:1px solid var(--line); margin:20px 0}
@media (max-width:370px){
  .wrap{padding:0 12px}.topbar{gap:6px}.grid9{gap:7px;min-height:342px}.cell{min-height:86px;padding-inline:2px}.cell .cn{font-size:11px;letter-spacing:-.45px}.state-icon{width:34px;height:34px}
}
@media (max-height:760px){
  .grid9{min-height:318px;gap:7px;margin-top:10px}.cell{min-height:80px}.state-icon{width:32px;height:32px}.cell .cn{font-size:11px}
}