/* ============================================================
   22-analysis.css — the deck analysis added on 2026-10-27: the Analysis
   tab's frame (sections.js, decks.js renderAnalysisTab), "Find matching
   cards" (gaps.js), the change preview (changes.js), mana reliability
   (mana.js), your copies (copies.js), and the dashboard's next step
   (ui.js renderDashNext).
   ============================================================ */

/* the Plus mark on a feature that needs it */
.plus-mark{
  font-size:9.5px; font-weight:800; letter-spacing:.1em; color:var(--on-accent); background:var(--accent);
  padding:1px 6px; border-radius:20px; vertical-align:middle;
}

/* ---- the Analysis tab, after the search's filter panel ----
   Four type sizes on the whole tab and nothing in between: 11.5px for the
   small capitals, pills and marks, 13px for text, 14px for names and
   heads, 22px for the figures. The parts inside the sections keep their
   own layout; their sizes are brought onto these four at the end. */
.an-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:18px 20px; margin-bottom:16px; font-size:13px; container-type:inline-size;
}
.an-result-panel{padding:14px 20px;}
.an-panel .chips{gap:8px;}
.an-panel .chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  font-size:13px; background:var(--surface-2); color:var(--text);
}
.an-panel .chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.an-panel .chip[hidden]{display:none;}
.an-panel .plus-mark{font-size:11.5px; letter-spacing:.06em; padding:0 6px;}
.an-pill{
  font-size:11.5px; font-weight:600; line-height:18px; padding:0 8px; border-radius:20px; white-space:nowrap;
  border:1px solid var(--line-2); color:var(--text-dim); font-variant-numeric:tabular-nums;
}
.an-pill[hidden]{display:none;}
.an-pill.ok{color:var(--ok); border-color:rgba(63,199,138,.4); background:var(--ok-soft);}
.an-pill.warn{color:var(--warn); border-color:rgba(var(--warn-rgb),.4); background:rgba(var(--warn-rgb),.1);}
.an-pill.bad{color:var(--bad); border-color:rgba(239,95,95,.4); background:var(--bad-soft);}

/* the figures: deck, roles, curve, colors — the filter panel's groups */
.an-grid{gap:22px 28px;}
.an-tiles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;}
.an-tile{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2); padding:8px 10px; min-width:0;}
.an-tile .n{font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums;}
.an-tile.warn .n{color:var(--warn);}
.an-tile .l{color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.an-panel .of{font-family:inherit; font-size:13px; font-weight:500; color:var(--text-faint); margin-left:1px;}
.an-meta{display:flex; flex-wrap:wrap; row-gap:4px; margin-top:10px; color:var(--text-dim); line-height:1.5;}
.an-meta span:not(:last-child)::after{content:'·'; margin:0 7px; color:var(--text-faint);}
/* one grid for all rows, so the bars, counts and buttons line up */
.an-roles{display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:0 12px;}
.an-role{display:contents;}
.an-role > *{min-height:32px; display:flex; align-items:center;}
.an-role > .an-bar{min-height:0; display:block;}
.an-role-l{color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.an-bar{height:6px; border-radius:3px; background:var(--bg-2); border:1px solid var(--line); overflow:hidden;}
.an-bar i{display:block; height:100%; background:var(--ok);}
.an-role.short .an-bar i{background:var(--warn);}
.an-role-n{font-size:14px; font-weight:600; justify-content:flex-end; font-variant-numeric:tabular-nums;}
.an-role.short .an-role-n{color:var(--warn);}
.an-panel .chip.gap-find{min-height:0; justify-self:end; padding:3px 9px; gap:6px;}
.an-panel .mana-curve .lbl, .an-panel .cg-label{font-size:11.5px;}
.an-panel .color-grid{font-size:13px;}

/* the sections: one head each, its result on the right */
.an-sections{padding:14px 20px 4px;}
.an-chips{margin-bottom:10px;}
.an-sec{border-top:1px solid var(--line);}
.an-sec-head{
  display:flex; align-items:center; gap:10px; width:100%; padding:13px 0; min-height:48px;
  background:none; border:0; color:var(--text); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer;
}
.an-sec-head:hover .an-sec-title{color:var(--accent-hi);}
.an-sec-head .an-pill{margin-left:auto;}
.an-chev{
  width:8px; height:8px; flex:0 0 auto; margin:0 4px 0 2px;
  border-right:2px solid var(--text-faint); border-bottom:2px solid var(--text-faint);
  transform:rotate(-45deg); transition:transform .15s;
}
.an-sec.open .an-chev{transform:rotate(45deg);}
.an-sec-body{display:flex; flex-direction:column; gap:12px; padding:0 0 20px 24px;}
.an-sec-body[hidden]{display:none;}
.an-lead{font-size:14px; font-weight:600;}
.an-lead.ok{color:var(--ok);} .an-lead.warn{color:var(--warn);} .an-lead.bad{color:var(--bad);}
.an-sec-body .rules-list{margin:0;}
.gap-modal .gap-sub{margin:0; font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.gap-cut{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--text-dim);}
.gap-cut select{flex:1 1 220px; min-width:0;}
.gap-hint{font-size:12.5px; color:var(--text-faint); line-height:1.45;}
.gap-list{display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1 1 auto; min-height:140px;}
.gap-modal > *:not(.gap-list){flex-shrink:0;}
.gap-none{font-size:13.5px; color:var(--text-dim);}
.gap-row .up-side .pr{font-size:12.5px; text-align:right;}

/* ---- the change preview ---- */
.chg-modal{gap:12px;}
.chg-io{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.chg-col{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2); padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-width:0;}
.chg-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-label);}
.chg-col.in .chg-label{color:var(--ok);}
.chg-col.out .chg-label{color:var(--bad);}
.chg-card{display:flex; flex-direction:column; gap:1px; min-width:0;}
.chg-name{font-weight:600; font-size:14px; overflow-wrap:anywhere;}
.chg-note{font-size:12.5px; color:var(--text-dim);}
.chg-note.warn{color:var(--warn);}
.chg-none{font-size:13px; color:var(--text-faint);}
.chg-line{font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.chg-line strong{color:var(--text);}
.chg-line.moved strong{color:var(--accent-hi);}
.chg-line.bad strong{color:var(--bad);}
.chg-why{margin:4px 0 0; padding-left:18px; font-size:13px;}
.chg-size{font-size:12.5px; color:var(--text-faint); margin-top:2px;}
.chg-roles{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px;}
.chg-role{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; padding:7px 10px; border-radius:var(--r1); background:var(--bg-2); border:1px solid var(--line); font-size:13px;}
.chg-role.moved{border-color:var(--accent);}
.chg-rl{color:var(--text-dim);}
.chg-rv{font-weight:600; font-variant-numeric:tabular-nums; margin-left:auto;}
.chg-rt{flex-basis:100%; font-size:11.5px; color:var(--text-faint);}
.chg-rt.short{color:var(--warn);}

/* ---- mana reliability ---- */
.mana-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;}
.mana-keep{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-dim);}
.mana-keep select{width:auto;}
.mana-info{width:20px; height:20px; flex:0 0 20px; padding:0; border:1px solid var(--line-3); border-radius:50%; background:transparent;
  color:var(--text-dim); font:italic 700 12px/1 Georgia, serif; cursor:pointer;}
.mana-info:hover, .mana-info[aria-expanded="true"]{border-color:var(--accent); color:var(--accent-hi);}
.mana-why{max-width:640px; margin-top:-4px;}
.mana-why[hidden]{display:none;}
.mana-order button{padding:7px 12px; font-size:12.5px;}
.mana-body{display:flex; flex-direction:column; gap:16px;}
.mana-sec{display:flex; flex-direction:column; gap:10px;}
.mana-big{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.mana-big .n{font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:600; line-height:1; color:var(--accent-hi); font-variant-numeric:tabular-nums;}
.mana-big .l{font-size:13.5px; color:var(--text-dim);}
.mana-drops{grid-template-columns:repeat(6, minmax(0, 1fr)); margin-top:0;}
.mana-sim .mana-drops{grid-template-columns:repeat(5, minmax(0, 1fr));}
.mana-drops .pt-drop{min-width:0;}
.pt-drop.on{border-color:var(--accent);}
.mana-note{font-size:12.5px; color:var(--text-faint); line-height:1.5;}
.mana-note.warn{color:var(--warn);}
.mana-turn{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-dim);}
.mana-turn select{width:auto;}
.mana-sim{display:flex; flex-direction:column; gap:10px;}
.mana-lock{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r2);
  background:linear-gradient(180deg, var(--accent-soft), transparent 90%), var(--bg-2); border:1px solid var(--line);}
.mana-lock p{margin:0; font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.mana-assume summary{cursor:pointer; font-size:13px; color:var(--text-dim);}
.mana-assume ul{margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--text-dim); line-height:1.5; display:flex; flex-direction:column; gap:4px;}
.an-sec .cp-sub .plus-mark{margin-left:4px;}

/* ---- your copies ---- */
.copies-switch{display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer;}
.copies-switch input{width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto;}
.copies-ok{font-size:13.5px; color:var(--ok);}
.copies-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;}
.copies-name{font-weight:600; font-size:14.5px;}
.copies-count{font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.copies-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.dk-copies{margin:0 0 6px;}
.up-all{align-self:flex-start;}

/* ---- the dashboard's next step ---- */
.dash-next{
  border:1px solid var(--line-3); border-radius:var(--r3); padding:18px 20px; margin-bottom:22px;
  background:linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--surface);
  display:flex; flex-direction:column; gap:12px; position:relative;
}
.dash-next[hidden]{display:none;}
.dash-next .dn-x{position:absolute; right:6px; top:6px; width:32px; height:32px; border:0; border-radius:50%; background:transparent;
  color:var(--text-dim); font-size:13px; line-height:1; cursor:pointer;}
.dash-next .dn-x:hover{background:rgba(127,127,127,.18); color:var(--text);}
.dash-next:not(.is-deck){padding-right:44px;}
.dash-next.is-deck .dn-deck{padding-right:30px;}
.dn-kicker{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-hi);}
.dn-title{font-size:22px; margin:0;}
.dn-text{margin:0; font-size:14px; color:var(--text-dim); line-height:1.5;}
.dash-next.is-deck{padding:12px 14px;}
.dn-deck{display:flex; align-items:center; gap:14px; min-width:0;}
.dn-art{width:76px; height:56px; flex:0 0 76px; border-radius:var(--r2); background:var(--bg-2) center/cover no-repeat; overflow:hidden; position:relative;}
.dn-art img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;}
.dn-body{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto;}
.dn-name{font-size:17px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dn-sub{font-size:13px; color:var(--text-dim);}
.dn-acts{display:flex; flex-wrap:wrap; gap:8px;}
.dn-deck .dn-acts{flex:0 0 auto; justify-content:flex-end;}
.dn-deck .dn-acts .btn{min-height:32px; padding:6px 14px; font-size:13.5px;}
@media (pointer:coarse){ .dn-deck .dn-acts .btn{min-height:36px;} }
.hero-start-note{display:none; margin:12px 0 0; font-size:13px; opacity:.85; max-width:560px; line-height:1.5;}
body.newcomer .hero-start-note{display:block;}

@media(max-width:960px){
  .dash-next{padding:16px 14px;}
  .dn-acts .btn{flex:1 1 auto; justify-content:center;}
  /* the buttons take their own line under art and name */
  .dn-deck{flex-wrap:wrap; gap:10px 12px;}
  .dn-deck .dn-body{flex:1 1 0;}
  .dn-art{width:64px; height:47px; flex-basis:64px;}
  .dn-deck .dn-acts{flex:1 1 100%; flex-wrap:nowrap;}
  .dn-deck .dn-acts .btn{min-width:0; padding:7px 10px; font-size:13px; white-space:nowrap;}
  /* the three ways in under the precon: icon over label, so the labels keep one line */
  .hero-start .btn:not(.primary){flex:1 1 0; flex-direction:column; gap:5px; padding:10px 6px; font-size:12.5px; line-height:1.25; text-align:center; white-space:normal;}
  /* French, Spanish and Italian labels are longer: let the precon button break evenly over two lines */
  .hero-start .btn{text-wrap:balance;}
  .hero-start .btn.primary{line-height:1.25; text-align:center; white-space:normal;}
  .chg-io{grid-template-columns:1fr;}
  .mana-drops{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .mana-sim .mana-drops{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:5px;}
  .mana-sim .pt-drop{padding:8px 4px; text-align:center;}
  .mana-sim .pt-drop .n{font-size:17px;}
  .mana-sim .pt-drop .l{white-space:nowrap; font-size:11px;}
  .mana-order{flex:1 1 100%;}
  .mana-order button{flex:1; white-space:normal;}
  .copies-acts .btn{flex:1 1 auto;}
}

/* The sections' parts on the tab's four sizes (see the top of the tab's rules). */
.an-sec-body :is(.mana-note, .mana-keep, .mana-turn, .mana-big .l, .mana-lock p, .mana-assume summary, .mana-assume ul,
  .seg button, .pt-drop .l, .cp-does, .cp-plus, .cp-foot, .col-note, .status-line, .copies-switch, .copies-count, .copies-ok,
  .sub, .up-none, .up-status, .up-note, .up-main .why, .up-main .cut, .up-foot, .rules-list li, .btn){font-size:13px;}
.an-sec-body :is(.cp-card, .copies-name, .up-main .nm, .up-summary, .up-side .pr){font-size:14px;}
.an-sec-body :is(.cp-sub, .cp-tag, .up-from, .up-cat, .up-side .pr.owned, .rule-mark, .mana-info){font-size:11.5px;}
.an-sec-body :is(.mana-big .n, .pt-drop .n){font-size:22px;}
@media(max-width:960px){
  .an-panel{padding:14px;}
  .an-sections{padding:12px 14px 2px;}
  .an-roles{gap:0 8px;}
  .an-tile{padding:8px;}
  .an-sec-body{padding-left:0;}
  .an-sec-body :is(.mana-sim .pt-drop .n){font-size:22px;}
  .an-sec-body :is(.mana-sim .pt-drop .l){font-size:11.5px;}
}
@container (max-width:420px){
  .an-tiles{grid-template-columns:repeat(2, minmax(0, 1fr));}
}