/* Production layout preserves the approved study while keeping tables semantic,
 * controls named and every acquisition independent of physical placement. */
:root{color-scheme:dark;background:#12161f;font-family:Satoshi,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:#12161f;color:#eef4fd}button,input,select,textarea{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #9addff;outline-offset:3px}input,select,textarea{max-width:100%;background:var(--v-raised);color:#ecf2fc;border:1px solid #363f55;border-radius:8px;padding:10px 12px;min-height:42px}textarea{resize:vertical;min-height:100px}label{display:grid;gap:7px;font-size:13px;color:#b4c3d9}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:clamp(28px,3.6vw,47px);line-height:1.06;letter-spacing:-.045em;margin:10px 0 14px}h2{font-size:22px;letter-spacing:-.02em}h3{font-size:16px}p{line-height:1.5}small,.cm-muted{color:#a5b7ce;font-size:12px}/* DEEP FIELD LIVES HERE. This sheet loads after crankmagic-design.css and redefines the
   same tokens, so this block -- not the one in the design sheet -- is the palette the app
   actually renders. Both now carry the same values; this is the one to edit. */
#matrix-v2{display:block;min-height:100vh;border:0;border-radius:0;overflow:visible;
  background:#12161f;color:#eef4fd;color-scheme:dark;
  --v-bg:#12161f;--v-panel:#1a2030;--v-raised:#232c40;--v-field:#2d3543;--v-field-line:#5a677c;
  --v-line:#2e3850;--v-line-strong:#4b5975;
  --v-ink:#eef4fd;--v-muted:#93a6c2;
  --v-accent:#72baff;--v-on:#06131f;--v-soft:#0e3358;
  --v-decision:#e0b273;--v-decision-bg:#2a2519;--v-decision-line:#6d5c3d;
  --v-decision-ink:#f6e3c6;--v-decision-field:#332c1d;
  --v-required:#ef6b60}#matrix-v2 .v-top{padding:17px 26px;border-bottom:1px solid var(--v-line);background:var(--v-panel);position:relative;z-index:5;gap:20px;display:flex;justify-content:space-between;align-items:center;overflow:visible}#matrix-v2 .v-brand-subline{max-width:430px}#matrix-v2 .v-brand-block{min-width:0;flex:1}#matrix-v2 .v-brand-copy{min-width:0}#matrix-v2 .v-brand{font-family:CrankOxanium,Satoshi,sans-serif}#matrix-v2 .v-panel{background:var(--v-panel);border:1px solid var(--v-line);border-radius:13px;padding:24px;min-width:0}#matrix-v2 .v-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;background:#202638;color:#eef6ff;border:1px solid #39465f;border-radius:8px;font-weight:600;text-decoration:none}#matrix-v2 .v-button.primary{background:#72baff;color:#081320;border-color:#72baff}#matrix-v2 .v-button:hover{filter:brightness(1.12)}.cm-layout{display:grid;grid-template-columns:168px minmax(0,1fr);min-height:calc(100vh - 105px)}.cm-sidebar{border-right:1px solid var(--v-line);background:#171b27;padding:24px 12px;display:flex;flex-direction:column;gap:45px}.cm-sidebar nav{position:sticky;top:18px;display:grid;gap:8px;margin-bottom:auto;z-index:3}.cm-sidebar a{padding:15px 12px;text-decoration:none;border-radius:9px;font-weight:600;color:#b0c3de}.cm-sidebar a[aria-current=page]{background:#243d61;color:#f3f8ff;box-shadow:inset 3px 0 #79bdff}.cm-sidebar a:hover{background:#253048}.cm-nav-note{font-size:12px;color:#a3b8d3;padding:18px 10px;border-top:1px solid #343c50;margin-top:40px}.cm-nav-note p{margin:6px 0}.cm-text-button{background:none;border:0;padding:4px 0;min-height:32px;display:inline-flex;align-items:center;color:#8cc9ff;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:4px}#cm-main{padding:34px clamp(16px,1.5vw,28px) 65px;min-width:0;outline:none}.cm-skip{position:fixed;left:10px;top:-60px;z-index:30;background:#78baff;color:#0c1120;padding:10px}.cm-skip:focus{top:10px}.cm-page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:26px}.cm-page-head p{color:#a9bdd7;max-width:680px}.cm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.cm-stats{display:flex;flex-wrap:wrap;gap:25px;padding:22px 0;border-top:1px solid var(--v-line);border-bottom:1px solid var(--v-line);margin:24px 0}.cm-stats strong{font-size:27px;font-weight:500;margin-right:6px}.cm-stats span{font-size:13px;color:#b0c3dc}.cm-deck-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:20px}.cm-deck-tile{position:relative;isolation:isolate;overflow:hidden;background:#202737;border:1px solid #39475d;border-radius:15px;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end}.cm-deck-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.7);transform-origin:50% 22%;z-index:-2;opacity:.78}.cm-deck-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#101725 34%,#101725ae 56%,#1017250a 88%);z-index:-1}.cm-deck-tile>button{appearance:none;background:none;border:0;text-align:left;color:inherit;padding:95px 22px 20px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%}.cm-deck-tile h3{font-size:28px;margin:5px 0}.cm-deck-tile p{margin:0 0 12px;color:#c3d7ed}/* Below the art's name banner: at 15px the status sat straight across the commander's printed name. */
.cm-deck-tile footer{padding:0 20px 19px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.cm-badge{display:inline-flex;padding:4px 8px;border-radius:5px;font-size:12px;background:#293a54;color:#d3eaff;white-space:nowrap}.cm-badge.warn{background:#4b371c;color:#f7dca5}.cm-badge.good{background:#234638;color:#b8e5cd}.cm-danger{color:#ffc4be!important}.cm-empty{padding:45px 24px;text-align:center;max-width:900px;margin:15px auto}.cm-empty .cm-actions{justify-content:center}.cm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}.cm-commander{display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px}.cm-commander img{width:100%;border-radius:10px;align-self:start}.cm-commander ul{padding-left:18px;line-height:1.6}.cm-commander h2{margin-top:0}.cm-mana{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}.cm-mana img{width:19px;height:19px}.cm-mana-symbol{width:21px;height:21px;border-radius:50%;background:#c7c2b7;color:#10141d;display:inline-grid;place-items:center;font-size:11px;font-weight:700}.cm-colors{display:inline-flex;gap:3px}.cm-color{width:13px;height:13px;border-radius:50%;display:inline-block;background:#ccc;box-shadow:0 0 0 1px #ffffff22}.cm-color.W{background:#fff0b4}.cm-color.U{background:#53acff}.cm-color.B{background:#696076}.cm-color.R{background:#ee735f}.cm-color.G{background:#66b889}.cm-curve{display:flex;gap:9px;align-items:flex-end;height:135px}.cm-curve>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;font-size:11px}.cm-curve i{display:block;background:linear-gradient(#8dd0ff,#3d6bac);width:100%;min-height:3px;border-radius:4px 4px 0 0}.cm-count-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 0}.cm-count-list span{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--v-line);padding:6px 0}.cm-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:20px 0}.cm-toolbar .cm-search{flex:1;min-width:180px}.cm-filter-panel{padding:18px;background:#171d2a;border:1px solid #344258;border-radius:10px;margin:12px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.cm-graph-focus{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:12px 0;padding:12px 15px;background:#1a2333;border:1px solid #38465e;border-radius:10px}.cm-graph-focus h2{margin:0;font-size:18px}.cm-graph-focus p{margin:4px 0 0;font-size:13px;color:#a9bdd7;display:flex;gap:8px;align-items:center}.cm-toolbar-split{justify-content:space-between}.cm-show-archived{margin-left:auto}.cm-tile-tools{display:inline-flex;align-items:center;gap:6px}.cm-tile-menu-btn{width:36px;height:36px;border-radius:8px;border:1px solid #3a4a64;background:#1e2a3f;color:#dfeeff;font-size:18px;line-height:1;cursor:pointer}.cm-tile-menu-btn:hover{background:#2b3d5c}.cm-tile-menu button.cm-danger{color:#ffc4be}.cm-graph-grid-tall{--cm-graph-h:clamp(560px,calc(100vh - 290px),880px);align-items:start}.cm-graph-col{display:flex;flex-direction:column;min-width:0}.cm-graph-grid-tall .cm-graph{height:var(--cm-graph-h);min-height:0}.cm-graph-hint{margin:0 0 10px}.cm-card-view{display:flex;flex-direction:column;gap:8px;height:var(--cm-graph-h);overflow:auto;scrollbar-width:thin}.cm-card-view-head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}.cm-card-view-art{width:150px;aspect-ratio:488/680;border-radius:9px;object-fit:cover;background:#1b2740;box-shadow:0 8px 24px #0008}.cm-card-view-blank{border:1px dashed #3a4a64}.cm-card-view-title h2{margin:0 0 4px;font-size:20px}.cm-card-view-title p{margin:3px 0;font-size:13px;color:#b4c3d9}.cm-card-view-cost{display:flex;align-items:center;gap:8px}.cm-card-view-foot{margin-top:auto}.cm-term-chips{display:flex;flex-wrap:wrap;gap:6px}.cm-term-chips .cm-chip{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;cursor:pointer;font:inherit;font-size:12px}.cm-term-chips .cm-chip small{font-size:10px;color:#8fb0d4}.cm-chip.is-on{background:#ffd16622;border-color:#ffd166;color:#ffe9b3}.v-button.is-on{background:#ffd166;color:#1b1b1b;border-color:#ffd166}.cm-pick-actions{padding:10px;background:#2a2410;border:1px solid #6b5a1e;border-radius:9px}.cm-graph-reach{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-left:auto}.cm-graph-reach label{display:flex;align-items:center;gap:8px;font-size:12px}.cm-graph-reach input[type=range]{width:110px;min-height:0;padding:0;background:none;border:0}.cm-graph-reach output{min-width:18px;font-weight:700;color:#e6f0ff}.cm-facet-mode{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:10px 0 0;font-size:13px}.cm-picker-count{margin:0 0 4px;font-size:12px}.cm-picker-row{grid-template-columns:minmax(0,1fr) auto auto minmax(120px,170px) auto;padding:9px 12px}.cm-picker-choose{background:none;border:0;color:inherit;text-align:left;padding:0;font:inherit;cursor:pointer;min-width:0}.cm-picker-choose strong{display:block;font-size:13px}.cm-picker-choose em{display:block;font-style:normal;font-size:11px;color:#a5b7ce}.cm-picker-cost{display:inline-flex;align-items:center;min-width:24px}.cm-picker-cost .cm-mana img{width:16px;height:16px}.cm-picker-meta{font-size:12px;color:#aec7e5;line-height:1.3}.cm-picker-row .cm-text-button{white-space:nowrap;font-size:12px}.cm-color-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 0}.cm-color-pill{position:relative;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid #3b5271;border-radius:20px;cursor:pointer;font-size:12px;color:#d8e7fa;background:#1a2537}.cm-color-pill img{width:16px;height:16px}.cm-color-pill input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}.cm-color-pill:has(input:checked){background:#2b4a70;border-color:#79bdff;color:#f3f8ff}.cm-color-pill:has(input:focus-visible){outline:2px solid #9addff;outline-offset:2px}.cm-preview-total{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0}.cm-preview-total strong{font-size:18px}.cm-plays-as{margin:12px 0;padding:12px 14px;background:#141d2c;border-radius:9px}.cm-plays-as h3{margin:0 0 6px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#bdd6f2}.cm-plays-as ul{margin:0;padding-left:18px;line-height:1.6;font-size:13px}/* The design sheet stretches every input in a dialog to full width; a checkbox is the one
   input that must not stretch, or its label text drifts to the far side of the cell. */
#matrix-v2 .v-dialog .cm-checkbox input[type=checkbox],#matrix-v2 .cm-checkbox input[type=checkbox]{width:16px;height:16px;min-height:0;flex:0 0 16px;padding:0;margin:0}.cm-columns-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}.cm-columns-grid .cm-checkbox{justify-content:flex-start;min-height:36px;white-space:nowrap;padding:4px 8px;border-radius:6px}.cm-columns-grid .cm-checkbox:hover{background:#243248}.cm-columns-grid .cm-checkbox input:disabled+span,.cm-columns-grid .cm-checkbox:has(input:disabled){opacity:.6}#matrix-v2 .cm-user-menu>.v-button{min-height:34px;padding:6px 11px;font-size:12px;gap:6px}.cm-lab-save-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:12px}.cm-graph-col{position:relative}.cm-graph-modes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}#matrix-v2 .cm-graph-modes .v-button{min-height:34px;padding:6px 12px;font-size:12px}.cm-graph-mode-hint{font-size:12px;margin-left:4px}.cm-graph-pop{position:absolute;z-index:6;width:min(330px,calc(100% - 16px));background:#172234f5;border:1px solid #4a6a95;border-radius:10px;padding:12px 14px;box-shadow:0 12px 34px #000a;font-size:13px;backdrop-filter:blur(3px)}.cm-graph-pop header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.cm-graph-pop header strong{font-size:14px;line-height:1.25}.cm-graph-pop h4{margin:10px 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8}.cm-graph-pop p{margin:4px 0}.cm-pop-close{border:0;background:#2b3549;color:#fff;border-radius:6px;width:28px;height:28px;flex-shrink:0;cursor:pointer;font-size:16px}.cm-graph-pop .cm-actions{margin-top:10px}#matrix-v2 .cm-graph-pop .cm-actions .v-button{min-height:32px;padding:5px 10px;font-size:12px}.cm-colors img.cm-pip{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px #ffffff22,0 1px 3px #0006;vertical-align:middle}.cm-color.C{background:#b9b3a8}.cm-eyebrow-warm:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#efc286;margin-right:9px;vertical-align:1px}.cm-showcase{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(190px,1fr);gap:16px;align-items:center;padding:6px 0 26px}.cm-showcase h1{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.045em;line-height:1.02;margin:0 0 6px}.cm-showcase h1 span{color:#79bdff}.cm-showcase .cm-sub{max-width:440px;color:#a9bdd7;margin:10px 0 18px;line-height:1.6}.cm-cardfan{height:246px;position:relative;isolation:isolate}.cm-cardfan:before{content:'';position:absolute;width:190px;height:160px;inset:45px 0 0;margin:auto;background:#2a3f7a;filter:blur(36px);border-radius:50%;z-index:-1;opacity:.85}.cm-fan-card{position:absolute;left:50%;top:25px;width:125px;height:175px;margin-left:-62px;border:6px solid #222633;border-radius:11px;background-size:cover;background-position:center top;background-color:#1b2740;box-shadow:0 12px 22px #00000059;overflow:hidden}.cm-fan-card span{position:absolute;inset:auto 0 0;padding:13px 7px 8px;background:linear-gradient(transparent,#0b0c12);font-size:11px;letter-spacing:1.7px;color:#f7f7fa;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cm-fan-left{transform:translate(-56px,18px) rotate(-20deg)}.cm-fan-right{transform:translate(57px,18px) rotate(20deg)}.cm-fan-center{transform:rotate(-3deg)}.cm-deck-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;min-height:230px;padding:28px 30px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;margin-bottom:22px;background:#1a2333;border:1px solid var(--v-line)}.cm-deck-hero:before{content:'';position:absolute;inset:0;z-index:-2;background:var(--hero,none) center 28%/cover no-repeat;opacity:.8}.cm-deck-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0f1521f2 0%,#0f1521cc 42%,#0f152133 100%),linear-gradient(0deg,#0f1521e8 0%,#0f152100 55%)}.cm-deck-hero h1{margin:6px 0 8px;font-size:clamp(30px,3.6vw,46px)}.cm-deck-hero p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#dbe7f7}.cm-deck-hero .cm-actions{position:relative}.cm-card-thumb{width:26px;height:36px;object-fit:cover;object-position:center top;border-radius:3px;margin-right:9px;vertical-align:middle;background:#1b2740;box-shadow:0 1px 3px #0008;flex-shrink:0;display:inline-block}.cm-card-thumb-lg{width:48px;height:67px;border-radius:5px;margin:0}.cm-table .cm-card-name{display:inline-flex;align-items:center;text-align:left}#matrix-v2 .cm-selected-commander{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}.cm-card-view-art{box-shadow:0 0 0 2px var(--ci-a,#3a4a64),0 12px 30px #0009}.cm-guide-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;font-size:13px}.cm-guide-hook{font-size:15px;line-height:1.55;color:#eef4ff}.cm-guide-keys,.cm-guide-watch{padding-left:18px;line-height:1.6;font-size:13px}.cm-guide-keys li{margin:4px 0}.cm-guide-keys .cm-card-name{font-weight:700;color:#f1f6ff;background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.cm-edge-kind{margin:14px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8}.cm-edge-kind:first-child{margin-top:0}.cm-facet-values{margin-top:10px;display:grid;gap:8px}.cm-facet-list{display:grid;gap:2px;max-height:210px;overflow:auto;padding-right:4px}.cm-facet-list .cm-checkbox{padding:4px 2px;font-size:13px;min-height:32px}.cm-facet-list .cm-checkbox span{overflow-wrap:anywhere}.cm-facet-list .cm-checkbox small{margin-left:auto;flex-shrink:0}.cm-facet-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}.cm-facet-status p{margin:0}#cm-facet-panel{margin-top:12px}#cm-facet-results{max-height:300px;margin-top:8px}.cm-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}button.cm-chip{cursor:pointer;font:inherit}button.cm-chip:hover{background:#2a456a}.cm-chip{display:inline-flex;gap:8px;border:1px solid #455a76;border-radius:20px;color:#bddeff;background:#1e3149;padding:5px 10px;font-size:12px}.cm-table-wrap{overflow:auto;max-width:100%;margin:16px 0;border-top:1px solid var(--v-line)}.cm-table{width:100%;border-collapse:collapse;table-layout:auto;font-size:13px}.cm-table th,.cm-table td{text-align:left!important;vertical-align:top;padding:13px 14px;border-bottom:1px solid var(--v-line);min-width:90px}.cm-table th{color:#b5c9e5;font-size:11px;letter-spacing:.035em;position:sticky;top:0;background:#151b28;z-index:1;white-space:nowrap}.cm-table th button{padding:0;border:0;background:none;color:inherit;text-align:left;display:flex;gap:6px;font:inherit;min-height:24px}.cm-table td:first-child,.cm-table th:first-child{padding-left:0;min-width:230px}.cm-table td:last-child,.cm-table th:last-child{min-width:95px}.cm-table .cm-card-name{font-weight:700;color:#f1f6ff;text-decoration:none;border:0;background:none;padding:0;text-align:left}.cm-table .cm-card-name:hover{color:#8ecbff}.cm-table small{display:block;margin-top:5px;max-width:280px;line-height:1.4}.cm-table tr.cm-group-row td{padding:14px;background:#1d2a3f;font-weight:700}.cm-paging{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.cm-menu{padding:10px;background:#202738;border:1px solid #43536f;border-radius:11px;box-shadow:0 12px 40px #0008;color:#f4f8ff;min-width:210px;max-width:calc(100vw - 24px);max-height:75vh;overflow:auto;position:fixed;margin:0;z-index:30}.cm-menu button,.cm-menu a{display:block;width:100%;padding:11px 12px;border:0;background:transparent;color:inherit;text-align:left;text-decoration:none;border-radius:6px;font-size:13px}.cm-menu button:hover,.cm-menu a:hover{background:#314565}.cm-menu p{padding:0 12px;color:#b8cee8;font-size:12px}.cm-menu hr{border:0;border-top:1px solid #3b465d}.cm-menu .cm-submenu{margin-left:12px;border-left:1px solid #587290;padding-left:6px}.cm-user-menu{flex-shrink:0;display:flex;align-items:center;gap:8px}.cm-menu:popover-open{display:block}.cm-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;padding:14px 20px;background:#293e5c;border:1px solid #6b9ad0;border-radius:9px;max-width:min(720px,calc(100vw - 24px));box-shadow:0 10px 35px #0008}.cm-toast.error{background:#482b32;border-color:#c77b85}#cm-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:25px;border:1px solid #526887;background:#171d2a;color:#edf4ff;overflow:auto;border-radius:14px}#cm-dialog::backdrop{background:#020813bf;backdrop-filter:blur(5px)}.cm-dialog-head{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-bottom:20px}.cm-dialog-head h2{margin:0}.cm-dialog-close{border:0;background:#2b3549;color:white;border-radius:7px;width:36px;height:36px;flex-shrink:0}.cm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cm-full{grid-column:1/-1}.cm-form-footer{margin-top:25px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.cm-error{color:#ffd0c8;background:#48272c;border-radius:8px;padding:12px;white-space:pre-wrap}.cm-note{border-left:3px solid #689edc;padding:13px 16px;background:#1d2c43;color:#c5dcf4;font-size:13px;margin:16px 0;line-height:1.5}.cm-warning{border-color:#dca665;background:#382d22;color:#f2d3a7}.cm-checkbox{display:flex;align-items:center;gap:8px}.cm-checkbox input{min-height:0;width:16px;height:16px}.cm-details{border:1px solid #38465e;border-radius:8px;padding:0 15px;background:#1a2333}.cm-details>summary{cursor:pointer;min-height:0;padding:12px 0}.cm-details[open]{padding-bottom:12px}.cm-inspector{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:22px}.cm-inspector img{width:100%;border-radius:12px}.cm-inspector .cm-oracle{white-space:pre-line;line-height:1.7;font-size:14px}.cm-lab-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px;align-items:start}.cm-run-panel{position:sticky;top:20px}.cm-run-steps{list-style:none;padding:0;display:grid;gap:22px}.cm-run-steps li{display:flex;align-items:center;gap:12px;font-size:13px}.cm-run-orb{position:relative;display:block;width:38px;height:38px;flex:0 0 38px;overflow:hidden;border-radius:50%;border:1px solid #7692a330;background:radial-gradient(circle at 30% 20%,#c1e2ff20,transparent 60%),#14223060;box-sizing:border-box}.cm-run-orb.active{border-color:#62bfff88;background:radial-gradient(circle at 32% 20%,#dcf8ff50,transparent 56%),#0065c338;box-shadow:inset 0 -3px 8px #279ef93a,0 0 17px #008eff20}.cm-run-orb i{display:none;position:absolute;bottom:3px;left:12px;width:14px;height:27px;border-radius:65% 15% 65% 45%;background:linear-gradient(20deg,#b8f5ff,#2fb8ff 46%,#0762ff20);filter:blur(1.3px);transform-origin:50% 100%;animation:cm-orb-fire 1.65s ease-in-out infinite alternate}.cm-run-orb.active i{display:block}.cm-run-orb i:nth-child(2){left:5px;height:21px;animation-delay:-.7s;opacity:.7}.cm-run-orb i:nth-child(3){left:21px;width:10px;height:20px;animation-delay:-1.2s;opacity:.8}.cm-run-orb img{display:none;position:absolute;inset:7px;width:22px;height:22px;filter:brightness(1.55) drop-shadow(0 0 4px #78f7ba66);animation:cm-orb-grow 2.7s ease-in-out infinite alternate}.cm-run-orb.complete{border-color:#6de9a36b;background:radial-gradient(circle at 30% 20%,#d2ffe83d,transparent 62%),#1cbb5930;box-shadow:inset 0 -4px 9px #17af6230,0 0 13px #3aeba71a}.cm-run-orb.complete img{display:block}.cm-run-orb.waiting{opacity:.45}.cm-commander-results{display:grid;gap:7px;max-height:270px;overflow:auto;margin:12px 0}.cm-commander-result{display:grid;grid-template-columns:minmax(0,1fr) 72px 115px;gap:10px;align-items:center;text-align:left;padding:12px;background:#1d293d;border:1px solid #3b5271;border-radius:8px;color:#eff6ff}.cm-commander-result strong{font-size:13px}.cm-commander-result span:last-child{font-size:12px;color:#aec7e5}.cm-selected-commander{padding:16px;background:#233d5c;border:1px solid #6b9ccc;border-radius:10px;margin:15px 0}.cm-section-heading{margin:28px 0 16px;padding-top:20px;border-top:1px solid #3b4960;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#bdd6f2}.cm-graph{height:550px;min-height:320px;width:100%;display:block;touch-action:none;border:1px solid #344968;border-radius:14px;background:radial-gradient(ellipse at 50% 40%,#1b304b,#101621 72%)}.cm-graph-grid{display:grid;grid-template-columns:minmax(0,1.85fr) 12px var(--cm-pane-w,minmax(310px,1fr));gap:8px}.cm-swot{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.cm-swot>div{padding:14px;background:#141d2c;border-radius:9px}.cm-swot h3{margin:0 0 6px;color:#c7e2ff}.cm-share-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}.cm-starting{max-width:750px;margin:40px auto}.cm-status-line{font-size:12px;color:#9db8d8}.cm-pause-pill{display:inline-block;border:1px solid #62533e;color:#e2c494;background:#2e2a23;border-radius:6px;padding:5px 9px;font-size:12px}.cm-loading{opacity:.6;pointer-events:none}.v-term{font:inherit;display:inline;padding:0;background:none;border:0;border-bottom:1px dotted #8db9df;color:inherit;cursor:help}.v-term:hover,.v-term:focus-visible{text-shadow:0 0 .5px currentColor}.v-glossary-tip{position:fixed;margin:0;padding:16px;background:#223047;color:#e7f2ff;border:1px solid #6a91ba;border-radius:9px;max-width:340px;z-index:90;box-shadow:0 8px 30px #0007;font-size:13px}.v-glossary-tip strong{font-size:15px}.v-glossary-tip p{margin:8px 0 0}.v-glossary-tip .v-tip-kind{display:block;font-size:11px;color:#a9c7e9;margin-top:4px}@keyframes cm-orb-fire{0%{transform:rotate(-9deg) scale(1,1)}50%{transform:rotate(6deg) scale(.9,1.12)}100%{transform:rotate(-4deg) scale(1.05,.94);opacity:.85}}@keyframes cm-orb-grow{from{transform:scale(.86);opacity:.7}to{transform:scale(1.08);opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}@media(max-width:1050px){.cm-showcase{grid-template-columns:minmax(0,1fr) 230px}.cm-cardfan{height:232px}.cm-grid-2,.cm-graph-grid{grid-template-columns:1fr}.cm-lab-grid{grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr)}.cm-layout{grid-template-columns:155px 1fr}.cm-commander{grid-template-columns:160px 1fr}#cm-main{padding:26px 22px 55px}}@media(max-width:760px){.cm-deck-art{transform:scale(1.35);transform-origin:50% 30%}.cm-showcase{grid-template-columns:1fr;padding-bottom:10px}.cm-cardfan{height:186px}.cm-fan-card{width:96px;height:134px;margin-left:-48px;top:14px;border-width:4px}.cm-fan-left{transform:translate(-44px,14px) rotate(-20deg)}.cm-fan-right{transform:translate(45px,14px) rotate(20deg)}.cm-deck-hero{padding:20px 18px;min-height:200px}.cm-graph-pop{width:calc(100% - 12px);left:6px!important}.cm-graph-mode-hint{flex-basis:100%;margin:0}.cm-picker-row{grid-template-columns:minmax(0,1fr) auto auto}.cm-picker-meta{grid-column:1/-1}.cm-picker-row .cm-text-button{grid-column:1/-1;text-align:left}.cm-columns-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#matrix-v2 .cm-user-menu>.v-button{padding:5px 9px;font-size:11px;max-width:none;min-height:30px;white-space:nowrap}.cm-graph-grid-tall{--cm-graph-h:390px}.cm-card-view{height:auto;max-height:none;overflow:visible;min-height:0}.cm-card-view-head{grid-template-columns:110px minmax(0,1fr)}.cm-card-view-art{width:110px}.cm-graph-reach{margin-left:0}.cm-graph-reach input[type=range]{width:90px}.cm-filter-panel{grid-template-columns:1fr;padding:12px}.cm-facet-list{max-height:170px}#cm-facet-results{max-height:none}#matrix-v2 .v-top{padding:13px 15px;gap:10px}#matrix-v2 .v-brand-subline{font-size:9px;max-width:250px}#matrix-v2 .v-brand{font-size:25px}#matrix-v2 .v-brand-logo{width:45px;height:45px}.cm-user-menu>.v-button{padding:8px!important;font-size:11px;max-width:95px}.cm-layout{display:block}.cm-sidebar{padding:8px 10px;position:sticky;top:0;z-index:10;border-right:0;border-bottom:1px solid #36445e;display:block;background:#171e2cf5}.cm-sidebar nav{display:flex;gap:2px;position:static;justify-content:space-between}.cm-sidebar a{padding:10px 7px;font-size:12px;white-space:nowrap}.cm-sidebar a[aria-current=page]{box-shadow:inset 0 -2px #85c5ff}.cm-nav-note{display:none}#cm-main{padding:23px 15px 50px}.cm-lab-grid,.cm-form-grid,.cm-inspector{grid-template-columns:1fr}.cm-run-panel{position:static}.cm-inspector-art{max-width:200px;margin:auto}.cm-page-head{display:block}.cm-page-head>.cm-actions{margin-top:16px}.cm-commander{grid-template-columns:110px minmax(0,1fr);gap:13px}.cm-commander li{font-size:12px}.cm-swot{grid-template-columns:1fr}.cm-commander-result{grid-template-columns:minmax(0,1fr) 45px 75px}.cm-graph{height:390px}.cm-form-grid .cm-full{grid-column:auto}#matrix-v2 .v-panel{padding:17px}.cm-stats{gap:18px}.cm-table th,.cm-table td{padding:12px 11px}.cm-table td:first-child,.cm-table th:first-child{min-width:190px}.cm-deck-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}@media(max-width:370px){.cm-sidebar a{font-size:11px;padding:10px 5px}.cm-commander{grid-template-columns:1fr}.cm-commander>img{width:140px;margin:auto}#matrix-v2 .v-brand-subline{font-size:8px}.cm-user-menu>.v-button{max-width:80px;font-size:10px}.cm-toolbar .cm-search{min-width:120px}}@media print{.v-top,.cm-sidebar,.cm-toolbar,.cm-actions,.cm-paging,.cm-menu,.cm-toast,button{display:none!important}.cm-layout{display:block}body,#matrix-v2,#cm-main{background:white!important;color:black!important;padding:0!important}.cm-table{font-size:10px}.cm-table th,.cm-table td{color:black!important;background:white!important;padding:6px}.cm-table-wrap{overflow:visible}.cm-table td:last-child,.cm-table th:last-child{display:none}}

/* Production navigation owns its layout at every breakpoint. */
#matrix-v2 .cm-sidebar .v-nav-links{display:flex;flex-direction:column;gap:8px;top:18px}#cm-main h2{margin-bottom:14px}#cm-main h3{margin-top:14px;margin-bottom:8px}#cm-main p{margin-top:8px;margin-bottom:8px}#matrix-v2 .cm-commander img{min-height:190px;object-fit:contain}#matrix-v2 .cm-commander .cm-mana img{min-height:0;object-fit:contain}
@media(max-width:760px){#matrix-v2 .cm-sidebar .v-nav-links{display:flex;flex-direction:row;position:static;gap:2px;overflow:visible;max-height:none}#matrix-v2 .v-top{flex-wrap:nowrap}#matrix-v2 .v-brand-block{flex-basis:auto}}

/* A COLLECTION ROW IS THE CARD. The whole row opens the card, so the reader is not aiming
   at a five-word name; the Actions control sits in line with the text instead of being the
   tallest thing in the row and setting its height. */
.cm-row-card{cursor:pointer}
.cm-row-card:hover{background:#1b2739}
#matrix-v2 .cm-table .cm-row-actions{padding:0 9px;font-size:12px;line-height:1.5;white-space:nowrap}
#matrix-v2 .cm-table td.cm-row-actions-cell{vertical-align:top}
/* TWO CARDS, SIDE BY SIDE. A swap decided from two names in a sentence is a swap decided
   blind: the pictures, the two prices and where to buy each are what the decision is. */
.cm-swap-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:4px 0 12px}
.cm-swap-arrow{align-self:center;font-size:26px;color:#7fb2dd}
.cm-swap-card{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;background:#16203099;border:1px solid #2d4360;border-radius:10px;padding:10px}
.cm-swap-card figcaption{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8}
.cm-swap-card img{width:100%;max-width:220px;border-radius:9px;display:block}
.cm-swap-card strong{line-height:1.25}
#matrix-v2 .cm-swap-card .v-button{min-height:32px;padding:5px 10px;font-size:12px;margin-top:auto}
.cm-swap-price{margin-left:auto;color:#cfe3f7;font-variant-numeric:tabular-nums}
@media (max-width:640px){.cm-swap-compare{grid-template-columns:1fr;gap:8px}.cm-swap-arrow{transform:rotate(90deg);justify-self:center}}

/* Sits beside User Functions and reads as its equal in weight, not its heading. */
#matrix-v2 .cm-user-menu>.v-button.cm-feedback{min-height:34px;padding:6px 11px;font-size:12px}

/* The counters are a ribbon across the page, not a huddle at the left: equal columns, so
   "0 owned copies" through "Sell / Trade" sit evenly however many of them there are. */
.cm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:18px 22px;align-items:end}
/* The ribbon counts the rows on screen, so when a filter is on it has to say so -- the
   figure and the caption are one sentence, and the caption sits inside the ribbon's rules. */
.cm-stats:has(+.cm-stats-scope){border-bottom:0;margin-bottom:0;padding-bottom:14px}
.cm-stats-scope{margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--v-line)}

/* THE FILTER PANEL IS TWELVE COLUMNS OF ONE SHAPE: a label above a control that fills its
   track. It did not used to be. A <select> sizes to its widest option and a text <input>
   to a default twenty characters, so a track holding "Quintorius, History Chaser" or a
   free-text box blew past its 145px minimum and shoved its neighbours sideways -- which
   on a narrow window reads as the controls covering each other. Every control now fills
   its own track and nothing decides the layout but the grid. Bottom-aligned, so a label
   that wraps to two lines does not drop its control out of the row. */
.cm-filter-panel{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px 18px;align-items:end}
.cm-filter-panel>label{min-width:0}
.cm-filter-panel input,.cm-filter-panel select{width:100%;min-width:0}
@media(max-width:760px){.cm-filter-panel{grid-template-columns:1fr}}

/* THE TICK COLUMN AND ITS BAR. The bar is not a floating overlay: it sits where it acts,
   directly above the table, and exists only while something is ticked, so the page has no
   permanent furniture for a thing the reader does occasionally. */
.cm-tick-cell{min-width:0!important;width:34px;padding-right:0!important}
#matrix-v2 .cm-tick-cell input[type=checkbox]{width:17px;height:17px;min-height:0;margin:0;padding:0;cursor:pointer}
.cm-table tr.cm-row-ticked>td{background:#1d2b41}
.cm-batch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:16px 0 4px;padding:12px 15px;background:#1e2c43;border:1px solid #4a6a95;border-radius:10px}
.cm-batch-bar strong{margin-right:4px;white-space:nowrap}
#matrix-v2 .cm-batch-bar .v-button{min-height:36px;padding:7px 12px;font-size:12px}
/* The group chip in a deck's hero is a link to that group, so it looks like the badges
   beside it and behaves like the underlined text buttons elsewhere. */
button.cm-badge-link{border:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button.cm-badge-link:hover{background:#35507a;color:#eaf5ff}
/* HOW OLD THE CARD DATA IS. One line in the sidebar, the four figures in the menu. Amber,
   not red: stale data is a thing to notice on your way past, not an error to stop for. */
.cm-data-age{margin:8px 0 0;font-size:11px;color:#8fa6c4}
.cm-data-dates{margin:4px 0 10px;padding-bottom:8px;border-bottom:1px solid #3b465d}
.cm-data-row{display:flex;justify-content:space-between;gap:14px;padding:3px 12px;font-size:12px;color:#b8cee8}
.cm-data-row>span:last-child{color:#9db8d8;white-space:nowrap}
.cm-data-stale,.cm-data-stale>span:last-child{color:#f0c86e}
/* Unranked is a fact about EDHREC's published list, not about the commander. */
.cm-unranked{color:#8fa6c4;font-style:italic;cursor:help}
/* The card's name is what a reader scans the roster for; everything else in the row is a
   fact about the copy. It carries the weight so the eye lands on it first. */
.cm-table .cm-card-name,.cm-table .cm-card-name span{font-weight:800;letter-spacing:.005em}
/* A single control in a dialog spans the grid, so it lines up with the sentence under it
   rather than ending halfway across and reading as a stray button. */
#matrix-v2 .cm-form-grid>.cm-full>label>select,#matrix-v2 .cm-form-grid>.cm-full>label>input{width:100%}

.cm-card-view-bracket{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.cm-card-view-bracket small{line-height:1.35}

/* A step's name. The fine print that used to sit inside it now has its own row -- see
   .cm-run-why further down. */
.cm-run-step-body{min-width:0}

/* Buy links and add-to menus on the card pane: the same size as the rarity and price line
   above them, underlined, because they are links and should look like links. */
.cm-card-view-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:6px 0 0;font-size:13px}
.cm-card-view-links .cm-text-button{font-size:13px;padding:0}
.cm-inline-menu{position:relative;display:inline-block}
.cm-inline-menu>summary{list-style:none;cursor:pointer;font-size:13px;color:#8cc9ff;text-decoration:underline;text-underline-offset:4px}
.cm-inline-menu>summary::-webkit-details-marker{display:none}
.cm-inline-menu>summary:after{content:' \25be'}
.cm-inline-menu-body{position:absolute;left:0;top:calc(100% + 6px);z-index:8;min-width:190px;max-height:260px;overflow:auto}

/* TIGHT HEADINGS. The rules text used to live here and the margins around it were loose
   enough to matter; the card image carries the rules now, so what is left is heading, action
   row and the relation chips, and they sit close together. */
.cm-card-view>h3{margin:6px 0 2px}
.cm-card-view>.cm-actions{margin:2px 0}
.cm-card-view>p.cm-muted{margin:0}

/* The picture, then what it costs and where to buy it. The colour pips that used to sit
   beside the price were the mana cost said twice. */
.cm-inspector-art{display:flex;flex-direction:column;gap:8px}
.cm-inspector-buy{display:flex;flex-direction:column;gap:2px}
.cm-inspector-price{margin:2px 0 0}
.cm-inspector-price strong{font-size:18px}
.cm-inspector-buy .cm-text-button{font-size:13px;padding:2px 0}

/* THREE STATES, NOT TWO. A term can be asked for, asked against, or left alone, and a
   checkbox can only say two of those -- so the Filters pane's values are buttons that
   cycle the same way the focused card's own terms do. Excluded reads red and carries a
   minus, because "not this" and "this" must not be a difference of shade alone. */
.cm-facet-pick{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:4px 8px 4px 10px;border:0;border-left:2px solid #2b3549;border-bottom:1px solid #222c3d;border-radius:0 0 0 3px;background:none;color:#dbe7f7;font:inherit;font-size:13px;min-height:32px}
.cm-facet-pick:hover{background:#243248;border-left-color:#79bdff}
.cm-facet-pick small{margin-left:auto;flex-shrink:0}
.cm-facet-pick.is-on{background:#ffd16614;border-left-color:#ffd166;border-bottom-color:#ffd16655;color:#ffe9b3}
.cm-facet-pick.is-not,.cm-chip.is-not{background:#5a262e5c;border-color:#d8807f;color:#ffd3cd}.cm-facet-pick.is-not{border-left-color:#d8807f;border-bottom-color:#d8807f66}
.cm-facet-pick.is-not span:first-child,.cm-chip.is-not,.cm-facet-pick.is-not{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#ff9d95}
/* The struck-through label is the whole signal now. A leading minus sign said the same
   thing and widened every excluded chip, so a row of them reflowed as you clicked. */
.cm-chip.is-not>small,.cm-facet-pick.is-not>small{text-decoration:none}
.cm-chip.is-not small{text-decoration:none}

/* THE DECK LAB FORM, FOLDED. Three sections, and only one of them is ever the question
   being asked: choosing a commander, or naming a list you already have. The other half
   is removed rather than dimmed (applyMode in crankmagic-lab.js), and Deck Definition --
   the same sixteen inputs whichever way you came in, and the longest thing on the page --
   folds away until it is wanted. No `display` here: these are toggled with [hidden], and
   a display rule on the element would beat it. */
.cm-lab-section{border-top:1px solid #3b4960;margin:22px 0 0}
.cm-lab-section>summary{margin:0;padding:15px 0 11px;border-top:0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#bdd6f2}
.cm-lab-section>summary::-webkit-details-marker{display:none}
.cm-lab-section>summary::before{content:'\25B8';font-size:12px;color:#8fb6df;transition:transform .15s ease}
.cm-lab-section[open]>summary::before{transform:rotate(90deg)}
.cm-lab-section>summary:hover{color:#e6f2ff}
.cm-lab-subsection{border-top:0;margin:12px 0 0}
.cm-lab-subsection>summary{padding:5px 0;font-size:12px}
/* Two thirds the height they were: a picker showing eight commanders in the space that
   used to show five is the difference between scanning a list and scrolling one. */
.cm-commander-results{gap:5px;max-height:300px}
.cm-commander-result{padding:8px 10px;line-height:1.25}
.cm-picker-row{padding:4px 11px;row-gap:8px}
.cm-picker-row .cm-text-button{padding:3px 0}
.cm-picker-choose strong{font-size:12.5px;line-height:1.3}
.cm-picker-choose em{font-size:10.5px;line-height:1.2}
.cm-picker-meta{font-size:11.5px;line-height:1.2}
.cm-picker-cost .cm-mana img{width:15px;height:15px}

/* THE DISCOVER CARD PANE, REBUILT AROUND THE ART COLUMN.
   Four links stacked beside the title -- two buys and two menus -- cost four lines out
   of a pane that has to hold rules text and the relation chips as well, and the rules
   box was down to one visible row. The art is 150px wide and everything below it was
   empty, so the controls live there now: a thin Inspect card, then one "Add and/or Buy"
   menu carrying all four. */
.cm-card-view-head{grid-template-rows:auto auto}
.cm-card-view-art{grid-column:1;grid-row:1}
.cm-card-view-title{grid-column:2;grid-row:1/span 2;min-width:0}
.cm-card-view-tools{grid-column:1;grid-row:2;display:grid;gap:6px;width:150px;margin-top:8px}
#matrix-v2 .cm-card-view-tools .v-button{min-height:30px;padding:5px 9px;font-size:12px;width:100%;justify-content:center}
.cm-card-view-tools .cm-inline-menu{position:relative}
.cm-card-view-menu-btn{list-style:none;cursor:pointer}
.cm-card-view-menu-btn::-webkit-details-marker{display:none}
.cm-card-view-tools .cm-inline-menu-body{position:absolute;z-index:8;left:0;top:calc(100% + 4px);min-width:210px}
/* The pane runs to the bottom of the graph frame beside it, and the rules text takes
   whatever is left after the chips -- scrolling inside its own box rather than pushing
   "Joined to other cards by" off the end of the pane. */
.cm-graph-grid-tall{align-items:stretch}
/* A GRID ROW IS AS TALL AS ITS TALLEST ITEM'S CONTENT, so a pane holding art, rules text
   and forty relation chips pushed the row 137px past the bottom of the graph beside it,
   however tall the canvas was -- and CSS cannot say "be exactly as tall as my shorter
   sibling". sizePane() in crankmagic-discover.js writes the graph column's height here
   and this flag tells it when not to: on a narrow screen the two stack and the pane is
   as tall as it needs to be. */
.cm-card-view{height:auto;min-height:0;--cm-pane-stacked:0}
/* THE CHIPS ARE NEVER CLIPPED. They are the one thing in this pane you cannot get from
   looking at the card, so they take their natural height and the pane scrolls if the whole
   lot does not fit -- rather than the chips scrolling inside a box of their own, where the
   term that mattered sat below a fold nobody knew was there. */
.cm-card-view .cm-term-chips{flex:0 0 auto}
@media(max-width:760px){
  .cm-card-view-head{grid-template-columns:110px minmax(0,1fr)}
  .cm-card-view-tools{width:110px}
  .cm-card-view{height:auto!important;min-height:0;--cm-pane-stacked:1}
}

/* THE HEADER ON A PHONE. The brand block is `flex:1; min-width:0`, so it shrinks below
   the width its own text needs -- and nothing stopped that text painting straight out of
   the box and across the two buttons beside it. Measured: the wordmark ended at x=202 on
   every phone width, while the buttons began at x=194 (430px), x=154 (390px), x=139
   (375px) and x=84 (320px). It overlapped by 8px on the widest phone and 118px on the
   narrowest. Two fixes, because either one alone leaves it tight:
   the wordmark can no longer overflow its box, and the buttons stop spending 220px on
   two words each when there is no room for them. */
#matrix-v2 .v-brand{white-space:nowrap;overflow:hidden;text-overflow:clip}
#matrix-v2 .v-brand-subline{overflow:hidden}
#matrix-v2 .v-brand-block{min-width:0;flex:1 1 auto}
.cm-btn-icon{display:none}
@media(max-width:560px){
  /* Icon-only. Both buttons keep an aria-label, so the accessible name is the full
     wording whatever the label span is doing, and the tap target stays 36px square. */
  .cm-btn-icon{display:inline;font-size:15px;line-height:1}
  .cm-btn-label,.cm-btn-chevron{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #matrix-v2 .cm-user-menu>.v-button{min-width:38px;min-height:38px;padding:0;justify-content:center}
  #matrix-v2 .v-brand{font-size:23px}
  #matrix-v2 .v-brand-subline{font-size:9px;max-width:none}
}
@media(max-width:360px){
  /* No room for the mark and the words at this width; the logo carries the brand. */
  #matrix-v2 .v-brand-logo{display:none}
  #matrix-v2 .v-brand{font-size:21px}
}

/* TAP TARGETS ON A TOUCH SCREEN. Three controls came out under 30px tall on a 375px
   phone: the aether pause pill at 26x26 sitting right beside the wordmark, every table
   header's sort button at 24px, and the commander picker's name button at 16px -- that
   last one a side effect of shortening those rows for the desktop, where a mouse does
   not care. Height only; nothing moves or reflows. */
@media(pointer:coarse){
  #matrix-v2 .v-aether-toggle{width:38px;height:38px;border-radius:8px}
}
@media(max-width:760px){
  .cm-table th button{min-height:36px;align-items:center}
  .cm-picker-choose{min-height:36px;display:flex;flex-direction:column;justify-content:center}
  .cm-picker-row .cm-text-button{min-height:36px;display:inline-flex;align-items:center}
}

/* THE PAUSE PILL BELONGS TO THE CANVAS, NOT THE HEADER. Its x position is the wordmark's
   right edge, which on a desktop parks it just past 'CrankMagic' and clear of the tail.
   On a phone the wordmark ends near the middle of a 390px bar, so the same rule leaves a
   button apparently floating in the centre of the header with nothing to own it. Pin it
   to the top right of the animation container instead, and shrink it back to the pill it
   is -- 32px still clears the 30px floor the tap-target rule was written for. */
@media(max-width:760px){
  #matrix-v2 .v-aether-toggle{left:auto;right:0;top:0;opacity:.45}
  #matrix-v2 .v-aether-toggle:focus-visible,#matrix-v2 .v-aether-toggle[aria-label="Resume aether animation"]{opacity:1}
}
@media(max-width:760px) and (pointer:coarse){
  #matrix-v2 .v-aether-toggle{width:32px;height:32px;border-radius:8px}
}

/* THE SHOP ON A CONVENTION FLOOR. One row of controls, no page head, no stat ribbon, and
   a Buy button on the row rather than behind a menu and a form. Everything here is inside
   the phone breakpoint; the desktop table is unchanged. */
.cm-shop-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:10px 0}
#matrix-v2 .cm-shop-bar .v-button{min-height:38px;padding:7px 11px;font-size:13px;white-space:nowrap}
#matrix-v2 .cm-shop-bar .cm-shop-search-btn{min-width:38px;padding:0;justify-content:center;font-size:16px}
.cm-shop-search{margin:0 0 12px}
#matrix-v2 .cm-table-shop .cm-row-buy{min-height:34px;padding:4px 13px;font-size:13px;font-weight:700}
#matrix-v2 .cm-table-shop .cm-row-actions{min-height:34px;min-width:32px;padding:4px 8px;font-size:14px}
.cm-table-shop td.cm-row-actions-cell{white-space:nowrap;vertical-align:middle}
#matrix-v2 .cm-table-shop .cm-row-buy+.cm-row-actions{margin-left:5px}
@media(max-width:640px){
  /* The five shop columns plus Buy have to fit inside 375px without a sideways scroll,
     so the table gives up the 90px minimum every other column keeps and the name column
     its 190px, and takes fixed widths instead: everything but the card name is a short
     token, and the name gets whatever is left. */
  .cm-table-shop{table-layout:fixed;width:100%}
  .cm-table-shop th,.cm-table-shop td{min-width:0;padding:9px 4px;font-size:12px;vertical-align:middle;overflow-wrap:anywhere}
  .cm-table-shop th{font-size:10px}
  .cm-table-shop td:first-child,.cm-table-shop th:first-child{min-width:0;padding-left:0;width:auto}
  .cm-table-shop td:nth-child(2),.cm-table-shop th:nth-child(2){width:34px}
  .cm-table-shop td:nth-child(3),.cm-table-shop th:nth-child(3){width:58px}
  .cm-table-shop td:nth-child(4),.cm-table-shop th:nth-child(4){width:36px}
  .cm-table-shop td:nth-child(5),.cm-table-shop th:nth-child(5){width:50px}
  .cm-table-shop td:last-child,.cm-table-shop th:last-child{min-width:0;width:78px;padding-right:0}
  .cm-table-shop .cm-colors{flex-wrap:wrap;gap:2px}
  .cm-table-shop .cm-card-name{font-size:12px;line-height:1.3;min-height:34px;align-items:center}
  #matrix-v2 .cm-table-shop .cm-row-buy{min-height:34px;padding:4px 9px;font-size:12px}
  #matrix-v2 .cm-table-shop .cm-row-actions{min-height:34px;min-width:26px;padding:4px 5px}
  #matrix-v2 .cm-shop-bar .v-button{min-height:36px;padding:6px 10px;font-size:12px}
  #matrix-v2 .cm-shop-bar .cm-shop-search-btn{min-width:36px}
}
/* Rarity as its initial, coloured the way the set symbol is: at a booth the letter is
   what a player is checking against the seller's binder tab. */
.cm-rarity{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;color:#10141d;background:#b9b3a8}
.cm-rarity-U{background:#c3ced9}.cm-rarity-R{background:#d9be6a}.cm-rarity-M{background:#e08750}.cm-rarity-S{background:#c8a2d8}.cm-rarity-B{background:#8fbfa4}

/* TWO THINGS tests/browser-geometry.mjs FOUND ON ITS FIRST RUN.
   The pass is the one written down in tests/uat/geometry.mjs: no sideways scroll, no tap
   target under 32px, nothing in the header painting over anything else, at six widths on
   four pages. Both of these had been on the live site and neither had been noticed. */

/* 1. THE HERO FAN PUSHED THE PAGE 9px WIDE AT 768. The three cards are rotated 20 degrees,
   which makes their painted box wider than their layout box, and the right-hand one
   reached x=777 on a 768px screen -- a decorative card giving the whole page a horizontal
   scrollbar. Clipping at the main column costs nothing that was on screen and closes the
   whole class of bug: any future overhang is clipped rather than scrolled to. `clip`
   rather than `hidden` because hidden would make this a scroll container and break the
   sticky run panel inside it. */
#cm-main{overflow-x:clip}

/* 2. THE DECK LAB'S SUB-SECTION HEADERS WERE 28px. Every folding section is a <summary>,
   which is the whole control -- tapping the words is how the section opens -- and the
   sub-section ones inherited a heading's line box rather than a button's height. */
@media(pointer:coarse){
  #matrix-v2 summary{min-height:36px;padding-top:5px;padding-bottom:5px}
}

/* WHEN THE GAMES ENDED. A bar per turn, sized against the busiest one. Deliberately
   plain: the shape is the whole point, and axis furniture would compete with it. */
.cm-turn-hist{display:flex;align-items:flex-end;gap:3px;height:110px;margin:12px 0;padding:0 2px}
.cm-turn-hist>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.cm-turn-hist i{display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0;background:linear-gradient(#8dd0ff,#3d6bac)}
.cm-turn-hist span{font-size:10px;color:#a5b7ce;line-height:1}

/* THE RUN PANE AS A NUMBERED SEQUENCE. Each step's button lives in its own row, carries
   the number of its turn, and is disabled until the step before it has happened -- the
   global button:disabled rule already greys it and blocks the click, and the title says
   what is missing. The row is a three-part grid so the buttons line up down the right
   edge whatever length the step names are. */
/* Two rows: the step name and its button share the first, and whatever the step is
   waiting for runs the full width beneath them. Beside the button that sentence had a
   ~140px column to live in and wrapped to four lines, which made a five-step list taller
   than the screen it is meant to orient you on. */
.cm-run-steps li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:5px 12px;align-items:center}
.cm-run-steps li>.cm-run-orb{grid-column:1;grid-row:1/-1;align-self:center}
.cm-run-step-body{grid-column:2;grid-row:1}
.cm-run-why{grid-column:2/-1;grid-row:2;margin:0;line-height:1.4}
#matrix-v2 .cm-run-steps li>.cm-run-do{grid-column:3;grid-row:1;justify-self:end}
#matrix-v2 .cm-run-do{min-height:36px;padding:6px 12px;font-size:13px;gap:8px;white-space:nowrap}
.cm-run-num{display:inline-grid;place-items:center;width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  background:#3a4a64;color:#e8f1ff;font-size:11px;font-weight:700;line-height:1}
#matrix-v2 .cm-run-do.primary .cm-run-num{background:#0b2340;color:#cfe8ff}
/* A disabled step reads as not-yet rather than broken: the number keeps its shape and the
   whole control fades together. The primary also SHEDS ITS FILL when it cannot be pressed --
   faded blue is still blue, and the point of the sequence is that exactly one control is
   blue at a time and it is the one you press next. */
#matrix-v2 .cm-run-do:disabled{opacity:.5}
#matrix-v2 .cm-run-do.primary:disabled{background:#1c2537;border-color:#3a4a64;color:#dce8f8}
#matrix-v2 .cm-run-do.primary:disabled .cm-run-num{background:#3a4a64;color:#e8f1ff}
.cm-run-top{justify-content:space-between;margin-bottom:10px}
.cm-run-lede{margin:0 0 14px}
@media(max-width:760px){
  /* The button drops under its step rather than squeezing the name to nothing. */
  .cm-run-steps li{grid-template-columns:38px minmax(0,1fr)}
  #matrix-v2 .cm-run-steps li>.cm-run-do{grid-column:2;grid-row:2;justify-self:start}
  .cm-run-why{grid-column:2;grid-row:3}
}

/* ============================ DECK LAB: TELLING THE THREE SECTIONS APART ============================
   Starting point, Commander choice and Deck Definition all rendered as the same blue-on-blue
   block, so the one question you must answer FIRST looked like the two that follow it. It now
   sits on the DECISION colour -- a different hue, not merely a different shade, because a
   shade of the same blue is what made them confusable to begin with. Every value here comes
   from the Deep Field tokens in crankmagic-design.css, so the palette is one decision made in
   one place rather than a literal repeated down this file. */
.cm-lab-start{
  background:linear-gradient(180deg,var(--v-decision-bg) 0%,var(--v-panel) 100%);
  border:1px solid var(--v-decision-line);border-left:4px solid var(--v-decision);
  border-radius:10px;padding:15px 17px 17px;margin:0 0 20px}
.cm-lab-start h2{margin:0 0 12px;font-size:19px;color:var(--v-decision-ink);letter-spacing:-.01em}
.cm-lab-start>label{display:block;font-size:13px;color:var(--v-decision-ink)}
/* #matrix-v2-prefixed, because the field rules further down are id-scoped and would
   otherwise repaint this one back to the blue it is here to differ from. */
#matrix-v2 .cm-lab-start select{margin-top:6px;background:var(--v-decision-field);
  border-color:var(--v-decision-line);color:var(--v-decision-ink);font-weight:600}
#matrix-v2 .cm-lab-start select:hover,
#matrix-v2 .cm-lab-start select:focus-visible{border-color:var(--v-decision);outline-color:var(--v-decision)}

/* A REQUIRED FIELD WEARS THE ASTERISK. The one mark a reader already knows without being
   taught it -- which is the whole job, and the reason it beat the Mountain pip that was here
   first, however well red suited the meaning. */
.cm-req{margin-left:5px;color:var(--v-required);font-size:15px;line-height:1;font-weight:700;
  vertical-align:-2px}

/* IN STARTING POINT THE MARK SITS ON THE CONTROL, not on the sentence. That label is a whole
   instruction rather than a field name, and at full width the select drops to its own line --
   so a mark trailing the text was stranded at the far right of a line it had nothing to do
   with. It is the select's own next sibling now, top-aligned, so it holds the select's
   top-right corner wherever the select ends up. */
.cm-start-control{display:inline-flex;align-items:flex-start;gap:5px;margin-top:6px}
#matrix-v2 .cm-start-control select{margin-top:0}
.cm-start-control .cm-req{margin:0;font-size:16px;line-height:1.1}

/* FIELDS THAT LOOK LIKE FIELDS -- the third plane Deep Field exists to add. Inputs were
   filled var(--v-raised) against a #191b24 panel: DARKER than the surface holding them, so every
   control receded into its own container. A control you can type into or open sits ABOVE
   its panel, never below it.
   AND IN A DIFFERENT COLOUR. Raised was the panel blue a step lighter, so a page of fields
   read as one sheet of the same blue at four brightnesses. --v-field is slate: the same hue
   family with the saturation taken out, a shade lighter still, and a border that can be seen
   before it is hovered. A box you type into now looks like a box you type into. */
#matrix-v2 input:not([type=checkbox]):not([type=radio]):not([type=range]),
#matrix-v2 select,#matrix-v2 textarea{
  background:var(--v-field);border:1px solid var(--v-field-line);color:var(--v-ink)}
#matrix-v2 input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,
#matrix-v2 select:hover,#matrix-v2 textarea:hover{border-color:var(--v-accent)}
#matrix-v2 input:focus-visible,#matrix-v2 select:focus-visible,#matrix-v2 textarea:focus-visible{
  outline:2px solid var(--v-accent);outline-offset:1px;border-color:var(--v-accent)}
#matrix-v2 ::placeholder{color:var(--v-muted)}
.cm-req-label{display:inline-flex;align-items:baseline}

/* ================================== THE GUIDED TOUR ==================================
   A scrim, a hole cut in it, and a card beside the hole. The hole is drawn with a huge
   box-shadow rather than a clip-path or four positioned panels: one element, one repaint per
   step, and it animates its own position for free. pointer-events stay off the scrim so the
   reader can still use the page underneath -- a tour you cannot click through is a tour you
   have to finish before you can try what it just described. */
.cm-tour-layer{position:fixed;inset:0;z-index:80;pointer-events:none}
.cm-tour-scrim{position:absolute;inset:0}
.cm-tour-spotlight{position:absolute;border-radius:10px;border:2px solid var(--v-accent);
  box-shadow:0 0 0 9999px #060a12b0,0 0 22px #72baff55;
  transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}
/* A popover, so it reaches the top layer where the user-functions menu already lives -- see
   the note on `raise` in crankmagic-tour.js. The UA sheet centres a popover with inset:0 and
   margin:auto, both of which have to go, because this one is positioned onto its target. */
.cm-tour-popover{position:fixed;inset:auto;margin:0;width:min(420px,calc(100vw - 24px));
  pointer-events:auto;background:var(--v-panel);border:1px solid var(--v-line-strong);
  border-radius:12px;padding:17px 19px 15px;box-shadow:0 18px 52px #000a;color:var(--v-ink);
  transition:left .22s ease,top .22s ease}
.cm-tour-popover:not(:popover-open){display:none}
.cm-tour-progress{margin:0 0 7px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--v-decision)}
#matrix-v2 .cm-tour-popover h2{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
.cm-tour-copy p{margin:0;font-size:13.5px;line-height:1.6;color:var(--v-muted)}
.cm-tour-acts{display:flex;align-items:center;gap:8px;margin-top:15px;flex-wrap:wrap}
.cm-tour-spacer{flex:1}
#matrix-v2 .cm-tour-acts .v-button{min-height:34px;padding:6px 13px;font-size:13px}
#matrix-v2 .cm-tour-quiet{background:transparent;border-color:transparent;color:var(--v-muted);padding-left:4px;padding-right:4px}
#matrix-v2 .cm-tour-quiet:hover{color:var(--v-ink);border-color:var(--v-line-strong)}
@media(prefers-reduced-motion:reduce){.cm-tour-spotlight,.cm-tour-popover{transition:none}}

/* THE CHOOSER. Seven jobs, not seven screens -- so each card leads with the job in the
   reader's own words and closes with what they will have, which is the part that makes one
   of seven worth picking. */
.cm-tour-lede{margin:0 0 16px;max-width:62ch}
.cm-tour-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}
#matrix-v2 .cm-tour-pick{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;
  align-items:start;text-align:left;padding:13px 14px;font:inherit;
  background:var(--v-raised);border:1px solid var(--v-line-strong);border-radius:10px;
  color:var(--v-ink);cursor:pointer}
#matrix-v2 .cm-tour-pick:hover{border-color:var(--v-accent);background:#28324a}
.cm-tour-icon{font-size:21px;line-height:1.1;color:var(--v-decision)}
.cm-tour-pick-body{display:grid;gap:4px;min-width:0}
.cm-tour-pick-body strong{font-size:14px;letter-spacing:-.01em}
.cm-tour-pick-body small{font-size:12.5px;line-height:1.45;color:var(--v-muted)}
.cm-tour-pick-body em{font-style:normal;font-size:11.5px;line-height:1.4;color:var(--v-decision)}
/* THE HEADER FITS THREE BUTTONS ONLY WHEN ONE OF THEM IS AN ICON. Adding Take a Tour as a
   third labelled control wrapped the whole group onto its own row at 768px, and the wordmark
   then painted straight across it -- caught by tests/browser-geometry.mjs, which exists for
   exactly this. The tour label is the one to shed: it is the newest, and its flag icon
   carries a tooltip and an aria-label. */
@media(max-width:1050px){#matrix-v2 .cm-tour-btn .cm-btn-label{display:none}#matrix-v2 .cm-tour-btn .cm-btn-icon,#matrix-v2 .cm-share-btn .cm-btn-icon{display:inline;font-size:15px;line-height:1}}
/* Four controls now. Under 900px Send Feedback goes to its envelope too, or the group wraps
   under the wordmark at 768px -- the browser-geometry suite catches exactly that. */
@media(max-width:900px){#matrix-v2 .cm-feedback .cm-btn-label{display:none}#matrix-v2 .cm-feedback .cm-btn-icon{display:inline;font-size:15px;line-height:1}}
@media(max-width:760px){
  .cm-tour-picks{grid-template-columns:1fr}
  .cm-tour-popover{width:calc(100vw - 20px)}
}


/* ====================== DISCOVER: THE CARD INFO PANE ======================
   Each control sits with its subject rather than in one stack: Inspect under the art it
   inspects, and Add and/or Buy under the price and bracket line it acts on. Both are thin,
   because neither of them is the card. */
#matrix-v2 .cm-card-view-tools .v-button,
#matrix-v2 .cm-card-view-buy .cm-card-view-menu-btn,
#matrix-v2 .cm-graph-back .v-button{min-height:28px;padding:3px 11px;font-size:12.5px}
.cm-card-view-buy{margin-top:8px}
#matrix-v2 .cm-card-view-buy .cm-card-view-menu-btn{display:inline-flex;align-items:center;gap:6px}

/* ============== DISCOVER: THE CANVAS BOX AND PRESENTATION MODE ==============
   The canvas gets a box of its own so two things can sit INSIDE it rather than beside it:
   the maximise control, in its top-right corner under Back to Prior Card, and the
   connection pop-up, which is now positioned against the canvas instead of the whole
   column -- which is what stops it drifting up over the controls when the pane resizes. */
#matrix-v2 .cm-graph-box{position:relative;min-width:0}
#matrix-v2 .cm-graph-box>.cm-graph{display:block;width:100%}
#matrix-v2 .cm-stage-btn{position:absolute;top:10px;right:10px;z-index:5;
  display:inline-grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid var(--v-line-strong);border-radius:8px;background:#1b2334d9;
  color:var(--v-muted);backdrop-filter:blur(3px);cursor:pointer}
#matrix-v2 .cm-stage-btn:hover{background:#28344c;color:var(--v-ink);border-color:var(--v-accent)}
#matrix-v2 .cm-stage-btn[aria-pressed=true]{color:var(--v-accent);border-color:var(--v-accent)}
/* The two hint sentences share one popover, so they read as one explanation of the canvas
   rather than two paragraphs competing with it for the page. */
#matrix-v2 .cm-graph-modes .cm-hint-body{width:min(340px,calc(100vw - 40px))}
#matrix-v2 .cm-graph-modes .cm-hint-body p{margin:0 0 8px}
#matrix-v2 .cm-graph-modes .cm-hint-body p:last-child{margin:0}

/* PRESENTATION MODE. Everything below is one reader's decision: give the canvas the room.
   The nav rail collapses, the page title and its subtitle go (the eyebrow stays, so the
   page still says where you are, and the search and filter rows rise under it), the card
   pane halves and stacks its art above the text, and the canvas takes what that frees.
   Nothing is removed that you would have to leave the mode to get back. */
/* One column, not a zero-width first one: display:none takes the rail OUT of the grid, so
   a `0 1fr` template drops main into the zero track and the page becomes 2px wide. */
#matrix-v2.cm-stage .cm-layout{grid-template-columns:minmax(0,1fr)}
#matrix-v2.cm-stage .cm-sidebar{display:none}
#matrix-v2.cm-stage #cm-main{padding:14px clamp(12px,1.4vw,20px) 18px}
#matrix-v2.cm-stage .cm-page-head{margin-bottom:10px}
#matrix-v2.cm-stage .cm-page-head h1,
#matrix-v2.cm-stage .cm-page-head>div>p{display:none}
#matrix-v2.cm-stage .cm-toolbar{margin:6px 0}
/* SEARCH AND FILTERS FOLD AWAY IN THIS MODE. They are the rows a reader uses in bursts and
   then stops looking at, and in a mode whose whole point is canvas they cost two bands of
   the screen to sit idle. The sliders button in the page head brings both back in one
   click and puts them back where they were, so nothing has to be re-found. Everything the
   rows report -- the match count, the applied chips, depth and breadth -- stays on screen,
   because those are readouts you steer by rather than fields you fill in. */
#matrix-v2 .cm-tools-toggle{display:none;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid var(--v-line-strong);border-radius:8px;background:var(--v-raised);
  color:var(--v-muted);cursor:pointer}
#matrix-v2.cm-stage .cm-tools-toggle{display:inline-grid}
#matrix-v2 .cm-tools-toggle:hover{background:#2b3a55;color:var(--v-ink);border-color:var(--v-accent)}
#matrix-v2 .cm-tools-toggle[aria-expanded=true]{color:var(--v-accent);border-color:var(--v-accent)}
#matrix-v2.cm-stage .cm-toolbar,
#matrix-v2.cm-stage #cm-facet-bar,
#matrix-v2.cm-stage #cm-filter-host{display:none}
#matrix-v2.cm-stage.cm-tools-open .cm-toolbar{display:flex}
#matrix-v2.cm-stage #cm-facet-bar{display:none}#matrix-v2.cm-stage.cm-tools-open #cm-facet-bar{display:flex}
#matrix-v2.cm-stage.cm-tools-open #cm-filter-host{display:block}
/* The head is one row now -- the eyebrow and this button -- so it stops being a block. */
#matrix-v2.cm-stage .cm-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#matrix-v2.cm-stage .cm-facet-status{margin:0}
/* Taller than the window on purpose. Fitting the canvas to the viewport is right for the
   default layout, where the page is a page; in presentation mode the canvas IS the page,
   and a ring of thirty neighbours wants room the fold does not have. It runs about 40%
   past the bottom and the page scrolls to it. The pane follows: sizePane() writes its
   height from the canvas, so the two stay level without a second number to keep in sync. */
#matrix-v2.cm-stage .cm-graph-grid-tall{--cm-graph-h:clamp(560px,calc((100vh - 178px) * 1.4),1800px);gap:14px}
#matrix-v2.cm-stage .cm-graph-grid{grid-template-columns:minmax(0,1fr) 12px var(--cm-pane-w,210px)}
/* The pane is half as wide, so the head stops being two columns: 150px of art beside
   70px of text is not a layout, it is two things that do not fit. */
#matrix-v2.cm-stage .cm-card-view-head{grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;gap:8px}
/* The three parts of the head are placed by hand at full width -- art in column one,
   Inspect under it, the title spanning both rows in column two -- so a one-column template
   alone does not stack them: the title stays pinned to a column that no longer exists and
   the art overflows a zero-width track. Each one is re-placed. Order is unchanged from the
   wide layout read top to bottom: the picture, the button that belongs to the picture,
   then everything the card says about itself. */
#matrix-v2.cm-stage .cm-card-view-art{grid-column:1;grid-row:1;width:118px}
#matrix-v2.cm-stage .cm-card-view-tools{grid-column:1;grid-row:2;width:118px;margin-top:0}
#matrix-v2.cm-stage .cm-card-view-title{grid-column:1;grid-row:3}
#matrix-v2.cm-stage .cm-card-view-title h2{font-size:16px}
#matrix-v2.cm-stage .cm-card-view{padding:14px;gap:6px}
#matrix-v2.cm-stage .cm-card-view-buy{margin-top:6px}
#matrix-v2.cm-stage .cm-chips-head{font-size:13px;margin-top:8px}
/* Half the width means twice the wrapping, so the two blocks that wrap most are tightened
   rather than cut: every term is still there and still tappable, just smaller. A card
   joined by a dozen terms still overruns the pane, and the pane scrolls -- which is the
   same answer this pane has always given, and better than hiding a term behind a fold. */
#matrix-v2.cm-stage .cm-card-view-title p{font-size:12px;margin:2px 0}
#matrix-v2.cm-stage .cm-term-chips{gap:4px}
#matrix-v2.cm-stage .cm-term-chips .cm-chip{font-size:11px;padding:3px 7px}
#matrix-v2.cm-stage .cm-term-chips .cm-chip small{font-size:9px}
#matrix-v2.cm-stage .cm-card-view-foot{font-size:11px;line-height:1.35}
/* A phone has no room to give and no rail to collapse, so the mode is desktop-only and
   the control that offers it goes with it. */
@media(max-width:860px){
  #matrix-v2 .cm-stage-btn{display:none}
  #matrix-v2.cm-stage .cm-layout{grid-template-columns:1fr}
  #matrix-v2.cm-stage .cm-sidebar{display:block}
  #matrix-v2.cm-stage .cm-graph-grid{grid-template-columns:1fr}
  #matrix-v2.cm-stage .cm-page-head h1,
  #matrix-v2.cm-stage .cm-page-head>div>p{display:revert}
}

/* A CELL YOU CAN TYPE IN HAS TO LOOK LIKE ONE. Paid and Quantity are editable in place, and
   a number that is silently clickable is a number nobody clicks -- so the cell carries a
   faint dotted underline that firms up on hover, the way a spreadsheet's does. Everything
   else in the row stays flat text, which is what makes these two read as different. */
#matrix-v2 .cm-cell-edit{display:inline-block;width:100%;min-height:0;padding:2px 6px;margin:-2px -6px;
  background:none;border:0;border-radius:6px;color:inherit;font:inherit;text-align:inherit;
  box-shadow:inset 0 -1px 0 #4b597580;cursor:text}
#matrix-v2 .cm-cell-edit:hover{background:#222c40;box-shadow:inset 0 -1px 0 var(--v-accent)}
#matrix-v2 .cm-cell-edit:focus-visible{outline:2px solid #9addff;outline-offset:1px}
#matrix-v2 .cm-cell-input{width:100%;min-width:70px;min-height:0;height:30px;margin:0;padding:0 7px;
  background:var(--v-field);border:1px solid var(--v-accent);border-radius:6px;color:var(--v-ink);font:inherit}
#matrix-v2 .cm-cell-input::-webkit-outer-spin-button,
#matrix-v2 .cm-cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#matrix-v2 .cm-cell-input{appearance:textfield;-moz-appearance:textfield}
/* The fold toggle sits with the other row-shaping controls, not with the filters. */
#matrix-v2 .cm-fold-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px}

/* THE COUNT STRIP. Three of the row menu's entries are a number and a yes, so they open
   this beside the menu rather than a dialog over the table: fewer, the count, more, and a
   green check that is the commit. Deliberately NOT scoped to #matrix-v2 -- the row menu is
   a popover appended to <body>, outside that subtree, which is why every .cm-menu rule
   above is unscoped too. .cm-menu makes every button a full-width block and sets a 210px
   floor, both right for a menu and wrong for four controls on one line, so both are undone
   here rather than loosened there. */
.cm-menu.cm-step{display:flex;align-items:center;gap:6px;width:max-content;min-width:0;padding:7px}
.cm-menu.cm-step button{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;
  border:1px solid #4b5975;border-radius:8px;background:#2a3448;color:#eef4fd;
  font-size:13px;line-height:1;text-align:center}
.cm-menu.cm-step button:hover{background:#354464}
/* The check is the only green in this app, which is the point: it is the one control here
   that changes anything, and it should not have to be read to be found. */
.cm-menu.cm-step .cm-step-ok{background:#2f7d51;border-color:#48b075;color:#f0fff6;font-size:16px;font-weight:700}
.cm-menu.cm-step .cm-step-ok:hover{background:#3a9963}
.cm-menu.cm-step input{width:58px;height:34px;min-height:0;margin:0;padding:0 6px;text-align:center;
  background:#2d3543;border:1px solid #5a677c;border-radius:8px;color:#eef4fd;font:inherit;font-size:14px}
.cm-menu.cm-step input:focus-visible{outline:2px solid #9addff;outline-offset:1px}
/* The browser's own spinner is a third and fourth arrow inside a control that already has
   two, pointing the other way. */
.cm-menu.cm-step input{appearance:textfield;-moz-appearance:textfield}
.cm-menu.cm-step input::-webkit-outer-spin-button,
.cm-menu.cm-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* BACK RIDES WITH THE GRAPH'S OWN CONTROLS. Inside the pane it was absolutely positioned
   over the top-right corner, which put it on top of the card's name -- and it never belonged
   to the card anyway: it undoes a move on the canvas. It is the last item in the mode row
   now, pushed to the far right, so it lands on the graph box's top-right outside corner and
   overlaps nothing. Empty when there is nowhere to go back to, and margin-left:auto on an
   empty span costs nothing. */
#matrix-v2 .cm-graph-back{margin-left:auto;display:inline-flex}

/* THE CHIPS ARE THE POINT OF THIS PANE. They were in a 138px scroller, so a card joined by
   nine terms showed four and hid the rest behind a scrollbar nobody looks for -- in a pane
   whose whole job is to say what this card is joined to. All of them, always. The heading
   sits right on top of them, and the sentence about how they stack is behind the 'i' rather
   than between the two. */
/* id-scoped so the heading's own h3 margin does not reopen the gap the chips were moved up
   to close: the chips are what the heading is announcing, and a paragraph of air between the
   two made them read as unrelated. */
#matrix-v2 .cm-chips-head{display:flex;align-items:center;gap:7px;margin:10px 0 0;line-height:1.2}
#matrix-v2 .cm-chips-head+.cm-term-chips{margin-top:0}
#matrix-v2 .cm-hint{display:inline-flex;vertical-align:middle}
#matrix-v2 .cm-hint>summary{list-style:none;cursor:help;display:inline-grid;place-items:center;
  width:17px;height:17px;border-radius:50%;border:1px solid var(--v-line-strong);
  background:var(--v-raised);color:var(--v-muted);font-size:11px;font-weight:700;
  font-style:italic;line-height:1;text-decoration:none}
#matrix-v2 .cm-hint>summary:after{content:none}
#matrix-v2 .cm-hint>summary::-webkit-details-marker{display:none}
#matrix-v2 .cm-hint[open]>summary{border-color:var(--v-accent);color:var(--v-accent)}
.cm-hint-body{width:250px;padding:10px 12px;font-size:12.5px;line-height:1.5;
  color:var(--v-muted);font-weight:400}

/* The canvas footnote belongs on the pane's bottom edge, not floating a paragraph above it.
   id-scoped because .cm-muted also sets margin, and the footnote carries both classes. */
#matrix-v2 .cm-card-view-foot{margin:auto 0 0;padding-top:8px}

/* THE STATUS FLY-OUT. Watching, Wanted, Ordered, Incoming, Owned -- the rungs a card climbs
   before it is in hand -- pop out to the left of the row menu, in order, the current one
   marked and Delete under a rule at the bottom. Each rung carries a half-line saying what it
   means, because "Wanted" and "Watching" are one word apart and a menu is not a glossary.
   Unscoped like every other .cm-menu rule: the menu is a popover on <body>. */
.cm-side-submenu{min-width:236px}
.cm-side-submenu .cm-rung,.cm-menu .cm-rung{display:grid;gap:2px}
.cm-menu .cm-rung small{display:block;font-size:11.5px;line-height:1.35;color:#9db8d8;font-weight:400;white-space:normal}
.cm-menu .cm-rung.is-current,.cm-menu .cm-rung.is-current:hover{cursor:default;background:#2a3651;color:#dfe9f7}
.cm-menu .cm-rung.is-current .cm-rung-label:before{content:'\25CF  ';color:#72baff}
.cm-menu .cm-menu-fine{padding:6px 12px 8px;font-size:11.5px;line-height:1.4;color:#9db8d8}
.cm-menu .cm-danger{color:#ffb4ab}

/* GROUP HEADERS FOLD. The heading is the whole toggle, edge to edge, so there is nothing to
   aim for; the caret says which way it is, and the count on the right says what is inside a
   folded band without opening it. */
#matrix-v2 .cm-table tr.cm-group-row td{padding:0}
#matrix-v2 .cm-group-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:9px 14px;
  background:none;border:0;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;border-radius:0}
#matrix-v2 .cm-group-toggle:hover{background:#243350}
#matrix-v2 .cm-group-toggle:focus-visible{outline:2px solid var(--v-accent);outline-offset:-2px}
#matrix-v2 .cm-group-toggle small{display:inline;margin:0 0 0 auto;font-weight:400;color:var(--v-muted);white-space:nowrap;max-width:none}
.cm-group-caret{display:inline-block;width:14px;color:var(--v-accent)}
#matrix-v2 .cm-status-line .cm-text-button{grid-column:auto;padding:0;font-size:inherit}
/* The group select sits in the toolbar with the other row-shaping controls. */
#matrix-v2 .cm-toolbar label:has(>select[name=groupPick]){min-width:170px;max-width:240px}
/* SIMULATION HISTORY on the deck page: the error rides inline beside the score, and the
   progress pill sits with the buttons that started it. */
#matrix-v2 .cm-history-table small{display:inline;margin:0;max-width:none}
#matrix-v2 .cm-history .cm-actions{align-items:center}
#matrix-v2 .cm-history .cm-pause-pill{max-width:100%;white-space:normal}
/* THE TILE'S TOP-RIGHT CORNER IS THE COMPARE TICK -- always there, so comparing is a tick
   and the Compare button rather than a link to find in each footer. The pips get a row of
   their own under the mechanic, so bracket and hand count no longer wrap around them. */
.cm-deck-tile .cm-tile-pick{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:#101725c8;border:1px solid #3a4a64;cursor:pointer}
.cm-deck-tile .cm-tile-pick:hover{border-color:var(--v-accent)}
#matrix-v2 .cm-deck-tile .cm-tile-pick input{width:18px;height:18px;min-height:0;margin:0;padding:0;cursor:pointer;accent-color:#72baff}
.cm-deck-tile.is-picked{border-color:var(--v-accent);box-shadow:0 0 0 1px var(--v-accent)}
.cm-deck-tile .cm-tile-mana{display:block;margin:0 0 2px}
.cm-deck-tile footer{flex-wrap:wrap;align-items:center}
#matrix-v2 .v-button[disabled]{opacity:.45;cursor:not-allowed}
/* The card pop-up's standing: two labelled rows of chips, wrapping on a phone. */
#matrix-v2 .cm-standing p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 8px}
#matrix-v2 .cm-standing-label{min-width:88px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-muted)}
#matrix-v2 .cm-standing .cm-chip strong{margin-left:4px}

/* ================================== BUTTON SCALE ==================================
   Three sizes and no others. A row of controls used to measure 43, 29 and 36 pixels tall
   side by side, because each module set its own padding and the glyph in the label decided
   the rest. Every .v-button is 40px; the one in a table cell is .compact at 32px; a control
   that is only an icon is .cm-icon-button at 36 square. Typed chevrons are gone from the
   labels -- a ▾ from one font and a ⌄ from another sat at different baselines and nudged
   the button height -- and the caret is a 10px inline SVG the label carries instead.
   tests/uat/geometry.mjs measures every .v-button in a shared row against its neighbours. */
#matrix-v2 .v-button{white-space:nowrap}
#matrix-v2 .v-button.compact{min-height:32px;padding:0 10px;font-size:12px}
#matrix-v2 .cm-icon-button{display:inline-grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;
  border:1px solid #3a4a64;border-radius:8px;background:#1e2a3f;color:#dfeeff;font-size:18px;line-height:1;cursor:pointer}
#matrix-v2 .cm-icon-button:hover{background:#2b3d5c}
.cm-caret{display:inline-block;width:10px;height:10px;flex:0 0 10px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.cm-caret-left{transform:rotate(90deg)}
#matrix-v2 .cm-table .v-button.compact{white-space:nowrap}
#matrix-v2 .cm-tile-menu-btn{width:36px;height:36px}

/* ================================== STATUS PILLS ==================================
   The slate .cm-badge said "this is a status" and nothing about which. Each rung of the
   ladder wears its own hue from the --st- tokens: tint at 22% behind, and the ink is the
   token lifted 30% towards white, because at 22% tint the four darker tokens fell under
   4.5:1 on their own tint (blue 3.1, grey 3.5, red 4.0, slate 4.1) -- the lift takes the
   weakest to 4.96. */
.cm-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;
  --st:var(--st-draft);background:color-mix(in srgb,var(--st) 22%,transparent);color:color-mix(in srgb,var(--st) 70%,white)}
.cm-pill.inbox{--st:var(--st-inbox)}.cm-pill.pull{--st:var(--st-pull)}.cm-pill.ordered{--st:var(--st-ordered)}
.cm-pill.buy{--st:var(--st-buy)}.cm-pill.watch{--st:var(--st-watch)}.cm-pill.draft{--st:var(--st-draft)}.cm-pill.remove{--st:var(--st-remove)}
.cm-pill strong{font-weight:800;color:inherit}
button.cm-pill{border:0;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
button.cm-pill:hover{filter:brightness(1.15)}

/* THE READINESS BAR. One line, four colours, for a deck: what is in its box, what you own
   but must pull from the bench or another box, what is on its way, and what still costs
   money. Empty segments collapse to nothing; the bar is always the deck's whole target. */
.cm-readiness{display:flex;height:8px;width:100%;border-radius:5px;overflow:hidden;background:#2a3448;gap:1px}
.cm-readiness>i{display:block;height:100%;min-width:0}
.cm-readiness .inbox{background:var(--st-inbox)}.cm-readiness .pull{background:var(--st-pull)}
.cm-readiness .ordered{background:var(--st-ordered)}.cm-readiness .buy{background:var(--st-buy)}






/* ================================== MONEY ON THE BUY LIST ==================================
   The strip above the Shop's table: the count, the sheet total, what is ordered and unpaid,
   what is left of the pool -- and the three price bands as a bar with a legend. */
.cm-shop-strip{margin:14px 0 4px;padding:14px 16px;background:#171d2a;border:1px solid #344258;border-radius:10px}
.cm-shop-money{margin:0 0 10px;font-size:14px;color:#c5d6ea;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.cm-shop-money strong{font-size:18px;font-weight:600;color:#f1f6ff;font-variant-numeric:tabular-nums}
.cm-shop-money strong.cm-over{color:var(--st-remove)}
.cm-band-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:#2a3448;gap:1px}
.cm-band-bar>i{display:block;height:100%}
.cm-band-under1{background:var(--st-inbox)}.cm-band-1to5{background:var(--st-buy)}.cm-band-over5{background:var(--st-remove)}
.cm-band-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:12px;color:var(--v-muted)}
.cm-band-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cm-band-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.cm-band-legend b{color:#e6f0ff;font-weight:700}
.cm-band-dollars{color:#f3c27b;font-weight:700}
.cm-price,.cm-cap{white-space:nowrap;font-variant-numeric:tabular-nums}
.cm-cap-local{color:#f49790}.cm-cap-local small{display:block;font-size:10px;color:#f49790;margin-top:1px;line-height:1.2}
/* The row's own verbs sit before the menu, compact, and never wrap. */
.cm-row-actions-cell{white-space:nowrap}
#matrix-v2 .cm-table .cm-row-buy{margin-right:6px}
/* 3.9 · PHONE PARITY. The same nine columns on a phone as on a desktop, so the two pages stop
   disagreeing about what shopping is. Nine columns do not fit in 390px, and they do not have
   to: the table's own wrapper scrolls sideways (the page never does), the card name stays
   pinned on the left, and the row's Bought / Ordered live under the name where a thumb
   finds them without scrolling. Prices never break mid-number and names never mid-word. */
@media(max-width:640px){
  .cm-table-shop{table-layout:auto;width:max-content;min-width:100%}
  .cm-table-shop th,.cm-table-shop td{min-width:0;width:auto;padding:9px 8px;overflow-wrap:normal;white-space:nowrap}
  .cm-table-shop td:first-child,.cm-table-shop th:first-child{position:sticky;left:0;z-index:2;background:#12161f;min-width:150px;max-width:190px;padding-left:0;white-space:normal;box-shadow:2px 0 0 #2e3850}
  .cm-table-shop tr.cm-row-card:hover td:first-child,.cm-table-shop tr.cm-row-ticked td:first-child{background:#1b2739}
  .cm-table-shop th:first-child{background:#151b28;z-index:3}
  .cm-table-shop td.cm-price,.cm-table-shop .cm-price{white-space:nowrap;min-width:56px}
  .cm-card-name span{overflow-wrap:normal;word-break:normal;letter-spacing:0}
  .cm-row-primary{display:flex;gap:6px;margin-top:6px}
  #matrix-v2 .cm-table-shop .cm-row-primary .v-button{min-height:36px;padding:0 10px;margin:0}
  .cm-table-shop td:last-child,.cm-table-shop th:last-child{width:auto}
  .cm-shop-money strong{font-size:16px}
}

/* ================================== THE DECK PAGE'S NUMBERS ==================================
   Two clusters at the ribbon's left rather than five figures spread across 1330px. */
.cm-stats.cm-deck-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px;max-width:none;margin-bottom:0;border-bottom:0;padding-bottom:12px}
.cm-stat-cluster{display:flex;flex-wrap:wrap;gap:12px 26px}
.cm-stat-cluster>div{display:flex;flex-direction:column;gap:2px}
.cm-deck-stats strong{font-size:22px;font-weight:600;margin:0;line-height:1.1;font-variant-numeric:tabular-nums}
.cm-deck-stats span{font-size:12px;color:#b0c3dc}
.cm-deck-readiness{padding:0 0 18px;border-bottom:1px solid var(--v-line);margin-bottom:20px}
.cm-deck-actions{margin-bottom:14px}
/* A tip with a close button: the note, and an × that is a real 32px target. */


#matrix-v2 
/* THE JUMP BAR: sticky under the ribbon, five section names and the run count. Under the
   phone's sticky nav it sits at the nav's height. */
.cm-jump{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;gap:2px 4px;margin:0 0 18px;padding:6px 0;background:#12161ff2;border-bottom:1px solid var(--v-line);backdrop-filter:blur(3px)}
#matrix-v2 .cm-jump-link{min-height:36px;padding:0 12px;border:0;border-radius:7px;background:none;color:#b0c3de;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
#matrix-v2 .cm-jump-link:hover{background:#253048;color:#f3f8ff}
.cm-jump-link small{font-weight:400;color:var(--v-muted);margin-left:2px}
@media(max-width:760px){.cm-jump{top:54px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}#matrix-v2 .cm-jump-link{padding:0 9px;font-size:12px}}

/* ================================== THE TILE ==================================
   The status is a pill inside the copy block, the readiness bar and its caption sit under
   it, and the footer is a three-column grid whose children never wrap. Commander initials
   stand in for missing art in the deck's own colours. */
.cm-deck-tile>button{padding-top:88px}
.cm-deck-tile .cm-pill{margin-top:6px;align-self:flex-start}
.cm-deck-tile p{margin:0 0 8px}
.cm-tile-ready{padding:0 20px 12px;display:grid;gap:6px}
.cm-tile-caption{font-size:12px;color:#c3d7ed;line-height:1.35}
.cm-deck-tile footer>span{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-width:0}
.cm-deck-tile footer>span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.cm-deck-tile .cm-tile-pick{width:32px;height:32px}
#matrix-v2 .cm-deck-tile .cm-tile-menu-btn{width:32px;height:32px;min-height:32px;font-size:16px}
.cm-deck-initials{position:absolute;inset:0;z-index:-2;display:grid;place-items:center;padding-bottom:110px;font-size:96px;font-weight:700;letter-spacing:-.04em;color:transparent;background:linear-gradient(135deg,var(--ci-a,#3a4a64),var(--ci-b,#243048));-webkit-background-clip:text;background-clip:text;opacity:.28}
.cm-deck-tile:has(.cm-deck-initials){background:#1a2233}

/* ================================== THE PULL SHEET ==================================
   Rows read colour · name · where it is · the one verb. A done row stays put, greyed. */
.cm-pull-head{align-items:flex-start}
.cm-pull-counts{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:#b4c3d9}
.cm-pull-counts span{white-space:nowrap}
.cm-pull-group{margin:0 0 22px}
.cm-pull-group h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--v-line)}
.cm-pull-n{font-size:13px;font-weight:600;color:var(--v-muted);background:#232c40;border-radius:12px;padding:2px 9px}
.cm-pull-list{list-style:none;margin:0;padding:0}
.cm-pull-row{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:48px;padding:4px 0;border-bottom:1px solid #222b3c}
.cm-pull-row.is-done{opacity:.45}
.cm-pull-row.is-done .cm-pull-name{text-decoration:line-through}
.cm-pull-tick{display:grid;place-items:center;width:34px;height:34px;cursor:pointer}
#matrix-v2 .cm-pull-tick input{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:#5cc98a;cursor:pointer}
#matrix-v2 .cm-pull-name{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#f1f6ff;text-align:left;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.cm-pull-name em{font-style:normal;color:var(--v-muted);font-weight:600}
.cm-pull-where{white-space:nowrap}
.cm-pull-done{font-size:12px;color:var(--v-muted);padding:0 10px}
.cm-pull-waiting p{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@media(max-width:640px){
  .cm-pull-row{grid-template-columns:34px auto minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:2px}
  .cm-pull-where{grid-column:2/4;grid-row:2}
  .cm-pull-row>.v-button,.cm-pull-done{grid-column:4;grid-row:1/3}
  #matrix-v2 .cm-pull-row .v-button.compact{min-height:36px}
}
@media print{
  .cm-pull{color:#000}
  .cm-pull h1{font-size:18pt;margin:0 0 4pt}
  .cm-pull-counts,.cm-pull-group h2,.cm-pull-row,.cm-pull-name,.cm-pull-where .cm-pill{color:#000!important;font-size:11pt}
  .cm-pull-group{break-inside:auto}.cm-pull-group h2{break-after:avoid;border-bottom:1.5px solid #000}
  .cm-pull-row{grid-template-columns:18px auto 1fr auto;min-height:0;padding:2pt 0;border-bottom:1px solid #bbb;break-inside:avoid}
  .cm-pull-tick{width:14px;height:14px;border:1px solid #000;border-radius:1px}
  .cm-pull-tick input,.cm-pull-row .v-button,.cm-pull-done,.cm-pull-waiting .v-button,.cm-pull-head .cm-actions{display:none!important}
  .cm-pull-row.is-done .cm-pull-tick{background:#000}
  .cm-pull-where .cm-pill{background:none!important;border:1px solid #000}
  .cm-pull-n{border:1px solid #000;background:none;color:#000}
  .cm-pull-color img{filter:grayscale(1)}
}

/* ORDERS. One row per order; the rule markers are pills, counted, never a dialog. */
.cm-orders .cm-row-actions-cell .v-button{margin:2px 6px 2px 0}
.cm-orders td{vertical-align:middle}

/* THE UPGRADE PATH PANEL. Reason column takes the width; the rest are short tokens. */
.cm-upgrades h2{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cm-up-max{font-size:13px;font-weight:400}
.cm-up-filters{margin:0 0 6px;font-size:13px}
.cm-up-table td{vertical-align:middle}
.cm-up-table td:first-child,.cm-up-table th:first-child{min-width:170px}
.cm-up-why{font-size:12px;line-height:1.4;color:#c5d6ea;min-width:220px;max-width:460px}
@media(max-width:640px){.cm-up-why{min-width:180px}}

/* THE BUDGET CARD. Figures in a row, one bar; amber past 90% of the cap, red past 100%. */
.cm-budget{margin:-6px 0 20px;padding:14px 16px;background:#171d2a;border:1px solid #344258;border-radius:10px}
.cm-budget-figures{display:flex;flex-wrap:wrap;gap:10px 28px}
.cm-budget-figures>div{display:flex;flex-direction:column;gap:2px}
.cm-budget-figures strong{font-size:18px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.cm-budget-figures span{font-size:12px;color:#b0c3dc}
.cm-budget-bar{height:6px;margin-top:10px;border-radius:4px;background:#2a3448;overflow:hidden}
.cm-budget-bar i{display:block;height:100%;background:var(--st-inbox);border-radius:4px}
.cm-budget.cm-near{border-color:#6d5c3d}.cm-budget.cm-near .cm-budget-bar i{background:var(--st-buy)}
.cm-budget.cm-over{border-color:#7a3b36}.cm-budget.cm-over .cm-budget-bar i{background:var(--st-remove)}
.cm-amber{color:#f3c27b}

/* THE RECORD CARD. Same figure row as the budget card; the last ten games as a table. */
.cm-record h2{display:flex;align-items:center;gap:10px}
.cm-record-figures{margin:0 0 6px}
.cm-record-table td{vertical-align:middle}

/* THE ROW MENU'S SECTIONS: small caps, a rule above each after the first. */
.cm-menu .cm-menu-section{margin:8px 0 2px;padding:6px 12px 2px;border-top:1px solid #3b465d;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8fa6c4}
.cm-menu .cm-side-submenu .cm-menu-section{border-top:0}

/* ================================== P2 · CONSISTENCY ==================================
   Filter chips under the search; one height for every control in the filter panel; the
   simulation history as cards on a phone; the hero's group link as a text button; the
   deep-link skeleton. */
.cm-fchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 4px}
#matrix-v2 .cm-fchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid #455a76;border-radius:20px;background:#1e3149;color:#bddeff;font:inherit;font-size:12px;cursor:pointer}
#matrix-v2 .cm-fchip:hover{background:#2a456a}
#matrix-v2 .cm-fchip strong{color:#eaf5ff;font-weight:700}
#matrix-v2 .cm-fchips .cm-text-button{font-size:12px;padding:0}
#matrix-v2 .cm-filter-panel input:not([type=checkbox]),#matrix-v2 .cm-filter-panel select{height:36px;min-height:36px;padding-top:0;padding-bottom:0}
.cm-fold-note{font-size:12px;white-space:nowrap}
#matrix-v2 .cm-hero-link{font-size:12px;padding:0;min-height:0;text-decoration:underline}
.cm-skeleton h1{opacity:.7}
@media(max-width:640px){
  .cm-history-table,.cm-history-table tbody,.cm-history-table tr,.cm-history-table td{display:block}
  .cm-history-table thead{display:none}
  .cm-history-table tr{padding:10px 0 12px;border-bottom:1px solid var(--v-line)}
  .cm-history-table td{border:0;padding:2px 0;min-width:0;display:flex;gap:10px;align-items:baseline}
  .cm-history-table td::before{content:attr(data-label);flex:0 0 96px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--v-muted)}
  /* Score and date lead: the first line a reader wants. */
  .cm-history-table td[data-label=Score]{order:-2;font-size:18px}
  .cm-history-table td[data-label=When]{order:-1}
  .cm-history-table td[data-label=Score]::before,.cm-history-table td[data-label=When]::before{content:none}
  .cm-history-table td[data-label=Report]{padding-top:8px}
}

/* ================================== P3 · POLISH ==================================
   The ribbon on the roster pages, the table rhythm, the sublabel chip, the hover art,
   editable cells, the sort glyph, the sidebar footer, the header gap, the eyebrow dot. */
.cm-stats:not(.cm-deck-stats){max-width:900px;gap:18px 32px}
#matrix-v2 .cm-table td{height:56px;vertical-align:middle}
#matrix-v2 .cm-table td.cm-row-actions-cell{vertical-align:middle}
#matrix-v2 .cm-table td:first-child small{display:inline-block;margin:0 0 0 8px;padding:1px 7px;border-radius:5px;background:#243048;color:#aebfd6;font-size:10.5px;line-height:1.5;max-width:none;vertical-align:middle}
.cm-hover-art{position:fixed;z-index:70;width:180px;aspect-ratio:488/680;border-radius:9px;box-shadow:0 12px 34px #000b;pointer-events:none;background:#1b2740}
#matrix-v2 .cm-cell-edit{box-shadow:none;border-bottom:1px dotted #5a677c;border-radius:0;padding-right:16px;position:relative}
#matrix-v2 .cm-cell-edit::after{content:'\270E';position:absolute;right:2px;top:1px;font-size:11px;color:var(--v-accent);opacity:0}
#matrix-v2 .cm-cell-edit:hover{background:none;border-bottom-color:var(--v-accent)}
#matrix-v2 .cm-cell-edit:hover::after{opacity:1}
.cm-table th .cm-sort-idle{opacity:0;transition:opacity .12s}
.cm-table th:hover .cm-sort-idle{opacity:.8}
.cm-nav-note,.cm-nav-note p,.cm-nav-note strong,.cm-nav-note .cm-text-button,.cm-nav-note .cm-data-age{font-size:12px;color:#a3b8d3}
.cm-nav-note strong{font-weight:600}
.cm-nav-note .cm-text-button{color:#8cc9ff}
.cm-user-menu{gap:12px}
.cm-eyebrow-warm:before{letter-spacing:0}
@media(max-width:640px){#matrix-v2 .cm-table-shop td{height:auto}}

/* ================================== DISCOVER · THE LIST TAB ==================================
   Two tabs at the top of the pane. While List is open the pane widens and the canvas keeps
   the rest; in presentation mode the pane is narrower and the list drops Price and Add/Buy. */
.cm-pane-tabs{display:flex;gap:4px;margin:0 0 10px;border-bottom:1px solid var(--v-line)}
#matrix-v2 .cm-pane-tab{min-height:36px;padding:0 14px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;background:none;color:var(--v-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#matrix-v2 .cm-pane-tab:hover{color:var(--v-ink);background:#243048}
#matrix-v2 .cm-pane-tab.is-on{color:var(--v-ink);border-bottom-color:var(--v-accent)}
#cm-pane-body{display:flex;flex-direction:column;gap:8px;min-height:0}


.cm-list-head p{margin:0 0 6px;font-size:13px}
.cm-list-wrap{margin:4px 0;border-top:0}
#matrix-v2 .cm-list-table td{height:44px;padding:6px 7px;font-size:13px;min-width:0;vertical-align:middle}
#matrix-v2 .cm-list-table td.cm-price{white-space:nowrap}
#matrix-v2 .cm-list-table th{padding:6px 8px;min-width:0}
#matrix-v2 .cm-list-table td:first-child,#matrix-v2 .cm-list-table th:first-child{min-width:0;width:34px}
#matrix-v2 
#matrix-v2 .cm-list-table td:last-child,#matrix-v2 .cm-list-table th:last-child{min-width:0}
#matrix-v2 .cm-list-name{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#f1f6ff;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.cm-list-row.is-on td{background:#1e2c43}



#matrix-v2 .cm-list-buy .cm-card-view-menu-btn{min-height:32px;padding:0 10px;font-size:12px;white-space:nowrap}
.cm-list-buy .cm-inline-menu-body{right:0;left:auto}
.cm-list-paging{margin:2px 0;font-size:12px}
#matrix-v2 .cm-list-paging .v-button{min-height:32px}
#matrix-v2 .cm-list-table .cm-tick-cell input{width:17px;height:17px;min-height:0;margin:0}
#matrix-v2.cm-stage 


/* List rework: four columns, a pip for colour, the join label, an in-place detail row. */
.cm-list-row{cursor:pointer}.cm-list-row:hover td{background:#1a2538}
.cm-list-table{table-layout:fixed;width:100%}#matrix-v2 .cm-list-table th.cm-tick-cell{width:26px}.cm-list-table th.cm-col-link{width:27%}.cm-list-table th.cm-col-color{width:50px}.cm-list-table th.cm-col-price{width:60px}#matrix-v2 .cm-list-table th.cm-col-buy{width:36px}
.cm-list-name{font-size:13px;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.cm-list-link{white-space:nowrap;color:#c5d6ea;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.cm-list-color .cm-colors{display:inline-flex}.cm-list-color .cm-pip{width:18px;height:18px}.cm-list-color .cm-color{width:16px;height:16px}
.cm-pip-multi{border-radius:50%;box-shadow:0 0 0 1px #ffffff22,0 1px 3px #0006}
#matrix-v2 .cm-buy-caret{width:32px;min-width:32px;min-height:32px;padding:0;justify-content:center}.cm-buy-caret .cm-caret{width:12px;height:12px}
.cm-list-table td.cm-list-buy{padding-left:2px;padding-right:2px}
.cm-list-detail td{padding:8px 12px 12px 42px;background:#18243a;border-bottom:1px solid var(--v-line)}
.cm-list-pop h4{margin:8px 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8}.cm-list-pop p{margin:4px 0;font-size:13px}.cm-list-pop .cm-actions{margin-top:8px}
#matrix-v2 .cm-list-pop .cm-actions .v-button{min-height:32px;padding:5px 10px;font-size:12px}
@media(max-width:760px){.cm-list-detail td{padding-left:12px}}

/* The divider between canvas and pane, and the columns the list sheds as the pane narrows. */
.cm-pane-gutter{cursor:col-resize;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center;border-radius:6px;min-height:0}
.cm-pane-gutter i{width:4px;height:44px;border-radius:2px;background:#3a4a64;pointer-events:none}
.cm-pane-gutter:hover,.cm-pane-gutter:focus-visible,.cm-pane-gutter.is-dragging{background:#1e2a3f;outline:0}
.cm-pane-gutter:hover i,.cm-pane-gutter:focus-visible i,.cm-pane-gutter.is-dragging i{background:#79bdff}
.cm-pane-gutter.is-dragging{cursor:col-resize}
@media(max-width:1050px){.cm-pane-gutter{display:none}#matrix-v2.cm-stage .cm-pane-gutter{display:flex}}
@media(max-width:860px){#matrix-v2.cm-stage .cm-pane-gutter{display:none}}
.cm-universe-hint{display:inline-flex;vertical-align:middle;margin:0 0 0 2px}.cm-universe-body{width:min(420px,calc(100vw - 40px))}.cm-universe-body h4{margin:0 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8}.cm-universe-body p{padding:0;margin:0 0 8px;font-size:13px;line-height:1.5;color:#dbe7f7}.cm-universe-body p:last-child{margin-bottom:0}.cm-facet-status{align-items:center}

/* THE FILTERS ARE A DROPDOWN, NOT A DRAWER. The panel floats over the page under the
   Filters bar -- anchored to it, full width of the toolbar, its own scroll past 70vh --
   so opening it moves nothing else on the page and closing it (Done, Escape, or a click
   anywhere outside) puts the reader back exactly where they were. The bar itself is a
   size smaller: a trigger, not a heading. */
.cm-facet-drop-host{position:relative;padding:0 14px}
.cm-facet-drop-host>summary{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 0;font-size:13px;list-style:none}
.cm-facet-drop-host>summary::-webkit-details-marker{display:none}
.cm-facet-drop-host>summary .cm-caret{margin-left:auto;transition:transform .15s}
.cm-facet-drop-host[open]>summary .cm-caret{transform:rotate(180deg)}
.cm-facet-drop-host[open]{padding-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.cm-facet-drop{position:absolute;left:-1px;right:-1px;top:100%;z-index:25;background:#171d2af8;border:1px solid #4a6a95;border-top-color:#344258;border-radius:0 0 10px 10px;box-shadow:0 18px 44px #000b;backdrop-filter:blur(4px);max-height:min(70vh,760px);overflow:auto;padding:0 14px 14px}
.cm-facet-drop .cm-facet-mode{position:sticky;top:0;z-index:1;margin:0 -14px 8px;padding:10px 14px;background:#171d2a;border-bottom:1px solid #2b3549}
.cm-facet-drop-tools{margin-left:auto;display:inline-flex;gap:8px}
/* Flowing columns rather than a grid: an open group grows down its own column and the
   others pack around it, so opening Color does not punch a hole beside Role. */
.cm-facet-drop .cm-filter-panel{margin:0;padding:0;border:0;background:none;display:block;columns:6 160px;column-gap:14px}
.cm-facet-drop .cm-filter-panel>.cm-details{break-inside:avoid;margin:0 0 6px}
.cm-facet-drop .cm-filter-panel>.cm-details{border:0;border-left:2px solid #2b3549;border-bottom:1px solid #222c3d;border-radius:0 0 0 4px;background:none;padding:0 0 0 10px}
.cm-facet-drop .cm-filter-panel>.cm-details>summary{padding:8px 0;font-size:13px;font-weight:600}
.cm-facet-drop .cm-filter-panel>.cm-details[open]{padding-bottom:8px;border-left-color:#79bdff}
.cm-facet-drop .cm-facet-values{margin-top:4px}
.cm-facet-drop .cm-facet-list{max-height:220px}
.cm-facet-drop .cm-search input{min-height:32px;font-size:13px}
@media(max-width:760px){.cm-facet-drop{left:-1px;right:-1px;max-height:75vh}.cm-facet-drop .cm-filter-panel{columns:1}.cm-facet-drop .cm-facet-mode{flex-wrap:wrap}.cm-facet-drop-tools{margin-left:0}}

/* Lands only: no canvas, the list takes the whole grid, the reach sliders go. */
.cm-graph-grid.cm-lands-mode{grid-template-columns:1fr}
.cm-lands-mode .cm-graph-col,.cm-lands-mode .cm-pane-gutter,.cm-lands-mode .cm-pane-tabs{display:none}
.cm-lands-mode .cm-card-view{height:auto!important;min-height:0}
#matrix-v2.cm-lands .cm-graph-reach,#matrix-v2.cm-lands .cm-graph-modes{display:none}
.cm-lands-mode .cm-list-table th.cm-col-link{width:120px}
@media(max-width:760px){.cm-lands-mode .cm-list-table th.cm-col-link{width:96px}}
/* THE WORKING LIST on the deck page, and the two slot flags wherever a deck card is shown. */
.cm-badge-option{background:#4a3a1a;color:#ffd166}.cm-working .cm-grid-2{margin-bottom:0}.cm-working h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}.cm-working h3 small{font-weight:400;font-size:13px}.cm-working-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}.cm-working-list li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px}.cm-working-list li .cm-muted{flex-basis:100%;line-height:1.35}.cm-working-list .v-button{padding:3px 10px;min-height:0;font-size:12px}
/* THE DECK SUMMARY CARD: Progress beside Cost, one border, one amber/red tone for the cap. */
.cm-deck-summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin:0 0 20px;background:#171d2a;border:1px solid #344258;border-radius:12px;overflow:hidden}
.cm-summary-col{padding:16px 18px 14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cm-summary-col+.cm-summary-col{border-left:1px solid #2b3549}
.cm-summary-col h3{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fc3e8;font-weight:700}
.cm-summary-figures{display:flex;flex-wrap:wrap;gap:10px 26px}
.cm-summary-figures>div{display:flex;flex-direction:column;gap:2px}
.cm-summary-figures strong{font-size:22px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.cm-summary-figures span{font-size:12px;color:#b0c3dc}
.cm-deck-summary 
.cm-deck-summary .cm-budget-bar{margin-top:auto}
.cm-deck-summary.cm-near .cm-summary-cost{background:#2a2410}.cm-deck-summary.cm-over .cm-summary-cost{background:#3a1d1d}
.cm-deck-hero .cm-deck-actions{margin-bottom:0;gap:8px}
@media(max-width:760px){.cm-deck-summary{grid-template-columns:1fr}.cm-summary-col+.cm-summary-col{border-left:0;border-top:1px solid #2b3549}}
/* HOVER ART is a box now: the picture, and a spinner while it is on its way. */
.cm-hover-art{position:fixed;z-index:70;width:180px;aspect-ratio:488/680;border-radius:9px;box-shadow:0 12px 34px #000b;pointer-events:none;background:#1b2740;overflow:hidden}
.cm-hover-art img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .15s}
.cm-hover-art.is-loading img{opacity:0}
.cm-hover-art .cm-spinner{display:none;position:absolute;inset:0;margin:auto;width:30px;height:30px;border:3px solid #ffffff2e;border-top-color:#9addff;border-radius:50%;animation:cm-spin .8s linear infinite}
.cm-hover-art.is-loading .cm-spinner{display:block}
@keyframes cm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cm-hover-art .cm-spinner{animation:none}}
/* THE DISCOVER LIST'S OPEN ROW is one line: type, its joins and terms, the buttons at the end. */
.cm-list-pop-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:8px 0}
.cm-list-pop-row>p,.cm-list-pop-row>div,.cm-list-pop-row>h4{margin:0}
.cm-list-pop-row h4{display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8;margin:0 -10px 0 0}
.cm-list-pop-row .cm-term-chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.cm-list-pop-row .cm-term-chips .cm-chip{flex-direction:row;align-items:center;gap:6px;padding:3px 8px;min-height:0}
.cm-list-pop-row .cm-actions{margin:0 0 0 auto;gap:6px}
.cm-list-pop-row .cm-actions .v-button,.cm-list-pop-row .cm-actions .v-button.is-on{min-height:32px;padding:0 11px;font-size:12px}
.cm-list-pop-row .cm-actions .v-button{background:#34485f;border-color:#5b7196;color:#f6faff}
.cm-list-pop-row .cm-actions .v-button.primary{background:#8cc7ff;color:#081320;border-color:#8cc7ff}
/* THE DISCOVER FILTER BAR: facets grouped by what they ask about, each a button to a dialog; a
   single-value facet is the toggle itself; the badge is the number of picks in that facet. */
.cm-facet-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:6px 0 10px;padding:10px 14px;background:#171d2a;border:1px solid #344258;border-radius:10px}
.cm-facet-bar-head{display:inline-flex;align-items:baseline;gap:8px;font-size:13px;margin-right:4px}
.cm-facet-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding-right:12px;border-right:1px solid #2b3549}
.cm-facet-group:last-of-type{border-right:0}
.cm-facet-group-name{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8fb0d4;margin-right:2px}
.cm-facet-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid #39465f;border-radius:7px;background:#202638;color:#e6f0ff;font:inherit;font-size:12.5px;cursor:pointer;width:auto;text-align:left}
.cm-facet-btn:hover{background:#2b3d5c;border-left-color:#39465f}
.cm-facet-btn.is-on{background:#ffd16622;border-color:#ffd166;color:#ffe9b3}
.cm-facet-btn.is-not{background:#5a262e5c;border-color:#d8807f;color:#ffd3cd}
.cm-facet-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ffd166;color:#1b1b1b;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.cm-facet-n:empty{display:none}
.cm-facet-bar .cm-facet-drop-tools{margin-left:auto}
.cm-facet-status #cm-facet-chips{min-height:30px}
/* The facet dialog: its options as pills, A to Z, wrapped; the all/any rule and the two buttons in a footer. */
.cm-facet-dialog{display:grid;gap:12px}
.cm-facet-help{margin:0}
.cm-facet-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:min(52vh,520px);overflow:auto;padding:2px}
.cm-facet-grid .cm-facet-pick{width:auto;border:1px solid #39465f;border-radius:20px;padding:5px 10px;background:#1e2a3f;gap:6px;min-height:32px}
.cm-facet-grid .cm-facet-pick:hover{border-color:#79bdff;background:#243248}
.cm-facet-grid .cm-facet-pick.is-on{border-color:#ffd166;background:#ffd16622}
.cm-facet-grid .cm-facet-pick.is-not{border-color:#d8807f;background:#5a262e5c}
.cm-facet-dialog-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #2b3549;padding-top:12px}
.cm-facet-dialog .cm-facet-mode{margin:0}
@media(max-width:640px){.cm-facet-group{border-right:0;padding-right:0}.cm-facet-bar .cm-facet-drop-tools{margin-left:0}}
.cm-facet-dialog-foot .cm-checkbox,.cm-facet-dialog-foot .cm-facet-mode>span{white-space:nowrap}
/* THE SPREADSHEET: the Master's grid, sticky on three sides. Numbers are buttons that turn
   into inputs in place; a deck's two columns share a tint so T and A read as a pair. */
.cm-sheet-wrap{overflow:auto;max-height:calc(100vh - 150px);border:1px solid #2b3549;border-radius:10px;margin:14px 0;background:#131a27}
#matrix-v2 .cm-sheet{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
#matrix-v2 .cm-sheet th,#matrix-v2 .cm-sheet td{padding:0;min-width:0;height:auto;border-bottom:1px solid #222c3d;border-right:1px solid #1d2636;vertical-align:middle;background:#131a27}
#matrix-v2 .cm-sheet thead th{position:sticky;top:0;z-index:3;background:#151b28;padding:6px 8px;font-size:11px;letter-spacing:.03em;color:#b5c9e5;text-align:center!important;white-space:nowrap;border-bottom:1px solid #2b3549}
#matrix-v2 .cm-sheet thead tr:first-child th{height:48px}
#matrix-v2 .cm-sheet thead tr+tr th{top:48px;height:26px;padding:2px 6px}
#matrix-v2 .cm-sheet .cm-sheet-name{position:sticky;left:0;z-index:2;background:#151b28;text-align:left!important;min-width:200px;max-width:260px;padding:4px 10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #2b3549}
#matrix-v2 .cm-sheet thead .cm-sheet-name,#matrix-v2 .cm-sheet tfoot .cm-sheet-name{z-index:4}
#matrix-v2 .cm-sheet .cm-sheet-name .cm-card-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:none;color:#e6f0ff;font:inherit;font-weight:700;text-align:left;cursor:pointer}
#matrix-v2 .cm-sheet .cm-sheet-name .cm-card-name:hover{color:#fff;text-decoration:underline}
#matrix-v2 .cm-sheet tfoot th,#matrix-v2 .cm-sheet tfoot td{position:sticky;bottom:0;z-index:3;background:#1a2233;font-weight:700;padding:7px 8px;text-align:right!important;border-top:2px solid #2f3b52;color:#e6f0ff}
#matrix-v2 .cm-sheet tfoot .cm-sheet-name{text-align:left!important;background:#1a2233}
#matrix-v2 .cm-sheet .cm-sheet-num{text-align:right!important;min-width:56px;padding:0 6px;color:#d9e6f5}
#matrix-v2 .cm-sheet td.cm-sheet-num{padding:0}
#matrix-v2 .cm-sheet td.cm-sheet-num:not(.cm-sheet-live){padding:0 8px}
#matrix-v2 .cm-sheet .cm-sheet-alt{background:#171f2e}
#matrix-v2 .cm-sheet thead .cm-sheet-alt{background:#1b2333}
#matrix-v2 .cm-sheet tfoot .cm-sheet-alt{background:#1f2839}
#matrix-v2 .cm-sheet .cm-sheet-deck-name{display:block;font-weight:700;letter-spacing:0;font-size:12px;color:#e6f0ff;max-width:150px;white-space:normal;line-height:1.15;text-transform:none}
#matrix-v2 .cm-sheet thead th small{display:block;font-weight:400;font-size:10px;color:#8fa6c4;letter-spacing:0;margin-top:2px}
#matrix-v2 .cm-sheet th .cm-sheet-sort{display:inline-flex;gap:4px;align-items:center;min-height:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:inherit}
#matrix-v2 .cm-sheet th[aria-sort] .cm-sheet-sort{color:#fff}
#matrix-v2 .cm-sheet-cell{display:block;width:100%;min-height:36px;padding:6px 8px;margin:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;cursor:cell}
#matrix-v2 .cm-sheet-cell:hover{background:#222c40;box-shadow:inset 0 0 0 1px #4a6a94}
#matrix-v2 .cm-sheet-cell:focus-visible{outline:2px solid #9addff;outline-offset:-2px}
#matrix-v2 .cm-sheet-input{width:100%;min-width:56px;min-height:36px;padding:4px 6px;margin:0;border:0;border-radius:0;background:#243652;color:#fff;font:inherit;text-align:right;box-shadow:inset 0 0 0 2px #9addff}
.cm-sheet-zero{color:#4c5b73}
#matrix-v2 .cm-sheet .is-short,#matrix-v2 .cm-sheet .is-short .cm-sheet-cell{color:#ffd166}
#matrix-v2 .cm-sheet .is-done .cm-sheet-cell{color:#8fe3a8}
.cm-sheet-pend{font-size:10px;color:#9addff;margin-left:2px;vertical-align:super;font-weight:600}
.cm-sheet-opt{color:#ffd166;font-size:8px;margin-left:3px;vertical-align:middle}
.cm-sheet-opt.cm-sheet-pinned{color:#9addff}
#matrix-v2 .cm-sheet .cm-sheet-muted{color:#4c5b73;text-align:center!important;padding:0 8px}
#matrix-v2 .cm-sheet .cm-sheet-empty{padding:18px 14px;text-align:left!important}
.cm-sheet-notes{margin:0 0 12px 18px;padding:0;line-height:1.5;font-size:13px}
@media(max-width:640px){#matrix-v2 .cm-sheet .cm-sheet-name{min-width:132px;max-width:150px;font-size:12px}.cm-sheet-wrap{max-height:calc(100vh - 120px)}#matrix-v2 .cm-sheet .cm-sheet-num{min-width:48px}}
/* STAND-INS: a copy filling a seat while the real card is on its way. Hatched wherever the
   status colours appear, so it reads as a placeholder over the solid segments. */
:root{--st-standin:#c39bff}
.cm-readiness{position:relative}
.cm-readiness .standin{position:absolute;top:0;bottom:0;border-radius:2px;pointer-events:none;background:repeating-linear-gradient(135deg,var(--st-standin) 0 3px,rgba(10,14,24,.55) 3px 6px)}

.cm-pill.standin{--st:var(--st-standin)}
.cm-badge-standin{background:#3a2a5a;color:#e2ccff}
.cm-sheet-sub{font-size:10px;color:var(--st-standin);margin-left:2px;vertical-align:super;font-weight:700}
.cm-pull-group[data-group=standin] .cm-pull-row.is-stay{opacity:.7}
.cm-pull-stay-note{font-size:12px;color:#9db8d8;margin:-6px 0 10px;line-height:1.5}
/* HOW A DECK COMES TOGETHER: six nodes on one line, text under each, the first node split
   between the two ways in. On a phone the line runs down the left. */
.cm-how-link{display:inline-flex;align-items:center;min-height:32px;padding:0 2px;font-weight:400;font-size:13px;color:#8cc9ff;text-decoration:underline;text-underline-offset:3px;margin-left:12px;white-space:nowrap;vertical-align:middle}
.cm-how-link:hover{color:#fff}
.cm-how-flow{--how-a:#4fc2c0;--how-b:#3b7dd8;--how-above:96px;--how-node:48px;list-style:none;margin:28px 0 0;padding:0 8px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px;position:relative}
.cm-how-flow::before{content:'';position:absolute;left:calc(8.33% + 8px);right:calc(8.33% + 8px);top:calc(var(--how-above) + var(--how-node)/2 - 1px);height:2px;background:#344258;z-index:0}
.cm-how-step{display:grid;grid-template-rows:var(--how-above) var(--how-node) auto;justify-items:center;align-content:start;text-align:center;position:relative;z-index:1;min-width:0}
.cm-how-above{display:block}
.cm-how-node{width:var(--how-node);height:var(--how-node);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#0b1220;background:var(--v-accent,#72baff);box-shadow:0 0 0 6px #0f1524}
.cm-how-node-split{background:linear-gradient(to bottom,var(--how-a) 50%,var(--how-b) 50%)}
.cm-how-node-done{background:#f0b35a}
.cm-how-title{margin-top:12px;font-weight:700;font-size:16px;color:#e6f0ff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#4a6a94}
.cm-how-title:hover{color:#fff;text-decoration-color:#fff}
.cm-how-step p{margin:6px 0 0;font-size:13px;line-height:1.45;color:#b5c9e5;max-width:19ch}
.cm-how-split{grid-template-areas:"a" "node" "b" "shared";grid-template-rows:var(--how-above) var(--how-node) auto auto}
.cm-how-path{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;text-decoration:none;color:#e6f0ff;font-size:13px;line-height:1.4;max-width:21ch;text-align:center}
.cm-how-path strong{font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#4a6a94}
.cm-how-path span{color:#b5c9e5}
.cm-how-path:hover strong{color:#fff;text-decoration-color:#fff}
.cm-how-path-a{grid-area:a;padding-bottom:10px}.cm-how-path-a::after{content:'';display:block;width:2px;height:14px;background:var(--how-a);margin-top:6px}
.cm-how-path-a strong{color:var(--how-a)}
.cm-how-path-b{grid-area:b;justify-content:flex-start;padding-top:10px}.cm-how-path-b::before{content:'';display:block;width:2px;height:14px;background:var(--how-b);margin-bottom:6px;order:-1}
.cm-how-path-b strong{color:var(--how-b)}
.cm-how-split .cm-how-node{grid-area:node}
.cm-how-shared{grid-area:shared;margin:10px 0 0;font-size:12px;color:#9db8d8;max-width:22ch;line-height:1.45}
.cm-how-ladder{margin:44px 0 0;padding:22px 24px;border:1px solid #2b3549;border-radius:12px;background:#131a27}
.cm-how-ladder h2{margin:0 0 14px;font-size:16px}
.cm-how-rungs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 8px;align-items:stretch}
.cm-how-rungs li{display:flex;flex-direction:column;gap:3px;flex:1 1 150px;min-width:0;padding:10px 12px;border-radius:9px;background:#1a2233;position:relative}
.cm-how-rungs li+li::before{content:'›';position:absolute;left:-9px;top:10px;color:#4a6a94;font-size:16px}
.cm-how-rungs strong{font-size:14px;color:#e6f0ff}
.cm-how-rungs span{font-size:12px;color:#b5c9e5;line-height:1.4}
.cm-how-note{margin:14px 0 0;font-size:12px}
@media(max-width:820px){
  .cm-how-flow{grid-template-columns:1fr;gap:18px 0;padding:0 0 0 6px;--how-above:0px}
  .cm-how-flow::before{left:calc(var(--how-node)/2 + 6px - 1px);right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .cm-how-step{grid-template-columns:var(--how-node) 1fr;grid-template-rows:auto auto;gap:0 16px;justify-items:start;text-align:left}
  .cm-how-above{display:none}
  .cm-how-step .cm-how-node{grid-row:1/3}
  .cm-how-title{margin-top:12px;grid-column:2}
  .cm-how-step p{grid-column:2;max-width:none}
  .cm-how-split{grid-template-areas:"node a" "node b" "node shared";grid-template-columns:var(--how-node) 1fr;grid-template-rows:auto auto auto}
  .cm-how-node-split{background:linear-gradient(to right,var(--how-a) 50%,var(--how-b) 50%)}
  .cm-how-path{align-items:flex-start;text-align:left;max-width:none;padding:0}
  .cm-how-path-a::after,.cm-how-path-b::before{display:none}
  .cm-how-path-b{margin-top:10px}
  .cm-how-shared{max-width:none}
  .cm-how-link{display:inline-flex;margin:2px 0 0 0}
  .cm-how-rungs li{flex-basis:100%}
  .cm-how-rungs li+li::before{display:none}
}
/* THE COUNTS ROW: seven numbers in the order a deck is built, each under its state's colour. */
:root{--st-reserved:#8fb3ff;--st-physical:#3fae7a}
.cm-stats.cm-stats-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:stretch;max-width:none}
.cm-stats-row .cm-stat-have,.cm-stats-row .cm-stat-coming,.cm-stats-row .cm-stat-considering{margin-left:8px}
@media(max-width:1000px){.cm-stats.cm-stats-row{grid-template-columns:repeat(4,minmax(0,1fr))}.cm-stats-row .cm-stat-have,.cm-stats-row .cm-stat-coming,.cm-stats-row .cm-stat-considering{margin-left:0}}
.cm-stats-row .cm-stat{min-width:0;box-sizing:border-box;padding:10px 12px 9px;border-radius:10px;background:#151c2a;border:1px solid #2b3549;border-top:3px solid var(--st,#4a6a94)}
.cm-stats-row .cm-stat strong{display:block;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;color:#f2f6fb}
.cm-stats-row .cm-stat span{display:block;margin-top:3px;font-size:12px;color:#9db8d8;white-space:nowrap}
.cm-stat-plan{--st:var(--st-reserved)}.cm-stat-have{--st:var(--st-inbox)}.cm-stat-subs{--st:var(--st-standin)}.cm-stat-physical{--st:var(--st-physical)}.cm-stat-coming{--st:var(--st-ordered)}.cm-stat-missing{--st:var(--st-buy)}.cm-stat-considering{--st:var(--st-watch,#9aa6ba)}
/* THE ROSTER USES THE WIDTH IT HAS: the deck name on one line, the card name with room. */
#matrix-v2 .cm-table td.cm-col-deck,#matrix-v2 .cm-table th.cm-col-deck{white-space:nowrap}
#matrix-v2 .cm-table td.cm-col-name,#matrix-v2 .cm-table th.cm-col-name{min-width:190px}
/* Ten columns on one screen: cells keep 9px of side padding and no blanket minimum, so the
   narrow columns take what their content needs and the Card and Deck columns keep theirs.
   Below 1380px the action cell may stack its buttons before the table asks to scroll. */
#matrix-v2 .cm-table th,#matrix-v2 .cm-table td{padding:11px 9px;min-width:0}
#matrix-v2 .cm-table td.cm-col-paid,#matrix-v2 .cm-table td.cm-col-quantity{min-width:72px}
#matrix-v2 .cm-table .cm-row-actions-cell .v-button{margin:2px 6px 2px 0}
@media(max-width:1380px){#matrix-v2 .cm-table td.cm-row-actions-cell{white-space:normal}}
#matrix-v2 .cm-table td.cm-col-placement,#matrix-v2 .cm-table th.cm-col-placement{white-space:nowrap}
/* DECK TILES WEAR THEIR STAGE: green while defining, blue under half in the physical deck,
   purple past half, gold when complete. */
.cm-deck-tile.cm-stage-defining{border-color:#3fae7a}
.cm-deck-tile.cm-stage-building{border-color:#3b7dd8}
.cm-deck-tile.cm-stage-playable{border-color:#8a5cf6}
.cm-deck-tile.cm-stage-complete{border-color:#f0b35a;box-shadow:0 0 0 1px #f0b35a55}
@media(max-width:640px){.cm-stats.cm-stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-stats-row .cm-stat strong{font-size:20px}#matrix-v2 .cm-table td.cm-col-name,#matrix-v2 .cm-table th.cm-col-name{min-width:0}}

/* A select is as wide as its longest option unless told otherwise; in the two-column form
   grid that let "What does this input represent?" paint across "Collection group". */
#matrix-v2 .cm-form-grid select{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
#matrix-v2 .cm-form-grid>label{min-width:0}

/* SHARE: the header button behaves like Take a Tour (icon only under 1050px) and the QR
   dialog puts the symbol on white with its quiet zone, big enough to scan from a phone. */
@media(max-width:1050px){#matrix-v2 .cm-share-btn .cm-btn-label,#matrix-v2 .cm-share-btn .cm-btn-chevron{display:none}}
.cm-qr{display:grid;justify-items:center;gap:14px;text-align:center}
.cm-qr-code{width:min(72vw,340px);max-width:100%;aspect-ratio:1;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0008;overflow:hidden}
.cm-qr-code svg{display:block;width:100%;height:100%}
.cm-qr-link{margin:0;font-size:15px;word-break:break-all}.cm-qr-link a{color:#8ecbff}
.cm-qr .cm-note{text-align:left;margin:4px 0 0;max-width:460px}
/* DECK LAB, Starting point: the instruction on the left, the control on the right, clear
   space between them; on a narrow screen the control drops under the sentence, still right. */
#matrix-v2 .cm-lab-start>label.cm-start-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px}
#matrix-v2 .cm-start-label .cm-start-control{margin:0 0 0 auto}

/* DECK LAB, Existing deck: the three ways the 99 is defined, as one radio group. */
.cm-list-source{border:1px solid #38465e;border-radius:8px;padding:8px 12px 10px;margin:12px 0 0;display:grid;gap:4px;min-width:0}
.cm-list-source legend{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#bdd6f2;padding:0 4px}
.cm-list-source-opt{display:flex;gap:10px;align-items:flex-start;min-height:34px;padding:4px 2px;border-radius:6px;cursor:pointer}
.cm-list-source-opt:hover{background:#243248}
#matrix-v2 .cm-list-source-opt input{margin:3px 0 0;width:16px;height:16px;min-height:0;flex:0 0 16px}
.cm-list-source-opt strong{display:block;font-size:13px}.cm-list-source-opt small{display:block;color:#9db8d8;font-size:12px;line-height:1.4}

/* ONE COLOUR PER STATE, EVERYWHERE. Reserved is the light blue of the counts row's Reserved
   tile, on the Collection's Allocation pill and on the card pop-up's deck chips alike. */
.cm-pill.reserved{--st:var(--st-reserved)}
/* The dialog's title row and its close button stay put while the rest scrolls. */
#matrix-v2 .cm-dialog-head{position:sticky;top:0;z-index:3;background:#171d2a;margin:-25px -25px 20px;padding:25px 25px 12px}
/* THE PAGE NAME IS THE HEADING: one row, the name and its "?" on the left, the actions on the
   right; a crumb above a page that belongs to another (a deck, its Ready to add list). */
.cm-page-title{display:flex;align-items:center;gap:12px;min-width:0}
.cm-page-title h1{margin:0}
#matrix-v2 .cm-help-btn{width:34px;min-width:34px;min-height:34px;padding:0;border-radius:50%;font-weight:700;font-size:15px;flex:0 0 auto}
.cm-crumb{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a9bdd7;text-decoration:none}
.cm-crumb:after{content:'›';font-size:14px}
.cm-crumb:hover{color:#fff}
.cm-crumb+.cm-crumb{margin-left:8px}
.cm-deck-hero .cm-crumb{color:#dbe7f7;position:relative}
.cm-deck-hero .cm-help-btn{margin-left:auto}
.cm-toolbar-split>.cm-how-link{margin-left:0}
/* SIX FILTERS IN VIEW; the fold spans the panel and opens onto the same grid. */
.cm-filter-panel>.cm-more-filters{grid-column:1/-1;border:0;padding:0;background:none}
.cm-more-filters>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:13px;font-weight:600;color:#8cc9ff}
.cm-more-filters>summary::-webkit-details-marker{display:none}
.cm-more-filters>summary:before{content:'▸';font-size:12px}
.cm-more-filters[open]>summary:before{content:'▾'}
.cm-more-filters>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px 18px;align-items:end;padding-top:10px}
@media(max-width:760px){.cm-more-filters>div{grid-template-columns:1fr}}
.cm-terms-row{margin:6px 0 0}
/* THE CARDS PAGE: three tabs under the name, and a Table | Sheet switch at the end of the toolbar. */
.cm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--v-line);margin:0 0 16px;overflow-x:auto}
.cm-tabs [role=tab]{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:#b0c3de;font:inherit;font-weight:600;padding:8px 14px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cm-tabs [role=tab] small{font-weight:500;font-size:12px;color:#8fa6c4}
.cm-tabs [role=tab][aria-selected=true]{color:#f3f8ff;border-bottom-color:#79bdff}
.cm-tabs [role=tab][aria-selected=true] small{color:#c3d7ed}
.cm-tabs [role=tab]:hover{color:#fff}
.cm-seg{display:inline-flex;border:1px solid #39465f;border-radius:8px;overflow:hidden;align-self:end}
.cm-seg button{background:#202638;color:#b0c3de;border:0;font:inherit;font-weight:600;padding:0 14px;min-height:40px;cursor:pointer}
.cm-seg button+button{border-left:1px solid #39465f}
.cm-seg button[aria-pressed=true]{background:#243d61;color:#f3f8ff}
.cm-seg button:hover{color:#fff}
@media(max-width:760px){.cm-tabs [role=tab]{padding:8px 10px}}
/* THE NAV OPENS THE PAGE YOU ARE ON: its sub-pages sit under the entry, indented, the current
   one marked. On a phone the nav is a row and the page's own tabs do this, so the list goes. */
.cm-subnav,.cm-subnav li,#matrix-v2 .cm-sidebar .cm-subnav a{min-width:0;max-width:100%}
.cm-subnav{list-style:none;margin:-2px 0 6px 14px;padding:0 0 0 10px;display:grid;gap:2px;border-left:2px solid #2b3549}
#matrix-v2 .cm-sidebar .cm-subnav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;min-height:32px;font-size:13px;font-weight:500;color:#a9bdd7;border-radius:7px;text-decoration:none;box-shadow:none;background:none}
.cm-subnav a span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-subnav a small{flex:0 0 auto;font-size:11px;color:#8fa6c4}
#matrix-v2 .cm-sidebar .cm-subnav a.is-current{color:#f3f8ff;background:#1f2d45}
#matrix-v2 .cm-sidebar .cm-subnav a:hover{background:#253048;color:#fff}
@media(max-width:760px){.cm-subnav{display:none}}
/* Ready to add: the Select all link sits beside a group's count, in the heading's row. */
.cm-pull-group h2 .cm-pull-select-all{font-size:13px;font-weight:500;padding:0 4px;min-height:32px;text-underline-offset:3px}
/* The Sheet's cell editor keeps the cell's width; the column must not jump while a number is typed. */
#matrix-v2 .cm-sheet .cm-sheet-input{display:block;box-sizing:border-box;min-width:0;max-width:100%;height:36px;min-height:36px;margin:0;padding:0 8px;border:0;border-radius:0;box-shadow:inset 0 0 0 2px #79bdff;background:#0f1521;color:#e6f0ff;font:inherit;font-variant-numeric:tabular-nums;text-align:right;outline:none}
/* A scope chip (Card, Deck, Group) carries an × that drops that one filter. */
.cm-scope-chip{display:inline-flex;flex-direction:row;align-items:center;gap:6px;padding-right:4px;cursor:default}
.cm-chip-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-8px -4px -8px 0;padding:0;border:0;border-radius:6px;background:none;color:inherit;font:inherit;font-size:16px;line-height:1;opacity:.75;cursor:pointer}
.cm-chip-x:hover,.cm-chip-x:focus-visible{opacity:1;background:rgba(255,255,255,.1)}
/* Deck page Progress: each figure wears the colour of its segment in the bar below, so the
   bar carries no separate legend -- the figures are the key. The substitute key is hatched
   like its overlay on the bar. */
.cm-summary-figures .cm-key{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:2px;vertical-align:-1px;background:var(--st-inbox)}
.cm-summary-figures .cm-key.pull{background:var(--st-pull)}.cm-summary-figures .cm-key.ordered{background:var(--st-ordered)}.cm-summary-figures .cm-key.buy{background:var(--st-buy)}
.cm-summary-figures .cm-key.standin{background:repeating-linear-gradient(135deg,var(--st-standin) 0 3px,rgba(10,14,24,.55) 3px 6px)}
/* DISCOVER: THE YOURS FILTERS ARE YOURS, so they wear the owned green rather than the graph's
   blue-grey -- the same token the Physical deck figure and the owned band on the canvas use. */
.cm-facet-group[data-group=yours] .cm-facet-btn{background:color-mix(in srgb,var(--st-inbox) 13%,#202638);border-color:color-mix(in srgb,var(--st-inbox) 45%,#39465f);color:#dff5e8}
.cm-facet-group[data-group=yours] .cm-facet-btn:hover{background:color-mix(in srgb,var(--st-inbox) 24%,#202638);border-color:color-mix(in srgb,var(--st-inbox) 70%,#39465f)}
.cm-facet-group[data-group=yours] .cm-facet-btn.is-on{background:color-mix(in srgb,var(--st-inbox) 30%,#202638);border-color:var(--st-inbox);color:#eafff2}
.cm-facet-group[data-group=yours] .cm-facet-n{background:var(--st-inbox);color:#07130c}
/* THE PRIMARY PURPOSE: one chip per card ringed in gold. A ring, not a fill, so it reads apart
   from a picked chip's pale fill and the two can be true at once. */
.cm-chip.cm-chip-primary{border-color:#d9b24c;box-shadow:0 0 0 1.5px #d9b24c,0 0 12px #d9b24c55}
/* An option none of the current cards carry stays pickable but steps back. */
.cm-facet-grid .cm-facet-pick.is-empty{opacity:.55}
/* THE ART GROWS WITH THE PANE. Dragging the divider used to widen the text column and leave the
   picture at 150px; now the picture takes a share of the pane's width, up to 70% larger (255px),
   so a wide pane is a way to look at cards while walking the graph. The pane's width variable is
   written on the grid by the divider and inherited here; unset, the picture is its old size. */
.cm-card-view{--cm-art-w:clamp(150px,calc(var(--cm-pane-w,310px) * .42),255px)}
.cm-card-view-head{grid-template-columns:var(--cm-art-w) minmax(0,1fr)}
.cm-card-view-art,.cm-card-view-tools{width:var(--cm-art-w)}
#matrix-v2.cm-stage .cm-card-view{--cm-art-w:clamp(118px,calc(var(--cm-pane-w,210px) * .5),255px)}
#matrix-v2.cm-stage .cm-card-view-art,#matrix-v2.cm-stage .cm-card-view-tools{width:var(--cm-art-w)}
@media(max-width:760px){.cm-card-view{--cm-art-w:110px}}
/* DISCOVER LOOPS. The toggle sits with the depth and breadth it changes the meaning of; a
   loop reads as a row of the cards on it with the verb between them, a missing piece dashed,
   and the cards that pay it off on a second line. A closed loop wears the Primary Purpose gold
   on its edge. */
.cm-loop-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#c9d8ea;white-space:nowrap}
.cm-loops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cm-loop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:8px 10px;border:1px solid #2b3549;border-radius:8px;background:#151d2c;font-size:12px}
.cm-loop.is-closed{border-color:#d9b24c66}
#matrix-v2 .cm-loop-card{min-height:0;border:1px solid #455a76;border-radius:14px;background:#1e3149;color:#e6f0ff;padding:3px 9px;font:inherit;font-size:12px;line-height:1.3;cursor:pointer}
#matrix-v2 .cm-loop-card:hover{border-color:#79bdff;background:#243248}
#matrix-v2 .cm-loop-card.is-missing{border-style:dashed;color:#b9c5d6;background:transparent}
#matrix-v2 .cm-loop-card.cm-loop-payoff{border-color:#3b7dd8}
.cm-loop-via,.cm-loop-back{color:#8fb0d4;font-size:11px}
.cm-loop-back{font-style:italic}
.cm-loop-pay{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:2px}
.cm-loops-none{margin:0}
/* THE DECK PAGE AS FIVE TABS (Option B PR 3). The tabs ride under the hero; the Next line is one
   sentence under the progress card; the Cards tab is the hundred by type with a status pill
   per row; on a phone the three work actions become a fixed bar at the foot of the screen. */
.cm-deck-tabs{margin:-4px 0 18px}
.cm-deck-work{display:contents}
.cm-deck-mechanics{margin:6px 0 0!important;font-size:13px;color:#b0c3dc;display:block!important}
.cm-deck-next{margin:-6px 0 22px;padding:12px 16px;background:#182437;border:1px solid #2f4262;border-left:3px solid #79bdff;border-radius:10px;font-size:14px;line-height:1.5;color:#e6effb}
.cm-deck-next strong{color:#9fd0ff;margin-right:4px;font-weight:700}
.cm-deck-cards-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.cm-deck-cards-head h2{margin:0}
.cm-deck-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center;margin:8px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--v-line)}
.cm-deck-cards h3{display:flex;align-items:baseline;gap:8px;margin:18px 0 8px}
.cm-deck-cards h3 small{font-weight:400;font-size:13px;color:#8fa6c4}
.cm-deck-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.cm-deck-list li{display:grid;grid-template-columns:26px minmax(0,1fr) auto 68px minmax(0,auto);gap:6px 10px;align-items:center;padding:6px 8px;border-radius:7px;font-size:13px}
.cm-deck-list li:nth-child(odd){background:#141c2a}
.cm-deck-qty{color:#8fa6c4;font-variant-numeric:tabular-nums;text-align:right}
.cm-deck-list .cm-card-name{font-weight:600;color:#f1f6ff;background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;min-height:0}
.cm-deck-list .cm-card-name:hover{color:#8ecbff}
.cm-deck-list .cm-price{text-align:right;font-variant-numeric:tabular-nums;color:#b0c3dc}
.cm-deck-flags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.cm-deck-flags .cm-pill{margin:0}
.cm-action-bar{display:none}
@media(max-width:760px){
  .cm-deck-hero .cm-deck-work{display:none}
  .cm-action-bar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0f1521f2;border-top:1px solid #36445e;backdrop-filter:blur(6px)}
  #matrix-v2 .cm-action-bar .v-button{flex:1 1 0;min-width:0;padding:10px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #cm-main:has(.cm-action-bar){padding-bottom:96px}
  .cm-deck-composition{grid-template-columns:1fr}
  .cm-deck-list li{grid-template-columns:22px minmax(0,1fr) minmax(0,auto);font-size:12px}
  .cm-deck-list .cm-deck-mana,.cm-deck-list .cm-price{display:none}
}
@media print{.cm-action-bar{display:none!important}}

/* THE CARD POP-UP ON THE GRAPH: the picture, four facts, the Primary Purpose, the join. Wider
   than the line pop-up, opened to the right of its node. */
.cm-graph-pop.cm-pop-card{width:min(440px,calc(100% - 16px))}
.cm-pop-body{display:grid;grid-template-columns:138px minmax(0,1fr);gap:12px;margin-top:8px;align-items:start}
.cm-pop-art img{display:block;width:100%;border-radius:8px;box-shadow:0 8px 22px #000a,0 0 0 1px #ffffff14;background:#1b2740;aspect-ratio:63/88;object-fit:cover}
.cm-pop-noart{aspect-ratio:63/88;border-radius:8px;background:linear-gradient(160deg,#3a1d1d,#1b1218);display:grid;place-items:center;font-weight:800;font-size:26px;color:#f7e9d2;box-shadow:inset 0 0 0 1px #ffffff14}
.cm-pop-meta{min-width:0}.cm-pop-meta p:first-child{margin-top:0}
.cm-pop-facts{font-size:12px;color:#b0c3dc;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.cm-pop-meta h4:first-of-type{margin-top:8px}
@media(max-width:760px){.cm-pop-body{grid-template-columns:104px minmax(0,1fr);gap:10px}.cm-pop-noart{font-size:20px}}
/* The inspector's term list: the same vocabulary the graph joins on, grouped as the filters name it. */
.cm-inspector-terms{margin:14px 0 4px;border-top:1px solid var(--v-line);padding-top:10px}
.cm-inspector-terms h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9fc3e8}
.cm-inspector-terms-row{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:0 0 6px}
.cm-inspector-terms-row>span:first-child{flex:0 0 96px;font-size:11px;color:#8fa6c4;text-transform:uppercase;letter-spacing:.04em}
.cm-inspector-terms-row .cm-chip{padding:3px 8px;font-size:11px}