/* ============================================================
   23-command.css
   The command center (command.js): the top of the dashboard for Plus
   subscribers, body.cmd-center (plus.js). The stage with the deck worked
   on last, and the hints.
   ============================================================ */
/* One scale for the whole center: 11 px labels (caps), 12.5 small (chips, meta,
   the small button), 13.5 text (as the buttons), 15 a hint's title, and the deck's
   name. Text starts 21 px in on a wide screen and 16 px on a phone — where the
   panels below start theirs (1 px border + padding). */
.cmd-center{display:flex; flex-direction:column; gap:20px;}
.cmd-center[hidden]{display:none;}
/* what it replaces; Quick access stays, the ways in that the stage has no room for */
body.cmd-center .hero, body.cmd-center #dashNext, body.cmd-center .discover{display:none;}
/* nothing here yet: the hero's ways in, as for everyone else (renderCommandCenter stays hidden) */
body.cmd-center.newcomer .hero{display:block;}

.cmdc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.cmdc-greet{font-size:13.5px; color:var(--text-dim);}
.cmdc-meta{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-dim);}
.cmdc-meta .pw-badge{font-size:10.5px; padding:1px 8px;}

/* ---------- the stage ---------- */
.cmdc-stage{
  position:relative; display:flex; align-items:stretch; min-height:230px; overflow:hidden;
  border-radius:var(--r3); box-shadow:inset 0 0 0 1px var(--line); background:var(--surface);
}
.cmdc-art{position:absolute; inset:0;}
.cmdc-art img{width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block;}
.cmdc-art img.whole{object-position:right center !important; padding:14px 18px;}
/* the text sits on the dark left of the art, as on the hero */
.cmdc-stage.has-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,11,18,.95) 0%,rgba(8,11,18,.8) 42%,rgba(8,11,18,.3) 74%,rgba(8,11,18,.12) 100%);
}
.cmdc-body{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; padding:24px 21px 22px; max-width:660px;}
.cmdc-kicker{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-hi);}
.cmdc-name{
  margin:0; font-family:'Cinzel',Georgia,serif; font-size:clamp(22px,3vw,32px); font-weight:700;
  letter-spacing:.03em; line-height:1.15; color:var(--accent-hi); text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.cmdc-text{margin:0; font-size:13.5px; line-height:1.5; color:var(--text-dim); max-width:520px;}
.cmdc-chips{display:flex; flex-wrap:wrap; gap:6px;}
.cmdc-chip{font-size:12.5px; padding:4px 10px; border-radius:999px; background:rgba(8,11,18,.55); border:1px solid var(--line-2); color:var(--text);}
.cmdc-chip.ok{color:var(--ok); border-color:rgba(63,199,138,.35);}
.cmdc-chip.warn{color:var(--warn); border-color:rgba(var(--warn-rgb),.4);}
.cmdc-chip.plus{color:var(--accent-hi); border-color:var(--line-3); background:rgba(var(--accent-rgb),.14);}
.cmdc-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.cmdc-acts .btn{border-radius:var(--r1);}
.cmdc-acts .btn .ico{width:15px; height:15px; display:inline-flex; margin-right:6px;}
.cmdc-stage .btn:not(.primary){
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.cmdc-stage .btn:not(.primary):hover{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.5);}
.cmdc-switch{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px;}
.cmdc-switch-l{font-size:12.5px; color:var(--text-dim); margin-right:2px; white-space:nowrap; flex:0 0 auto;}
.cmdc-deckchip{
  font:inherit; font-size:12.5px; padding:4px 10px; border-radius:999px; cursor:pointer; max-width:190px;
  border:1px solid var(--line-2); background:rgba(8,11,18,.55); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmdc-deckchip:hover{border-color:var(--line-3); color:var(--accent-hi);}
.cmdc-deckchip.more{color:var(--text-dim);}

/* ---------- the hints ---------- */
.cmdc-hints{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px;}
.cmdc-hints[hidden]{display:none;}
.cmdc-hint{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
}
.cmdc-hint.bad{border-color:rgba(239,95,95,.38);}
.cmdc-hint.ok{border-color:rgba(63,199,138,.3);}
.cmdc-hint-k{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-label); padding-right:24px;}
.cmdc-hint.bad .cmdc-hint-k{color:var(--bad);}
.cmdc-hint-t{font-size:15px; font-weight:600; line-height:1.3;}
.cmdc-hint-x{
  font-size:13.5px; line-height:1.45; color:var(--text-dim); margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cmdc-hint .btn{margin-top:auto;}
.cmdc-hint-close{
  position:absolute; right:8px; top:8px; width:26px; height:26px; border:0; border-radius:50%;
  background:transparent; color:var(--text-faint); cursor:pointer; font-size:12.5px;
}
.cmdc-hint-close:hover{background:rgba(127,127,127,.18); color:var(--text);}

/* ---------- phone ---------- */
@media(max-width:960px){
  .cmdc-head{display:none;}
  .cmdc-stage{min-height:0; align-items:flex-end;}
  .cmdc-stage.has-art{min-height:250px;}
  .cmdc-stage.has-art::after{background:linear-gradient(0deg,rgba(8,11,18,.96) 0%,rgba(8,11,18,.78) 52%,rgba(8,11,18,.22) 100%);}
  .cmdc-art img{object-position:center 20%;}
  .cmdc-body{padding:18px 16px 16px; max-width:none; width:100%;}
  .cmdc-stage.has-art .cmdc-body{padding-top:80px;}
  .cmdc-name{font-size:22px;}
  .cmdc-acts .btn{flex:1 1 calc(50% - 4px); justify-content:center; padding-inline:10px; white-space:nowrap;}
  .cmdc-switch{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:2px -16px 0; padding:0 16px;}
  .cmdc-switch::-webkit-scrollbar{display:none;}
  .cmdc-deckchip{flex:0 0 auto;}
  /* the artist's credit up in the art, clear of the deck chips */
  .cmdc-stage > .art-credit{top:8px; bottom:auto; right:8px;}
  /* hints: a row to swipe through */
  /* scroll-padding: a tile snaps to the page's edge, not the screen's */
  .cmdc-hints{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:15px; scrollbar-width:none; margin:0 -15px; padding:0 15px 2px;}
  .cmdc-hints::-webkit-scrollbar{display:none;}
  .cmdc-hint{flex:0 0 78%; scroll-snap-align:start; padding:14px 15px;}
  .cmdc-hint:only-child{flex-basis:100%;}
}