/* Aana Jaana page */
html:has(body.cmp){background:#F0C08C}
body.cmp{background:linear-gradient(180deg,#F8E6C8 0%,var(--sky) 35%,#F0C08C 100%);min-height:100vh}
.top.static{position:relative;pointer-events:auto}
.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:8px 24px 40px}
.hero{padding:20px 0 18px}
.aj{margin:0;font:400 64px/1 var(--disp);color:var(--red);text-shadow:3px 3px 0 var(--mustard)}
.hero h1{margin:10px 0 6px;font:400 34px/1.15 var(--disp)}
.lede{margin:0;max-width:56ch;color:var(--ink2);font-size:17px}

.controls{background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:5px 5px 0 var(--ink);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.controls label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink2);font-weight:500}
.controls select{background-color:#fff;border:1.5px solid var(--ink);height:40px;border-radius:20px;font-size:16px;color:var(--ink)}
.route{display:grid;grid-template-columns:1fr 44px 1fr;gap:10px;align-items:end}
.swap{width:44px;height:40px;border-radius:20px;border:1.5px solid var(--ink);background:var(--mustard);cursor:pointer;font-size:18px}
.swap:active{transform:scale(.94)}
.row2{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.row2 .grow{flex:1;min-width:200px}
.seg.lt{background:rgba(35,32,28,.08);height:40px;padding:3px;border-radius:20px}
.seg.lt button{color:var(--ink);height:34px;padding:0 14px;border-radius:17px}
.seg.lt button.on{background:var(--ink);color:var(--cream)}
.seg.lt button:disabled{opacity:.4;cursor:not-allowed}

/* result */
#out{margin-top:26px}
.msg{background:var(--paper);border:2px dashed var(--border);border-radius:8px;padding:22px;font-size:17px}
.legs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.leg{border-radius:10px;overflow:hidden;color:var(--cream);box-shadow:0 8px 24px rgba(60,30,10,.18)}
.leg .hazard{height:8px}
.leg-in{padding:14px 18px 18px}
.leg.go{background:var(--red)}
.leg.back{background:var(--teal)}
.leg .word{font:400 26px/1 var(--disp);opacity:.95}
.leg .dir{font-size:15.5px;margin:4px 0 12px;opacity:.95}
.leg .big{font:400 42px/1 var(--disp);text-shadow:2px 2px 0 rgba(35,32,28,.55)}
.leg .per{font-size:14px;opacity:.85;margin-top:6px}
.say{margin:22px 0 4px;font:400 28px/1.25 var(--disp);max-width:30ch}
.say small{display:block;font:400 15px/1.4 var(--body);color:var(--ink2);margin-top:6px}

.card{margin-top:22px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:16px 18px 12px}
.card h2{margin:0 0 2px;font:400 22px/1.2 var(--disp);display:flex;align-items:center;gap:8px}
.card .sub{margin:0 0 10px;color:var(--ink2);font-size:14.5px}
.lg{display:flex;gap:16px;font-size:14px;color:var(--ink2);margin-bottom:6px;flex-wrap:wrap}
.lg i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
#chart{position:relative}
#chart svg{display:block;width:100%;height:auto;overflow:visible}
#chart text{font:13px var(--body);fill:var(--ink2)}
.hov{position:absolute;pointer-events:none;background:var(--ink);color:var(--cream);font-size:13.5px;padding:6px 9px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-110%)}

.goods{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.goods h3{margin:0 0 6px;font-size:16px}
.goods ol{list-style:none;margin:0;padding:0}
.goods li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:5px 0;font-size:14.5px;cursor:pointer;border-top:1px dashed var(--border)}
.goods li:first-child{border-top:0}
.goods li:hover .n{color:var(--red)}
.goods .bar{grid-column:1/3;height:5px;background:rgba(35,32,28,.08);border-radius:3px;overflow:hidden}
.goods .bar i{display:block;height:100%}
.goods .v{font-variant-numeric:tabular-nums;color:var(--ink2)}

.foot{position:relative;z-index:1;margin-top:20px;background:var(--ink);color:var(--cream)}
.foot .hazard{height:8px}
.foot p{max-width:920px;margin:0 auto;padding:16px 24px 22px;font-size:14px;opacity:.85}

@media (max-width:700px){
  .wrap{padding:4px 14px 30px}
  .aj{font-size:46px}.hero h1{font-size:26px}
  .legs,.goods{grid-template-columns:1fr}
  .leg .big{font-size:34px}
  .say{font-size:23px}
  .row2 label{flex:1 1 100%}
}