/* The Upgrade screen (linked after theme.css and simple.css; overrides the older upgrade rules there).
   Left: the scroll list (240px). Right: the scroll's one-line header, one view toggle, an example, the matrix or the
   one-item ladder, and the item-specific rates as a fold-out. Only theme tokens; nothing under 12px. */

/* ---- layout ---------------------------------------------------------------------------------------------------- */
.upgrade-page .upgrade-workbench.up-v3{grid-template-columns:240px minmax(0,1fr);gap:24px}
.up-v3 .up-side{position:sticky;top:0;padding-right:12px;border-right:1px solid var(--line);min-width:0}
.up-v3 .up-side>input{width:100%;height:32px;font-size:var(--fs-2)}

/* class chips: one row, never wrapping; scrolls sideways if a window is narrower than the column */
.up-v3 .class-chips{display:flex;flex-wrap:nowrap;gap:4px;padding:8px 0;overflow-x:auto;scrollbar-width:none}
.up-v3 .class-chips::-webkit-scrollbar{display:none}
.up-v3 .class-chips button{flex:0 0 auto;height:24px;padding:0 7px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--fg-2);font-size:var(--fs-1);line-height:22px;cursor:pointer;white-space:nowrap}
.up-v3 .class-chips button:hover{color:var(--fg);background:var(--hover)}
.up-v3 .class-chips button[aria-pressed=true]{border-color:var(--accent);color:var(--fg);background:var(--hover)}

/* the scroll list: grouped, single-line 40px rows */
.up-v3 .paper-list{max-height:calc(100vh - 240px);overflow:auto;padding-right:2px}
.up-v3 .paper-group{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:12px 8px 4px;border-bottom:0;font-size:var(--fs-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.up-v3 .paper-group .up-count{font-weight:400;letter-spacing:0}
.up-v3 .paper-card{display:flex;align-items:center;gap:8px;height:40px;min-height:40px;padding:0 8px 0 5px;margin:0;border:0;border-left:3px solid transparent;border-radius:var(--r);background:transparent;color:var(--fg);width:100%;text-align:left;cursor:pointer}
.up-v3 .paper-card:hover{background:var(--hover)}
.up-v3 .paper-card.selected{background:var(--surface-2);border-left-color:var(--accent)}
.up-v3 .paper-card>.icon{--icon:var(--icon-sm)}
.up-v3 .paper-card .up-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2)}
.up-v3 .paper-card .up-steps{flex:0 0 auto;margin:0;font-size:var(--fs-1);color:var(--fg-2);font-variant-numeric:tabular-nums}

/* ---- right side --------------------------------------------------------------------------------------------------- */
.up-v3 .upgrade-stage{min-width:0}
.up-v3 .up-body>*+*{margin-top:12px}
.up-v3 .paper-heading{display:flex;align-items:center;gap:12px;margin:0}
.up-v3 .paper-heading h2{margin:0;font-size:var(--fs-5);line-height:1.25;font-weight:600}
.up-v3 .paper-heading p{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0 0;font-size:var(--fs-2);color:var(--fg-2)}
.up-v3 .paper-heading .up-classes{color:var(--accent)}

/* one view toggle: two radio-like buttons; the second carries the item picker */
.up-v3 .up-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.up-v3 .up-item{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.up-v3 .up-item select{height:28px;max-width:220px;font-size:var(--fs-2)}
.up-v3 .up-opt{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0;border:0;background:transparent;color:var(--fg-2);font-size:var(--fs-3);cursor:pointer}
.up-v3 .up-opt:hover,.up-v3 .up-opt.on{color:var(--fg)}
.up-v3 .up-dot{width:14px;height:14px;border:1px solid var(--line-strong);border-radius:50%;box-sizing:border-box;flex:0 0 14px}
.up-v3 .up-opt.on .up-dot{border:4px solid var(--accent)}

/* the example line: [icon] Dagger(+4) → [icon] Dagger(+5) %70 */
.up-v3 .up-example{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:var(--fs-3)}
.up-v3 .up-example>.dim:first-child{font-size:var(--fs-1);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)}
.up-v3 .up-example .up-arrow{color:var(--fg-3)}
.up-v3 .up-example b{font-size:var(--fs-4);color:var(--accent)}

/* ---- the class × step matrix -------------------------------------------------------------------------------------- */
.up-v3 .panel .ph{padding:8px 16px;min-height:44px}
.up-v3 .panel .ph h2{font-size:var(--fs-4)}
.up-v3 .panel .ph .toolbar{margin:0;gap:8px}
.up-v3 .panel .pb{padding:0 16px 16px}
.up-v3 .matrix-scroll{margin-top:12px}
.up-v3 .upgrade-grid{border-collapse:collapse;width:auto;min-width:100%;font-size:var(--fs-2)}
.up-v3 .upgrade-grid th,.up-v3 .upgrade-grid td{min-width:88px;padding:6px 8px;border:1px solid var(--line);vertical-align:top}
.up-v3 .upgrade-grid thead th{font-size:var(--fs-1);font-weight:600;color:var(--fg-2);white-space:nowrap;vertical-align:bottom}
.up-v3 .upgrade-grid tbody th{min-width:72px;font-size:var(--fs-2);color:var(--fg);vertical-align:middle}
.up-v3 .upgrade-grid td.none{background:var(--bg)}
.up-v3 .upgrade-grid td.transition{background:var(--bg);vertical-align:middle}
.up-v3 .rate-cell{padding:0}
.up-v3 .rate-cell>input{float:right;margin:4px 0 0 4px}
.up-v3 .rate-value{display:block;width:100%;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:var(--fg);text-align:left;line-height:1.35;cursor:pointer}
.up-v3 .rate-value b{display:block;font-size:var(--fs-4);font-weight:600;font-variant-numeric:tabular-nums}
.up-v3 .rate-value small{display:block;font-size:var(--fs-1);color:var(--fg-2);white-space:nowrap}
.up-v3 .rate-value:hover:not(:disabled){background:var(--hover)}
.up-v3 .rate-value:disabled{color:var(--fg-3);cursor:default}
.up-v3 .rate-helper{display:block;width:100%;padding:1px 4px;border:0;border-radius:4px;background:transparent;color:var(--fg-2);font-size:var(--fs-1);text-align:left;white-space:nowrap;cursor:pointer}
.up-v3 .rate-helper:hover{background:var(--hover);color:var(--fg)}
.up-v3 .rate-cell.changed{background:var(--changed);box-shadow:inset 2px 0 var(--warn);border-left:0;padding-left:0}
.up-v3 .class-transition{display:block;width:100%;padding:4px;border:0;border-radius:4px;background:transparent;color:var(--accent);font-size:var(--fs-2);text-align:left;white-space:nowrap;cursor:pointer;max-width:none}
.up-v3 .class-transition:hover{background:var(--hover)}
.up-v3 .override-mark{display:block;font-size:var(--fs-1);color:var(--accent)}
.up-v3 .up-legend{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:var(--fs-1);color:var(--fg-2)}

/* ---- the one-item ladder and the item-specific fold-out ----------------------------------------------------------- */
.up-v3 .ladder-panel+.ladder-panel{margin-top:12px}
.up-v3 .ladder-panel .help{font-size:var(--fs-1);color:var(--fg-2);margin:2px 0 0}
.up-v3 .up-stepcell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.up-v3 .ladder-rate{padding:2px 6px;font-size:var(--fs-3);font-variant-numeric:tabular-nums}
.up-v3 .ladder-rate+.override-mark{display:inline;margin-left:4px}
.up-v3 .up-special{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.up-v3 .up-special.open{padding-bottom:12px}
.up-v3 .up-special>.panel,.up-v3 .up-special>.emptybox,.up-v3 .up-special>p,.up-v3 .up-special>.up-families{margin:8px 12px 0}
.up-v3 .up-fold{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:40px;padding:0 16px;border:0;background:transparent;color:var(--fg);font-size:var(--fs-3);font-weight:600;text-align:left;cursor:pointer}
.up-v3 .up-fold:hover{background:var(--hover)}
.up-v3 .up-caret{color:var(--fg-2);font-weight:400}
.up-v3 .up-families{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-1)}
.up-v3 .up-chip{height:24px;padding:0 8px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--fg-2);font-size:var(--fs-1);cursor:pointer}
.up-v3 .up-chip.on,.up-v3 .up-chip:hover{border-color:var(--accent);color:var(--fg)}

@media (max-width:750px){
  .upgrade-page .upgrade-workbench.up-v3{grid-template-columns:1fr}
  .up-v3 .up-side{position:static;border-right:0;padding-right:0}
  .up-v3 .paper-list{max-height:240px}
}