:root{
  --jr-calm:#3f6b52; --jr-alarm:#9c4a34;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="warm-glass"]){
    --jr-calm:#6fbf92; --jr-alarm:#e0876b;
  }
}
:root[data-theme="dark"]{
  --jr-calm:#6fbf92; --jr-alarm:#e0876b;
}
:root[data-theme="warm-glass"]{
  --jr-calm:#3f6b52; --jr-alarm:#9c4a34;
}


.jr-panel{margin:28px 0; border-radius:var(--r-md); background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--lift-1); overflow:hidden}

.jr-diag{width:100%; border-collapse:collapse; font-size:15.5px}
.jr-diag th{text-align:left; font:700 10.5px/1.3 var(--font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); padding:15px 16px 11px 0;
  vertical-align:bottom}
.jr-diag th:first-child{padding-left:26px}
.jr-diag th:last-child{padding-right:22px}

.jr-diag td{padding:15px 16px 15px 0; border-top:1px solid rgba(var(--line-c),.10);
  vertical-align:top; line-height:1.5; color:var(--ink-faint)}
.jr-diag td:first-child{position:relative; padding-left:26px; color:var(--ink); font-weight:700}
.jr-diag td:first-child::before{content:""; position:absolute; left:0; top:13px; bottom:13px;
  width:3px; border-radius:0 2px 2px 0; background:var(--jr-calm)}
.jr-diag tr.lvl-alarm td:first-child::before{background:var(--jr-alarm)}
.jr-diag td:last-child{color:var(--ink-soft); padding-right:22px}


.jr-steps{list-style:none; counter-reset:st; margin:28px 0; padding:0}
.jr-steps li{counter-increment:st; display:grid; grid-template-columns:auto 1fr auto;
  gap:2px 14px; align-items:baseline; padding:13px 0;
  border-top:1px solid rgba(var(--line-c),.10)}
.jr-steps li::before{content:counter(st); font:400 20px/1 var(--font-display);
  color:var(--accent); grid-row:span 2}
.jr-steps .w{color:var(--ink); font-weight:700}
.jr-steps .n{grid-column:2; color:var(--ink-faint); font-size:14.5px; line-height:1.5}
.jr-steps .m{color:var(--ink-faint); font-size:13px; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.jr-steps-total{display:flex; justify-content:space-between; gap:14px; margin-top:2px;
  padding-top:13px; border-top:1px solid var(--ink-faint); font-size:14px; color:var(--ink-faint)}
.jr-steps-total b{font:400 20px/1 var(--font-display); color:var(--ink)}


.jr-cost{margin:28px 0}
.jr-cost-row{display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0;
  border-top:1px solid rgba(var(--line-c),.10); align-items:start}
.jr-cost-row:first-child{border-top:0}
.jr-cost-row .k{font:700 11px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; padding-top:2px}
.jr-cost-row.w1 .k{color:var(--jr-calm)} .jr-cost-row.w2 .k{color:var(--accent)} .jr-cost-row.w3 .k{color:var(--jr-alarm)}
.jr-cost-row .t{font-size:15.5px; line-height:1.55}
.jr-cost-row .bar{grid-column:2; display:flex; gap:4px; margin-top:8px}
.jr-cost-row .bar i{height:4px; flex:1; background:rgba(var(--line-c),.14); border-radius:2px}
.jr-cost-row.w1 .bar i:nth-child(1){background:var(--jr-calm)}
.jr-cost-row.w2 .bar i:nth-child(-n+2){background:var(--accent)}
.jr-cost-row.w3 .bar i{background:var(--jr-alarm)}


.jr-inline{display:block; width:100%; text-align:left; padding:13px 0 2px;
  border:0; border-top:1px solid rgba(var(--line-c),.10); background:none;
  font:500 14px/1.4 var(--font); letter-spacing:.01em; color:var(--accent);
  cursor:pointer; transition:color .2s}
.jr-inline:hover{color:var(--ink)}
.jr-panel .jr-inline{padding:14px 22px 15px 26px}
.jr-steps + .jr-inline, .jr-steps-total + .jr-inline{margin-bottom:28px}
@media (prefers-reduced-motion:reduce){ .jr-inline{transition:none} }


@media (max-width:640px){
  .jr-diag, .jr-diag tbody, .jr-diag tr, .jr-diag td{display:block; width:100%}
  .jr-diag thead{display:none}
  .jr-diag tr{position:relative; padding:15px 18px 15px 22px;
    border-top:1px solid rgba(var(--line-c),.10)}
  .jr-diag tbody tr:first-child{border-top:0}
  .jr-diag tr::before{content:""; position:absolute; left:0; top:14px; bottom:14px;
    width:3px; border-radius:0 2px 2px 0; background:var(--jr-calm)}
  .jr-diag tr.lvl-alarm::before{background:var(--jr-alarm)}
  .jr-diag td{border:0; padding:0 0 5px}
  .jr-diag td:first-child{padding-left:0}
  .jr-diag td:first-child::before{display:none}
  .jr-diag td:last-child{padding-bottom:0; color:var(--ink-soft)}
  .jr-diag td:last-child::before{content:"→ "; color:var(--accent); font-weight:700}
  .jr-panel .jr-inline{padding:13px 18px 14px 22px}
  .jr-cost-row{grid-template-columns:1fr; gap:6px}
  .jr-cost-row .bar{grid-column:1}
}