@import url("./base.css");

.result-screen{overflow:auto;background:#fff}
.result-inner{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.result-summary{margin-top:18px}
.visual-switch{margin-top:18px}
.visual-label{min-height:18px;margin-top:10px;color:#9a9a9a}
.word-path-viewport{overflow:hidden;margin:8px auto 0;padding:4px 0 10px;max-width:100%}

/* Approved mock: one immutable center spine. */
.word-path{
  --row-h:43px;
  --glyph:23px;
  --node:34px;
  position:relative;
  width:100%;
  min-height:calc(12 * var(--row-h));
  transform:none!important;
}
.word-path::before{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  bottom:10px;
  width:1px;
  transform:translateX(-.5px);
  background:#d1d1d1;
  border-radius:999px;
  transform-origin:top;
  scale:1 0;
  transition:scale 800ms cubic-bezier(.22,.75,.25,1);
}
.word-path.assemble::before{scale:1 1}

.spine-rows{position:relative;z-index:1}
.spine-row{
  position:relative;
  height:var(--row-h);
  opacity:0;
  transform:translateY(4px);
  transition:opacity 240ms ease var(--delay),transform 320ms cubic-bezier(.22,.75,.25,1) var(--delay);
}
.word-path.assemble .spine-row{opacity:1;transform:translateY(0)}

/*
  Critical layout rule:
  full-width 3-column grid = LEFT WORD | FIXED NODE | RIGHT WORD.
  The center node is therefore always exactly 50vw-relative within the path,
  regardless of word length or which character was selected.
*/
.spine-word{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--node) minmax(0,1fr);
  align-items:center;
  padding:0 12%;
  box-sizing:border-box;
  font-size:var(--glyph);
  font-weight:290;
  letter-spacing:0;
  white-space:nowrap;
  font-feature-settings:"palt" 0;
}
.spine-left,.spine-right{
  display:flex;
  align-items:center;
  min-width:0;
}
.spine-left{
  justify-content:flex-end;
  padding-right:9px;
}
.spine-right{
  justify-content:flex-start;
  padding-left:9px;
}

.spine-kanji{
  position:relative;
  grid-column:2;
  display:grid;
  place-items:center;
  width:var(--node);
  height:var(--node);
  margin:0;
  font-size:24px;
  font-weight:780;
  z-index:2;
}
.spine-kanji::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px #d2d2d2;
  z-index:-1;
}
.spine-kanji::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:50%;
  height:1px;
  background:#cfcfcf;
  z-index:-2;
}

.spine-left .path-char,.spine-right .path-char{
  display:inline-block;
  width:var(--glyph);
  text-align:center;
  line-height:var(--node);
  color:#9f9f9f;
}

.spine-step{
  position:absolute;
  left:11%;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  letter-spacing:.06em;
  color:#9c9c9c;
}
.redraw-note{
  position:absolute;
  right:calc(50% + 28px);
  top:-2px;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
  color:#aaa;
  text-align:right;
}
.result-meta{margin-top:10px;letter-spacing:.18em;color:#999}

@media(max-width:360px){
  .word-path{--row-h:40px;--glyph:22px;--node:32px}
  .spine-word{padding:0 10%}
  .spine-left{padding-right:8px}
  .spine-right{padding-left:8px}
  .spine-left .path-char,.spine-right .path-char{line-height:var(--node)}
  .spine-step{left:8%;font-size:10px}
}
@media(max-width:330px){
  .word-path{--glyph:21px;--node:30px}
  .spine-word{padding:0 8%}
  .spine-step{left:6%}
}