/* Production layout preserves the approved study while keeping tables semantic, * controls named and every acquisition independent of physical placement. */ :root{color-scheme:dark;background:var(--color-bg);font-family:Satoshi,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-ink)}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 var(--color-accent);outline-offset:3px}input,select,textarea{max-width:100%;background:var(--v-raised);color:var(--v-ink);border:1px solid var(--v-line);border-radius:var(--v-radius);padding:10px 12px;min-height:42px}textarea{resize:vertical;min-height:100px}label{display:grid;gap:7px;font-size:13px;color:var(--v-muted)}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:var(--v-muted);font-size:12px}/* DEEP FIELD USED TO LIVE HERE, and that was the defect. This sheet loads after crankmagic-design.css and redefined the same --v-* names, so this block -- not the token block -- was the palette that actually rendered, and two of its values were still navy (--v-on var(--v-on), --v-soft var(--v-raised)). That is why the V.1b pass recolored the primary button but not the text on it. There is one definition now, in the design sheet; this sheet reads tokens and declares none. tests/design-tokens.mjs holds that. */ #matrix-v2{display:block;min-height:100vh;border:0;border-radius:0;overflow:visible; background:var(--v-bg);color:var(--v-ink)} /* The tile itself, and the caption line that states the equation the seven figures make. */ .cm-kpi{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;padding:14px 12px;min-width:0;text-align:left;border-radius:var(--v-radius);background:var(--v-panel);border:1px solid var(--v-line);cursor:pointer} .cm-kpi:hover{background:var(--v-raised)} .cm-kpi>span{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--v-muted);line-height:1.25} .cm-kpi-dot{width:7px;height:7px;flex:0 0 7px;border-radius:var(--radius-pill);background:var(--st,var(--v-line))} .cm-kpi-caption{margin:0 0 16px;font-size:12px;color:var(--v-muted);line-height:1.5} .cm-cards-summary{margin:8px 0 0;color:var(--v-muted);font-size:15px;max-width:70ch} /* The row mark, the purpose chip and the tinted band (Track V.4f). */ #cm-roster-table .cm-row-mana{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;margin-right:7px} #cm-roster-table .cm-row-mana img{width:16px;height:16px} #cm-roster-table .cm-row-land{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border-radius:var(--radius-pill);background:var(--v-raised);border:1px solid var(--v-line);color:var(--v-muted);font-size:10px;font-weight:700;vertical-align:middle} #cm-roster-table .cm-purpose-chip{display:inline-block;padding:2px 7px;border-radius:var(--v-radius);background:var(--v-raised);color:var(--v-muted);font-size:11px;font-weight:600} #cm-roster-table .cm-group-row td{background:color-mix(in oklab,var(--band,var(--v-raised)) 10%,var(--v-panel))} #cm-roster-table .cm-group-row .cm-group-toggle:before{content:'';display:inline-block;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--band,var(--v-line));margin-right:8px;vertical-align:middle} .cm-cards-summary b{color:var(--v-ink);font-weight:600} /* THE LIBRARY TABLE. A panel card at the card radius, an 11px uppercase header, and rows that are one line tall and never wrap -- cells ellipsize instead, which is the README's "Rows are one line tall". A wrapping row is what made a hundred records unreadable as a list. */ #cm-roster-table>table,#cm-roster-table .cm-table-card{background:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius-card);overflow:hidden} #cm-roster-table thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v-muted);white-space:nowrap} #cm-roster-table tbody tr{min-height:56px} #cm-roster-table tbody tr:hover{background:var(--v-raised)} #cm-roster-table tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;vertical-align:middle;padding-top:10px;padding-bottom:10px} /* The ticks, the pips and the row's one verb are the cells that must not be squeezed to nothing. */ #cm-roster-table tbody td:first-child,#cm-roster-table tbody td:last-child{max-width:none;overflow:visible} @media(max-width:1050px){.cm-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:640px){.cm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} /* THE LOBBY AS A TABLE (V.5a, DELTA-play-and-implementation.md section B). Four quadrants in the order the players sit, 2 and 3 across the top and 4 and you across the bottom, with the rules at the center. The center panel overlaps the quadrants on purpose: each seat keeps its label and its card in its OUTER corners, so the panel can never cover a name or a control. */ /* 2b draws the table 504 wide by 382 tall -- two 190px rows in the content column. At 16:10 every quadrant was a third shorter than drawn, and the commander card, sized from the quadrant's height, shrank with it. */ /* THE TABLE FILLS THE COLUMN IT IS GIVEN. It is 100% wide and 4:3, so its height follows its width and every quadrant -- a quarter of a 4:3 grid divided in both directions -- is 4:3 too, at any size. There is no max-height: a height cap on a fixed-ratio box caps the width with it, which is what used to leave the table short of the page on a tall window. */ /* THE TABLE TAKES THE ROOM IT HAS. Full width, and the height left below it in the window -- --cm-table-h is measured per render in sizeTable(). A fixed aspect-ratio made the height follow the width and nothing else, so on a wide window the table ran past the bottom of the screen and the seats never answered zoom. Sized this way a quadrant's shape follows the window's, all four stay identical, and the whole table is in view without scrolling. */ .cm-lobby-table{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));/* A CONTAIN FIT. The seats are quarters of this box, so its ratio IS their ratio -- which is what Rob asked for in batch 1 and what I broke in batch 4 by dropping it to make the table fit the window. Both hold this way: the width is the column OR the height left below it times the ratio, whichever is tighter, so the table never outgrows the screen and never changes shape. On a short window it is height-limited and centres. */ width:min(100%,max(900px,calc(var(--cm-table-h,68vh) * 1.9)));aspect-ratio:19/10;margin-inline:auto;gap:2px;border-radius:var(--v-radius-tile);overflow:hidden;border:1px solid var(--v-line);background:var(--v-line);margin:0 0 18px} .cm-seat-q{position:relative;isolation:isolate;min-width:0;overflow:hidden;background:var(--v-panel)} /* The sea fills the quadrant and stays behind everything; the fan is over it and under the seat. */ .cm-seat-sea{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block} /* 2b draws the wedges at .62 over the element, with no blend mode. Screening them against the ocean turned a red-and-white identity into more blue. */ .cm-seat-fan{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.62;pointer-events:none} /* THE SHADE. README: the element runs at "~80% opacity under a dark top/bottom gradient". Without it the only way to keep words readable was to dim the whole element, which is why the sea looked still: it was moving, at half strength, everywhere. With it the element is strong through the middle of the quadrant and dark only where the label and the reading sit. The stops are 2b's own. */ .cm-seat-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--poster-ground) 28%,transparent),color-mix(in srgb,var(--poster-ground) 5%,transparent) 40%,color-mix(in srgb,var(--poster-ground) 35%,transparent))} .cm-seat-body{position:relative;z-index:3;height:100%;display:flex;min-width:0} /* The seat's own card keeps every class and handler it had; what changes is that it sits on the table rather than in a row, and its ground is the sea rather than a panel. */ /* No panel: the element and the fan are the seat's ground, and text sits over them with its own shadow rather than behind a sheet of frosted glass. */ .cm-seat-body .cm-lobby-seat{flex:1 1 auto;min-width:0;align-self:stretch;background:none;backdrop-filter:none;border:0;border-radius:0;margin:0;padding:0;display:flex;flex-direction:column;min-height:0} /* THE LABEL BAR (2b). Across the quadrant's top edge, name then status pill, and mirrored on the right-hand column so the name is always on the outer side. It is a bar rather than a badge because 2b gives it the quadrant's full width: it is the seat's header, and a header that floats in a corner reads as a sticker. */ .cm-seat-q .cm-lobby-seat>header{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:8px 12px;margin:0;background:linear-gradient(180deg,color-mix(in srgb,var(--poster-ground) 55%,transparent),transparent);color:var(--poster-ink);pointer-events:none} .cm-q-tl .cm-lobby-seat>header,.cm-q-bl .cm-lobby-seat>header{flex-direction:row-reverse} /* The bottom row's header sits exactly where the card reaches in, so it stops short of it on its inner side. The top row's header is at the far end of the quadrant from the card and needs no inset. Measured, not assumed: the permutation pass reports the overlap in px2. */ .cm-q-tr .cm-lobby-seat>header{right:22%} .cm-q-tl .cm-lobby-seat>header{left:22%} .cm-seat-q .cm-lobby-seat h3{flex:0 1 auto;font-size:14px;line-height:1.2;color:var(--poster-ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px var(--poster-ground)} .cm-seat-q .cm-lobby-seat-sub{font-size:11px;color:color-mix(in srgb,var(--poster-ink) 72%,transparent)} .cm-seat-q .cm-lobby-ready{margin-left:auto} /* The status pill: a dot in the state's color and one word, as 2b draws it. */ .cm-seat-pill{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:3px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--poster-ground) 55%,transparent);backdrop-filter:blur(4px);font-size:11px;font-weight:600;color:var(--poster-ink)} .cm-seat-pill i{width:7px;height:7px;border-radius:50%;background:var(--st-pull)} .cm-seat-pill[data-state="ready"] i{background:var(--st-inbox)} .cm-seat-pill[data-state="deck"] i,.cm-seat-pill[data-state="pending"] i{background:var(--st-ordered)} .cm-seat-pill[data-state="invited"] i{background:var(--st-buy)} .cm-seat-pill[data-state="error"] i{background:var(--st-remove)} .cm-seat-pill[data-state="empty"] i{background:color-mix(in srgb,var(--poster-ink) 40%,transparent)} /* THE FIGURE (2b). The card and its reading, standing in the quadrant's outer BOTTOM corner, clear of the label bar above and of the table's card at the inner corner. */ .cm-seat-figure{position:absolute;left:12px;right:12px;top:38px;bottom:10px;z-index:2;display:flex;flex-direction:row;align-items:flex-end;gap:12px;min-width:0;color:var(--poster-ink)} /* THE CARD'S FOOTPRINT, KEPT CLEAR. The card is 30% of the table wide and 30% of it tall, so centered it reaches 30% of a QUADRANT in from the inner corner. 32% leaves a margin. Nothing a seat draws can end up underneath it, which is what was eating the AI seat's dropdowns. */ .cm-q-br .cm-seat-figure,.cm-q-tr .cm-seat-figure{right:24%} .cm-q-bl .cm-seat-figure,.cm-q-tl .cm-seat-figure{left:24%} .cm-q-tl .cm-seat-figure,.cm-q-bl .cm-seat-figure{flex-direction:row-reverse} /* The top row's reading hangs from the top of the figure, the bottom row's from the bottom, so the text is always on the side of the quadrant nearest that player. */ .cm-q-bl .cm-seat-detail,.cm-q-br .cm-seat-detail{align-self:flex-start} /* 2b: `height:144` in a 190px quadrant -- a proportion, not a pixel count, so the card stays a card at every table size. */ .cm-seat-card{height:76%;max-height:100%;aspect-ratio:488/680;flex:0 0 auto;padding:0;border-radius:6px;overflow:hidden;border:1px solid color-mix(in srgb,var(--poster-ink) 50%,transparent);box-shadow:0 6px 16px -6px var(--poster-ground);background:color-mix(in srgb,var(--poster-ground) 40%,transparent);cursor:zoom-in;display:grid;place-items:center} .cm-seat-card img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block} .cm-seat-card.is-empty,.cm-seat-card.is-blank{border-style:dashed;border-color:color-mix(in srgb,var(--poster-ink) 55%,transparent);cursor:default;background:color-mix(in srgb,var(--poster-ground) 28%,transparent)} .cm-seat-card.is-empty span,.cm-seat-card.is-blank span{font-size:22px;font-weight:600;color:color-mix(in srgb,var(--poster-ink) 70%,transparent)} .cm-seat-detail{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.4;text-shadow:0 1px 3px var(--poster-ground)} .cm-q-tl .cm-seat-detail,.cm-q-bl .cm-seat-detail{text-align:right} .cm-seat-name{margin:0;font-weight:600;font-size:13px;line-height:1.25} .cm-seat-line{margin:0;color:color-mix(in srgb,var(--poster-ink) 80%,transparent)} /* The player's own four controls, wrapping under their reading. */ .cm-seat-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .cm-q-tl .cm-seat-controls,.cm-q-bl .cm-seat-controls{justify-content:flex-end} .cm-seat-controls .v-button{min-height:28px;padding:0 10px;font-size:12px;background:color-mix(in srgb,var(--poster-ground) 60%,transparent);border-color:color-mix(in srgb,var(--poster-ink) 28%,transparent);color:var(--poster-ink);backdrop-filter:blur(4px)} .cm-seat-controls .v-button.primary{background:var(--v-brass);border-color:var(--v-brass);color:var(--poster-ground)} /* The deck audit is not the seat. It keeps its markup -- every handler still reaches it -- and is reached from Deck Summary rather than printed over the table. */ .cm-seat-audit{display:none} /* The host's own tools on another seat -- the invite editor, the AI configurator. DELTA B.4 hides a seat's PLAYER controls from everyone but its player; the README keeps the host's here, and hiding them left an AI seat that could be created and never given a deck. */ /* A select whose longest option is wider than the panel pushed the panel sideways and it grew a horizontal scrollbar. Nothing here scrolls sideways: the fields take the width they are given and truncate, and only vertical overflow scrolls. */ .cm-seat-host-tools{margin-top:6px;font-size:12px;display:grid;gap:6px;width:100%;max-height:100%;overflow-x:hidden;overflow-y:auto; padding:9px 11px;border-radius:var(--v-radius);background:color-mix(in srgb,var(--poster-ground) 66%,transparent); backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--poster-ink) 16%,transparent); scrollbar-width:thin;text-align:left} .cm-q-tl .cm-seat-host-tools,.cm-q-bl .cm-seat-host-tools{text-align:right} .cm-seat-host-tools label{display:grid;gap:3px;font-size:11px;color:color-mix(in srgb,var(--poster-ink) 78%,transparent)} .cm-seat-host-tools select,.cm-seat-host-tools input{width:100%;max-width:100%;min-width:0;min-height:30px;font-size:12px;background:color-mix(in srgb,var(--poster-ground) 62%,transparent);border:1px solid color-mix(in srgb,var(--poster-ink) 26%,transparent);color:var(--poster-ink);border-radius:var(--v-radius);padding:4px 8px} .cm-seat-host-tools .v-button{min-height:28px;padding:0 10px;font-size:12px;background:color-mix(in srgb,var(--poster-ground) 60%,transparent);border-color:color-mix(in srgb,var(--poster-ink) 28%,transparent);color:var(--poster-ink);backdrop-filter:blur(4px)} .cm-seat-host-tools .v-button.primary{background:var(--v-brass);border-color:var(--v-brass);color:var(--poster-ground)} .cm-q-tl .cm-seat-host-tools,.cm-q-bl .cm-seat-host-tools{justify-items:end} .cm-seat-q .cm-lobby-under{font-size:11px;color:color-mix(in srgb,var(--poster-ink) 78%,transparent);text-shadow:0 1px 3px var(--poster-ground)} .cm-seat-q .cm-lobby-under-full{margin-top:8px} .cm-seat-q .cm-lobby-under-row{gap:6px} .cm-seat-q .cm-lobby-under-row .v-button{min-height:30px;padding:0 10px;font-size:12px;background:color-mix(in srgb,var(--poster-ground) 55%,transparent);border-color:color-mix(in srgb,var(--poster-ink) 26%,transparent);color:var(--poster-ink);backdrop-filter:blur(4px)} /* A seat that is not yours is state, not controls (DELTA B.4). */ .cm-seat-q:not(.is-you) .cm-lobby-under-row{display:none} .cm-seat-q.is-absent .cm-seat-body{align-items:center;justify-content:center} /* Which way a quadrant faces. The inner corner is the one named; the seat is pushed away from it so the center panel overlaps only the sea. */ .cm-q-br .cm-seat-body{padding:10px} .cm-q-bl .cm-seat-body{padding:10px} .cm-q-tr .cm-seat-body{padding:10px} .cm-q-tl .cm-seat-body{padding:10px} /* The center panel: the rules every player reads and the one line that replaced Launch. */ /* Wireframe 2b draws the center panel as a WHITE card over the table, not a dark one: it is the one thing on the table that belongs to nobody's seat, and white is how it says so. It keeps its own ink regardless of theme for the same reason the deck tile's foot does -- it sits over four colored status elements, and a panel that flipped with the theme would be legible over two of them and not the other two. */ /* The card carries a seat's ratio, because it sits among four of them and a different shape in the middle of four identical ones reads as a mistake. Its width is a share of the table, not a share capped in pixels: min(28%,320px) stopped growing at 1143px of table, so on a wide screen the card shrank against the seats it sits between. It scrolls if a long rule is clipped by the card's own corner, which is how 2b draws it -- with overflow:auto that bleed became a scroll region and the card grew two scrollbars. */ /* A box of rules is as tall as its rules. It was a share of both axes to carry a seat's shape; Rob overrode that -- height off the ratio, width kept for the text. The width is still a share of the table so it scales, with a floor under it so the launch line never wraps to a third row. Everything that keeps seats clear of it derives from this width, so narrowing the card widens the seats by itself. */ .cm-table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:24%;min-width:246px;max-height:56%;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(8px,0.62vw,14px);border-radius:var(--v-radius-card);background:var(--table-panel);color:var(--table-ink);border:1px solid color-mix(in srgb,var(--table-ink) 14%,transparent);box-shadow:0 18px 44px -18px color-mix(in srgb,var(--poster-ground) 55%,transparent)} #matrix-v2 .cm-table-center h2{margin:0;color:var(--table-ink)} /* 2b stamps the wand-and-gear into the panel's bottom-right at 7%, greyscale, bleeding off the edge. Decorative, so it is aria-hidden and sits under everything that carries words. */ .cm-table-stamp{position:absolute;right:-18px;bottom:-14px;width:62%;opacity:.07;filter:grayscale(1);pointer-events:none;z-index:0} .cm-table-center>:not(.cm-table-stamp){position:relative;z-index:1} .cm-table-head>*{position:relative;z-index:1} .cm-table-head{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;line-height:1.2} .cm-table-setby-top{margin:0 0 0 auto;font-size:11px;color:color-mix(in srgb,var(--table-ink) 50%,transparent)} .cm-table-rules dt{color:color-mix(in srgb,var(--table-ink) 60%,transparent);line-height:1.3} .cm-table-rules dd{margin:0;font-weight:600;color:var(--table-ink);line-height:1.3} /* The launch line is a box, not a sentence: it is the table speaking, not the host. */ /* Rob: two columns, the reading and a Start button taking 15-25% on the right. The button is sized from its own words with a floor and a ceiling rather than a bare percentage, so "Start" and "Stop" both sit comfortably at every table width. */ /* Flex, not grid. As a grid the reading kept its content height while the button stretched to a row that was taller than either of them, so the two never matched. In a flex row align-items:stretch means exactly what it says: both children take the height of the taller. */ .cm-table-launch-row{display:flex;gap:8px;align-items:center;margin:6px 0 0} .cm-table-launch.is-error{background:color-mix(in srgb,var(--st-remove) 22%,var(--table-panel));color:color-mix(in srgb,var(--st-remove) 60%,var(--table-ink));cursor:help} #matrix-v2 .cm-table-launch{flex:1 1 auto;margin:0;min-height:40px;height:40px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--table-ink) 8%,var(--table-panel));color:var(--table-ink);font-size:12px;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;min-width:0} /* height:100% on a stretched grid item asks for a percentage of a row whose height it is also helping to decide, and the browser resolves that by growing. Stretch alone is the answer: both cells then take the row's height, and the row takes the taller natural content, which is the reading. */ /* The same minimum as the reading beside it, so the two always match however the reading wraps. */ #matrix-v2 .cm-table-launch-row .v-button{flex:0 0 auto;height:40px;min-height:0;min-width:88px;padding:0 14px;font-size:12px;white-space:nowrap} /* Rob: lose the spacing between the rows. They are a list of four short facts; a gap between them made the card taller for nothing. */ .cm-table-rules{display:grid;gap:0;margin:0;line-height:1.35} .cm-table-rules div{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:1.55} @media(max-width:900px){ /* A phone reads the table as a column of seats: four quadrants stacked, the rules above them, because a 2x2 table at 390px gives each seat 180px and nothing fits in it. */ .cm-lobby-table{grid-template-columns:minmax(0,1fr);grid-template-rows:none;aspect-ratio:auto;width:100%} .cm-seat-q .cm-seat-body{padding:0} .cm-table-center{position:static;transform:none;width:auto;min-width:0;aspect-ratio:auto;overflow:visible;order:-1;box-shadow:none} } /* THE EXPLORE ENTRY (Track V.4d, the guide's step 4, against screens/Gallery Explore Entry.dc.html). The page says what it is for in one sentence, offers its own search, and then three doors as cards rather than three buttons in a row. Each door carries its own hue in --door, so they are told apart by more than their words, and the aether one is one of the four places blue still means something. */ /* The Explore entry gives itself more air than the shell rule does: its screen sets padding:36px 48px 56px where every other main is 28px 36px 48px. That is the designer drawing a landing page, not a mistake, so it is matched here as an inset rather than by changing #cm-main for every page. Measured: without it the head and the doors sat 12px left of the screen and 24px wider (tools/compare-to-screen.mjs). */ .cm-explore-chooser{position:relative;max-width:1180px;padding:8px 12px 8px;margin-inline:0} .cm-explore-chooser:before{content:'';position:absolute;right:-60px;top:-80px;width:620px;height:420px;max-width:80%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 30%,color-mix(in oklab,var(--v-aether) 18%,transparent),transparent 62%)} .cm-explore-head{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;margin:0 0 28px} .cm-explore-eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v-muted)} .cm-explore-title{font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.015em;margin:0;max-width:20ch} .cm-explore-sub{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--v-muted);max-width:56ch} .cm-explore-search{display:flex;align-items:center;gap:8px;position:relative;margin:0} #matrix-v2 .cm-explore-search input{flex:1 1 auto;width:100%;min-width:0;min-height:52px;font-size:15px;padding:0 16px;border-radius:var(--v-radius);border:1px solid var(--v-line);background:var(--v-panel);color:var(--v-ink)} #matrix-v2 .cm-explore-search .v-button{flex:0 0 auto;min-height:52px} .cm-explore-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .cm-explore-door{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;text-align:left;min-height:300px;padding:24px;border-radius:20px;border:1px solid var(--v-line);background:var(--v-panel);color:var(--v-ink);cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .cm-explore-door:hover{transform:translateY(-4px);border-color:var(--door,var(--v-accent));box-shadow:0 22px 44px -24px var(--door,var(--v-line))} .cm-explore-door small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--door,var(--v-muted))} .cm-explore-door strong{font-family:var(--v-display);font-weight:var(--display-weight);font-size:24px;line-height:1.15;letter-spacing:-.015em} /* The rule that used to sit above the heading now sits above the eyebrow. */ .cm-door-list{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:6px;width:100%} /* The commander fan: four crops leaning out from the left, straightening together on hover, so the door shows whose decks it would open on rather than saying that it would. */ .cm-door-fan{display:flex;margin:auto 0 0;padding-left:8px} .cm-door-fan i{display:block;width:58px;height:81px;flex:0 0 58px;margin-left:-14px;border-radius:6px;overflow:hidden;background:var(--v-raised);border:1px solid var(--v-line);transform:rotate(calc((var(--i) - 1.5) * 6deg));transform-origin:50% 100%;transition:transform .25s ease;display:grid;place-items:center} .cm-door-fan i:first-child{margin-left:0} .cm-door-fan img{width:100%;height:100%;object-fit:cover;object-position:50% 18%} .cm-door-fan b{font-family:var(--v-display);font-weight:var(--display-weight);font-size:26px;color:var(--v-muted)} .cm-explore-door:hover .cm-door-fan i{transform:rotate(0deg)} /* The card door's graph is an illustration, not data: it says what two rings out looks like. */ .cm-door-graph{display:block;width:100%;height:auto;margin:auto 0 0;color:var(--v-muted)} /* Or read by role. */ .cm-explore-roles{margin-top:26px} .cm-explore-role-pills{display:flex;flex-wrap:wrap;gap:8px} .cm-role-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--radius-pill);border:1px solid var(--v-line);background:var(--v-panel);color:var(--v-ink);font-size:13px;font-weight:600;cursor:pointer} .cm-role-chip b{font-weight:600;color:var(--v-muted);font-variant-numeric:tabular-nums} .cm-role-chip:hover{background:var(--v-raised);border-color:var(--v-accent)} @media(prefers-reduced-motion:reduce){.cm-door-fan i{transition:none}.cm-explore-door:hover .cm-door-fan i{transform:rotate(calc((var(--i) - 1.5) * 6deg))}} .cm-door-list li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:12px;min-width:0} .cm-door-list b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cm-door-list i{font-style:normal;color:var(--door,var(--v-muted));white-space:nowrap} .cm-explore-door small:before{content:'';display:block;width:34px;height:4px;border-radius:var(--radius-pill);background:var(--door,var(--v-accent));margin-bottom:14px} .cm-explore-door span{font-size:14px;color:var(--v-muted);line-height:1.5} .cm-explore-recents{margin-top:26px} .cm-explore-recents-label{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v-muted)} @media(max-width:1050px){.cm-explore-head{grid-template-columns:minmax(0,1fr);gap:18px}.cm-explore-doors{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.cm-explore-doors{grid-template-columns:minmax(0,1fr)}.cm-explore-door{min-height:0}} @media(prefers-reduced-motion:reduce){.cm-explore-door{transition:none}.cm-explore-door:hover{transform:none}} /* THE DECK PAGE (Track V.4b, the guide's step 4, against screens/Gallery Deck Page.dc.html). The hero puts the commander's own card beside the copy over a radial glow in the deck's tint; the tabs are a segmented control; and the Progress and Cost panel plus The hundred at a glance are one six-column bento of cards. --tint is the same token the deck tile uses, so a deck looks like itself on both pages. */ #matrix-v2 .cm-deck-hero{position:relative;display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;align-items:center;margin-bottom:22px;padding:8px 0 4px;background:none;border:0} #matrix-v2 .cm-deck-hero:before{content:'';position:absolute;left:-40px;top:-60px;width:900px;height:520px;max-width:120%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 30%,color-mix(in oklab,var(--tint,var(--v-accent)) 28%,transparent),transparent 62%)} #matrix-v2 .cm-deck-hero-card{perspective:900px} #matrix-v2 .cm-deck-hero-card img{display:block;width:100%;aspect-ratio:488/680;object-fit:cover;border-radius:14px;transform:rotate(-3deg);transition:transform .3s ease;box-shadow:0 30px 60px -20px color-mix(in oklab,var(--tint,var(--v-line)) 60%,var(--poster-ground))} #matrix-v2 .cm-deck-hero-card img:hover{transform:rotate(0deg) scale(1.03)} #matrix-v2 .cm-deck-hero-copy h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.015em;margin:6px 0 12px} #matrix-v2 .cm-deck-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0} #matrix-v2 .cm-deck-hero .cm-deck-actions{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px} #matrix-v2 .cm-deck-hero .cm-deck-work{display:contents} #matrix-v2 .cm-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:var(--v-ink);background:color-mix(in oklab,var(--tint,var(--v-accent)) 18%,var(--v-panel))} #matrix-v2 .cm-deck-strategy{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--v-muted);max-width:62ch} /* The tabs, as a segmented control: one panel-colored track, the selected tab raised and bold. */ #matrix-v2 .cm-tabs.cm-deck-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 20px;border:1px solid var(--v-line);border-radius:14px;background:var(--v-panel);overflow-x:auto;max-width:100%} #matrix-v2 .cm-tabs-segment,#matrix-v2 .cm-tabs.cm-deck-tabs button{appearance:none;border:0;background:none;color:var(--v-muted);font-weight:600;padding:0 14px;min-height:38px;border-radius:10px;white-space:nowrap;cursor:pointer} #matrix-v2 .cm-tabs.cm-deck-tabs button[aria-selected=true]{background:var(--v-raised);color:var(--v-ink);font-weight:700} #matrix-v2 .cm-tabs.cm-deck-tabs button small{font-weight:600;color:var(--v-muted);margin-left:6px} /* The bento: six columns, cards at the card radius, each with its uppercase label. */ .cm-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:24px} .cm-bento-card{background:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius-card);padding:22px;min-width:0;box-shadow:var(--shadow-card)} .cm-bento-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v-muted);margin:0 0 12px} .cm-bento-next{grid-column:span 6;background:linear-gradient(120deg,color-mix(in oklab,var(--tint,var(--v-accent)) 22%,var(--v-panel)),var(--v-panel) 70%)} .cm-bento-next .cm-bento-label{color:color-mix(in oklab,var(--tint,var(--v-accent)) 70%,var(--v-ink))} .cm-bento-next-line{margin:0;font-size:20px;font-weight:600;line-height:1.35} .cm-bento-progress{grid-column:span 3;display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center} .cm-bento-progress .cm-bento-label{grid-column:1/-1;margin-bottom:0} .cm-bento-cost{grid-column:span 3} .cm-bento-curve{grid-column:span 2} .cm-bento-types{grid-column:span 2} .cm-bento-purpose{grid-column:span 2} .cm-bento-plays{grid-column:span 4} .cm-bento-upgrade{grid-column:span 2} .cm-bento-record{grid-column:span 6;background:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius-card);min-width:0} .cm-bento-record.is-empty{border-style:dashed} /* A bento card holds one section, so the section inside it drops its own frame. */ .cm-bento-record .v-panel{background:none;border:0;border-radius:0;box-shadow:none} /* The ring, and the four figures beside it, each under its segment's color. */ .cm-ring{position:relative;display:grid;place-items:center;width:112px;height:112px} .cm-ring svg{display:block} .cm-ring-center{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;line-height:1.1} .cm-ring-center b{font-family:var(--v-display);font-weight:var(--display-weight);font-size:26px} .cm-ring-center small{font-size:11px;color:var(--v-muted)} .cm-bento-figures{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;min-width:0} .cm-bento-figures strong{display:block;font-family:var(--v-display);font-weight:var(--display-weight);font-size:22px;line-height:1.1} .cm-bento-figures span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--v-muted)} .cm-bento-figure{margin:0 0 12px;font-family:var(--v-display);font-weight:var(--display-weight);font-size:40px;line-height:1} .cm-bento-figure small{display:block;font-family:var(--v-body);font-size:12px;color:var(--v-muted);margin-top:4px} .cm-bento-facts{margin:10px 0 0;font-size:12px;color:var(--v-muted);line-height:1.5} .cm-bento-card[data-tone="cm-over"] .cm-budget-bar i{background:var(--st-remove)} /* What the spells do: a label, a bar in the tint at decreasing opacity, a count. */ .cm-purpose-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px} .cm-purpose-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,1.2fr) 28px;align-items:center;gap:10px;font-size:13px} .cm-purpose-rows li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--v-muted)} .cm-purpose-rows li i{height:8px;border-radius:var(--radius-pill);background:var(--tint,var(--v-accent));display:block} .cm-purpose-rows li b{text-align:right;font-weight:600} /* How it plays: two by two. */ .cm-plays-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cm-plays-grid strong{display:block;font-size:13px;margin-bottom:3px} .cm-plays-grid span{font-size:12px;color:var(--v-muted);line-height:1.45} /* Upgrade path: the card, what it replaces, the price. */ .cm-upgrade-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px} .cm-upgrade-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;min-width:0} .cm-upgrade-rows li span{min-width:0;overflow:hidden;text-overflow:ellipsis} .cm-upgrade-rows li small{display:block;font-size:11px;color:var(--v-muted)} .cm-upgrade-rows li b{color:var(--v-money);font-weight:600;white-space:nowrap} @media(max-width:1050px){ .cm-bento-plays{grid-column:span 6} .cm-bento-progress,.cm-bento-cost{grid-column:span 3} } @media(max-width:760px){ /* Phone: every card spans the width, the hero stacks and the card leads. */ #matrix-v2 .cm-deck-hero{grid-template-columns:minmax(0,1fr);gap:18px} #matrix-v2 .cm-deck-hero-card{max-width:220px} .cm-bento{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} .cm-bento>*{grid-column:span 6!important} .cm-bento-progress{grid-template-columns:96px minmax(0,1fr)} } @media(prefers-reduced-motion:reduce){#matrix-v2 .cm-deck-hero-card img{transition:none}#matrix-v2 .cm-deck-hero-card img:hover{transform:rotate(-3deg)}} /* THE DECK TILE (Track V.4a, the guide's step 3, against screens/Gallery Decks.dc.html). A 3:4 poster with the commander's art behind everything and the reading laid over its foot. --tint is the commander's first color, set per tile in crankmagic-decks.js; it carries the art's gradient, the deck-number eyebrow and the hover glow, so the grid reads as seven different decks rather than seven identical panels. The stage is the pill at the top left -- the old stage-colored frames are gone, because a border is the wrong place to say a fifth thing when the pill already says it. */ .cm-deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px} .cm-deck-tile{position:relative;isolation:isolate;aspect-ratio:3/4;border:0;border-radius:var(--v-radius-tile);overflow:hidden;background:var(--v-panel);box-shadow:0 1px 0 var(--v-line) inset;transition:transform .25s ease,box-shadow .25s ease} .cm-deck-tile:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 24px 50px -20px var(--tint,var(--v-line))} .cm-deck-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.85);transform-origin:50% 26%;z-index:-2;opacity:1} /* The art is read through a gradient to near-black so the foot's text has a ground of its own whatever the picture does. The stop is the tint at 30%, which is what tints the shadow. */ .cm-deck-tile:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,color-mix(in oklab,var(--tint,var(--v-panel)) 30%,var(--poster-ground)) 72%,var(--poster-ground) 100%)} .cm-deck-tile>button{appearance:none;background:none;border:0;text-align:left;color:var(--poster-ink);padding:0;position:absolute;inset:0;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 20px 20px;cursor:pointer} .cm-deck-tile>button small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:color-mix(in oklab,var(--tint,var(--v-muted)) 70%,var(--poster-ink))} .cm-deck-tile h3{font-size:24px;line-height:1.1;letter-spacing:-.02em;margin:0} .cm-deck-tile p{margin:0 0 6px;font-size:13px;color:color-mix(in srgb,var(--poster-ink) 80%,transparent)} /* The stage pill and the mana pips ride the poster's top corners, over the art. */ .cm-deck-tile .cm-pill{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--poster-ground) 55%,transparent);backdrop-filter:blur(6px);color:var(--poster-ink);font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill)} /* The stage is said by a 7px dot in its own rung color plus the word, rather than by the frame the tile used to wear. The dot reads on the blurred dark ground in both themes. */ .cm-deck-tile .cm-pill:before{content:'';width:7px;height:7px;flex:0 0 7px;border-radius:var(--radius-pill);background:var(--st,var(--st-draft))} .cm-deck-tile .cm-tile-mana{position:absolute;top:14px;right:14px;z-index:2;display:flex;gap:4px} .cm-tile-ready{display:grid;gap:6px;pointer-events:none} /* One line, always. The screen writes it as "13 to buy · 2 ordered · 15 subs" with the bracket at the right, and at a 260px tile the long form wrapped and pushed the bracket off its row. The reading ellipsizes; the bracket never moves, because it is the thing you scan down. */ .cm-tile-caption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:color-mix(in srgb,var(--poster-ink) 85%,transparent);min-width:0} .cm-tile-caption>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cm-tile-caption b{flex:0 0 auto;white-space:nowrap} .cm-tile-caption b{font-weight:600} /* The tick and the deck menu are quiet until the tile is hovered or one of them is focused, so seven tiles read as seven pictures rather than fourteen controls. A ticked tile keeps its tick showing, or there would be no way to see what is being compared. */ .cm-deck-tile .cm-tile-tools{position:absolute;top:14px;left:14px;z-index:3;display:flex;gap:6px;opacity:0;transition:opacity .2s ease} .cm-deck-tile:hover .cm-tile-tools,.cm-deck-tile:focus-within .cm-tile-tools,.cm-deck-tile.is-picked .cm-tile-tools{opacity:1} .cm-deck-tile .cm-tile-pick{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--v-radius);background:color-mix(in srgb,var(--poster-ground) 55%,transparent);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--poster-ink) 28%,transparent);cursor:pointer} .cm-deck-tile .cm-tile-pick:hover{border-color:var(--v-accent)} /* The stage pill steps aside when the tools appear, so the two never share the corner. */ .cm-deck-tile:hover .cm-pill,.cm-deck-tile:focus-within .cm-pill,.cm-deck-tile.is-picked .cm-pill{transform:translateY(42px)} .cm-deck-tile .cm-pill{transition:transform .2s ease} .cm-deck-tile .cm-tile-bracket{position:absolute;right:20px;bottom:20px;z-index:2;font-size:12px;font-weight:600;color:color-mix(in srgb,var(--poster-ink) 85%,transparent);pointer-events:none} /* The last cell offers the one thing the grid does not already hold. */ .cm-deck-new{aspect-ratio:3/4;border-radius:var(--v-radius-tile);border:1.5px dashed var(--v-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--v-muted);font-weight:600;text-decoration:none;background:none} .cm-deck-new span{font-size:32px;line-height:1} .cm-deck-new:hover{border-color:var(--v-ink);color:var(--v-ink)} /* The head's summary line, and the two switches that used to be a toolbar above the grid. */ .cm-decks-summary{margin:8px 0 0;color:var(--v-muted);font-size:15px;max-width:60ch} .cm-decks-summary b{color:var(--v-ink);font-weight:600} .cm-deck-footlinks{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--v-muted)} @media(prefers-reduced-motion:reduce){.cm-deck-tile,.cm-deck-tile .cm-pill,.cm-deck-tile .cm-tile-tools{transition:none}.cm-deck-tile:hover{transform:none}} @media(max-width:760px){.cm-deck-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}} /* THE RAIL (Track V.3, the implementation guide's step 2). The header bar is gone: the logo, the wordmark and its aether mist sit at the top of the 216px rail, the nav under them with the current page raised and bold and no inset accent bar, the library note above the foot, and Menu at the foot carrying what the header's four buttons used to do. Nothing here sets a color that is not a token. */ /* flex:0 0 auto, explicitly: the header layout gave .v-brand-block flex:1 so it would fill the bar, and in a column rail that makes it swallow every spare pixel and center the logo in the middle of nothing. The nav track is the only child that grows. */ #matrix-v2 .cm-sidebar .v-brand-block{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;min-width:0;flex:0 0 auto} #matrix-v2 .cm-sidebar .v-brand-logo{position:relative;z-index:1;width:36px;height:36px;flex:0 0 36px;object-fit:contain;margin:0} #matrix-v2 .cm-sidebar .v-brand-copy{position:relative;min-width:0;flex:1 1 auto;padding:0} #matrix-v2 .cm-sidebar .v-brand{position:relative;z-index:1;font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.4px;padding:0;margin:0;white-space:nowrap;overflow:hidden} /* The mist is decorative and must never add height to the rail, so the canvases are absolute over the wordmark's own box. crankmagic-brand.js sizes them from that box. */ #matrix-v2 .cm-sidebar .v-aether-wrap{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:56px;pointer-events:none;z-index:0} /* Menu at the foot: full rail width, the outlined button scale, never wider than its column. */ #matrix-v2 .cm-rail-foot{margin-top:14px;min-width:0} #matrix-v2 .cm-rail-menu{display:flex;width:100%;justify-content:flex-start;gap:9px;min-height:42px;padding:0 12px;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--v-panel);color:var(--v-ink);font-weight:600} #matrix-v2 .cm-rail-menu:hover{background:var(--v-raised)} #matrix-v2 .cm-rail-menu .cm-btn-chevron{margin-left:auto} /* A deck row in the sub-nav carries an 8px dot in its commander's first color (guide, step 2). crankmagic-app.js sets --dot per row; a row without one shows no dot rather than a gray one. */ #matrix-v2 .cm-sidebar .cm-subnav a{font-size:13px} #matrix-v2 .cm-subnav a[style*="--dot"] span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--dot);margin-right:7px;vertical-align:middle;flex:0 0 8px} @media(max-width:760px){ /* The rail is a top row on a phone: the wordmark keeps its place at the left, the nav fills the middle and Menu sits at the right, all on one line. */ /* The row is logo, nav, Menu, on one line. The wordmark's text goes: 36px of logo plus four nav links plus Menu already fills 375px, and the name pushed Menu's own middle past the right edge, where nothing can click it. The logo carries the brand here. */ #matrix-v2 .cm-sidebar .v-brand-block{flex:0 0 auto;min-height:0;gap:0} #matrix-v2 .cm-sidebar .v-brand{display:none} #matrix-v2 .cm-sidebar .v-nav-links{min-width:0;overflow:hidden} #matrix-v2 .cm-sidebar .v-aether-wrap{display:none} #matrix-v2 .cm-rail-foot{margin-top:0;flex:0 0 auto} #matrix-v2 .cm-rail-menu{width:auto;min-height:40px;padding:0 10px} #matrix-v2 .cm-rail-menu .cm-btn-label{display:none} } /* THE TYPE SCALE, MEASURED (tools/compare-to-screen.mjs). The layout was already exact against the screens -- grid, tile, gaps all within a pixel -- and the type was eight pixels small everywhere, because crankmagic-design.css sets #matrix-v2 h1 to 36px and #matrix-v2 h3 to 16px, and an id out-specifies a class however many classes the rule has. The screens are h1 44px on a page head and 56 on the deck page hero, and 24px for a tile commander name. These carry the id so they win, rather than winning by !important. A screenshot cannot see eight pixels. A measurement can. */ #matrix-v2 .cm-page-head h1{font-size:44px;line-height:1.05;letter-spacing:-.015em;font-weight:400} #matrix-v2 .cm-deck-tile h3{font-size:24px;line-height:1.1;letter-spacing:-.02em;font-weight:400} #matrix-v2 .cm-deck-hero-copy h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.015em;font-weight:400} /* Same id-beats-class trap as the page head: .cm-explore-title was losing to #matrix-v2 h1 and rendering at 36px where the screen draws 52. */ #matrix-v2 .cm-explore-title{font-size:clamp(30px,4vw,52px);line-height:.98;letter-spacing:-.015em;font-weight:400} /* Headings and big figures in the display face; everything else stays Satoshi (guide, step 1). */ #matrix-v2 :is(h1,h2,h3,.cm-deck-tile h3,.cm-stats strong,.cm-summary-figures strong,.cm-budget-figures strong,.cm-kpi strong){font-family:var(--v-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}#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:var(--v-radius-card);padding:24px;min-width:0}#matrix-v2 .v-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 14px;background:var(--v-panel);color:var(--v-ink);border:1px solid var(--v-line);border-radius:var(--v-radius);font-weight:600;text-decoration:none} #matrix-v2 .v-button:hover{background:var(--v-raised)}#matrix-v2 .v-button.primary{background:var(--v-accent);color:var(--v-on);border-color:var(--v-accent);font-weight:700}#matrix-v2 .v-button:hover{filter:brightness(1.12)}.cm-layout{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100vh}.cm-sidebar{border-right:1px solid var(--v-line);background:var(--v-bg);padding:22px 18px;display:flex;flex-direction:column;gap:28px;min-width:0}.cm-sidebar nav{position:sticky;top:18px;display:grid;gap:4px;margin-bottom:auto;z-index:3}.cm-sidebar .v-nav-links a{padding:10px 12px;min-height:42px;display:flex;align-items:center;text-decoration:none;border-radius:10px;font-weight:600;color:var(--v-muted)}.cm-sidebar .v-nav-links a[aria-current=page]{background:var(--v-raised);color:var(--v-ink);font-weight:700;box-shadow:none}.cm-sidebar a:hover{background:var(--color-raised)}.cm-nav-note{font-size:12px;color:var(--v-muted);padding:16px 2px 0;border-top:1px solid var(--v-line);margin-top:24px}.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:var(--color-accent);font:inherit;text-align:left;text-decoration:underline;text-underline-offset:4px}#cm-main{padding:28px 36px 48px;min-width:0;outline:none}.cm-skip{position:fixed;left:10px;top:-60px;z-index:30;background:var(--v-accent);color:var(--v-on);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:var(--color-muted);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:var(--color-muted)}.cm-deck-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--v-bg) 34%,color-mix(in srgb,var(--v-bg) 68%,transparent) 56%,color-mix(in srgb,var(--v-bg) 4%,transparent) 88%);z-index:-1}/* Below the art's name banner: at 15px the status sat straight across the commander's printed name. */ .cm-badge{display:inline-flex;padding:4px 8px;border-radius:var(--v-radius);font-size:12px;background:var(--v-raised);color:var(--v-muted);white-space:nowrap}.cm-badge.warn{background:color-mix(in oklab,var(--v-accent) 20%,var(--v-bg));color:color-mix(in oklab,var(--v-accent) 20%,var(--v-ink))}.cm-badge.good{background:color-mix(in oklab,var(--st-inbox) 24%,var(--v-bg));color:color-mix(in oklab,var(--st-inbox) 32%,var(--v-ink))}.cm-danger{color:color-mix(in oklab,var(--st-remove) 32%,var(--v-ink))!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:var(--v-radius-card);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:var(--v-muted);color:var(--v-bg);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:color-mix(in oklab,var(--mana-W) 8%,var(--v-ink))}.cm-color.U{background:var(--mana-U)}.cm-color.B{background:color-mix(in oklab,var(--mana-B) 56%,var(--v-bg))}.cm-color.R{background:var(--mana-R)}.cm-color.G{background:var(--mana-G)}.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(var(--v-accent),var(--v-line));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:var(--color-panel);border:1px solid var(--color-raised);border-radius:var(--v-radius-card);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:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius-card)}.cm-graph-focus h2{margin:0;font-size:18px}.cm-graph-focus p{margin:4px 0 0;font-size:13px;color:var(--color-muted);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:var(--v-radius);border:1px solid var(--color-raised);background:var(--v-raised);color:var(--v-ink);font-size:18px;line-height:1;cursor:pointer}.cm-tile-menu-btn:hover{background:var(--v-raised)}.cm-tile-menu button.cm-danger{color:color-mix(in oklab,var(--st-remove) 32%,var(--v-ink))}/* screens/Gallery Explore.dc.html draws the graph box 722 tall at 1280x900; 100vh-180px is what puts it there, and the clamp still protects a short window and a tall one. */ .cm-graph-grid-tall{--cm-graph-h:clamp(560px,calc(100vh - 180px),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:var(--v-radius);object-fit:cover;background:var(--v-panel);box-shadow:0 8px 24px #0008}.cm-card-view-blank{border:1px dashed var(--color-raised)}.cm-card-view-title h2{margin:0 0 4px;font-size:19px;line-height:1.2}.cm-card-view-title p{margin:3px 0;font-size:13px;color:var(--v-muted)}.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:var(--v-muted)}.cm-chip.is-on{background:color-mix(in srgb,color-mix(in oklab,var(--v-accent) 28%,var(--v-ink)) 13%,transparent);border-color:var(--color-money);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-ink))}.v-button.is-on{background:var(--color-money);color:var(--v-on);border-color:var(--color-money)}.cm-pick-actions{padding:10px;background:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));border:1px solid color-mix(in oklab,var(--v-accent) 36%,var(--v-bg));border-radius:var(--v-radius)}.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:var(--color-ink)}.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:var(--v-muted)}.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:var(--v-muted);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 var(--v-line);border-radius:var(--v-radius-tile);cursor:pointer;font-size:12px;color:var(--v-muted);background:var(--v-panel)}.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:var(--v-raised);border-color:var(--color-accent);color:var(--color-ink)}.cm-color-pill:has(input:focus-visible){outline:2px solid var(--color-aether);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:var(--v-bg);border-radius:var(--v-radius)}.cm-plays-as h3{margin:0 0 6px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--v-muted)}.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:var(--v-radius)}.cm-columns-grid .cm-checkbox:hover{background:var(--v-raised)}.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:color-mix(in srgb,var(--v-bg) 96%,transparent);border:1px solid var(--v-line);border-radius:var(--v-radius-card);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:var(--color-accent)}.cm-graph-pop p{margin:4px 0}.cm-pop-close{border:0;background:var(--color-raised);color:#fff;border-radius:var(--v-radius);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:color-mix(in oklab,var(--v-accent) 48%,var(--v-ink));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:var(--color-accent)}.cm-showcase .cm-sub{max-width:440px;color:var(--color-muted);margin:0 0 18px;line-height:1.6}/* The showcase's three lines are one stack, so they get one rhythm: the buttons sit the same distance below "Make it yours." as the how-link sits below them, and the link's left edge lines up with the first button. `.cm-how-link`'s 12px indent is for the Decks toolbar, where it trails other controls; here it is the only thing on its line and the indent read as a misalignment. */.cm-showcase .cm-actions{margin:18px 0}.cm-showcase .cm-how-link{margin:0}.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:var(--v-raised);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 var(--v-panel);border-radius:var(--v-radius-card);background-size:cover;background-position:center top;background-color:var(--v-panel);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,var(--v-bg));font-size:11px;letter-spacing:1.7px;color:var(--v-ink);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:var(--v-radius-tile);min-height:230px;padding:28px 30px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;margin-bottom:22px;background:var(--v-panel);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,color-mix(in srgb,var(--v-bg) 95%,transparent) 0%,color-mix(in srgb,var(--v-bg) 80%,transparent) 42%,color-mix(in srgb,var(--v-bg) 20%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--v-bg) 91%,transparent) 0%,color-mix(in srgb,var(--v-bg) 0%,transparent) 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:var(--v-muted)}.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:var(--v-panel);box-shadow:0 1px 3px #0008;flex-shrink:0;display:inline-block}.cm-card-thumb-lg{width:48px;height:67px;border-radius:var(--v-radius);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,var(--color-raised)),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:var(--v-ink)}.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:var(--color-ink);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:var(--color-accent)}.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:var(--v-raised)}.cm-chip{display:inline-flex;gap:8px;border:1px solid var(--v-line);border-radius:var(--v-radius-tile);color:var(--v-muted);background:var(--v-raised);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:var(--v-muted);font-size:11px;letter-spacing:.035em;position:sticky;top:0;background:var(--v-panel);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:var(--color-ink);text-decoration:none;border:0;background:none;padding:0;text-align:left}.cm-table .cm-card-name:hover{color:var(--v-accent)}.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:var(--v-raised);font-weight:700}.cm-paging{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.cm-menu{padding:10px;background:var(--v-raised);border:1px solid var(--v-line);border-radius:var(--v-radius-card);box-shadow:0 12px 40px #0008;color:var(--v-ink);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:var(--v-radius);font-size:13px}.cm-menu button:hover,.cm-menu a:hover{background:var(--v-raised)}.cm-menu p{padding:0 12px;color:var(--v-muted);font-size:12px}.cm-menu hr{border:0;border-top:1px solid var(--v-line)}.cm-menu .cm-submenu{margin-left:12px;border-left:1px solid var(--v-line);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:var(--v-raised);border:1px solid var(--v-line);border-radius:var(--v-radius);max-width:min(720px,calc(100vw - 24px));box-shadow:0 10px 35px #0008}.cm-toast.error{background:color-mix(in oklab,var(--st-remove) 28%,var(--v-bg));border-color:var(--st-remove)}#cm-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:25px;border:1px solid var(--color-line);background:var(--color-panel);color:var(--color-ink);overflow:hidden auto;border-radius:var(--v-radius-card)}#cm-dialog::backdrop{background:color-mix(in srgb,var(--v-bg) 75%,transparent);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:var(--color-raised);color:white;border-radius:var(--v-radius);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:color-mix(in oklab,var(--st-remove) 24%,var(--v-ink));background:color-mix(in oklab,var(--st-remove) 24%,var(--v-bg));border-radius:var(--v-radius);padding:12px;white-space:pre-wrap}.cm-note{border-left:3px solid var(--v-accent);padding:13px 16px;background:var(--v-raised);color:var(--v-muted);font-size:13px;margin:16px 0;line-height:1.5}.cm-warning{border-color:var(--v-accent);background:color-mix(in oklab,var(--v-accent) 20%,var(--v-bg));color:color-mix(in oklab,var(--v-accent) 28%,var(--v-ink))}.cm-checkbox{display:flex;align-items:center;gap:8px}.cm-checkbox input{min-height:0;width:16px;height:16px}.cm-details{border:1px solid var(--v-line);border-radius:var(--v-radius);padding:0 15px;background:var(--v-panel)}.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:var(--v-radius-card)}.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 color-mix(in srgb,var(--v-line) 19%,transparent);background:radial-gradient(circle at 30% 20%,color-mix(in srgb,color-mix(in oklab,var(--v-accent) 60%,var(--v-ink)) 13%,transparent),transparent 60%),color-mix(in srgb,var(--v-bg) 38%,transparent);box-sizing:border-box}.cm-run-orb.active{border-color:color-mix(in srgb,var(--v-accent) 53%,transparent);background:radial-gradient(circle at 32% 20%,color-mix(in srgb,color-mix(in oklab,var(--v-accent) 36%,var(--v-ink)) 31%,transparent),transparent 56%),color-mix(in srgb,color-mix(in oklab,var(--v-accent) 32%,var(--v-bg)) 22%,transparent);box-shadow:inset 0 -3px 8px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 64%,var(--v-bg)) 23%,transparent),0 0 17px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 48%,var(--v-bg)) 13%,transparent)}.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,color-mix(in oklab,var(--v-accent) 48%,var(--v-ink)),color-mix(in oklab,var(--v-accent) 72%,var(--v-bg)) 46%,color-mix(in srgb,color-mix(in oklab,var(--v-accent) 40%,var(--v-bg)) 13%,transparent));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 color-mix(in srgb,color-mix(in oklab,var(--st-inbox) 36%,var(--v-ink)) 40%,transparent));animation:cm-orb-grow 2.7s ease-in-out infinite alternate}.cm-run-orb.complete{border-color:color-mix(in srgb,color-mix(in oklab,var(--st-inbox) 60%,var(--v-ink)) 42%,transparent);background:radial-gradient(circle at 30% 20%,color-mix(in srgb,color-mix(in oklab,var(--st-inbox) 8%,var(--v-ink)) 24%,transparent),transparent 62%),color-mix(in srgb,color-mix(in oklab,var(--st-inbox) 52%,var(--v-bg)) 19%,transparent);box-shadow:inset 0 -4px 9px color-mix(in srgb,color-mix(in oklab,var(--st-inbox) 48%,var(--v-bg)) 19%,transparent),0 0 13px color-mix(in srgb,color-mix(in oklab,var(--st-inbox) 68%,var(--v-ink)) 10%,transparent)}.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:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius);color:var(--v-ink)}.cm-commander-result strong{font-size:13px}.cm-commander-result span:last-child{font-size:12px;color:var(--v-muted)}.cm-selected-commander{padding:16px;background:var(--v-raised);border:1px solid var(--v-line);border-radius:var(--v-radius-card);margin:15px 0}.cm-section-heading{margin:28px 0 16px;padding-top:20px;border-top:1px solid var(--v-line);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--v-muted)}.cm-graph{height:550px;min-height:320px;width:100%;display:block;touch-action:none;border:1px solid var(--v-raised);border-radius:var(--v-radius-tile);background:radial-gradient(ellipse at 50% 40%,var(--v-panel),var(--v-bg) 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:var(--v-bg);border-radius:var(--v-radius)}.cm-swot h3{margin:0 0 6px;color:var(--v-ink)}.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:var(--color-muted)}.cm-pause-pill{display:inline-block;border:1px solid color-mix(in oklab,var(--v-accent) 56%,var(--v-bg));color:color-mix(in oklab,var(--v-accent) 60%,var(--v-ink));background:var(--v-raised);border-radius:var(--v-radius);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 var(--v-line);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:var(--v-raised);color:var(--v-ink);border:1px solid var(--v-line);border-radius:var(--v-radius);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:var(--v-line);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:216px minmax(0,1fr)}.cm-commander{grid-template-columns:160px 1fr}#cm-main{padding:28px 24px 48px}}@media(max-width:760px){.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 var(--v-line);display:flex;flex-direction:row;align-items:center;gap:10px;background:color-mix(in srgb,var(--v-bg) 96%,transparent)}.cm-sidebar nav{display:flex;gap:2px;position:static;justify-content:space-between;margin:0;flex:1 1 auto}.cm-sidebar .v-nav-links a{padding:10px 7px;font-size:12px;white-space:nowrap;min-height:40px}.cm-sidebar .v-nav-links a[aria-current=page]{box-shadow:inset 0 -2px var(--v-accent)}.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(2,minmax(0,1fr));gap:14px}}@media(max-width:370px){.cm-sidebar .v-nav-links 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:var(--v-raised)} #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:var(--v-line)} .cm-swap-card{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;background:color-mix(in srgb,var(--v-bg) 60%,transparent);border:1px solid var(--v-raised);border-radius:var(--v-radius-card);padding:10px} .cm-swap-card figcaption{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)} .cm-swap-card img{width:100%;max-width:220px;border-radius:var(--v-radius);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:var(--v-muted);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}} /* THE SLOT PICKER ABOVE THE COMPARE (Discover's Swap for...). The dialog's grid is two columns, so a bare select and a note landed beside each other at different heights and different widths -- the sloppiness Rob called out. The picker is one full-width row with its label on the left, its select flush to the compare block's right edge beneath it, and both stacked at phone width. */ #matrix-v2 .cm-swap-pick>label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px} @media (max-width:640px){#matrix-v2 .cm-swap-pick>label{grid-template-columns:1fr;gap:7px}} /* 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 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 neighbors 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:var(--v-raised)} .cm-batch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:16px 0 4px;padding:12px 15px;background:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius-card)} .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:var(--v-raised);color:var(--v-ink)} /* 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:var(--color-muted)} .cm-data-dates{margin:4px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--v-line)} .cm-data-row{display:flex;justify-content:space-between;gap:14px;padding:3px 12px;font-size:12px;color:var(--v-muted)} .cm-data-row>span:last-child{color:var(--color-muted);white-space:nowrap} .cm-data-stale,.cm-data-stale>span:last-child{color:color-mix(in oklab,var(--v-accent) 48%,var(--v-ink))} /* Unranked is a fact about EDHREC's published list, not about the commander. */ .cm-unranked{color:var(--color-muted);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:var(--color-accent);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 color 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-wrap:wrap;align-items:baseline;gap:2px 16px} /* The two shops sit side by side (Rob, 14 September); the price takes the line above them. */ .cm-inspector-buy .cm-inspector-price{flex:0 0 100%} .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 var(--color-raised);border-bottom:1px solid var(--v-panel);border-radius:0 0 0 3px;background:none;color:var(--v-muted);font:inherit;font-size:13px;min-height:32px} .cm-facet-pick:hover{background:var(--v-raised);border-left-color:var(--color-accent)} .cm-facet-pick small{margin-left:auto;flex-shrink:0} .cm-facet-pick.is-on{background:color-mix(in srgb,color-mix(in oklab,var(--v-accent) 28%,var(--v-ink)) 8%,transparent);border-left-color:var(--color-money);border-bottom-color:color-mix(in srgb,color-mix(in oklab,var(--v-accent) 28%,var(--v-ink)) 33%,transparent);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-ink))} .cm-facet-pick.is-not,.cm-chip.is-not{background:color-mix(in srgb,color-mix(in oklab,var(--st-remove) 28%,var(--v-bg)) 36%,transparent);border-color:var(--st-remove);color:color-mix(in oklab,var(--st-remove) 20%,var(--v-ink))}.cm-facet-pick.is-not{border-left-color:var(--st-remove);border-bottom-color:color-mix(in srgb,var(--st-remove) 40%,transparent)} .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:color-mix(in oklab,var(--st-remove) 60%,var(--v-ink))} /* 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 var(--v-line);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:var(--v-muted)} .cm-lab-section>summary::-webkit-details-marker{display:none} .cm-lab-section>summary::before{content:'\25B8';font-size:12px;color:var(--v-line);transition:transform .15s ease} .cm-lab-section[open]>summary::before{transform:rotate(90deg)} .cm-lab-section>summary:hover{color:var(--v-ink)} .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:var(--v-radius)} } @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 center 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:var(--v-radius)} } /* 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, colored 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:var(--v-bg);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 , 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(var(--v-accent),var(--v-line))} .cm-turn-hist span{font-size:10px;color:var(--v-muted);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:var(--color-raised);color:var(--v-ink);font-size:11px;font-weight:700;line-height:1} #matrix-v2 .cm-run-do.primary .cm-run-num{background:var(--v-bg);color:var(--v-ink)} /* 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:var(--v-panel);border-color:var(--color-raised);color:var(--v-muted)} #matrix-v2 .cm-run-do.primary:disabled .cm-run-num{background:var(--color-raised);color:var(--v-ink)} .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 color -- 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:var(--v-radius-card);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 var(--color-panel) 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 COLOR. 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)} /* The ring is aether everywhere, per README:44 and design-system/readme.md:20. The border may stay brass: that is the field saying it is active, not the browser saying it is focused. */ #matrix-v2 input:focus-visible,#matrix-v2 select:focus-visible,#matrix-v2 textarea:focus-visible{ outline:2px solid var(--color-aether);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:var(--v-radius-card);border:2px solid var(--v-accent); box-shadow:0 0 0 9999px color-mix(in srgb,var(--v-bg) 69%,transparent),0 0 22px color-mix(in srgb,var(--v-accent) 33%,transparent); 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:var(--v-radius-card);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:var(--v-radius-card); color:var(--v-ink);cursor:pointer} #matrix-v2 .cm-tour-pick:hover{border-color:var(--v-accent);background:var(--v-raised)} .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 labeled 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-card-view :is(h1,h2,h3){overflow-wrap:break-word} .cm-graph-box{position:relative;min-width:0;border-radius:var(--v-radius-tile);overflow:hidden;border:1px solid var(--v-line);background:radial-gradient(ellipse at 50% 40%,color-mix(in oklab,var(--v-accent) 9%,var(--v-panel)),var(--v-panel) 70%)} /* THE CANVAS OVERLAYS. Blurred pills on the stage rather than a toolbar above it, so the graph gets the whole box. Each is a floating group with the same treatment: the ground at 80% under a blur, a hairline, and the control radius. */ #matrix-v2 .cm-graph-box .cm-graph-modes,#matrix-v2 .cm-graph-box .cm-graph-reach,#matrix-v2 .cm-graph-legend{position:absolute;z-index:3;display:flex;align-items:center;gap:6px;margin:0;padding:6px;border-radius:var(--v-radius);border:1px solid var(--v-line);background:color-mix(in srgb,var(--v-bg) 80%,transparent);backdrop-filter:blur(8px)} #matrix-v2 .cm-graph-box .cm-graph-modes{top:14px;left:14px} #matrix-v2 .cm-graph-box .cm-graph-modes .v-button{min-height:32px;padding:0 12px;font-size:13px;border:0;background:none;color:var(--v-muted)} #matrix-v2 .cm-graph-box .cm-graph-modes .v-button.is-on{background:var(--v-accent);color:var(--v-on);font-weight:700} #matrix-v2 .cm-graph-box .cm-graph-reach{bottom:14px;left:14px;flex-wrap:wrap;gap:14px;max-width:calc(100% - 28px)} #matrix-v2 .cm-graph-box .cm-graph-reach label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--v-muted);margin:0} #matrix-v2 .cm-graph-box .cm-graph-reach input[type=range]{width:70px;accent-color:var(--v-accent)} /* The legend says what a ring and a line mean, which is the one thing a graph cannot say about itself. It is the last thing to go when the box is narrow. */ #matrix-v2 .cm-graph-legend{top:14px;right:56px;gap:14px;font-size:12px;color:var(--v-muted)} #matrix-v2 .cm-graph-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #matrix-v2 .cm-graph-legend i{width:10px;height:10px;border-radius:var(--radius-pill);flex:0 0 10px} #matrix-v2 .cm-graph-legend .is-own{border:2px solid var(--st-inbox)} #matrix-v2 .cm-graph-legend .is-not{border:2px dashed var(--v-line-strong)} #matrix-v2 .cm-graph-legend .is-loop{height:2px;border-radius:0;background:var(--v-accent)} @media(max-width:1050px){#matrix-v2 .cm-graph-legend{display:none}} #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:var(--v-radius);background:color-mix(in srgb,var(--v-panel) 85%,transparent); color:var(--v-muted);backdrop-filter:blur(3px);cursor:pointer} #matrix-v2 .cm-stage-btn:hover{background:var(--v-raised);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:var(--v-radius);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:var(--color-raised);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 neighbors 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:var(--v-radius);color:inherit;font:inherit;text-align:inherit; box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--v-line) 50%,transparent);cursor:text} #matrix-v2 .cm-cell-edit:hover{background:var(--v-raised);box-shadow:inset 0 -1px 0 var(--v-accent)} #matrix-v2 .cm-cell-edit:focus-visible{outline:2px solid var(--color-aether);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:var(--v-radius);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 , 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 var(--v-line);border-radius:var(--v-radius);background:var(--color-raised);color:var(--color-ink); font-size:13px;line-height:1;text-align:center} .cm-menu.cm-step button:hover{background:var(--v-raised)} /* 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:var(--v-line);border-color:color-mix(in oklab,var(--st-inbox) 80%,var(--v-bg));color:color-mix(in oklab,var(--st-inbox) 8%,var(--v-ink));font-size:16px;font-weight:700} .cm-menu.cm-step .cm-step-ok:hover{background:color-mix(in oklab,var(--st-inbox) 64%,var(--v-bg))} .cm-menu.cm-step input{width:58px;height:34px;min-height:0;margin:0;padding:0 6px;text-align:center; background:var(--v-field);border:1px solid var(--v-field-line);border-radius:var(--v-radius);color:var(--color-ink);font:inherit;font-size:14px} /* ADD COPIES (Rob, 15 September). Two facts per row -- what these copies are, and how many -- and a link that adds a row for the box where three arrived but only one is in hand. The counter borrows the step control's shape so a count reads the same everywhere in the app. */ .cm-copies{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .cm-copy-rows{display:flex;flex-direction:column;gap:8px;width:100%} .cm-copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* `#matrix-v2 .cm-form-grid select{width:100%}` sits later in this sheet at the same weight, so a row's controls have to out-specify it or the select eats the line and the counter wraps. */ #matrix-v2 .cm-form-grid .cm-copy-row select{width:auto;min-width:150px;flex:0 0 auto;margin:0} .cm-copy-count{display:inline-flex;align-items:center;gap:6px} #matrix-v2 .cm-copy-count button{display:inline-grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--color-raised);color:var(--color-ink);font:inherit;font-size:15px;line-height:1} #matrix-v2 .cm-copy-count button:hover{background:var(--v-raised)} #matrix-v2 .cm-form-grid .cm-copy-count input{width:62px;height:34px;min-height:0;margin:0;padding:0 6px;text-align:center;font-variant-numeric:tabular-nums} #matrix-v2 .cm-copy-drop{width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:var(--v-radius);background:none;color:var(--v-muted);font-size:17px;line-height:1} #matrix-v2 .cm-copy-drop:hover{background:color-mix(in oklab,var(--st-remove) 24%,var(--v-bg));color:color-mix(in oklab,var(--st-remove) 32%,var(--v-ink))} .cm-copy-extras>details{border:1px solid var(--v-line);border-radius:var(--v-radius);padding:0 14px;background:var(--v-panel)} .cm-copy-extras>details>summary{cursor:pointer;min-height:0;padding:11px 0;font-size:13px;color:var(--v-muted)} .cm-copy-extras>details[open]{padding-bottom:14px} /* Decline sits beside Promote on every upgrade row, so it reads as the other answer to the same question rather than as a delete: quiet until you are over it. */ #matrix-v2 .cm-up-decline{background:none;border-color:var(--v-line);color:color-mix(in oklab,var(--st-remove) 36%,var(--v-ink))} #matrix-v2 .cm-up-decline:hover{background:color-mix(in oklab,var(--st-remove) 24%,var(--v-bg));border-color:color-mix(in oklab,var(--st-remove) 72%,var(--v-bg));color:color-mix(in oklab,var(--st-remove) 16%,var(--v-ink));filter:none} .cm-up-buy{margin:12px 0 0;font-size:13px;color:var(--v-muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center} .cm-menu.cm-step input:focus-visible{outline:2px solid var(--color-aether);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 . */ .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:var(--color-muted);font-weight:400;white-space:normal} .cm-menu .cm-rung.is-current,.cm-menu .cm-rung.is-current:hover{cursor:default;background:var(--v-raised);color:var(--v-muted)} .cm-menu .cm-rung.is-current .cm-rung-label:before{content:'\25CF ';color:var(--color-accent)} .cm-menu .cm-menu-fine{padding:6px 12px 8px;font-size:11.5px;line-height:1.4;color:var(--color-muted)} .cm-menu .cm-danger{color:color-mix(in oklab,var(--st-remove) 44%,var(--v-ink))} /* 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:var(--v-raised)} #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. */ #matrix-v2 .cm-deck-tile .cm-tile-pick input{width:18px;height:18px;min-height:0;margin:0;padding:0;cursor:pointer;accent-color:var(--color-accent)} .cm-deck-tile.is-picked{border-color:var(--v-accent);box-shadow:0 0 0 1px var(--v-accent)} #matrix-v2 .v-button[disabled]{opacity:.45;cursor:not-allowed} /* The card pop-up's standing: two labeled 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 neighbors. */ #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 var(--color-raised);border-radius:var(--v-radius);background:var(--v-raised);color:var(--v-ink);font-size:18px;line-height:1;cursor:pointer} #matrix-v2 .cm-icon-button:hover{background:var(--v-raised)} .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% toward white, because at 22% tint the four darker tokens fell under 4.5:1 on their own tint (blue 3.1, gray 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:var(--v-radius);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 colors, 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:var(--v-radius);overflow:hidden;background:var(--color-raised);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:var(--color-panel);border:1px solid var(--color-raised);border-radius:var(--v-radius-card)} .cm-shop-money{margin:0 0 10px;font-size:14px;color:var(--v-muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline} .cm-shop-money strong{font-size:18px;font-weight:600;color:var(--color-ink);font-variant-numeric:tabular-nums} .cm-shop-money strong.cm-over{color:var(--st-remove)} .cm-band-bar{display:flex;height:8px;border-radius:var(--v-radius);overflow:hidden;background:var(--color-raised);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:var(--color-ink);font-weight:700} .cm-band-dollars{color:color-mix(in oklab,var(--v-accent) 44%,var(--v-ink));font-weight:700} .cm-price,.cm-cap{white-space:nowrap;font-variant-numeric:tabular-nums} .cm-cap-local{color:color-mix(in oklab,var(--st-remove) 64%,var(--v-ink))}.cm-cap-local small{display:block;font-size:10px;color:color-mix(in oklab,var(--st-remove) 64%,var(--v-ink));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:var(--color-bg);min-width:150px;max-width:190px;padding-left:0;white-space:normal;box-shadow:2px 0 0 var(--color-line)} .cm-table-shop tr.cm-row-card:hover td:first-child,.cm-table-shop tr.cm-row-ticked td:first-child{background:var(--v-raised)} .cm-table-shop th:first-child{background:var(--v-panel);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:var(--color-muted)} .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:color-mix(in srgb,var(--v-bg) 95%,transparent);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:var(--v-radius);background:none;color:var(--color-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap} #matrix-v2 .cm-jump-link:hover{background:var(--color-raised);color:var(--color-ink)} .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 colors. */ .cm-deck-tile>button{padding-top:88px} #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,var(--color-raised)),var(--ci-b,var(--v-raised)));-webkit-background-clip:text;background-clip:text;opacity:.28} .cm-deck-tile:has(.cm-deck-initials){background:var(--v-panel)} /* ================================== THE PULL SHEET ================================== Rows read color · 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:var(--v-muted)} .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:var(--color-raised);border-radius:var(--v-radius-card);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 var(--v-panel)} .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:var(--st-inbox);cursor:pointer} #matrix-v2 .cm-pull-name{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--color-ink);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:var(--v-muted);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:var(--color-panel);border:1px solid var(--color-raised);border-radius:var(--v-radius-card)} .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:var(--color-muted)} .cm-budget-bar{height:6px;margin-top:10px;border-radius:4px;background:var(--color-raised);overflow:hidden} .cm-budget-bar i{display:block;height:100%;background:var(--st-inbox);border-radius:4px} .cm-budget.cm-near{border-color:var(--v-decision-line)}.cm-budget.cm-near .cm-budget-bar i{background:var(--st-buy)} .cm-budget.cm-over{border-color:color-mix(in oklab,var(--st-remove) 44%,var(--v-bg))}.cm-budget.cm-over .cm-budget-bar i{background:var(--st-remove)} .cm-amber{color:color-mix(in oklab,var(--v-accent) 44%,var(--v-ink))} /* 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 var(--v-line);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)} .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 var(--v-line);border-radius:var(--v-radius-tile);background:var(--v-raised);color:var(--v-muted);font:inherit;font-size:12px;cursor:pointer} #matrix-v2 .cm-fchip:hover{background:var(--v-raised)} #matrix-v2 .cm-fchip strong{color:var(--v-ink);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:var(--v-radius);background:var(--v-raised);color:var(--v-muted);font-size:10.5px;line-height:1.5;max-width:none;vertical-align:middle} .cm-hover-art{position:fixed;z-index:70;width:360px;aspect-ratio:488/680;border-radius:var(--v-radius);box-shadow:0 12px 34px #000b;pointer-events:none;background:var(--v-panel)} #matrix-v2 .cm-cell-edit{box-shadow:none;border-bottom:1px dotted var(--v-field-line);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:var(--color-muted)} .cm-nav-note strong{font-weight:600} .cm-nav-note .cm-text-button{color:var(--color-accent)} .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:var(--v-radius) 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:var(--v-raised)} #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:var(--color-ink);text-align:left;cursor:pointer;overflow-wrap:anywhere} .cm-list-row.is-on td{background:var(--v-panel)} #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 color, the join label, an in-place detail row. */ .cm-list-row{cursor:pointer}.cm-list-row:hover td{background:var(--v-panel)} .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:var(--v-muted);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:var(--v-panel);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:var(--color-accent)}.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:var(--v-radius);min-height:0} .cm-pane-gutter i{width:4px;height:44px;border-radius:2px;background:var(--color-raised);pointer-events:none} .cm-pane-gutter:hover,.cm-pane-gutter:focus-visible,.cm-pane-gutter.is-dragging{background:var(--v-raised);outline:0} .cm-pane-gutter:hover i,.cm-pane-gutter:focus-visible i,.cm-pane-gutter.is-dragging i{background:var(--color-accent)} .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:var(--color-accent)}.cm-universe-body p{padding:0;margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--v-muted)}.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:color-mix(in srgb,var(--v-panel) 97%,transparent);border:1px solid var(--v-line);border-top-color:var(--color-raised);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:var(--color-panel);border-bottom:1px solid var(--color-raised)} .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 var(--color-raised);border-bottom:1px solid var(--v-panel);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:var(--color-accent)} .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:color-mix(in oklab,var(--v-accent) 20%,var(--v-bg));color:var(--color-money)}.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:var(--color-panel);border:1px solid var(--color-raised);border-radius:var(--v-radius-card);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 var(--color-raised)} .cm-summary-col h3{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);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:var(--color-muted)} .cm-deck-summary .cm-deck-summary .cm-budget-bar{margin-top:auto} .cm-deck-summary.cm-near .cm-summary-cost{background:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg))}.cm-deck-summary.cm-over .cm-summary-cost{background:color-mix(in oklab,var(--st-remove) 12%,var(--v-bg))} .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 var(--color-raised)}} /* 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:360px;aspect-ratio:488/680;border-radius:var(--v-radius);box-shadow:0 12px 34px #000b;pointer-events:none;background:var(--v-panel);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:var(--color-accent);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:var(--color-accent);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:var(--v-raised);border-color:var(--v-line);color:var(--v-ink)} .cm-list-pop-row .cm-actions .v-button.primary{background:var(--v-accent);color:var(--v-on);border-color:var(--v-accent)} /* ADVANCED TOOLS DISCLOSURE (Explore B): progressive disclosure control for Filters, Trace, Lens */ .cm-advanced-tools-disclosure{margin:6px 0 8px} .cm-advanced-tools-toggle{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--v-panel);color:var(--v-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s} .cm-advanced-tools-toggle:hover{background:var(--v-raised);border-color:var(--v-line);color:var(--color-ink)} .cm-advanced-tools-panel{transition:opacity .2s} .cm-advanced-tools-panel[hidden]{display:none} /* 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:var(--color-panel);border:1px solid var(--color-raised);border-radius:var(--v-radius-card)} .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 var(--color-raised)} .cm-facet-group:last-of-type{border-right:0} .cm-facet-group-name{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--v-muted);margin-right:2px} .cm-facet-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--color-raised);border-radius:var(--v-radius);background:var(--v-raised);color:var(--color-ink);font:inherit;font-size:12.5px;cursor:pointer;width:auto;text-align:left} .cm-facet-btn:hover{background:var(--v-raised);border-left-color:var(--color-raised)} .cm-facet-btn.is-on{background:color-mix(in srgb,color-mix(in oklab,var(--v-accent) 28%,var(--v-ink)) 13%,transparent);border-color:var(--color-money);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-ink))} .cm-facet-btn.is-not{background:color-mix(in srgb,color-mix(in oklab,var(--st-remove) 28%,var(--v-bg)) 36%,transparent);border-color:var(--st-remove);color:color-mix(in oklab,var(--st-remove) 20%,var(--v-ink))} .cm-facet-n{min-width:18px;height:18px;padding:0 5px;border-radius:var(--v-radius);background:var(--color-money);color:var(--v-on);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 var(--color-raised);border-radius:var(--v-radius-tile);padding:5px 10px;background:var(--v-raised);gap:6px;min-height:32px} .cm-facet-grid .cm-facet-pick:hover{border-color:var(--color-accent);background:var(--v-raised)} .cm-facet-grid .cm-facet-pick.is-on{border-color:var(--color-money);background:color-mix(in srgb,color-mix(in oklab,var(--v-accent) 28%,var(--v-ink)) 13%,transparent)} .cm-facet-grid .cm-facet-pick.is-not{border-color:var(--st-remove);background:color-mix(in srgb,color-mix(in oklab,var(--st-remove) 28%,var(--v-bg)) 36%,transparent)} .cm-facet-dialog-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--color-raised);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 var(--color-raised);border-radius:var(--v-radius-card);margin:14px 0;background:var(--v-bg)} #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 var(--v-panel);border-right:1px solid var(--v-panel);vertical-align:middle;background:var(--v-bg)} #matrix-v2 .cm-sheet thead th{position:sticky;top:0;z-index:3;background:var(--v-panel);padding:6px 8px;font-size:11px;letter-spacing:.03em;color:var(--v-muted);text-align:center!important;white-space:nowrap;border-bottom:1px solid var(--color-raised)} #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:var(--v-panel);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 var(--color-raised)} #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:var(--color-ink);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:var(--v-panel);font-weight:700;padding:7px 8px;text-align:right!important;border-top:2px solid var(--v-raised);color:var(--color-ink)} #matrix-v2 .cm-sheet tfoot .cm-sheet-name{text-align:left!important;background:var(--v-panel)} #matrix-v2 .cm-sheet .cm-sheet-num{text-align:right!important;min-width:56px;padding:0 6px;color:var(--v-muted)} #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:var(--v-bg)} #matrix-v2 .cm-sheet thead .cm-sheet-alt{background:var(--v-panel)} #matrix-v2 .cm-sheet tfoot .cm-sheet-alt{background:var(--v-panel)} #matrix-v2 .cm-sheet .cm-sheet-deck-name{display:block;font-weight:700;letter-spacing:0;font-size:12px;color:var(--color-ink);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:var(--color-muted);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:var(--v-raised);box-shadow:inset 0 0 0 1px var(--color-line)} #matrix-v2 .cm-sheet-cell:focus-visible{outline:2px solid var(--color-accent);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:var(--v-raised);color:#fff;font:inherit;text-align:right;box-shadow:inset 0 0 0 2px var(--color-accent)} .cm-sheet-zero{color:var(--v-line)} #matrix-v2 .cm-sheet .is-short,#matrix-v2 .cm-sheet .is-short .cm-sheet-cell{color:var(--color-money)} #matrix-v2 .cm-sheet .is-done .cm-sheet-cell{color:color-mix(in oklab,var(--st-inbox) 56%,var(--v-ink))} .cm-sheet-pend{font-size:10px;color:var(--color-accent);margin-left:2px;vertical-align:super;font-weight:600} .cm-sheet-opt{color:var(--color-money);font-size:8px;margin-left:3px;vertical-align:middle} .cm-sheet-opt.cm-sheet-pinned{color:var(--color-accent)} #matrix-v2 .cm-sheet .cm-sheet-muted{color:var(--v-line);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 colors appear, so it reads as a placeholder over the solid segments. */ .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:color-mix(in oklab,var(--st-standin) 20%,var(--v-bg));color:color-mix(in oklab,var(--st-standin) 60%,var(--v-ink))} .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:var(--color-muted);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:var(--color-accent);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:var(--st-pull);--how-b:var(--st-ordered);--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:var(--color-raised);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:var(--v-bg);background:var(--v-accent,var(--color-accent));box-shadow:0 0 0 6px var(--v-bg)} .cm-how-node-split{background:linear-gradient(to bottom,var(--how-a) 50%,var(--how-b) 50%)} .cm-how-node-done{background:var(--st-buy)} .cm-how-title{margin-top:12px;font-weight:700;font-size:16px;color:var(--color-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--color-line)} .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:var(--v-muted);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:var(--color-ink);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:var(--color-line)} .cm-how-path span{color:var(--v-muted)} .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:var(--color-muted);max-width:22ch;line-height:1.45} .cm-how-ladder{margin:44px 0 0;padding:22px 24px;border:1px solid var(--color-raised);border-radius:var(--v-radius-card);background:var(--v-bg)} .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:var(--v-radius);background:var(--v-panel);position:relative} .cm-how-rungs li+li::before{content:'›';position:absolute;left:-9px;top:10px;color:var(--color-line);font-size:16px} .cm-how-rungs strong{font-size:14px;color:var(--color-ink)} .cm-how-rungs span{font-size:12px;color:var(--v-muted);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 color. */ .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:var(--v-radius-card);background:var(--v-bg);border:1px solid var(--color-raised);border-top:3px solid var(--st,var(--color-line))} .cm-stats-row .cm-stat strong{display:block;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--v-ink)} .cm-stats-row .cm-stat span{display:block;margin-top:3px;font-size:12px;color:var(--color-muted);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,var(--v-line))} /* 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 @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:var(--v-radius-card);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:var(--v-accent)} .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 var(--v-line);border-radius:var(--v-radius);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:var(--v-muted);padding:0 4px} .cm-list-source-opt{display:flex;gap:10px;align-items:flex-start;min-height:34px;padding:4px 2px;border-radius:var(--v-radius);cursor:pointer} .cm-list-source-opt:hover{background:var(--v-raised)} #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:var(--color-muted);font-size:12px;line-height:1.4} /* ONE COLOR 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:var(--color-panel);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:grid;gap:0;min-width:0} .cm-page-name{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:var(--color-muted);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:var(--v-muted);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:var(--color-accent)} .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;overflow-y:hidden;align-items:center;scrollbar-width:thin} .cm-tabs [role=tab]{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--color-muted);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:var(--color-muted)} .cm-tabs [role=tab][aria-selected=true]{color:var(--color-ink);border-bottom-color:var(--color-accent)} .cm-tabs [role=tab][aria-selected=true] small{color:var(--v-muted)} .cm-tabs [role=tab]:hover{color:#fff} .cm-seg{display:inline-flex;border:1px solid var(--color-raised);border-radius:var(--v-radius);overflow:hidden;align-self:end} .cm-seg button{background:var(--v-raised);color:var(--color-muted);border:0;font:inherit;font-weight:600;padding:0 14px;min-height:40px;cursor:pointer} .cm-seg button+button{border-left:1px solid var(--color-raised)} .cm-seg button[aria-pressed=true]{background:var(--color-raised);color:var(--color-ink)} .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 12px;padding:0 0 0 10px;display:grid;gap:2px;border-left:2px solid var(--v-line)} #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:var(--color-muted);border-radius:var(--v-radius);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:var(--color-muted)} #matrix-v2 .cm-sidebar .cm-subnav a.is-current{color:var(--color-ink);background:var(--v-raised)} #matrix-v2 .cm-sidebar .cm-subnav a:hover{background:var(--color-raised);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 var(--color-accent);background:var(--v-bg);color:var(--color-ink);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:var(--v-radius);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 color 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-gray -- 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%,var(--v-raised));border-color:color-mix(in srgb,var(--st-inbox) 45%,var(--color-raised));color:color-mix(in oklab,var(--st-inbox) 8%,var(--v-ink))} .cm-facet-group[data-group=yours] .cm-facet-btn:hover{background:color-mix(in srgb,var(--st-inbox) 24%,var(--v-raised));border-color:color-mix(in srgb,var(--st-inbox) 70%,var(--color-raised))} .cm-facet-group[data-group=yours] .cm-facet-btn.is-on{background:color-mix(in srgb,var(--st-inbox) 30%,var(--v-raised));border-color:var(--st-inbox);color:color-mix(in oklab,var(--st-inbox) 8%,var(--v-ink))} .cm-facet-group[data-group=yours] .cm-facet-n{background:var(--st-inbox);color:var(--v-on)} /* 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:var(--v-accent);box-shadow:0 0 0 1.5px var(--v-accent),0 0 12px color-mix(in srgb,var(--v-accent) 33%,transparent)} /* 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(118px,calc(var(--cm-pane-w,310px) * .34),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:var(--v-muted);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 var(--color-raised);border-radius:var(--v-radius);background:var(--v-bg);font-size:12px} .cm-loop.is-closed{border-color:color-mix(in srgb,var(--v-accent) 40%,transparent)} #matrix-v2 .cm-loop-card{min-height:0;border:1px solid var(--v-line);border-radius:var(--v-radius-card);background:var(--v-raised);color:var(--color-ink);padding:3px 9px;font:inherit;font-size:12px;line-height:1.3;cursor:pointer} #matrix-v2 .cm-loop-card:hover{border-color:var(--color-accent);background:var(--v-raised)} #matrix-v2 .cm-loop-card.is-missing{border-style:dashed;color:var(--v-muted);background:transparent} #matrix-v2 .cm-loop-card.cm-loop-payoff{border-color:var(--st-ordered)} .cm-loop-via,.cm-loop-back{color:var(--v-muted);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:var(--color-muted);display:block!important} .cm-deck-next{margin:-6px 0 22px;padding:12px 16px;background:var(--v-panel);border:1px solid var(--v-raised);border-left:3px solid var(--color-accent);border-radius:var(--v-radius-card);font-size:14px;line-height:1.5;color:var(--v-ink)} .cm-deck-next strong{color:var(--v-accent);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:var(--color-muted)} .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:var(--v-radius);font-size:13px} .cm-deck-list li:nth-child(odd){background:var(--v-bg)} .cm-deck-qty{color:var(--color-muted);font-variant-numeric:tabular-nums;text-align:right} .cm-deck-list .cm-card-name{font-weight:600;color:var(--color-ink);background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;min-height:0} .cm-deck-list .cm-card-name:hover{color:var(--v-accent)} .cm-deck-list .cm-price{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-muted)} .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){ /* Scoped like the desktop rule it overrides (#matrix-v2 ... {display:contents}); unscoped, it lost and a phone showed the three actions twice, in the hero and in the bar at the foot. */ #matrix-v2 .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:color-mix(in srgb,var(--v-bg) 95%,transparent);border-top:1px solid var(--color-line);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:var(--v-radius);box-shadow:0 8px 22px #000a,0 0 0 1px #ffffff14;background:var(--v-panel);aspect-ratio:63/88;object-fit:cover} .cm-pop-noart{aspect-ratio:63/88;border-radius:var(--v-radius);background:linear-gradient(160deg,color-mix(in oklab,var(--st-remove) 12%,var(--v-bg)),color-mix(in oklab,var(--st-standin) 8%,var(--v-bg)));display:grid;place-items:center;font-weight:800;font-size:26px;color:var(--v-ink);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:var(--color-muted);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center} /* HOW MANY YOU HAVE, AND WHO IS WAITING FOR IT (Rob, 16 September). Two lines, the counts over the decks that claim the card, in the pop-up and in the Card Info pane alike -- so a reader who has learnt to read it in one place reads it in the other without looking twice. */ #matrix-v2 .cm-holdings{display:flex;flex-direction:column;gap:2px;margin:6px 0;font-size:12px;line-height:1.35} #matrix-v2 .cm-holdings-counts{font-variant-numeric:tabular-nums;font-weight:600} #matrix-v2 .cm-holdings-decks{color:var(--cm-muted,var(--v-line))} #matrix-v2 .cm-holdings-decks em{font-style:italic;opacity:.85} .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:var(--color-accent)} .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:var(--color-muted);text-transform:uppercase;letter-spacing:.04em} .cm-inspector-terms-row .cm-chip{padding:3px 8px;font-size:11px} /* THE ROLE LENS (Discover, List tab). Two columns on a wide pane, one under the other on a narrow one; each row is name · where it stands · price · the one action. The count badge is the deck tile's badge: warn under the house minimum, good at or over it. */ .cm-lens-pick{display:flex;align-items:center;gap:8px;font-size:12px;margin:0 0 8px}.cm-lens-pick select{min-height:32px;padding:4px 8px;font-size:12px} .cm-lens-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 8px;font-size:16px}.cm-lens-count{font-size:13px} .cm-lens-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cm-lens-cols h4{margin:0 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)}.cm-lens-cols h4 small{color:var(--v-line);font-weight:400;margin-left:6px} .cm-lens-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.cm-lens-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:7px 9px;background:var(--v-bg);border-radius:var(--v-radius);font-size:13px}.cm-lens-row .cm-card-name{font-weight:700;color:var(--color-ink);background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.cm-lens-row .cm-muted{grid-column:1;font-size:12px}.cm-lens-price{grid-column:2;grid-row:1;font-size:12px;color:var(--v-muted)} .cm-lens-cand{grid-template-columns:minmax(0,1fr) auto auto}.cm-lens-cand .cm-lens-price{grid-column:2}.cm-lens-cand .v-button{grid-column:3;grid-row:1/3;align-self:center;min-height:30px;padding:4px 9px;font-size:12px} .cm-lens-foot{font-size:12px;margin:10px 0 0} .cm-card-view[data-w=xs] .cm-lens-cols,.cm-card-view[data-w=s] .cm-lens-cols,.cm-card-view[data-w=m] .cm-lens-cols{grid-template-columns:1fr} @media(max-width:760px){.cm-lens-cols{grid-template-columns:1fr}} /* THE TRACE PANE (Discover's third tab). The mock-up's pane: a score strip of four figures, the strategies as ticks, the transport, then the lit list in order -- ring badge, name, the join that lit it, the loop-back pill in gold -- and the unlit sentence beneath. */ .cm-trace-head{margin:0 0 6px;font-size:16px}.cm-trace-sub{margin:0 0 10px;font-size:12px} .cm-trace-worlds{display:flex;gap:6px;margin:0 0 10px}#matrix-v2 .cm-trace-worlds .v-button{min-height:32px;padding:5px 11px;font-size:12px} .cm-trace-strategies{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.cm-trace-strategies .cm-checkbox{padding:4px 9px;border:1px solid var(--v-line);border-radius:var(--v-radius-tile);background:var(--v-panel);font-size:12px;min-height:0}.cm-trace-strategies .cm-checkbox:has(input:checked){background:var(--v-raised);border-color:var(--color-accent)}.cm-trace-strategies input{width:14px;height:14px;min-height:0} .cm-trace-transport{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:12px}#matrix-v2 .cm-trace-transport .v-button{min-height:30px;padding:4px 10px;font-size:12px}.cm-trace-transport select{min-height:30px;padding:3px 6px;font-size:12px}.cm-trace-at{margin-left:auto;color:var(--color-muted);font-variant-numeric:tabular-nums} .cm-trace-score{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 12px}.cm-trace-score div{background:var(--v-bg);border:1px solid var(--color-raised);border-radius:var(--v-radius-card);padding:8px 10px}.cm-trace-score strong{display:block;font-size:20px;font-variant-numeric:tabular-nums}.cm-trace-score span{font-size:11px;color:var(--color-muted)}.cm-trace-score em{display:block;font-style:normal;font-size:11px;color:var(--v-muted)} .cm-trace-group{margin:12px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)}.cm-trace-group small{color:var(--v-line);margin-left:6px;text-transform:none;letter-spacing:0} .cm-trace-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.cm-trace-row{display:grid;grid-template-columns:22px 20px minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:6px 8px;border-radius:var(--v-radius);background:var(--v-bg);font-size:12px;opacity:.45;transition:opacity .25s}.cm-trace-row.is-lit{opacity:1}.cm-trace-row .k{color:var(--color-muted);font-variant-numeric:tabular-nums;text-align:right} .cm-trace-ring{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));background:color-mix(in oklab,var(--v-accent) 24%,var(--v-ink))}.cm-trace-ring.r2{background:var(--v-money)}.cm-trace-ring.r3{background:var(--v-money)} .cm-trace-row .cm-card-name{font-weight:700;color:var(--color-ink);background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.cm-trace-row .cm-card-name em{font-style:normal;font-weight:500;color:var(--color-muted);font-size:11px;margin-left:6px} .cm-trace-row .via{grid-column:3;color:var(--color-muted);font-size:11px}.cm-trace-row .loop{grid-column:4;grid-row:1/3;align-self:center;background:var(--color-money);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));font-weight:800;border-radius:var(--v-radius-card);padding:2px 8px;font-size:11px;white-space:nowrap}.cm-trace-row .cm-badge{grid-column:4;grid-row:1;font-size:10px;padding:2px 6px} .cm-trace-unlit{margin:12px 0 0;font-size:12px;color:var(--color-muted)}.cm-trace-unlit b{color:color-mix(in oklab,var(--v-accent) 20%,var(--v-ink))}.cm-trace-foot{margin:10px 0 0;font-size:12px;color:var(--color-muted)} .cm-trace-out{margin:10px 0 0;font-size:12px}.cm-trace-out li{margin:2px 0} .cm-card-view[data-w=xs] .cm-trace-score,.cm-card-view[data-w=s] .cm-trace-score{grid-template-columns:repeat(2,1fr)} @media(max-width:760px){.cm-trace-score{grid-template-columns:repeat(2,1fr)}} /* THE TABLETOP (Cards page, third view). The agreed mock-up: a slate sorting mat in the app's own palette with a dot grid every 24px, one soft light from the top left and a dark bevel; the Bench on a raised ledge along the back with a brass hairline; each pile in a shallow slot cut into the mat so an empty pile still shows where it lives; paper placards the one warm element; ghost cards dashed in the muted ink. */ .cm-tt-host{margin:12px 0 24px} .cm-tt-mat{position:relative;border-radius:var(--v-radius-card);overflow:hidden;background:radial-gradient(ellipse at 28% 18%,var(--v-raised) 0,transparent 55%),radial-gradient(#ffffff12 1px,transparent 1.3px) 0 0/24px 24px,linear-gradient(170deg,var(--v-panel),var(--v-bg));border:1px solid var(--v-line);box-shadow:0 0 0 6px var(--v-bg),0 0 0 7px var(--v-raised),inset 0 0 90px #0008,0 24px 48px #000a} /* THE BACK ROW (Rob, 15 September): the Bench and the decks side by side, both as piles. The ledge used to fan out as many cards as it was wide, and a fanned card could not be clicked, dragged or read — three hundred pictures decorating a count, in the room the deck shelf needed. */ .cm-tt-backrow{position:absolute;left:16px;right:16px;top:14px;display:flex;gap:12px;align-items:stretch;z-index:1} .cm-tt-rail,.cm-tt-drawer{border-radius:var(--v-radius-card);background:linear-gradient(var(--v-panel),var(--v-bg));border:1px solid var(--color-raised);border-top-color:var(--v-line);box-shadow:inset 0 1px 0 #ffffff10,0 6px 14px #0006;padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px;min-width:0} .cm-tt-rail{flex:0 0 auto;align-items:center;padding-top:26px} .cm-tt-drawer{flex:1 1 auto;overflow:hidden} .cm-tt-rail-head{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-money);display:flex;align-items:center;gap:8px;white-space:nowrap} /* The drawer's head is a working strip, not a label: the pile's name and count, the card size, the pager for a pile deeper than one row, Print, and the way out. */ #matrix-v2 .cm-tt-drawer-head{position:static;flex:0 0 auto;font-size:12px} .cm-tt-drawer-head strong{color:var(--color-ink);font-size:13px} #matrix-v2 .cm-tt-drawer-print{margin-left:auto;min-height:26px;padding:2px 10px;font-size:11px;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--v-raised);color:var(--v-muted)} #matrix-v2 .cm-tt-drawer-shut{min-height:26px;width:26px;padding:0;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--v-raised);color:var(--v-muted);font-size:15px;line-height:1} #matrix-v2 .cm-tt-drawer-print:hover,#matrix-v2 .cm-tt-drawer-shut:hover{background:var(--v-raised);filter:none} /* The cards scroll sideways: a pile is read along a row, which is the gesture the pictures ask for, and the pager is only there for a pile deeper than the forty a page holds. */ .cm-tt-drawer-strip{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;min-height:0} .cm-tt-grid.is-drawer{position:relative;top:auto;left:auto} .cm-tt-drawer.is-shut .cm-tt-play-invite{margin:0;max-width:56ch} .cm-tt-pile.is-flow{position:relative;left:auto;top:auto;flex:0 0 auto;width:74px;height:126px} .cm-tt-pile.is-flow .cm-tt-placard{top:auto;bottom:0;max-width:96px} .cm-tt-card{width:64px;height:90px;border-radius:var(--v-radius);background:linear-gradient(160deg,var(--v-panel),var(--v-bg));border:1px solid #0009;box-shadow:0 3px 8px #000a,inset 0 1px 0 #ffffff10;position:relative;overflow:hidden} .cm-tt-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--art,linear-gradient(135deg,var(--color-raised),var(--v-panel)));background-size:cover;background-position:center} .cm-tt-name{display:none;position:absolute;left:4px;right:4px;bottom:4px;font-size:8px;line-height:1.1;color:var(--color-ink);font-weight:600}.cm-tt-card.no-art .cm-tt-name{display:block} .cm-tt-card.is-ghost{background:var(--v-bg);border:2px dashed var(--color-money);box-shadow:0 3px 8px #000a}.cm-tt-card.is-ghost:before{opacity:1;filter:saturate(.55)}.cm-tt-card.is-ghost .cm-tt-name{color:var(--color-muted)} .cm-tt-card.is-ghost:after{content:attr(data-ghost);position:absolute;left:0;top:0;z-index:2;padding:1px 5px;border-radius:3px 0 5px 0;background:var(--color-money);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));font-size:7px;line-height:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap} .cm-tt-pile{position:absolute;width:74px;height:104px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit} .cm-tt-slot{position:absolute;left:-5px;top:-5px;width:74px;height:100px;border-radius:var(--v-radius);background:var(--v-bg);box-shadow:inset 0 3px 10px #000c,0 0 0 1px var(--color-raised)} /* THE SLOT HUGS THE CARD (Rob, 14 September): it stood 88x118 around a 64x90 card, so the picture floated in the top-left with 17px of slate to its right and 21px under it and read as a card that had not loaded. A 5px lip all round, and the picture fills its recess. */ .cm-tt-stack{position:absolute;left:0;top:0;width:64px;height:90px} .cm-tt-stack .cm-tt-card{position:absolute;left:0;top:0;box-shadow:0 3px 8px #000a,0 var(--stack,0px) 0 -1px var(--v-bg),0 calc(var(--stack,0px) + 1px) 0 0 var(--v-raised)} .cm-tt-status .cm-tt-card{background:linear-gradient(160deg,var(--v-raised),var(--v-bg))} .cm-tt-pile.is-empty .cm-tt-stack{display:none} .cm-tt-pile:focus-visible .cm-tt-slot{outline:2px solid var(--color-accent);outline-offset:3px} .cm-tt-placard{background:linear-gradient(var(--v-ink),var(--v-ink));color:var(--v-on);border-radius:3px;padding:3px 8px;font-size:11px;font-weight:700;box-shadow:0 2px 4px #0008,inset 0 0 0 1px color-mix(in oklab,var(--v-accent) 64%,var(--v-ink));white-space:nowrap} .cm-tt-placard small{display:block;font-weight:500;font-size:10px;color:color-mix(in oklab,var(--v-accent) 44%,var(--v-bg))} .cm-tt-pile .cm-tt-placard{position:absolute;left:50%;transform:translateX(-50%);top:116px;max-width:118px;overflow:hidden;text-overflow:ellipsis} .cm-tt-status .cm-tt-placard{max-width:136px} /* THE PICK ROW GETS THE WHOLE MAT (found building PR 3b). It was `left:50%` with a translate back, which centres it — but an absolutely positioned box shrinks to fit the space from its `left` edge to the containing block's right edge, so three labeled selects were laying out in HALF the mat and wrapping to two lines on a table wide enough for one. Stretched edge to edge and centered by the flexbox instead, it takes one line wherever one fits. */ .cm-tt-group-pick{position:absolute;left:16px;right:16px;display:flex;gap:8px;justify-content:center;align-items:center;font-size:12px;color:var(--color-ink);z-index:2} .cm-tt-group-pick select{min-height:32px;padding:4px 8px;font-size:12px}.cm-tt-group-pick label{display:flex;gap:6px;align-items:center;white-space:nowrap}.cm-tt-group-pick{gap:14px} .cm-tt-legend{position:absolute;right:16px;bottom:12px;font-size:11px;color:var(--color-muted);background:color-mix(in srgb,var(--v-bg) 82%,transparent);border:1px solid var(--color-raised);padding:6px 10px;border-radius:var(--v-radius);max-width:calc(100% - 32px)} @media(max-width:760px){.cm-tt-backrow{gap:8px}.cm-tt-rail,.cm-tt-drawer{padding:6px 8px 8px}.cm-tt-group-pick{white-space:nowrap}.cm-tt-legend{left:16px;right:16px;bottom:12px;max-width:none}} /* TB2: a pile laid out, the page strip, the ticks, the selection on the stage. */ .cm-tt-mat:focus{outline:none}.cm-tt-mat:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px} .cm-tt-pile.is-open .cm-tt-slot{box-shadow:inset 0 3px 10px #000c,0 0 0 2px var(--color-money),0 0 18px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 76%,var(--v-ink)) 40%,transparent)} .cm-tt-shelf{position:absolute;left:16px;right:16px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;z-index:2} .cm-tt-shelf-pick{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--color-ink);margin-right:8px}.cm-tt-shelf-pick select{min-height:30px;padding:3px 8px;font-size:12px} .cm-tt-chip{background:linear-gradient(var(--v-ink),var(--v-ink));color:var(--v-on);border:0;border-radius:3px;padding:4px 9px;font:inherit;font-size:11px;font-weight:700;box-shadow:0 2px 4px #0008,inset 0 0 0 1px color-mix(in oklab,var(--v-accent) 64%,var(--v-ink));cursor:pointer;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #matrix-v2 .cm-tt-chip,.cm-tt-mat .cm-tt-chip{color:var(--v-on);background:linear-gradient(var(--v-ink),var(--v-ink))}.cm-tt-chip.is-empty{opacity:.55}.cm-tt-chip.is-open{box-shadow:0 2px 4px #0008,0 0 0 2px var(--color-money),0 0 14px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 76%,var(--v-ink)) 40%,transparent)}.cm-tt-chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} .cm-tt-stage-strip{position:absolute;left:16px;right:16px;z-index:2} .cm-tt-strip{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:color-mix(in srgb,var(--v-bg) 82%,transparent);border:1px solid var(--color-raised);border-radius:var(--v-radius);padding:5px 10px;font-size:12px;color:var(--color-ink);min-height:36px} .cm-tt-strip-title{flex:1 1 auto;min-width:160px}.cm-tt-strip button{min-height:26px;padding:2px 9px;font-size:12px;background:var(--v-panel);color:var(--v-ink);border:1px solid var(--color-raised);border-radius:var(--v-radius);cursor:pointer} .cm-tt-strip button[disabled]{opacity:.4;cursor:default}.cm-tt-strip button[aria-pressed=true]{background:var(--color-money);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));border-color:var(--color-money)}.cm-tt-strip .cm-tt-primary{background:var(--v-line);border-color:var(--v-line);color:#fff} .cm-tt-seg{display:inline-flex;gap:2px}.cm-tt-pager{display:inline-flex;gap:6px;align-items:center} .cm-tt-grid{position:absolute;left:0;right:0}.cm-tt-grid .cm-tt-card{position:absolute;cursor:pointer;transition:box-shadow .15s}.cm-tt-grid .cm-tt-card:hover{box-shadow:0 6px 16px #000c,0 0 0 2px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 72%,var(--v-ink)) 53%,transparent)} .cm-tt-grid .cm-tt-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.cm-tt-empty{margin:20px 16px;color:var(--color-muted);font-size:13px} .cm-tt-card.is-S{width:83px;height:117px}.cm-tt-card.is-M{width:125px;height:174px}.cm-tt-card.is-M .cm-tt-name{font-size:10px;left:5px;right:5px;bottom:6px}.cm-tt-card.is-ghost.is-M:after{font-size:9px;line-height:14px} .cm-tt-card.is-L{width:182px;height:255px;border-radius:var(--v-radius)}.cm-tt-card.is-L .cm-tt-name{font-size:12px;left:7px;right:7px;bottom:8px}.cm-tt-card.is-ghost.is-L:after,.cm-tt-card.is-ghost.cm-tt-solo:after{font-size:10px;line-height:16px;padding:1px 7px} .cm-tt-tick{position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:4px;border:1px solid var(--color-muted);background:color-mix(in srgb,var(--v-bg) 80%,transparent);cursor:pointer;z-index:2} .cm-tt-tick:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0} .cm-tt-card.is-ticked .cm-tt-tick{background:var(--color-money);border-color:var(--color-money)}.cm-tt-card.is-ticked .cm-tt-tick:after{opacity:1}.cm-tt-card.is-ticked{box-shadow:0 3px 8px #000a,0 0 0 2px var(--color-money)} .cm-tt-tick:focus-visible{outline:2px solid var(--color-aether);outline-offset:1px} .cm-tt-stage{position:absolute;left:16px;right:16px;border-radius:var(--v-radius-card);background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,color-mix(in oklab,var(--v-accent) 76%,var(--v-ink)) 11%,transparent),transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 76%,var(--v-ink)) 27%,transparent)} .cm-tt-fanL{position:relative}.cm-tt-fanL .cm-tt-card{position:absolute;box-shadow:0 10px 24px #000c,0 0 0 1px color-mix(in srgb,color-mix(in oklab,var(--v-accent) 76%,var(--v-ink)) 53%,transparent)} .cm-tt-captions{list-style:none;margin:4px 16px 0;padding:0;max-height:160px;overflow:auto;font-size:12px;color:var(--color-ink);line-height:24px}.cm-tt-captions li{display:flex;gap:10px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cm-tt-pill{display:inline-block;padding:0 7px;border-radius:var(--radius-pill);background:var(--v-line);color:#fff;font-size:11px;line-height:18px}.cm-tt-pill.is-ghost{background:transparent;border:1px dashed var(--color-money);color:var(--color-money)} .cm-tt-muted{color:var(--color-muted)} .cm-tt-stage-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 16px 0;font-size:12px;color:var(--color-ink)}.cm-tt-stage-actions button{min-height:30px;padding:3px 12px;font-size:12px;background:var(--v-panel);color:var(--v-ink);border:1px solid var(--color-raised);border-radius:var(--v-radius);cursor:pointer} @media(prefers-reduced-motion:reduce){.cm-tt-grid .cm-tt-card{transition:none!important}} @media(max-width:760px){.cm-tt-captions{max-height:120px}.cm-tt-fanL .cm-tt-card{box-shadow:0 6px 14px #000c}} /* TB3: the drag and its targets. */ .cm-tt-fanL{touch-action:none}.cm-tt-fanL .cm-tt-card{cursor:grab}.cm-tt-host.is-dragging,.cm-tt-host.is-dragging *{cursor:grabbing!important} .cm-tt-drag{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-120%);display:flex;align-items:center;gap:8px;max-width:min(360px,80vw)} .cm-tt-drag-count{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:var(--v-radius-tile);background:var(--color-money);color:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));font-weight:800;font-size:14px;box-shadow:0 6px 16px #000c} .cm-tt-drag-say{font-size:12px;line-height:1.3;background:color-mix(in srgb,var(--v-bg) 94%,transparent);color:var(--color-ink);border:1px solid var(--color-raised);border-radius:var(--v-radius);padding:5px 9px;white-space:normal}.cm-tt-drag-say:empty{display:none} .cm-tt-drag-say.is-ok{border-color:var(--st-inbox);color:color-mix(in oklab,var(--st-inbox) 8%,var(--v-ink))}.cm-tt-drag-say.is-no{border-color:var(--st-remove);color:color-mix(in oklab,var(--st-remove) 20%,var(--v-ink))} .cm-tt-pile.is-target .cm-tt-slot,.cm-tt-chip.is-target{box-shadow:inset 0 3px 10px #000c,0 0 0 3px var(--st-inbox),0 0 22px color-mix(in srgb,var(--st-inbox) 53%,transparent)} .cm-tt-pile.is-refused .cm-tt-slot,.cm-tt-chip.is-refused{box-shadow:inset 0 3px 10px #000c,0 0 0 3px var(--st-remove)} .cm-row-menu button small{display:block;font-weight:400;font-size:11px;opacity:.8} /* TB4: a pile on paper. Only the sheet prints; the rest of the page is invisible but keeps its place, so the sheet can sit at the top of the first page. */ .cm-tt-printsheet{display:none} @media print{ body.cm-tt-printing *{visibility:hidden!important} body.cm-tt-printing .cm-tt-printsheet,body.cm-tt-printing .cm-tt-printsheet *{visibility:visible!important} body.cm-tt-printing .cm-tt-printsheet{display:block;position:absolute;left:0;top:0;width:100%;padding:12mm;background:#fff;color:#000;font:11pt/1.35 system-ui,sans-serif} .cm-tt-printsheet h1{font-size:18pt;margin:0 0 4pt}.cm-tt-printsheet p{margin:0 0 10pt;color:#333} .cm-tt-printsheet table{width:100%;border-collapse:collapse;font-size:10pt}.cm-tt-printsheet th,.cm-tt-printsheet td{text-align:left;padding:3pt 6pt;border-bottom:1px solid #999;vertical-align:top}.cm-tt-printsheet th{border-bottom:2px solid #000} .cm-tt-printsheet tr{break-inside:avoid} } /* THE TRADE LIST a visitor opens from a link (crankmagic-trade.js): a grid of cards with their pictures, a tick to ask about several, and the facts the publisher gave. */ .cm-trade-note{max-width:70ch;color:var(--color-ink);white-space:pre-line} .cm-trade-grid{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} .cm-trade-card{position:relative;display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;background:var(--v-bg);border:1px solid var(--color-raised);border-radius:var(--v-radius-card);padding:10px} .cm-trade-card img{width:96px;height:134px;object-fit:cover;border-radius:var(--v-radius);background:var(--v-bg);box-shadow:0 3px 8px #000a} .cm-trade-noart{width:96px;height:134px;border-radius:var(--v-radius);background:linear-gradient(160deg,var(--v-panel),var(--v-bg));border:1px solid #0009;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:var(--color-muted);letter-spacing:1px} .cm-trade-tick{position:absolute;left:6px;top:6px;z-index:1}.cm-trade-tick input{width:18px;height:18px;min-height:0;margin:0} .cm-trade-facts{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0}.cm-trade-facts strong{font-size:14px;line-height:1.25}.cm-trade-facts span{color:var(--color-muted);font-size:12px} .cm-trade-link{word-break:break-all;font-size:13px} @media(max-width:480px){.cm-trade-grid{grid-template-columns:1fr}} /* The Trace pane (Rob, 14 September): the Speed control on the transport line, the ticks in the list. */ .cm-trace-transport label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:500;white-space:nowrap} .cm-trace-tick-strategy small{margin-left:4px;padding:0 6px;border-radius:var(--radius-pill);background:var(--v-panel);color:var(--color-muted);font-size:11px;line-height:16px} .cm-trace-pickbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--color-muted);margin:0 0 8px}.cm-trace-pickbar.is-empty span{color:var(--color-muted)} .cm-trace-row{grid-template-columns:16px 22px 20px minmax(0,1fr) auto}.cm-trace-row .cm-trace-pick{width:15px;height:15px;min-height:0;margin:0;grid-row:1/3;align-self:center}.cm-trace-row .via{grid-column:4}.cm-trace-row .loop,.cm-trace-row .cm-badge{grid-column:5}.cm-trace-row.is-ticked{background:color-mix(in oklab,var(--v-accent) 12%,var(--v-bg))}.cm-trace-row.is-ticked.is-lit{background:color-mix(in oklab,var(--v-accent) 16%,var(--v-bg))} /* THE CARDS HEADER (Rob, 14 September): the counts as chips that filter, the views on the tab row. */ .cm-tabs-views{margin-left:auto;padding:0 0 6px 12px;flex:0 0 auto} .cm-view-switch button[disabled]{opacity:.4;cursor:default} /* A COUNT IS A CARD, NOT A PILL (Rob, 24 September: the number, the label and the dot sat "scrunched up to the left in each container against the color arc"). The pill's 4px left border drew an arc on its rounded end and crowded the figure into it. The status color is a short bar on the card's top edge now, the way the Explore doors carry theirs; the figure and its label stand in the card with room on every side; and the caption under the row spans it instead of taking the first card's column. */ .cm-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:stretch;margin:4px 0 8px} .cm-kpi{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:18px 16px 14px;min-width:0;min-height:84px;border-radius:var(--v-radius);background:var(--v-panel);border:1px solid var(--v-line);color:var(--color-ink);font:inherit;font-size:12px;text-align:left;cursor:pointer} .cm-kpi:before{content:"";position:absolute;left:16px;top:-1px;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--st,var(--color-line))} .cm-kpi strong{font-family:var(--v-display);font-weight:var(--display-weight);font-size:28px;line-height:1;font-variant-numeric:tabular-nums;color:var(--st,var(--v-ink))} .cm-kpi span{display:flex;align-items:center;gap:6px;max-width:100%;color:var(--color-muted);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cm-kpis .cm-kpi-caption{grid-column:1/-1;margin:2px 0 12px} .cm-kpi:hover{border-color:var(--v-line-strong,var(--color-line));background:var(--v-raised)}.cm-kpi.is-on{background:color-mix(in oklab,var(--st,var(--v-accent)) 14%,var(--v-panel));border-color:var(--st,var(--v-accent))}.cm-kpi.is-on span{color:var(--color-ink)} .cm-kpi:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} .cm-kpi-note{font-size:12px;color:var(--color-muted);margin-left:4px} @media(max-width:760px){.cm-tabs-views{width:100%;margin-left:0;padding:6px 0 8px}.cm-cards-tabs{flex-wrap:wrap}} /* TB5 (Rob, 14 September): the whole picture on every card with a caption under it in a laid-out grid; ghosts read at full strength behind a gold dashed frame and wear their status; the readings of a plan are chips, not piles; the Bench ledge folds; one card on the stage at the size you choose, with its facts. */ .cm-tt-grid .cm-tt-card{height:104px}.cm-tt-grid .cm-tt-card.is-M{height:152px}.cm-tt-grid .cm-tt-card.is-L{height:216px} .cm-tt-grid .cm-tt-card:before{bottom:14px}.cm-tt-grid .cm-tt-card.is-M:before{bottom:18px}.cm-tt-grid .cm-tt-card.is-L:before{bottom:20px} .cm-tt-grid .cm-tt-name{display:block;left:0;right:0;bottom:0;height:14px;line-height:14px;font-size:8px;text-align:center;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--v-bg);color:var(--color-ink)} .cm-tt-grid .cm-tt-card.is-M .cm-tt-name{height:18px;line-height:18px;font-size:10px}.cm-tt-grid .cm-tt-card.is-L .cm-tt-name{height:20px;line-height:20px;font-size:11px} .cm-tt-grid .cm-tt-card.no-art:before{background:linear-gradient(160deg,var(--v-panel),var(--v-bg))} .cm-tt-readings{position:absolute;left:16px;right:16px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:11px;color:var(--color-muted);z-index:2} #matrix-v2 .cm-tt-chip.cm-tt-reading,.cm-tt-chip.cm-tt-reading{background:linear-gradient(var(--v-ink),var(--v-muted))} .cm-tt-stage.is-solo .cm-tt-fanL,.cm-tt-stage.is-solo .cm-tt-fanL .cm-tt-card{position:absolute}.cm-tt-card.cm-tt-solo{border-radius:var(--v-radius-card)} .cm-tt-info{position:absolute;overflow:auto;box-sizing:border-box;padding:10px 12px;background:color-mix(in srgb,var(--v-bg) 82%,transparent);border:1px solid var(--color-raised);border-radius:var(--v-radius-card);font-size:13px;line-height:1.45;color:var(--color-ink)} .cm-tt-info .cm-tt-captions{margin:0 0 8px;max-height:none;overflow:visible}.cm-tt-info .cm-tt-captions li{white-space:normal}.cm-tt-info p{margin:0 0 6px}.cm-tt-info .cm-oracle{white-space:pre-line;margin:0 0 8px} /* OWNED AGAINST WANTED beside the deck name (Rob, 14 September): "D1 Quintorius Spirits | 0/1" — the divider is the span's own edge, so the pair reads as a note on the deck, not a figure of its own. THE BACK ARROW sits on the info pane's top right corner; it is a sibling of the pane, because the pane scrolls and an arrow that scrolls away is not a corner. */ .cm-tt-own{border-left:1px solid var(--v-line);padding-left:10px;color:var(--color-ink);font-variant-numeric:tabular-nums;font-weight:600} .cm-tt-back{position:absolute;z-index:3;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--v-radius);background:color-mix(in srgb,var(--v-bg) 90%,transparent);border:1px solid var(--color-raised);color:var(--color-ink);font-size:16px;line-height:1;cursor:pointer;padding:0} .cm-tt-back:hover{background:var(--v-bg);border-color:var(--v-line)} .cm-tt-back:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} .cm-tt-info .cm-price-block,.cm-tt-info .cm-inspector-price{margin:6px 0}.cm-tt-info .cm-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .cm-tt-stage-actions.is-solo{position:absolute;left:0;right:0;bottom:8px;margin:0 16px} @media(max-width:760px){.cm-tt-readings{font-size:10px}.cm-tt-info{font-size:12px}} /* THE NODE POP-UP, again (Rob, 14 September): the picture at the inspector's 230px, the three buttons stacked down its left, the mana pips on the type line, the rest in a narrower column. */ .cm-graph-pop.cm-pop-card{width:min(620px,calc(100% - 16px))} .cm-pop-body{grid-template-columns:106px 230px minmax(0,1fr);gap:12px} .cm-pop-side{display:flex;flex-direction:column;gap:6px;min-width:0} #matrix-v2 .cm-pop-side .v-button{width:100%;min-height:30px;padding:4px 6px;font-size:12px;line-height:1.2;white-space:normal;text-align:center;margin:0} .cm-pop-type{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px}.cm-pop-type .cm-mana img{width:17px;height:17px} .cm-pop-meta{font-size:12px}.cm-pop-meta h4{font-size:11px} @media(max-width:760px){.cm-pop-body{grid-template-columns:1fr;gap:10px}.cm-pop-art{width:min(230px,100%);margin:0 auto}.cm-pop-side{flex-direction:row;flex-wrap:wrap;order:3}#matrix-v2 .cm-pop-side .v-button{width:auto;flex:1 1 auto}} /* THE HUNDRED AT A GLANCE (deck Overview, Rob, 14 September): the composition, two breakdown bars, the strategy lines. */ .cm-glance{margin:0 0 20px}.cm-glance h2{margin:0 0 12px}.cm-glance-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:18px 26px;align-items:start} .cm-glance .cm-deck-composition{margin:0}.cm-glance-bar h4,.cm-glance-strategy h4{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)} .cm-breakdown{display:flex;height:14px;border-radius:var(--v-radius);overflow:hidden;background:var(--color-raised);gap:1px}.cm-breakdown i{display:block;min-width:2px;height:100%} .cm-breakdown-key{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--color-muted)}.cm-breakdown-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} .cm-breakdown-key strong{color:var(--v-ink);font-variant-numeric:tabular-nums;margin-left:2px} /* The bands' colors, wherever a breakdown is drawn: the Overview's bento draws the By card type bar under .cm-bento, and while these were scoped to the old .cm-glance panel alone, every band there was uncolored and the bar drew nothing (Rob, 24 September: "the buy card type bar is not showing"). */ :is(.cm-glance,.cm-bento) .b0{background:var(--color-accent)}:is(.cm-glance,.cm-bento) .b1{background:var(--color-money)}:is(.cm-glance,.cm-bento) .b2{background:var(--st-inbox)}:is(.cm-glance,.cm-bento) .b3{background:var(--st-remove)}:is(.cm-glance,.cm-bento) .b4{background:var(--st-standin)}:is(.cm-glance,.cm-bento) .b5{background:var(--v-aether)}:is(.cm-glance,.cm-bento) .b6{background:var(--v-money)}:is(.cm-glance,.cm-bento) .b7{background:var(--color-muted)} .cm-glance-strategy{margin-top:16px;padding-top:12px;border-top:1px solid var(--v-line)}.cm-glance-strategy p{margin:0 0 6px;line-height:1.5} @media(max-width:760px){.cm-glance-grid{grid-template-columns:1fr;gap:14px}} /* THE TRACE'S LIMITS (Rob, 14 September): three sliders under the strategy ticks. */ .cm-trace-limits{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 10px;font-size:12px;color:var(--color-muted)} .cm-trace-limits label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:500;white-space:nowrap} #matrix-v2 .cm-trace-limits input[type=range],.cm-trace-limits input[type=range]{width:88px;min-height:0;height:18px;margin:0;padding:0;background:transparent;accent-color:var(--color-money)} .cm-trace-limits output{min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-ink);font-weight:700} /* MAKE THE CHANGE (Rob, 14 September): the change list -- readings, then one physical swap per row. */ .cm-change-head{align-items:flex-start} .cm-change-counts{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:var(--v-muted)} .cm-change-counts span{white-space:nowrap} .cm-change-formula{margin:0 0 10px;font-size:13px;color:var(--color-muted);line-height:1.5} .cm-change-reading-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin:0 0 22px} .cm-change-reading{background:var(--v-panel);border:1px solid var(--v-line);border-radius:var(--v-radius-card);padding:12px 14px} .cm-change-reading.has-warnings{border-color:color-mix(in oklab,var(--v-accent) 56%,var(--v-bg))} .cm-change-reading h3{margin:0 0 2px;font-size:14px} .cm-change-reading>.cm-muted{margin:0 0 8px;font-size:12px} .cm-change-reading dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px;margin:0} .cm-change-fig{min-width:0} .cm-change-fig dt{font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--v-muted);line-height:1.15;min-height:2.3em} .cm-change-fig dd{margin:0;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .cm-change-fig dd small{display:block;font-size:10px;font-weight:500;color:var(--v-muted);line-height:1.1} .cm-change-fig.is-warn dd{color:var(--color-money)} .cm-change-warnings{margin:8px 0 0;padding:0 0 0 16px;font-size:12px;line-height:1.5;color:var(--color-money)} .cm-change-ok{margin:8px 0 0;font-size:12px;color:var(--st-inbox)} .cm-change-list{list-style:none;margin:0 0 22px;padding:0;counter-reset:none} .cm-change-row{display:grid;grid-template-columns:28px 34px minmax(0,1fr) 22px minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--v-panel)} .cm-change-row.is-done{opacity:.45} .cm-change-row.is-done .cm-change-name{text-decoration:line-through} .cm-change-row.is-waiting{opacity:.72} .cm-change-step{font-size:12px;font-weight:600;color:var(--v-muted);text-align:right;font-variant-numeric:tabular-nums} .cm-change-tick{display:grid;place-items:center;width:34px;height:34px;cursor:pointer} #matrix-v2 .cm-change-tick input{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--st-inbox);cursor:pointer} #matrix-v2 .cm-change-tick input:disabled{cursor:not-allowed;accent-color:var(--v-line)} .cm-change-out em,.cm-change-in em{font-style:normal;font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--v-muted);margin-right:6px} .cm-change-out,.cm-change-in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0} .cm-change-arrow{text-align:center;color:var(--color-money);font-weight:700} .cm-change-why{font-size:12px;color:var(--color-muted);line-height:1.4} .cm-change-staying h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--v-line)} .cm-change-n{font-size:13px;font-weight:600;color:var(--v-muted);background:var(--color-raised);border-radius:var(--v-radius-card);padding:2px 9px} .cm-change-staying ul{list-style:none;margin:0;padding:0} .cm-change-staying li{padding:6px 0;border-bottom:1px solid var(--v-panel)} @media(max-width:760px){ .cm-change-row{grid-template-columns:28px 34px minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:4px} .cm-change-out{grid-column:3;grid-row:1} .cm-change-arrow{display:none} .cm-change-in{grid-column:3;grid-row:2} .cm-change-why{grid-column:3;grid-row:3} .cm-change-step,.cm-change-tick{grid-row:1/4} .cm-change-reading dl{grid-template-columns:repeat(4,minmax(0,1fr))} } @media print{ .cm-change{color:#000} .cm-change-counts,.cm-change-formula,.cm-change-row,.cm-change-name,.cm-change-why,.cm-change-reading,.cm-change-fig dt,.cm-change-fig dd,.cm-change-warnings{color:#000!important;font-size:11pt} .cm-change-reading{background:none;border:1px solid #000;break-inside:avoid} .cm-change-tick{width:14px;height:14px;border:1px solid #000;border-radius:1px} .cm-change-tick input,.cm-change-head .cm-actions{display:none!important} .cm-change-row.is-done .cm-change-tick{background:#000} .cm-change-in .cm-pill{background:none!important;border:1px solid #000} } /* THE BOARD'S THREE ZONES AND ITS CANVASES (Rob, 14 September; docs/crankmagic-playspace-plan.md §2.10, §2.11). The group piles used to arch across the middle, which put the sources where the play space has to be and made them read as the same kind of object as the destinations along the bottom. Sources are shelves down both sides now, the middle is the play space, and the destinations have their own band at the foot -- three surfaces for three roles. Every canvas is drawn here rather than fetched: the content policy admits no external images, and shipping someone else's table art, or the game's own, is a licensing problem rather than a design one. The zones sit on top of whichever canvas is chosen and keep their own opacity, so a card's contrast never depends on the background. */ .cm-tt-zone{position:absolute;z-index:0;border-radius:var(--v-radius-card);background:color-mix(in srgb,var(--v-bg) 67%,transparent);border:1px solid #ffffff1a;box-shadow:inset 0 1px 0 #ffffff12,inset 0 -18px 26px #0008,0 6px 18px #0005;pointer-events:none} .cm-tt-zone.is-left{border-left-width:2px;border-left-color:color-mix(in srgb,var(--v-accent) 27%,transparent)} .cm-tt-zone.is-right{border-right-width:2px;border-right-color:color-mix(in srgb,var(--v-accent) 27%,transparent)} .cm-tt-band{position:absolute;left:6px;right:6px;z-index:0;border-radius:var(--v-radius-card);background:linear-gradient(color-mix(in srgb,var(--v-bg) 67%,transparent),color-mix(in srgb,var(--v-bg) 53%,transparent));border:1px solid #ffffff12;border-top:2px solid color-mix(in srgb,var(--v-accent) 33%,transparent);box-shadow:inset 0 2px 0 #ffffff0c,inset 0 22px 30px #0007;pointer-events:none} .cm-tt-mat .cm-tt-pile,.cm-tt-mat .cm-tt-readings,.cm-tt-mat .cm-tt-group-pick{z-index:1} /* The canvases. Slate is the mat as it was; the other three change only the ground. */ .cm-tt-mat.cm-canvas-felt{background:radial-gradient(ellipse at 30% 16%,#2f5c3d 0,transparent 58%),repeating-linear-gradient(45deg,#ffffff06 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,#00000010 0 1px,transparent 1px 3px),linear-gradient(170deg,#1f4530,#13291d);border-color:#3f6b4c;box-shadow:0 0 0 6px #0f1a13,0 0 0 7px #4a7a58,inset 0 0 120px #0009,0 24px 48px #000a} .cm-tt-mat.cm-canvas-celestial{background:radial-gradient(1.2px 1.2px at 18% 24%,color-mix(in srgb,var(--v-muted) 67%,transparent),transparent 60%),radial-gradient(1px 1px at 62% 12%,color-mix(in srgb,var(--v-muted) 67%,transparent),transparent 60%),radial-gradient(1.4px 1.4px at 81% 62%,color-mix(in srgb,color-mix(in oklab,var(--v-accent) 8%,var(--v-ink)) 67%,transparent),transparent 60%),radial-gradient(1px 1px at 34% 78%,color-mix(in srgb,var(--v-muted) 60%,transparent),transparent 60%),radial-gradient(1px 1px at 8% 66%,#ffffff88,transparent 60%),radial-gradient(1.1px 1.1px at 92% 30%,color-mix(in srgb,var(--v-muted) 60%,transparent),transparent 60%),radial-gradient(ellipse at 50% 46%,color-mix(in srgb,var(--v-accent) 33%,transparent) 0,transparent 62%),linear-gradient(168deg,var(--v-bg),var(--v-bg));border-color:var(--v-raised);box-shadow:0 0 0 6px var(--v-bg),0 0 0 7px var(--v-raised),inset 0 0 120px #0009,0 24px 48px #000a} .cm-tt-mat.cm-canvas-parchment{background:radial-gradient(ellipse at 26% 18%,var(--v-ink) 0,transparent 60%),repeating-linear-gradient(92deg,#00000005 0 2px,transparent 2px 5px),linear-gradient(170deg,var(--v-ink),var(--v-muted));border-color:var(--v-muted);box-shadow:0 0 0 6px color-mix(in oklab,var(--v-accent) 36%,var(--v-bg)),0 0 0 7px color-mix(in oklab,var(--v-accent) 84%,var(--v-bg)),inset 0 0 90px #00000022,0 24px 48px #0008} .cm-tt-mat.cm-canvas-parchment .cm-tt-zone{background:color-mix(in srgb,color-mix(in oklab,var(--v-accent) 52%,var(--v-bg)) 13%,transparent);border-color:#00000018;box-shadow:inset 0 1px 0 #ffffff55,inset 0 -18px 26px #00000012} .cm-tt-mat.cm-canvas-parchment .cm-tt-band{background:linear-gradient(color-mix(in srgb,color-mix(in oklab,var(--v-accent) 52%,var(--v-bg)) 9%,transparent),color-mix(in srgb,color-mix(in oklab,var(--v-accent) 52%,var(--v-bg)) 15%,transparent));border-color:#00000018;border-top-color:var(--v-accent)} .cm-tt-mat.cm-canvas-parchment .cm-tt-readings,.cm-tt-mat.cm-canvas-parchment .cm-tt-group-pick{color:color-mix(in oklab,var(--v-accent) 20%,var(--v-bg))} .cm-tt-group-pick{flex-wrap:wrap} .cm-tt-group-pick select[name=tabletopCanvas]{min-width:118px} .cm-tt-group-pick .v-term{color:inherit} /* THE CARDS HELP IS A REFERENCE PAGE (Rob, 14 September): subheads, bullets and one drawing instead of five paragraphs of prose. It is wider than the other dialogs because the flow drawing wants the room -- `:has` keeps that to the pages that opt in, rather than widening every form in the app. The drawing scrolls inside its own frame on a phone, so the dialog itself never scrolls sideways. */ #matrix-v2 dialog#cm-dialog:has(.cm-help-wide){width:min(1040px,calc(100vw - 24px))} .cm-help{font-size:14px;line-height:1.6} #matrix-v2 .cm-help h3{margin:26px 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--v-muted)} #matrix-v2 .cm-help h3:first-of-type{margin-top:18px} #matrix-v2 .cm-help p{margin:0 0 12px} .cm-help-lede{font-size:15px;color:var(--v-ink);max-width:70ch} .cm-help ul{margin:0;padding-left:20px;display:grid;gap:8px} .cm-help li{line-height:1.55} .cm-help li b,.cm-help p b,.cm-help figcaption b{color:var(--color-ink)} #matrix-v2 .cm-help p.cm-help-aside{margin:16px 0 0;font-size:13px;color:var(--color-muted)} .cm-help-defs{display:grid;gap:18px} .cm-help-defs section{display:grid;gap:9px} .cm-help-defs h4{margin:0;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--color-accent)} .cm-def{display:grid;grid-template-columns:158px minmax(0,1fr);gap:4px 16px;align-items:baseline} .cm-def>b{border-left:3px solid var(--st,var(--st-draft));padding-left:10px;color:var(--color-ink)} .cm-def>span{color:var(--v-muted);font-size:13px;line-height:1.55;max-width:74ch} .cm-flow{margin:0} .cm-flow-scroll{overflow-x:auto;border:1px solid var(--v-raised);border-radius:var(--v-radius-card);background:var(--v-bg);padding:14px} .cm-flow svg{display:block;min-width:660px;width:100%;height:auto;font-family:Satoshi,system-ui,sans-serif} .cm-flow figcaption{margin-top:12px;font-size:13px;color:var(--color-muted);line-height:1.55;max-width:80ch} @media(max-width:760px){.cm-def{grid-template-columns:1fr;gap:3px}.cm-def>b{padding-left:9px}#matrix-v2 .cm-help h3{margin-top:22px}} /* THE SITTING (Rob, 14 September; plan §2.6). One bar, rendered from cardsHead, so every lens on the Cards page carries the same sentence and the same count: there is no view you can be on where moves are staged and nothing says so. Amber rather than red — a sitting is work in progress, not a fault — and the three verbs read left to right in the order they are wanted. */ .cm-sitting{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 4px;padding:11px 15px;border:1px solid color-mix(in oklab,var(--v-accent) 36%,var(--v-bg));border-left:3px solid var(--st-buy);border-radius:var(--v-radius-card);background:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg));color:var(--v-ink);font-size:13px} .cm-sitting b{color:color-mix(in oklab,var(--v-accent) 8%,var(--v-ink));font-size:14px;white-space:nowrap} .cm-sitting>span:not(.cm-sitting-acts){min-width:0;flex:1 1 240px;color:color-mix(in oklab,var(--v-accent) 60%,var(--v-ink));line-height:1.45} .cm-sitting-stale{font-style:normal;color:color-mix(in oklab,var(--st-remove) 32%,var(--v-ink));white-space:nowrap;display:inline-flex;align-items:center;gap:7px} .cm-sitting-stale:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--st-remove);flex:0 0 7px} .cm-sitting-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto} #matrix-v2 .cm-sitting-acts .v-button{min-height:32px;padding:5px 11px;font-size:12px} .cm-sitting-list{margin:12px 0;padding-left:22px;display:grid;gap:5px;font-size:13px;max-height:280px;overflow:auto} .cm-badge-pending{background:color-mix(in oklab,var(--v-accent) 24%,var(--v-bg));color:color-mix(in oklab,var(--v-accent) 24%,var(--v-ink))} @media(max-width:760px){.cm-sitting-acts{margin-left:0}.cm-sitting>span:not(.cm-sitting-acts){flex-basis:100%}} /* ------------------------------------------------------------------ THE PLAY SPACE (PR 3b) Rob, 14 September; docs/crankmagic-playspace-plan.md §2.1, §2.3, §2.4, §2.9, §2.14. The middle of the table, between the two shelves. A draw pile of the cards in your hand, the arrows that step it, four trays, and the scoreboard that says where confirming would leave the deck. Everything here is the same kind of object as the piles either side of it -- a click lays one out, a drag drops onto one -- so nothing needs its own vocabulary. */ .cm-tt-play{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;border-radius:var(--v-radius-card);padding:8px 12px 12px;background:radial-gradient(ellipse at 50% 0,#ffffff0a,transparent 70%),color-mix(in srgb,var(--v-bg) 40%,transparent);border:1px dashed color-mix(in srgb,var(--v-accent) 24%,transparent);box-shadow:inset 0 1px 0 #ffffff0d} .cm-tt-play-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;min-height:22px;font-size:12px;color:var(--v-muted)} .cm-tt-play-head strong{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-money)} .cm-tt-play-head b{color:var(--v-ink);font-weight:600} .cm-tt-play-invite{margin:10px 16px 0;max-width:52ch;text-align:center;font-size:12.5px;line-height:1.5;color:var(--v-muted)} .cm-tt-draw-wrap{position:relative;width:110px;height:140px;margin-top:4px} .cm-tt-draw{position:absolute;left:0;top:0;width:110px;height:140px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit} .cm-tt-draw .cm-tt-slot{left:0;top:0;width:110px;height:140px;border-radius:var(--v-radius-card)} .cm-tt-draw-stack{position:absolute;left:7px;top:7px;width:96px;height:126px} .cm-tt-draw-stack .cm-tt-card{position:absolute;width:88px;height:123px} .cm-tt-draw.is-open .cm-tt-slot,.cm-tt-draw:focus-visible .cm-tt-slot{box-shadow:inset 0 3px 10px #000c,0 0 0 2px var(--color-money)} .cm-tt-draw-empty{position:absolute;inset:6px;display:grid;place-items:center;text-align:center;font-size:10.5px;line-height:1.35;color:var(--v-line)} .cm-tt-restore{position:absolute;right:-10px;top:-8px;width:26px;height:26px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;background:var(--color-panel);border:1px solid color-mix(in srgb,var(--v-accent) 40%,transparent);color:color-mix(in oklab,var(--v-accent) 44%,var(--v-ink));cursor:pointer} .cm-tt-restore:hover{background:var(--v-raised)} .cm-tt-draw-step{display:flex;align-items:center;justify-content:center;gap:8px;height:30px;font-size:12px;color:var(--v-ink)} .cm-tt-draw-step small{color:var(--v-muted);font-variant-numeric:tabular-nums} .cm-tt-draw-step button,.cm-tt-tray-count button{width:26px;height:24px;min-height:0;padding:0;border-radius:var(--v-radius);background:var(--color-panel);border:1px solid var(--v-line);color:var(--v-ink);font-size:15px;line-height:1;cursor:pointer} .cm-tt-draw-step button:disabled,.cm-tt-tray-count button:disabled{opacity:.4;cursor:not-allowed} .cm-tt-trays{display:flex;align-items:flex-end;justify-content:center;gap:12px;height:110px;margin-top:4px} .cm-tt-tray{position:relative;width:78px;height:110px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;gap:3px} .cm-tt-tray-slot{position:relative;width:78px;height:86px;border-radius:var(--v-radius);border:1px dashed var(--v-line);background:color-mix(in srgb,var(--v-bg) 53%,transparent);display:grid;place-items:center} .cm-tt-tray-slot .cm-tt-card{width:58px;height:81px} .cm-tt-tray.is-open .cm-tt-tray-slot,.cm-tt-tray:focus-visible .cm-tt-tray-slot{border-style:solid;border-color:var(--color-money);box-shadow:0 0 0 1px color-mix(in srgb,var(--v-accent) 40%,transparent)} .cm-tt-tray:not(.is-empty) .cm-tt-tray-slot{border-style:solid;border-color:var(--v-line)} .cm-tt-tray-more{position:absolute;right:3px;bottom:3px;font-size:10px;font-weight:700;padding:1px 5px;border-radius:var(--v-radius);background:color-mix(in srgb,var(--v-bg) 85%,transparent);border:1px solid #ffffff22;color:var(--v-muted)} .cm-tt-tray-name{font-size:10.5px;color:var(--v-muted);white-space:nowrap;font-variant-numeric:tabular-nums} .cm-tt-tray-count{display:flex;align-items:center;justify-content:center;gap:8px;height:26px;margin-top:2px;font-size:11.5px;color:var(--v-muted)} .cm-tt-restore-all{min-height:0;padding:2px 9px;border-radius:var(--v-radius-card);font-size:11px;background:var(--color-panel);border:1px solid var(--v-line);color:var(--v-ink);cursor:pointer} /* The scoreboard reads the sandbox, not the library: where confirming would leave the deck. */ .cm-tt-score{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;margin-top:6px;font-size:11.5px;color:var(--v-muted)} .cm-tt-score-fig b{font-size:14px;font-weight:700;color:var(--v-ink);font-variant-numeric:tabular-nums} .cm-tt-score-fig.is-good b{color:var(--st-inbox)} .cm-tt-score-fig.is-amber b{color:var(--color-money)} .cm-tt-score-fig.is-muted b{color:var(--v-muted)} /* With a pile laid out the stage takes the middle, so the play space becomes a row of chips above the destinations — the drag can always reach the hand and the trays. */ .cm-tt-playbar{position:absolute;left:16px;right:16px;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:4px 10px;border-radius:var(--v-radius-card);background:color-mix(in srgb,var(--v-bg) 40%,transparent);border:1px dashed color-mix(in srgb,var(--v-accent) 24%,transparent)} .cm-tt-playbar-say{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-money)} .cm-tt-playchip{min-height:0;padding:3px 10px;border-radius:var(--v-radius-card);font-size:11.5px;background:var(--color-panel);border:1px solid var(--v-line);color:var(--v-ink);cursor:pointer;white-space:nowrap} .cm-tt-playchip.is-empty{color:var(--v-muted);border-style:dashed} .cm-tt-playchip.is-open{border-color:var(--color-money);background:color-mix(in oklab,var(--v-accent) 8%,var(--v-bg))} .cm-tt-playbar .cm-tt-score{margin:0 0 0 auto} /* A BACK ARROW AT EVERY LEVEL (§2.4): the same corner on a laid-out pile and on a selection. */ .cm-tt-back.is-strip,.cm-tt-back.is-corner{width:28px;height:26px;min-height:0;padding:0;display:grid;place-items:center;font-size:15px;line-height:1;border-radius:var(--v-radius);background:var(--color-panel);border:1px solid var(--v-line);color:var(--v-ink);cursor:pointer} .cm-tt-back.is-corner{position:absolute;right:12px;top:10px;z-index:2} /* The middle keeps at least SHELF.minMiddle whatever the shelves take, so the play space is never squeezed; below 760px it is not offered at all (plan §2.5) and nothing here applies. */ /* ---------------------------------------------------------------- SHELF MODE (play space PR 4) docs/crankmagic-playspace-plan.md §2.15. With no deck picked the band along the bottom is the collection groups instead of the six statuses, each tray is bound to one of them, and a group pile is the same object a status pile is — so almost nothing here is new: a tint that says "your shelf, not the workflow", and a door that reads as a door rather than as an empty pile. */ .cm-tt-shelfgroup .cm-tt-card{background:linear-gradient(160deg,#3b4436,#1b2119)} .cm-tt-shelfgroup .cm-tt-placard{max-width:136px} .cm-tt-shelfnew .cm-tt-slot{background:color-mix(in srgb,var(--v-bg) 30%,transparent);box-shadow:inset 0 3px 10px #0007,0 0 0 1px #6f8a5f;border-radius:var(--v-radius)} .cm-tt-newmark{font-size:30px;line-height:1;font-weight:300;color:var(--v-muted)} .cm-tt-shelfnew .cm-tt-placard{background:linear-gradient(#e7edda,#d9e2c7);color:color-mix(in oklab,var(--v-accent) 12%,var(--v-bg));box-shadow:0 2px 4px #0008,inset 0 0 0 1px #c3ceae} .cm-tt-trays.is-shelf{align-items:flex-start;height:auto} .cm-tt-tray-cell{display:flex;flex-direction:column;align-items:center;gap:4px} .cm-tt-tray-bind{min-height:26px;max-width:86px;padding:2px 4px;font-size:10.5px;border-radius:var(--v-radius);background:var(--color-panel);border:1px solid var(--v-line);color:var(--v-ink)} .cm-tt-mat.cm-canvas-parchment .cm-tt-newmark{color:#6b7a58} @media(max-width:1180px){.cm-tt-trays{gap:8px}.cm-tt-tray,.cm-tt-tray-slot{width:70px}.cm-tt-tray-bind{max-width:78px}} @media(prefers-reduced-motion:no-preference){ .cm-tt-restore,.cm-tt-playchip,.cm-tt-tray-slot{transition:background .12s ease,border-color .12s ease,box-shadow .12s ease} } /* ------------------------------------------------------------------ THE LOBBY (game G0) docs/crankmagic-game-plan.md §5.1. A seat is a card: who is sitting, what they brought, and whether it may sit at this table. A seat that cannot sit is amber-edged and says why by card, with the two ways forward under it — trim the deck or raise the bracket. */ .cm-lobby-rules .cm-toolbar{margin-bottom:8px} .cm-lobby-says{margin:0 0 6px;font-size:13.5px;color:var(--v-ink)} .cm-lobby-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 18px} .cm-lobby-seat{min-width:0;border:1px solid var(--v-line);border-radius:var(--v-radius-card);background:var(--v-panel);padding:12px 14px 10px;display:flex;flex-direction:column;gap:8px} .cm-lobby-seat.is-you{border-color:var(--v-accent);box-shadow:inset 3px 0 0 var(--v-accent)} .cm-lobby-seat.is-blocked{border-color:color-mix(in oklab,var(--v-accent) 56%,var(--v-bg))} .cm-lobby-seat header{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 10px;align-items:start} .cm-lobby-seat h3{margin:0;font-size:15px;grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere;line-height:1.25} .cm-lobby-seat header .cm-muted{grid-column:2;grid-row:2;font-size:12px;line-height:1.3} .cm-lobby-seat header .cm-lobby-ready{grid-column:3;grid-row:1/3;align-self:start;justify-self:end;margin:0} .cm-lobby-order{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--color-panel);border:1px solid var(--v-line);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--v-muted)} .cm-lobby-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-accent);vertical-align:middle} .cm-lobby-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px 10px;margin:0} .cm-lobby-figs dt{font-size:10px;letter-spacing:.02em;text-transform:none;color:var(--v-muted);line-height:1.2} .cm-lobby-figs dd{margin:0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .cm-lobby-figs dd.cm-amber{color:var(--color-money)} .cm-lobby-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .cm-lobby-issue{font-size:12.5px;line-height:1.45;color:var(--color-money);padding-left:16px;position:relative} .cm-lobby-issue::before{content:"!";position:absolute;left:0;top:0;font-weight:700} .cm-lobby-ok{margin:0;font-size:12.5px;color:var(--st-inbox)} .cm-lobby-fixes{margin-top:auto;padding-top:4px} .cm-lobby-empty{text-align:center} .cm-lobby-empty p{max-width:56ch;margin:6px auto 12px;color:var(--v-muted)} .cm-lobby-verdict{margin:0 0 8px;font-size:18px;font-weight:600} .cm-lobby-read code{font-size:12px;background:var(--color-panel);border-radius:4px;padding:1px 5px} .cm-lobby-trim{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px} /* THE FAN CONTENT NOTICE LIVES ON THE PAGE, not only in a file in the repository. The Wizards policy asks for it on the content itself, and a reader deciding whether to trust a price wants to see where the data came from without going looking. Quiet, at the bottom, always there. */ #matrix-v2 .cm-legal{border-top:1px solid var(--v-line,var(--v-raised));margin-top:28px;padding:18px 20px 26px; display:flex;flex-direction:column;gap:7px;max-width:88ch} #matrix-v2 .cm-legal p{margin:0;font-size:11.5px;line-height:1.55;color:var(--v-muted,var(--v-line))} /* The links are their own row of chips rather than inline in the sentences: an inline link in 11.5px prose is a 15px tap target, which is under the 32px floor the geometry suite holds the whole app to. The notice still reads as prose; only the destinations are separated out. */ #matrix-v2 .cm-legal-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:3px} #matrix-v2 .cm-legal a{display:inline-flex;align-items:center;min-height:32px; color:var(--v-muted,var(--v-line));text-decoration:underline;text-underline-offset:2px} #matrix-v2 .cm-legal a:hover{color:var(--v-text,var(--v-muted))} @media print{#matrix-v2 .cm-legal{display:none}} /* ------------------------------------------------------------------ EXPLORE CHOOSER (slice A) Entry point for scoped Discover: three doors (deck gap, commander, card) plus recent scopes as chips. Shown only when #discover has no scope params (deck/commander/card). */ .cm-explore-recents > p{margin:0 0 10px;font-size:13px;color:var(--v-muted)} .cm-explore-recent-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .cm-gap-intent{margin:4px 0 0;font-size:14px;color:var(--v-muted)} @media(max-width:640px){} /* ------------------------------------------------------------------ NEW DECK WIZARD (Phase 1 PR3) Unified entry with three peer paths: Create, Import, Lab. */ .cm-new-deck-wizard{max-width:56ch;padding:6px 0} .cm-new-deck-wizard > p{margin:0 0 18px;font-size:14px;color:var(--v-muted)} .cm-wizard-paths{display:flex;flex-direction:column;gap:12px} /* These are CONTROLS on a panel, so they take --v-raised. crankmagic-design.css line 38 states the contract outright: "--v-raised a CONTROL on that card -- lighter than the panel, always". They were painted --v-panel, the same value as the surface beneath them, which is why they read as three flat slabs; and :hover set --v-panel again, so the hover state was inert. */ /* Shorter than they were: min-height:80px left the label floating in the middle of a slab, and the first button crowded the line above it. The padding sets the height now. The lede CARRIES THE ID, because `#matrix-v2 :is(h1,h2,h3,p){margin:0}` is an id rule and was already flattening the 18px the wizard asked for -- which is why "Create" sat against the line above it. Trap 1 in INDEX-where-things-live.md: carry the id, never !important. */ #matrix-v2 .cm-new-deck-wizard>p{margin-bottom:18px} .cm-wizard-path{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 16px; text-align:left;background:var(--v-raised);border:1px solid var(--v-line);border-radius:var(--v-radius-card); cursor:pointer;transition:background .12s ease,border-color .12s ease} .cm-wizard-path:hover,.cm-wizard-path:focus-visible{ background:color-mix(in srgb,var(--v-accent) 12%,var(--v-raised));border-color:var(--v-accent)} .cm-wizard-path strong{display:block;font-size:15px;font-weight:600;color:var(--v-text)} .cm-wizard-path span{display:block;font-size:13px;color:var(--v-muted);line-height:1.4;margin-top:2px} @media(max-width:640px){ .cm-wizard-paths{gap:10px} .cm-wizard-path{min-height:72px;padding:14px 16px} } /* LOBBY UX LOCK — seat roles + Ready Up top-right + human invite + Trey seat chrome */ .cm-lobby-seat{position:relative;min-height:420px;padding-bottom:14px;display:flex;flex-direction:column;overflow:hidden;contain:layout paint} .cm-lobby-seat.is-human{border-color:var(--st-inbox);box-shadow:inset 3px 0 0 var(--st-inbox)} .cm-lobby-seat.is-ai{border-color:var(--st-standin);box-shadow:inset 3px 0 0 var(--st-standin)} .cm-lobby-seat.is-unused{opacity:.72;border-style:dashed} .cm-lobby-seat.is-ready{outline:1px solid color-mix(in srgb,var(--st-inbox) 33%,transparent)} .cm-lobby-seat>header{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cm-lobby-seat>header h3{margin:0} .cm-lobby-seat>header .cm-muted{flex:1 1 auto;min-width:0} .cm-lobby-ready{position:static;margin:0 0 0 auto} .cm-lobby-ready .v-button.is-on{background:color-mix(in oklab,var(--st-inbox) 24%,var(--v-bg));border-color:var(--st-inbox);color:color-mix(in oklab,var(--st-inbox) 32%,var(--v-ink))} .cm-lobby-invite{display:flex;flex-direction:column;gap:8px;margin-top:6px} .cm-lobby-invite label{display:flex;flex-direction:column;gap:4px;font-size:12px} .cm-lobby-invite input{font:inherit;font-size:13px} .cm-lobby-invite-actions{display:flex;flex-wrap:wrap;gap:8px} .cm-lobby-inline{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid var(--v-line)} .cm-lobby-inline-label{font-size:12px;color:var(--v-muted)} .cm-lobby-inline label{display:flex;flex-direction:column;gap:4px;font-size:12px} .cm-lobby-inline input,.cm-lobby-inline select,.cm-lobby-inline textarea{font:inherit;font-size:13px} .cm-lobby-says{margin:0;font-size:13px;color:var(--v-muted)} .cm-lobby-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px;align-items:stretch} /* Chrome row: View cards + Change deck + Deck fits — ABOVE Cards/GC/Score/Colors */ .cm-lobby-chrome{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:6px 0 8px} .cm-lobby-chrome-status{min-width:0} .cm-lobby-chrome .cm-lobby-ok,.cm-lobby-chrome .cm-lobby-issues{margin:0} .cm-lobby-chrome-actions,.cm-lobby-chrome-row{margin:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;justify-content:flex-start} .cm-lobby-chrome-actions .v-button,.cm-lobby-chrome-row .v-button{flex:0 0 auto;width:auto} .cm-lobby-chrome .cm-lobby-issues{list-style:none;padding:0;font-size:12px} .cm-lobby-deck-menu{position:relative;display:inline-block} .cm-lobby-deck-menu>summary{list-style:none;cursor:pointer} .cm-lobby-deck-menu>summary::-webkit-details-marker{display:none} .cm-lobby-deck-menu-panel{position:absolute;z-index:40;bottom:calc(100% + 4px);top:auto;left:0;min-width:140px;max-width:min(200px,100%);padding:6px;border-radius:var(--v-radius);border:1px solid var(--v-line);background:var(--v-panel);box-shadow:0 8px 24px #0008;display:flex;flex-direction:column;gap:4px} .cm-lobby-deck-menu-panel .v-button{width:100%;justify-content:flex-start} .cm-lobby-deck-menu:not([open])>.cm-lobby-deck-menu-panel{display:none!important} .cm-lobby-deck-menu[open]>.cm-lobby-deck-menu-panel{display:flex} /* Mid/bottom: commander art LEFT large (~half seat height); type bars RIGHT */ .cm-lobby-decked{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;margin-top:8px;width:100%;max-width:100%;min-width:0;overflow:hidden} .cm-lobby-art{width:100%;height:auto;max-height:none;aspect-ratio:5/7;object-fit:cover;object-position:top;border-radius:var(--v-radius);display:block;background:var(--v-bg)} .cm-lobby-art-fallback{aspect-ratio:5/7;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;font-size:12px;color:var(--v-muted);border:1px dashed var(--v-line);border-radius:var(--v-radius)} .cm-lobby-types{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;overflow:hidden} /* ~15px gap between category label and bar (auto label width, not fixed 72px gutter) */ .cm-lobby-type-row{display:grid;grid-template-columns:auto 1fr auto;column-gap:15px;align-items:center;font-size:11px;white-space:nowrap} .cm-lobby-type-row span:first-child{color:var(--v-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5em} .cm-lobby-type-bar{height:8px;border-radius:4px;background:var(--v-raised);overflow:hidden} .cm-lobby-type-bar>i{display:block;height:100%;border-radius:4px} .cm-lobby-type-row strong{text-align:right;font-weight:600;min-width:1.5em} .cm-lobby-under{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-width:100%;min-width:0;overflow:hidden} .cm-lobby-under .cm-lobby-ok,.cm-lobby-under .cm-lobby-issues{margin:0} .cm-lobby-under-row{margin:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;justify-content:flex-start;max-width:100%;min-width:0;overflow:hidden;width:100%} .cm-lobby-under-row .v-button{flex:0 0 auto;width:auto;min-height:28px;padding:0 8px;font-size:11px;white-space:nowrap} .cm-lobby-sim{margin:0;font-size:12px} .cm-lobby-sim a{color:var(--v-accent);text-decoration:underline} .cm-lobby-under-full{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-width:100%;min-width:0;overflow:hidden;width:100%} .cm-lobby-under-full .cm-lobby-under-row{margin:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;justify-content:flex-start;max-width:100%;min-width:0;overflow:hidden;width:100%} .cm-lobby-type-row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:7.5em} @media(max-width:1100px){.cm-lobby-seats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.cm-lobby-seats{grid-template-columns:1fr}} .cm-lobby-view-cards .cm-lobby-cardlist{max-height:50vh;overflow:auto;margin:8px 0 0;padding:0 0 0 1.1em;font-size:13px} .cm-lobby-view-cards .cm-lobby-cardlist li{margin:2px 0} .cm-commander-results{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:180px;overflow:auto} .cm-commander-result{display:flex;gap:8px;align-items:center;text-align:left;font:inherit;font-size:12px;padding:6px 8px;border-radius:var(--v-radius);border:1px solid var(--v-line);background:var(--v-bg);color:inherit;cursor:pointer} .cm-commander-result:hover{border-color:var(--v-accent);background:var(--v-panel)} .cm-commander-result span{color:var(--v-muted)} .cm-lobby-art-btn{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in;border-radius:var(--v-radius);overflow:hidden} .cm-lobby-art-btn:focus-visible{outline:2px solid var(--v-accent);outline-offset:2px} .cm-lobby-art-pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px} .cm-lobby-art-pop-backdrop{position:absolute;inset:0;border:0;padding:0;margin:0;background:#000a;cursor:pointer} /* Sized from the card that opened it (--cm-pop-w), so it reads as that card lifting off the table rather than as an unrelated picture. */ .cm-lobby-art-pop-card{position:relative;z-index:1;width:var(--cm-pop-w,320px);max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);aspect-ratio:488/680;padding:0;border:0;border-radius:var(--v-radius-card);overflow:hidden;background:var(--v-bg);box-shadow:0 16px 48px #000c;cursor:pointer} .cm-lobby-art-pop-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .cm-lobby-summary{display:flex;flex-direction:column;gap:12px;max-width:520px} .cm-lobby-summary-top{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start} .cm-lobby-summary-art{width:120px;height:auto;aspect-ratio:5/7;object-fit:cover;object-position:top;border-radius:var(--v-radius);display:block} .cm-lobby-summary-name{margin:0 0 4px;font-size:16px;font-weight:700} .cm-lobby-summary-types{display:flex;flex-direction:column;gap:5px} .cm-lobby-summary-actions{margin:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px} /* LOBBY BUILD-STYLE + COLOR PILLS (Build from Commander only) */ .cm-lobby-source-band{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px} .cm-lobby-source-band>label{flex:1 1 220px;min-width:0} .cm-lobby-color-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-bottom:2px} .cm-lobby-color-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase} .cm-lobby-color-filter .cm-color-pills{margin:0} .cm-lobby-color-filter .cm-color-pill{padding:5px 7px;font-size:0;gap:0;line-height:0} .cm-lobby-color-filter .cm-color-pill img{width:17px;height:17px} .cm-lobby-build-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px} .cm-lobby-style-chip{margin:4px 0 0;font-size:11px} .cm-lobby-inline .cm-lobby-source-band{margin-bottom:2px} .cm-lobby-inline .cm-lobby-inline-label{flex:1 1 180px} /* FIX batch 2026-09-17 self-test #1 #5 */ .cm-lobby-rules select, .cm-lobby-rules input[type="number"], .cm-lobby-rules .cm-lobby-gc, .cm-lobby-rules [name="cap"], .cm-lobby-rules [name="bracket"] { font-size: 14px !important; line-height: 1.25 !important; } .cm-lobby-seat > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .cm-lobby-seat > header .cm-lobby-seat-titles { display: flex; flex-direction: column; gap: 0; min-width: 0; } .cm-lobby-seat > header .cm-lobby-seat-titles strong { line-height: 1.15; } .cm-lobby-seat > header .cm-lobby-seat-sub { font-size: 12px; line-height: 1.2; margin-top: 1px; } .cm-lobby-seat > header [data-action="lobby-ready"] { margin-left: auto; align-self: flex-start; } .cm-commander-results:not([hidden]) { display: block; position: absolute; z-index: 40; max-height: 240px; overflow: auto; background: var(--cm-panel, var(--v-bg)); border: 1px solid rgba(255,255,255,.15); width: min(100%, 420px); } .cm-lobby-source-band label, .cm-lobby-inline label { position: relative; } /* Apply build-100 flame spinner */ @keyframes cm-flame-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } .cm-flame-spin { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.45em; vertical-align: -0.12em; border-radius: 50% 50% 40% 60%; background: radial-gradient(circle at 35% 28%, #ffe9a8 0%, #ff8a2b 48%, #b8321a 100%); box-shadow: 0 0 10px rgba(255, 120, 40, 0.75); animation: cm-flame-spin 0.7s linear infinite; } body.cm-build-busy { cursor: progress; } body.cm-build-busy .cm-lobby-seat.cm-seat-building { outline: 1px solid rgba(255, 140, 40, 0.55); outline-offset: 2px; } button.cm-building { pointer-events: none; } /* THE CONNECTION PANEL (readiness plan C.2), drawn in the Play lobby while a private table is open on the local host: who the table is waiting on, by name and reason. The module that draws it is game/ui/connection.mjs; these are the workshop's colors for it. */ .cm-lobby-live:empty{display:none}.cm-lobby-live{margin-top:16px} .connection-panel{padding:16px 18px;border:1px solid var(--cm-line,var(--color-line));border-radius:var(--v-radius-card);background:var(--cm-panel,var(--v-bg))}.connection-panel.is-ok{border-color:color-mix(in oklab,var(--st-inbox) 64%,var(--v-bg))}.connection-panel.is-failed{border-color:color-mix(in oklab,var(--st-remove) 68%,var(--v-bg))}.connection-panel.is-starting{border-color:var(--v-accent)} .connection-title{margin:0 0 4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;opacity:.8}.connection-headline{margin:0 0 12px;font-size:18px}.is-ok .connection-headline{color:color-mix(in oklab,var(--st-inbox) 64%,var(--v-bg))}.is-failed .connection-headline{color:color-mix(in oklab,var(--st-remove) 68%,var(--v-bg))}.is-starting .connection-headline{color:color-mix(in oklab,var(--v-accent) 72%,var(--v-bg))} .connection-seats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .connection-seat{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--cm-line,var(--color-line));border-radius:var(--v-radius-card);font-size:14px}.connection-seat.is-you{outline:2px solid var(--v-aether)} .connection-seat .connection-kind{font-size:12px;opacity:.75}.connection-seat .connection-detail{font-size:12px;opacity:.85} .connection-seat.is-ready{border-color:color-mix(in oklab,var(--st-inbox) 64%,var(--v-bg))}.connection-seat.is-ready .connection-state{color:color-mix(in oklab,var(--st-inbox) 64%,var(--v-bg))} .connection-seat.is-blocking:not(.is-ready){border-color:var(--v-accent)}.connection-seat.is-offline{border-color:color-mix(in oklab,var(--st-remove) 68%,var(--v-bg))}.connection-seat.is-offline .connection-state{color:color-mix(in oklab,var(--st-remove) 68%,var(--v-bg))} .connection-seat.is-quiet{border-color:var(--v-accent)}.connection-seat.is-quiet .connection-detail{color:color-mix(in oklab,var(--v-accent) 72%,var(--v-bg))}.connection-seat.is-empty{opacity:.7;border-style:dashed} .connection-launch{margin:12px 0 0;color:color-mix(in oklab,var(--v-accent) 72%,var(--v-bg))}.connection-launch.is-failed{color:color-mix(in oklab,var(--st-remove) 68%,var(--v-bg))}.connection-launch.is-bridge-green,.connection-launch.is-seated{color:color-mix(in oklab,var(--st-inbox) 64%,var(--v-bg))} /* A lobby deck's tile (UAT M-15): the pill that says so and the one button that promotes it. */ .cm-tile-lobby{display:flex;align-items:center;gap:8px;padding:8px 12px 12px} /* THE MAT STRIP (wireframe 2b's "Choose mat"). The pictures are Rob's own uploads, listed by game/ui/playmats.mjs and served by the host from game/ui/assets/playmats/. Their native ratios run 1.65 to 1.86, so 16:9 shows each one close to how it sits under a board. */ .cm-mat-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:14px} .cm-mat{padding:0;border:1px solid var(--v-line);border-radius:var(--v-radius);overflow:hidden;background:var(--v-panel);cursor:pointer;display:flex;flex-direction:column;color:var(--v-ink);text-align:left} .cm-mat:hover{border-color:color-mix(in srgb,var(--v-brass) 60%,var(--v-line))} .cm-mat.is-on{border-color:var(--v-brass);box-shadow:0 0 0 2px var(--v-brass)} .cm-mat-art{display:block;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--v-raised)} /* Classic black has no art, and 'Surprise me' has no one picture to show; both get the felt rather than a broken frame. */ .cm-mat-art[data-plain]{background-image:radial-gradient(ellipse at 50% 35%,var(--v-panel),var(--v-bg) 78%)} .cm-mat-name{padding:8px 11px;font-size:13px;font-weight:600;display:grid;gap:2px} .cm-mat-name small{font-size:11px;font-weight:400;color:var(--v-muted)} /* The host's menu carries the table rules it used to print in a panel; a menu is narrower, so its toolbar stacks rather than running out of the popover. */ .cm-lobby-menu .cm-menu-toolbar{display:grid;gap:8px} .cm-lobby-lede{margin:-6px 0 18px;color:var(--v-muted);font-size:14px} /* THE WAY TO A HOST THAT CAN PLAY. Shown only on a copy that cannot reach one -- Rob asked for a link he can click rather than an address he has to retype. */ .cm-table-elsewhere{margin:8px 0 0;font-size:11px;text-align:center;color:color-mix(in srgb,var(--table-ink) 66%,transparent);line-height:1.45} .cm-table-elsewhere a{color:var(--table-ink);font-weight:600} /* Shown only when the browser refused the board tab -- a launch with no click behind it. */ .cm-table-board-link{margin:8px 0 0;font-size:11px;text-align:center;color:color-mix(in srgb,var(--table-ink) 70%,transparent);line-height:1.45} .cm-table-board-link a{color:var(--table-ink);font-weight:600} #matrix-v2 .cm-table-host-link{color:var(--table-ink);text-decoration:underline;text-underline-offset:2px} #matrix-v2 .cm-table-host-link:hover{color:var(--v-accent)} /* The pointer's host address. `--table-ink` is the ink of the light Table rules panel and is dark; on the pointer's dark panel it rendered invisible. The accent reads on both. */ .cm-pointer-host{color:var(--v-accent);text-decoration:underline;text-underline-offset:2px} /* LOAD: start a deck from one of your own (crankmagic-decks.js, wizard-load). Two panes in one dialog, as Rob asked: the list on the left, and "to the right of this pop-up" the deck it selects. Controls take --v-raised, which crankmagic-design.css defines as lighter than the panel they sit on, always. */ .cm-load-wizard{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:16px;align-items:start} .cm-load-list{display:flex;flex-direction:column;gap:6px;max-height:58vh;overflow-y:auto;padding-right:4px;scrollbar-width:thin} .cm-load-item{text-align:left;padding:10px 12px;border-radius:var(--v-radius-control);border:1px solid var(--v-line); background:var(--v-raised);color:var(--v-text);font-size:14px;cursor:pointer;transition:background .12s ease,border-color .12s ease} .cm-load-item:hover,.cm-load-item:focus-visible{background:color-mix(in srgb,var(--v-accent) 12%,var(--v-raised));border-color:var(--v-accent)} .cm-load-item.is-on{background:color-mix(in srgb,var(--v-accent) 20%,var(--v-raised));border-color:var(--v-accent);font-weight:600} .cm-load-detail{position:relative;min-width:0;display:flex;flex-direction:column;gap:12px} .cm-load-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .cm-load-head h3{margin:0;font-size:17px} .cm-load-head p{margin:2px 0 0;font-size:13px} .cm-load-art{width:clamp(140px,38%,210px);height:auto;border-radius:var(--v-radius-card);align-self:flex-start;box-shadow:0 6px 18px rgb(0 0 0 / .35)} .cm-load-avg{margin:0;font-size:13px} .cm-load-avg strong{font-size:15px;font-variant-numeric:tabular-nums} .cm-load-cards{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow-y:auto;padding-right:4px;scrollbar-width:thin; border-top:1px solid var(--v-line);padding-top:8px} .cm-load-card{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;text-align:left; padding:5px 8px;border:0;border-radius:var(--v-radius-control);background:none;color:var(--v-text);font-size:13px;cursor:default} .cm-load-card:hover,.cm-load-card:focus-visible{background:var(--v-raised)} .cm-load-card b{font-variant-numeric:tabular-nums;color:var(--v-muted);font-weight:600} /* The hover preview sits over the pane and never takes the pointer, so moving across the list cannot land on the preview and flicker. */ .cm-load-preview{position:absolute;right:0;bottom:0;width:min(250px,60%);pointer-events:none;z-index:5} .cm-load-preview img{width:100%;height:auto;border-radius:var(--v-radius-card);box-shadow:0 10px 30px rgb(0 0 0 / .55)} @media(max-width:760px){.cm-load-wizard{grid-template-columns:minmax(0,1fr)}.cm-load-list{max-height:200px}.cm-load-preview{position:static;width:auto}} /* The deck file controls sit under both panes: a library lives in the browser that made it, and the local host and the cloud copy are different browsers as far as IndexedDB is concerned. */ .cm-load-foot{grid-column:1/-1;margin:4px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px; border-top:1px solid var(--v-line);padding-top:10px} /* THE COMMANDER PICKER SIZES ITSELF; ONLY ITS LIST SCROLLS. Rob, 2026-09-24: "The Create pop-up shouldn't have to scroll the pop-up (the menu inside it yes). make it bigger." #cm-dialog, NOT dialog.cm-picker-dialog: the base rule carries the id, and an id beats any number of classes -- trap 1 in docs/INDEX-where-things-live.md, "Carry the id; never !important". Written as a class this rule set the height and silently lost the width. THE LIST WAS NOT IN FLOW, which is why nothing about the dialog's height helped. Line 2540, `.cm-commander-results:not([hidden])`, makes it an absolutely positioned dropdown -- written for the LOBBY, where `.cm-lobby-source-band label` is position:relative for it to hang from. Inside this dialog there is no positioned ancestor, so it hung off the dialog itself, overlaid the note beside it (visible in Rob's screenshot) and gave the dialog a scrollbar for an overlay that was never part of its content. Here it goes back into flow and is capped against the viewport, so the dialog grows to fit it and stops scrolling. */ #cm-dialog.cm-picker-dialog{width:min(980px,calc(100vw - 24px))} #cm-dialog.cm-picker-dialog .cm-commander-results{position:static;width:auto;max-height:calc(100dvh - 360px);overflow:auto} /* THE LOCAL COPY: a game host, not the workshop. Rob, 2026-09-24: "don't show any of the left side bar. It is completely not required in the local version for the user to see and try to use in the localhost", and the brand moves to where the page title was, followed by "Online". #matrix-v2 carries the flag because the shell's own layout rules carry the id, and an id beats any number of classes -- trap 1 in docs/INDEX-where-things-live.md. */ #matrix-v2.cm-local .cm-sidebar{display:none} #matrix-v2.cm-local .cm-layout{grid-template-columns:minmax(0,1fr);display:block} #matrix-v2.cm-local main{padding-inline:clamp(16px,3vw,34px)} /* The moved brand sits on the title's baseline. It came out of a vertical rail, so its own column layout is turned back into a row here. */ #matrix-v2.cm-local .cm-page-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #matrix-v2.cm-local .cm-page-brand{display:flex;align-items:center} #matrix-v2.cm-local .cm-page-brand .v-brand-block{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;padding:0;border:0;background:none} #matrix-v2.cm-local .cm-page-brand .v-brand-copy{display:flex;align-items:center} #matrix-v2.cm-local .cm-page-brand .v-brand-logo{width:42px;height:42px} #matrix-v2.cm-local .cm-page-online{font-family:var(--v-display,inherit);font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--v-muted)} /* "Visit CrankMagic" sits under the two head buttons and reads as secondary: thinner, quieter. */ #matrix-v2.cm-local .cm-page-head .cm-actions{flex-wrap:wrap;justify-content:flex-end} .cm-visit-crank{flex-basis:100%;text-align:center;padding:5px 12px;font-size:12px;font-weight:500; background:none;border:1px solid var(--v-line);color:var(--v-muted);text-decoration:none;border-radius:var(--v-radius-control)} .cm-visit-crank:hover,.cm-visit-crank:focus-visible{color:var(--v-text);border-color:var(--v-accent)}