/* ============================================================
   04-dashboard.css
   The dashboard: hero (and the Plus banner on its artwork, 11-plus.css), deck rail, quick access and the side column.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
/* ============================================================
   DASHBOARD
   ============================================================ */
.dash{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start;}
.dash-main{min-width:0; display:flex; flex-direction:column; gap:20px;}

.hero, .plus-promo{
  position:relative; border-radius:var(--r3);
  /* an inset box-shadow instead of a border: a real border plus overflow:hidden
     leaves a hairline anti-aliasing gap at the rounded corners where the
     hero photo's bright edge pixels show through as a light rim */
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden; padding:38px 40px 34px; min-height:230px;
  /* 78% 10% is the face in the uncropped artwork: it stays in frame from 1:1 up to 5:1 boxes */
  background:#0d1522 url('../assets/hero-forge.jpg') 78% 10% / cover no-repeat;
  /* AVIF is a fifth of the JPEG at the same look; the line above stays for
     browsers without image-set type() support. */
  background-image:image-set(url('../assets/hero-forge.avif') type('image/avif'), url('../assets/hero-forge.jpg') type('image/jpeg'));
}
@media(max-width:960px){
  .hero, .plus-promo{
    background-image:url('../assets/hero-forge-800.jpg');
    background-image:image-set(url('../assets/hero-forge-800.avif') type('image/avif'), url('../assets/hero-forge-800.jpg') type('image/jpeg'));
  }
}
/* The text sits on the dark left half of the artwork; the gradient guarantees
   contrast regardless of how the image is cropped at this width. */
.hero::after, .plus-promo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,11,18,.94) 0%,rgba(8,11,18,.72) 38%,
                                   rgba(8,11,18,.30) 62%,rgba(8,11,18,.15) 100%);
}
.hero > *, .plus-promo > *{position:relative; z-index:1;}
.hero .greet{font-size:14.5px; color:var(--text-dim); margin-bottom:8px;}
.hero h1{
  font-family:'Cinzel',Georgia,serif; font-size:clamp(30px,4.4vw,50px); font-weight:700;
  letter-spacing:.055em; text-transform:uppercase; line-height:1;
  color:var(--accent-hi); margin-bottom:12px;
  text-shadow:0 3px 22px rgba(var(--accent-rgb),.28);
}
.hero .tagline{font-size:15px; color:var(--text-dim); margin-bottom:24px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}

.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden;
}
.panel-head{
  display:flex; align-items:center; gap:11px; padding:15px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.panel-head .ico{width:19px;height:19px;color:var(--accent);flex:0 0 19px;}
.panel-head .ico svg{width:100%;height:100%;display:block;}
.panel-head h2, .panel-head h3{
  font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; flex:1;
}
.panel-head .more{
  font-size:13px; color:var(--text-dim); background:none; border:none;
  display:flex; align-items:center; gap:6px;
}
.panel-head .more:hover{color:var(--accent-hi);}
.panel-body{padding:18px 20px;}

/* deck rail cards on the dashboard */
.dash-decks{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px;}
.mini-deck{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r2);
  overflow:hidden; display:flex; flex-direction:column; text-align:left; color:var(--text);
  position:relative; cursor:pointer; font-family:inherit;
  transition:border-color .16s, transform .13s, box-shadow .16s;
}
.mini-deck:hover{border-color:var(--line-3); transform:translateY(-3px); box-shadow:var(--shadow);}
.mini-deck .art{height:112px; background:var(--bg-2); position:relative; overflow:hidden;}
.mini-deck .art img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;}
.mini-deck .art .fade{position:absolute;inset:0;background:linear-gradient(0deg,var(--surface-2),transparent 58%);}
.mini-deck .star{position:absolute; top:8px; right:9px; color:var(--accent-hi); font-size:14px; z-index:2;}
.mini-deck .mbody{padding:11px 13px 13px; display:flex; flex-direction:column; gap:8px;}
.mini-deck .mname{font-size:13.5px; font-weight:600; line-height:1.3;}
.mini-deck .mpips{display:flex; gap:3px;}
.mini-deck .mpips img{width:16px;height:16px;}
.prog-row{display:flex; align-items:center; gap:9px;}
.prog{flex:1; height:4px; background:var(--surface-3); border-radius:3px; overflow:hidden;}
.prog span{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-hi));}
.prog.full span{background:linear-gradient(90deg,var(--ok),#7ae0b4);}
.prog-num{font-size:11.5px; color:var(--text-faint); font-variant-numeric:tabular-nums; white-space:nowrap;}
.mini-tag{
  align-self:flex-start; font-size:10.5px; padding:2px 9px; border-radius:20px;
  background:var(--surface-3); border:1px solid var(--line-2); color:var(--text-dim);
}

/* quick access column */
.quick{display:flex; flex-direction:column; gap:9px;}
.quick-btn{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:13px 15px; border-radius:var(--r2); font-size:13.5px; font-family:inherit;
  transition:border-color .15s, background .15s;
}
.quick-btn:hover{border-color:var(--line-3); background:var(--surface-3);}
.quick-btn .ico{width:18px;height:18px;color:var(--accent);flex:0 0 18px;}
.quick-btn .ico svg{width:100%;height:100%;display:block;}


/* discovery strip */
.discover{
  border:1px solid var(--line); border-radius:var(--r3); padding:24px 26px; position:relative; overflow:hidden;
  background:
    radial-gradient(520px 260px at 88% 50%, rgba(217,100,40,.22), transparent 64%),
    linear-gradient(110deg,#141d2d,#1b1410 90%);
}
.discover h3{font-family:'Barlow Condensed',sans-serif; font-size:21px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-hi); margin-bottom:7px;}
.discover p{font-size:14px; color:var(--text-dim); max-width:540px; margin-bottom:18px;}

/* ---------- active deck side panel ---------- */
.side{position:sticky; top:22px; display:flex; flex-direction:column; gap:18px;}
.active-card{
  border:1px solid rgba(var(--accent-rgb),.30); border-radius:var(--r2); overflow:hidden;
  background:var(--surface-2);
}
.active-card .acimg{width:100%; display:block;}
.active-body{padding:14px 15px; display:flex; flex-direction:column; gap:11px;}
.active-body .acname{font-size:15.5px; font-weight:600;}
.active-body .actype{font-size:12px; color:var(--text-faint); margin-top:-7px;}
.kv{display:flex; flex-direction:column; gap:4px;}
.kv .k{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-label);
}
.kv .v{font-size:13px; color:var(--text-dim);}
.cmd-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:2px 10px;
  border-radius:20px; background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.3); color:var(--accent-hi);
}
.count-banner{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r1);
  background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.3); color:var(--accent-hi);
  font-weight:600; font-size:14px; font-variant-numeric:tabular-nums;
}
.count-banner.warn{background:var(--bad-soft); border-color:rgba(239,95,95,.34); color:var(--bad);}
.count-banner .ico{width:16px;height:16px;flex:0 0 16px;}

.stat-rows{display:flex; flex-direction:column;}
.stat-rows .row{
  display:flex; align-items:center; gap:11px; padding:9px 0; font-size:13.5px;
  border-bottom:1px solid var(--line);
}
.stat-rows .row:last-child{border-bottom:none;}
.stat-rows .row .ico{width:17px;height:17px;flex:0 0 17px;color:var(--accent); opacity:.9;}
.stat-rows .row .ico svg{width:100%;height:100%;display:block;}
.stat-rows .row .lab{flex:1; color:var(--text-dim);}
.stat-rows .row .val{font-weight:600; font-variant-numeric:tabular-nums;}

.verdicts{display:flex; flex-direction:column; gap:8px;}
.verdict{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--text-dim);}
.verdict .mark{
  width:16px;height:16px;flex:0 0 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9.5px; font-weight:700; margin-top:2px;
}
.verdict.good .mark{background:var(--ok-soft); color:var(--ok);}
.verdict.warn .mark{background:var(--bad-soft); color:var(--bad);}

/* dashboard mana curve */
.curve-dash{display:flex; align-items:flex-end; gap:5px; height:92px; padding-top:16px;}
.curve-dash .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end;}
.curve-dash .cnum{font-size:10.5px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.curve-dash .cbar{width:100%; background:linear-gradient(180deg,#5da2e8,#2f6db5); border-radius:3px 3px 0 0; min-height:3px;}
.curve-dash .clab{font-size:10.5px; color:var(--text-faint);}

/* top bar with global search */
.topbar{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.topsearch{
  flex:1; max-width:430px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r2);
  padding:9px 15px;
}
.topsearch:focus-within{border-color:var(--accent);}
.topsearch .ico{width:16px;height:16px;color:var(--text-faint);flex:0 0 16px;}
.topsearch input{
  flex:1; background:none; border:none; color:var(--text); font-family:inherit; font-size:14px; outline:none;
}
.topsearch input::placeholder{color:var(--text-faint);}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:10px;}
.round-btn{
  width:40px;height:40px;border-radius:50%; border:1px solid var(--line-2); background:var(--surface);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; position:relative;
}
.round-btn:hover{color:var(--accent-hi); border-color:var(--line-3);}
.round-btn svg{width:18px;height:18px;}
.round-btn .dot{
  position:absolute; top:8px; right:9px; width:7px;height:7px;border-radius:50%;
  background:var(--bad); border:2px solid var(--surface);
}

@media(max-width:1100px){
  .dash{grid-template-columns:1fr;}
  .side{position:static;}
}