/* Progressive deck study tools. Source order, rows and links are shared by both views. */
.deck-study-controls{border-top:1px solid var(--soft);padding-top:18px;margin:12px 0 20px}
.deck-study-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.deck-study-heading h2{font-size:32px;margin:0}
.deck-study-views{display:flex;gap:0}
.deck-study-views .button{font-size:16px}
.deck-study-views .button+button{border-left:0}
.deck-study-views [aria-pressed=true]{color:var(--ac-ink);background:var(--ac);border-color:var(--ac)}
.deck-study-filters{display:grid;grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(100px,1fr);gap:12px;align-items:end}
.deck-study-filters label{display:flex;flex-direction:column;gap:8px;min-width:0;font:14px var(--body)}
.deck-study-filters input,.deck-study-filters select{min-width:0;width:100%;min-height:44px;padding:10px;background:var(--bg2);color:var(--ink);border:1px solid var(--soft);border-radius:0;font:16px var(--body)}
.deck-study-filters select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.deck-study-summary{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:12px}
.deck-study-summary .fine{flex:1}
.deck-study-summary .button{font-size:14px;padding:8px 12px;flex:none}
.deck-study-about summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font:13px var(--mono);color:var(--muted)}
.deck-study-about summary:before{content:'+';color:var(--ac)}
.deck-study-about[open] summary:before{content:'−'}
.deck-study-controls .fine{font-size:13px;line-height:1.6;margin:10px 0}
.deck-study-scope{max-width:90ch}
.deck-study-art,.deck-study-card-meta,.deck-study-differences{display:none!important}
.deck-study-name{overflow-wrap:anywhere}
.deck-study[data-view=visual] .deck-sections{grid-template-columns:minmax(0,1fr)}
.deck-study[data-view=visual] .deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}
.deck-study[data-view=visual] .deck-list li{position:relative;min-width:0;display:flex;flex-direction:column;border:1px solid var(--soft);padding:8px;background:var(--bg2)}
.deck-study[data-view=visual] .deck-list a[data-preview-card],.deck-study[data-view=visual] .deck-list .unlinked{display:flex;flex-direction:column;gap:8px;padding:0;font-size:15px}
.deck-study[data-view=visual] .deck-list a[data-preview-card]:hover{color:var(--ac);text-decoration:none}
.deck-study[data-view=visual] .deck-list b{position:absolute;top:12px;left:12px;padding:5px 8px;background:var(--ink);color:var(--bg);border:1px solid var(--bg);font-size:17px;z-index:1}
.deck-study[data-view=visual] .deck-list b:before{content:'×';margin-right:2px}
.deck-study[data-view=visual] .deck-study-art{display:block!important;position:relative;aspect-ratio:744/1039;background:var(--bg);width:100%;isolation:isolate}
/* Battlefields are printed sideways: a landscape frame, so the art fills it instead of a thin strip. */
.deck-study[data-view=visual] [data-study-group=battlefields] .deck-study-art{aspect-ratio:1039/744}
.deck-study-art img{position:absolute;width:100%;height:100%;object-fit:contain;z-index:1;background:var(--bg)}
.deck-study-art img.error-image{visibility:hidden}
.deck-study-art-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;font:13px var(--mono);color:var(--muted)}
.deck-study[data-view=visual] .deck-study-card-meta{display:block!important;margin:8px 0;font-size:13px;overflow-wrap:anywhere}
.deck-study[data-view=visual] .deck-list .deck-study-differences{display:block!important;font-size:13px;padding:4px 0;margin:0;min-height:44px}
.deck-study[data-view=visual] .deck-list>li>a[data-preview-card]{flex:1}
.deck-study [data-study-section]{scroll-margin-top:20px}
@media(max-width:800px){.deck-study-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-study-search{grid-column:1/-1}}
@media(max-width:600px){.deck-study-heading{align-items:flex-start}.deck-study-views .button{min-height:44px;padding:10px 14px}.deck-study[data-view=visual] .deck-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.deck-study[data-view=visual] .deck-list li{padding:6px}.deck-study[data-view=visual] .deck-list a[data-preview-card]{font-size:14px}.deck-study[data-view=visual] .deck-list b{top:9px;left:9px;font-size:15px}.deck-study-controls .fine{font-size:13px}}
.reader-legend{font-size:13px;color:var(--muted);margin:0 0 10px}
.reader-credit{font-size:13px;margin:0 0 12px;line-height:1.6}
.reader-credit strong{font-weight:500}
.reader-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}
.reader-actions .button{font-size:16px;border-radius:0;min-height:44px;padding:10px}
.reader-actions .record-tools{margin:0;display:flex}
.reader-actions .save-button{width:100%;font-size:13px;border-radius:0;padding:10px;min-height:44px}
.reader-actions [data-copy-status]{grid-column:1/-1;font-size:13px;margin:0;line-height:1.5}
.reader-actions [data-copy-status]:empty{display:none}
.reader-notice{display:flex;align-items:baseline;gap:16px;padding:12px 32px;border-bottom:1px solid var(--soft)}
.reader-notice .eyebrow{font-size:13px;white-space:nowrap;color:var(--muted)}
.reader-notice p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.reader-notice a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.deck-reader .deck-study-controls{border:0;margin:0 0 8px;padding:0}
.deck-reader .deck-study-heading{margin-bottom:14px}
.deck-reader .deck-study-heading h2{font-size:32px}
.deck-reader .deck-study-views{border:1px solid var(--soft);border-radius:0;overflow:hidden}
.deck-reader .deck-study-views .button{border:0;font:600 15px var(--body);text-transform:none;min-height:42px}
.deck-reader .deck-study-views [aria-pressed=true]{background:var(--bg3);color:var(--ink)}
.deck-reader .deck-study-filters{grid-template-columns:minmax(180px,2fr) minmax(150px,1fr) minmax(150px,1fr)}
.deck-reader .deck-study-filters label{font-size:13px;gap:5px;color:var(--muted)}
.deck-reader .deck-study-filters input,.deck-reader .deck-study-filters select{border-radius:0;font-size:14px}
.deck-reader .deck-study-summary{margin-top:2px}
.deck-reader .deck-study-summary .fine{font-size:13px}
.deck-reader .deck-study-summary .button{border:0;font:600 14px var(--body);text-transform:none;padding-right:0}
.deck-reader .deck-study-about{font-size:13px}
.deck-reader .deck-study-about summary{min-height:32px;font-size:13px}
.deck-reader .section-jumps{border-top:0;gap:8px 22px;padding:10px 0 14px;margin-bottom:20px;font:13px var(--mono);text-transform:uppercase}
.deck-reader .section-jumps a{display:flex;align-items:center;gap:7px;min-height:36px}
.deck-reader .section-jumps span{color:var(--muted);font:13px var(--mono);background:var(--bg2);padding:3px 5px;border-radius:2px}
/* Two columns of whole sections, top to bottom, so a short section never leaves a hole beside a
   long one. The page script balances them as views and filters change. CSS columns kept stale
   heights in Safari: after Visual cards the text list fell to one column, and rows went unpainted. */
.deck-reader .deck-study .deck-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;align-items:start}
.deck-reader .deck-col{min-width:0}
.deck-reader .deck-group{padding-bottom:24px}
.deck-reader .deck-section-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px}
.deck-reader .deck-section-title h3{font-size:26px;margin:0}
.deck-reader .deck-section-title>span{font:13px var(--mono);color:var(--muted)}
.deck-reader .deck-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
.deck-reader .deck-list li{border-color:color-mix(in srgb,var(--soft) 70%,transparent);min-width:0}
.deck-reader .deck-list a[data-preview-card],.deck-reader .deck-list .unlinked{font-size:13px;gap:10px;align-items:center;padding:10px 8px 10px 0;min-height:44px}
.deck-reader .deck-list b{background:var(--bg2);border:1px solid var(--soft);color:var(--ink);text-align:center;min-width:26px;font-size:13px;padding:4px;border-radius:0}
.deck-reader .deck-study[data-view=visual] .deck-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
/* Visual cards run the sections one after another across the full width, four or so cards a row:
   in two columns a big section (nine Gear) left a screen-tall hole beside the short ones. */
.deck-reader .deck-study[data-view=visual] .deck-sections{grid-template-columns:minmax(0,1fr)}
.deck-reader .deck-study[data-view=visual] .deck-list a[data-preview-card],.deck-reader .deck-study[data-view=visual] .deck-list .unlinked{padding:0;align-items:stretch}
.deck-reader .deck-study[data-view=visual] .deck-list b{background:var(--ink);color:var(--bg);font-size:16px;min-width:32px}
/* The card link must size to its art and name; a shrinkable flex basis let the caption collide with the set code. */
.deck-reader .deck-study[data-view=visual] .deck-list>li>a[data-preview-card],.deck-reader .deck-study[data-view=visual] .deck-list>li>.unlinked{flex:0 0 auto;min-height:0}
.deck-reader .deck-study[data-view=visual] .deck-list>li>.deck-study-card-meta{margin-top:auto;padding-top:8px}
.reader-provenance{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 32px;background:var(--bg2);border-top:1px solid var(--soft)}
.reader-provenance h2{font-size:32px;margin:10px 0 16px}
.reader-provenance .eyebrow{font-size:13px;margin:0}
.reader-provenance p{font-size:13px;line-height:1.8;max-width:72ch}
.reader-provenance details summary{font:13px var(--mono);padding:14px 0;cursor:pointer;min-height:44px}
.reader-dates{margin:0}
.reader-dates>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;padding:12px 0;border-bottom:1px solid var(--soft);font-size:13px}
.reader-dates dt{color:var(--muted)}
.reader-dates dd{margin:0}
.reader-related{margin:0 0 16px;padding:0;font-size:14px}
@media(max-width:1000px){.reader-actions{grid-column:1/-1;display:flex;flex-wrap:wrap}.reader-actions .record-tools{flex:none}.reader-actions [data-copy-status]{flex-basis:100%}.deck-reader .deck-list{grid-template-columns:1fr}.deck-reader .deck-study[data-view=visual] .deck-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media(max-width:600px){.reader-credit{font-size:13px}.reader-legend{font-size:13px}.reader-actions{gap:8px;display:grid;grid-template-columns:1fr 1fr}.reader-actions .button{font-size:15px}.reader-actions .save-button{font-size:13px}.reader-notice{display:block;padding:12px 18px}.reader-notice .eyebrow{display:block;margin-bottom:6px}.reader-notice p{font-size:13px}.deck-reader .deck-study-heading{gap:10px}.deck-reader .deck-study-heading h2{font-size:29px}.deck-reader .deck-study-views .button{font-size:13px;padding:10px 12px;min-height:44px}.deck-reader .deck-study-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.deck-reader .deck-study-filters input,.deck-reader .deck-study-filters select{font-size:16px}.deck-reader .deck-study-search{grid-column:1/-1}.deck-reader .section-jumps{gap:4px 16px}.deck-reader .section-jumps a{min-height:44px}.deck-reader .deck-study .deck-sections{grid-template-columns:minmax(0,1fr)}.deck-reader .deck-list{grid-template-columns:1fr}.deck-reader .deck-list a[data-preview-card],.deck-reader .deck-list .unlinked{font-size:14px}.deck-reader .deck-study[data-view=visual] .deck-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reader-provenance{grid-template-columns:1fr;gap:16px;padding:24px 18px}.reader-dates>div{grid-template-columns:110px 1fr;font-size:13px}.reader-related{padding:0}
} /* the breadcrumb already links to Decklists */
.reader-legend{margin-bottom:6px;font-size:13px}
.reader-credit{margin-bottom:7px;font-size:13px}
.reader-notice p{max-width:none}
.deck-reader .deck-study-about{display:none} /* gallery and export scope is in the source record */
.deck-reader .deck-study[data-enhanced=true] .section-jumps{display:none}
.deck-reader .deck-study[data-filtered=false] .deck-study-summary{display:none}
.deck-reader .deck-study-summary .fine{max-width:none}
.deck-reader .deck-study-controls{margin-bottom:24px}
.deck-reader .deck-study-views .button{min-height:44px}

/* Reading support and deck provenance are body text, not interface codes. */
.deck-reader .fine,.deck-reader .deck-domains,.deck-reader .reader-credit,.deck-reader .reader-notice p{font:14px/1.6 var(--body)}

.deck-reader .reader-legend{font-size:15px;line-height:1.5}
.deck-reader .deck-study-filters label,.deck-reader .deck-study-about,.deck-reader .deck-study-about summary{font-size:14px;line-height:1.5}
.deck-reader .deck-study-filters input,.deck-reader .deck-study-filters select{font-size:16px}
.deck-reader .deck-list a[data-preview-card],.deck-reader .deck-list .unlinked{font-size:15px;line-height:1.5}
.deck-reader .section-jumps{font:14px/1.5 var(--body);text-transform:none}
.deck-reader .split-legend,.deck-reader .split-legend small{font-size:14px;line-height:1.5}
.deck-reader .signature-row small{color:inherit;opacity:1;font-size:13px}
.deck-reader .reader-provenance p,.deck-reader .reader-dates>div{font-size:14px;line-height:1.65}
.deck-reader .reader-provenance details summary{font:14px/1.5 var(--body)}
.reader-actions{grid-template-columns:1fr 1fr;gap:4px 12px}
.reader-actions .button{font:600 16px/1.2 var(--body);min-height:48px;padding:12px}
/* Two rows: copy the deck and edit a copy, then Share and More. */
.reader-actions>[data-deck-copy=code],.reader-actions:not(.has-code)>[data-deck-copy=text]{grid-column:1;grid-row:1}
.reader-actions>a.button[href^="/builder/"]{grid-column:2;grid-row:1}
.reader-actions>.button{text-wrap:balance;text-align:center;gap:8px;padding-inline:10px}
.reader-actions .reader-secondary{display:flex;align-items:center;min-height:44px;font:14px/1.5 var(--body);color:var(--muted)}
.reader-actions .reader-secondary:hover{color:var(--ac)}
.reader-actions .record-tools{margin:0}
.reader-actions .save-button{width:100%;border:0;background:none;font:14px/1.5 var(--body);color:var(--muted);padding:0;min-height:44px;text-align:left}
.reader-notice{padding:12px 32px;background:var(--bg2);border-top:1px solid var(--soft)}
@media(max-width:1100px){
 .reader-actions{grid-column:auto;display:grid}
}
@media(max-width:850px){.reader-actions{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
 .reader-actions .record-tools{grid-column:auto}.reader-actions .button{font-size:16px}
}
@media(max-width:600px){
 .reader-actions{grid-template-columns:1fr 1fr;gap:10px 14px}
 .reader-actions .button{font-size:17px;min-height:46px}
 .reader-actions .record-tools{grid-column:1/-1}
 .reader-actions .save-button{min-height:32px}
 .reader-notice{padding:12px 16px}
 .reader-notice>.eyebrow{display:none}
 .reader-provenance{padding:24px 16px}
}
/* Secondary actions and optional filters do not precede the deck itself. */
.reader-actions{position:relative}
.reader-more{position:relative}
.reader-more summary{font:600 16px/1.2 var(--body);display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px;border:1px solid var(--soft);cursor:pointer;color:var(--ink);list-style:none}
.reader-more summary span{color:var(--ac)}
.reader-more summary::-webkit-details-marker{display:none}
.reader-more[open] summary{color:var(--ac)}
/* The menu opens from the edge its button sits on, so it never runs past the screen. Beside
   Share, More is the last column. */
.reader-more>div{position:absolute;z-index:6;top:100%;left:0;right:auto;min-width:220px;max-width:calc(100vw - 32px);background:var(--bg2);border:1px solid var(--soft);box-shadow:0 8px 24px #0003;padding:10px 16px}
.reader-actions:has(>[data-deck-copy=link]:not([hidden])) .reader-more>div{left:auto;right:0}
.deck-study-search-panel{border-block:1px solid var(--soft)}
.deck-study-search-panel summary{font:14px/1.5 var(--body);color:var(--muted);display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none}
.deck-study-search-panel summary::-webkit-details-marker{display:none}
.deck-study-search-panel[open] summary{color:var(--ink)}
.deck-study-toggle::before{content:'+'}
.deck-study-search-panel[open] .deck-study-toggle::before{content:'−'}
.deck-study-search-panel .deck-study-filters{padding:8px 0 16px}
@media(min-width:601px) and (max-width:850px){.reader-actions:has(>[data-deck-copy=link]:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}.reader-actions .reader-more>div{left:auto;right:0}}

/* Deck cost: price estimate, collection gap and a TCGplayer cart. */
.deck-cost{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:start;gap:12px 40px;padding:18px 24px;border-bottom:1px solid var(--soft)}
.deck-cost[hidden]{display:none}
.deck-cost-figure{display:grid;gap:2px}
.deck-cost-label{font:500 14px var(--body);color:var(--muted);text-transform:none;margin-bottom:4px}
.deck-cost-figure strong{font:600 30px/1.1 var(--head);color:var(--ink)}
.deck-cost-figure>span:last-child{font-size:13px;color:var(--muted)}
.deck-cost-signin a{font-size:20px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.deck-cost-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
.deck-cost-actions .fine{flex-basis:100%;text-align:right;margin:0}
.deck-cost-actions .fine:empty{display:none}
.deck-cost-note{grid-column:1/-1;margin:0;color:var(--muted)}
@media (max-width:760px){
 .deck-cost{grid-template-columns:1fr 1fr;padding:16px 18px;gap:14px 20px}
 .deck-cost-figure strong{font-size:26px}
 .deck-cost-actions{grid-column:1/-1;justify-content:stretch}
 .deck-cost-actions .button{flex:1 1 100%;text-align:center}
 .deck-cost-actions .fine{text-align:left}
}
.reader-banned{border-left:3px solid #f08a7e}
.reader-banned .eyebrow{color:#f08a7e}
.reader-banned p{color:var(--ink)}
.deck-study[data-view=visual] .deck-flag{position:absolute;top:12px;right:12px;margin:0;background:var(--bg);z-index:1}
/* A tournament list or card that is banned today. Same red as the builder's illegal tag. */
.deck-flag{display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid #f08a7e;color:#f08a7e;font:600 13px/1.4 var(--body);letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
/* Deck page, 2026-09-29: the list on the first screen, one preview, then results and the source. */
/* The domain light is the page background, as in the builder: the title band sits in it, and
   everything below sits on the builder workspace's near-solid surface. Panels keep their own colour. */
.deck-reader>:not(.domain-light,.dk-head,.dk-owner,.reader-notice,.reader-provenance){background:color-mix(in srgb,var(--bg) 95%,transparent)}
.dk-head{display:grid;grid-template-columns:72px minmax(0,1fr) 288px;gap:20px;align-items:center;padding:16px var(--page-gutter,32px);border-bottom:1px solid var(--soft);position:relative}
.dk-art img{width:72px;height:100px;display:block}
.dk-id h1{font-size:56px;line-height:.95;margin:0 0 8px}
.dk-meta{margin:0 0 6px;font-size:15px;line-height:1.7;color:var(--muted)}
.dk-meta .finish,.dk-meta .best-of{display:inline-block;margin-right:4px}
.dk-meta strong{color:var(--ink)}
.dk-legend{margin:0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.deck-reader .dk-meta,.deck-reader .dk-legend{max-width:none}
.deck-reader .deck-group .deck-list{grid-template-columns:minmax(0,1fr)}
.deck-reader .deck-list .dk-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:6px 4px 6px 0;min-height:42px}
/* One compact row of list controls: the page title already names the deck. */
.deck-reader .deck-study-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 24px}
.deck-reader .deck-study-heading{margin:0;flex:none}
.deck-reader .deck-study-heading h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.deck-reader .deck-study-search-panel{flex:1 1 220px;border:0;container-type:inline-size}
/* Opened beside the view buttons, the form stacks in its own width, so the summary stays put,
   and the buttons keep to the top of the row instead of centring on the taller panel. */
.deck-reader .deck-study-controls:has(.deck-study-search-panel[open]){align-items:flex-start}
@container (max-width:520px){.deck-reader .deck-study-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-reader .deck-study-search{grid-column:1/-1}}
.deck-reader .deck-study-summary,.deck-reader .deck-study-about{flex-basis:100%}
.dk-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding:18px var(--page-gutter,32px) 36px;align-items:start}
.dk-side{position:sticky;top:calc(var(--top-bar,0px) + 16px);display:flex;flex-direction:column;gap:18px}
.dk-preview img{width:100%;height:auto;display:block;background:var(--bg2)}
.dk-preview h2{font:600 22px/1.2 var(--head);margin:10px 0 4px}
.dk-preview .fine{margin:0 0 8px}
.dk-preview-text{font-size:14px;line-height:1.6}
.dk-curve{margin:0}
.dk-curve figcaption{font:600 14px/1.4 var(--body);color:var(--ink);margin-bottom:8px}
/* What the bars are showing, on one reserved line under them, with Show all once a bar is on. */
.dk-curve-note{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;min-height:32px;margin:6px 0 0;font:13px/1.5 var(--body);color:var(--muted)}
.dk-curve-note button{min-height:32px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dk-curve-note button[hidden]{display:none}
/* Axis labels first, then one column per energy bucket: the count above each label. */
.dk-bars{display:grid;grid-template-columns:auto;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:120px}
.dk-axis{display:grid;grid-template-rows:1fr auto auto;justify-items:end;padding-right:4px;font:13px/1.5 var(--body);color:var(--muted)}
.dk-axis i{font-style:normal}
.dk-bars button{display:grid;grid-template-rows:1fr auto auto;align-items:end;justify-items:center;background:none;border:0;padding:0;color:var(--muted);cursor:pointer;font:13px var(--mono)}
.dk-bars button span{width:100%;height:var(--h);min-height:2px;background:var(--ac);align-self:end}
/* The bars are already the ink colour, so a pressed bar shows by the others fading. */
.dk-bars:has([aria-pressed=true]) button:not([aria-pressed=true]) span{opacity:.3}
.dk-bars button[aria-pressed=true] :is(b,small){color:var(--ink);font-weight:600}
.dk-bars button:disabled{cursor:default}
.dk-bars b{font-weight:400;color:var(--ink)}
.dk-bars b,.dk-bars small{line-height:1.5}
.dk-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto auto;align-items:center;gap:8px;min-height:40px;padding:6px 4px 6px 0;color:var(--ink)}
.dk-row:hover,.dk-row:focus-visible{color:var(--ac);text-decoration:none}
/* A see-through hover: an opaque one cut a grey slab out of the page's domain light. */
.deck-reader .deck-list a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dk-qty{font:600 15px var(--body);text-align:center;color:var(--ink)}
.dk-tag{font:13px var(--mono);text-transform:uppercase;color:var(--muted)}
.dk-cost{display:inline-flex;gap:4px;align-items:center}
.dk-energy,.dk-power{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;font:600 13px var(--body);font-style:normal}
.dk-energy{border:1px solid var(--muted);color:var(--ink)}
.dk-power{--power:var(--muted);background:var(--power);color:var(--bg)}
.dk-power[data-domain=Fury]{--power:var(--fury)}.dk-power[data-domain=Calm]{--power:var(--calm)}.dk-power[data-domain=Mind]{--power:var(--mind)}.dk-power[data-domain=Body]{--power:var(--body-color)}.dk-power[data-domain=Chaos]{--power:var(--chaos)}.dk-power[data-domain=Order]{--power:var(--order)}
.deck-list li[data-dimmed] .dk-row{opacity:.28}
.dk-event,.dk-more{padding:22px var(--page-gutter,32px);border-top:1px solid var(--soft)}
.dk-rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;flex-wrap:wrap}
.dk-rail-head h2,.dk-more h2{font-size:28px;margin:0 0 12px}
.dk-rail-nav{display:flex;gap:4px 20px;font-size:15px;flex-wrap:wrap}
.dk-rail-nav a{display:inline-flex;align-items:center;min-height:44px}
/* The whole Top 8 on screen: four across (five when this list sits outside the Top 8), two on phones. */
.dk-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dk-rail:has(>:nth-child(9)){grid-template-columns:repeat(5,minmax(0,1fr))}
.dk-rail.dk-rail-scroll,.dk-others .dk-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;padding-bottom:6px}
.dk-tile{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;padding:8px;border:1px solid var(--soft);color:var(--ink);font-size:14px;line-height:1.35}
.dk-tile img{grid-row:1/4;width:48px;height:67px}
.dk-tile[aria-current=page]{border-color:var(--ac)}
.dk-tile-place{font:13px var(--mono);color:var(--muted)}
.dk-tile span:last-child{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-more ul{list-style:none;margin:0 0 12px;padding:0}
/* Finish, then the player over the event, then the date: every row reads left to right. */
.dk-more li a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:56px;padding:6px 0;border-bottom:1px solid var(--soft);color:var(--ink);font-size:15px}
.dk-more li .finish{justify-self:start}
.dk-more-who{display:grid;min-width:0}
.dk-more-who strong,.dk-more-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-more-who span,.dk-more time{color:var(--muted);font-size:14px}
.dk-more time{text-align:right;white-space:nowrap}
@media(max-width:1000px){.dk-head{grid-template-columns:72px minmax(0,1fr)}.dk-head .reader-actions{grid-column:1/-1}.dk-body{grid-template-columns:minmax(0,1fr)}.dk-side{display:none}}
@media(max-width:600px){.dk-head{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:14px 16px}.dk-art img{width:52px;height:72px}.dk-id h1{font-size:40px}.dk-meta{font-size:14px}.dk-body{padding:14px 16px 28px}.dk-event,.dk-more{padding:18px 16px}.dk-more li a{grid-template-columns:44px minmax(0,1fr) auto}.dk-rail,.dk-rail:has(>:nth-child(9)){grid-template-columns:repeat(2,minmax(0,1fr))}.dk-rail-head{flex-direction:column;align-items:stretch}.dk-rail-nav{justify-content:space-between}.dk-rail-nav a[data-rail-next]{margin-left:auto}}
@media(max-width:1000px){dialog.card-preview{margin:auto auto 0;width:100%;max-width:560px;max-height:88vh;border-radius:12px 12px 0 0}dialog.card-preview img{max-width:260px;margin:0 auto;display:block}}
.dk-dock{display:none}
@media(max-width:700px){.dk-dock:not([hidden]){display:grid;grid-template-columns:1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--soft)}}
.dk-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px}
.dk-play{min-height:36px;padding:4px 12px;background:none;border:1px solid var(--soft);color:var(--ink);font:600 14px var(--body);cursor:pointer;white-space:nowrap}
.dk-play:hover{border-color:var(--ac);color:var(--ac)}
.dk-play[aria-pressed=true]{border-color:var(--ac);background:var(--ac-soft);color:var(--ac)}
.dk-title h1{margin-bottom:0}
/* Phones: the name gets its own line, then Play and Like side by side. */
@media(max-width:600px){.dk-title h1{flex-basis:100%}}
/* Player deck pages: the owner's bar, and notices that list what to fix. */
.dk-owner{--profile-line:var(--soft);--profile-ac:var(--ac);padding:10px var(--page-gutter,32px);background:var(--bg2)}
.dk-owner .player-owner-actions .button{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;margin:0}
.community-deck .reader-notice{display:block}
.community-deck .reader-notice .eyebrow{display:block;margin-bottom:4px}
.reader-notice ul{margin:6px 0 8px;padding-left:18px;font-size:13px;line-height:1.7;color:var(--muted)}
.reader-unfinished .eyebrow{color:var(--ac)}
.community-deck .dk-meta .finish-winner{margin-right:2px}
@media(max-width:700px){.dk-owner{padding:10px 16px}}
.community-deck .reader-notice.dk-issues{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px}
.community-deck .dk-issues .eyebrow{grid-row:1/3;margin:0}
.dk-issues ul{display:flex;flex-wrap:wrap;gap:2px 20px;margin:4px 0 0;padding:0;list-style:none}
.dk-issues li{position:relative;padding-left:12px}.dk-issues li:before{content:'';position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:currentColor}
@media(max-width:700px){.community-deck .reader-notice.dk-issues{display:block}.community-deck .dk-issues .eyebrow{margin-bottom:4px}}
.community-deck .dk-issues p{margin:0}.community-deck .dk-issues ul{margin-top:2px}
/* Curve bar heights in 5% steps: no inline styles, and no script needed. */
.dk-bars span[data-h="0"]{--h:0%}.dk-bars span[data-h="5"]{--h:5%}.dk-bars span[data-h="10"]{--h:10%}.dk-bars span[data-h="15"]{--h:15%}.dk-bars span[data-h="20"]{--h:20%}.dk-bars span[data-h="25"]{--h:25%}.dk-bars span[data-h="30"]{--h:30%}.dk-bars span[data-h="35"]{--h:35%}.dk-bars span[data-h="40"]{--h:40%}.dk-bars span[data-h="45"]{--h:45%}.dk-bars span[data-h="50"]{--h:50%}.dk-bars span[data-h="55"]{--h:55%}.dk-bars span[data-h="60"]{--h:60%}.dk-bars span[data-h="65"]{--h:65%}.dk-bars span[data-h="70"]{--h:70%}.dk-bars span[data-h="75"]{--h:75%}.dk-bars span[data-h="80"]{--h:80%}.dk-bars span[data-h="85"]{--h:85%}.dk-bars span[data-h="90"]{--h:90%}.dk-bars span[data-h="95"]{--h:95%}.dk-bars span[data-h="100"]{--h:100%}
/* The owner's deck setting: Private, Link or Community. */
.dk-owner{flex-wrap:wrap}
.dk-visibility{display:inline-flex;border:1px solid var(--soft)}
.dk-visibility button{min-height:44px;padding:0 14px;border:0;background:none;color:var(--muted);font:600 14px var(--body);cursor:pointer}
.dk-visibility button+button{border-left:1px solid var(--soft)}
.dk-visibility button[aria-checked=true]{background:var(--ac);color:var(--ac-ink)}
.dk-visibility button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.dk-visibility-note{flex:1 1 240px;margin:0;font-size:13px;color:var(--muted)}
.dk-visibility-copy{margin-left:6px;padding:0;border:0;background:none;color:var(--ink);font:13px var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dk-handle{color:var(--muted)}
/* Likes, reports and About this deck. */
.dk-like{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--soft);background:none;color:var(--ink);font:13px var(--body);cursor:pointer}
.dk-like[aria-pressed=true]{border-color:var(--ac);color:var(--ac)}
.dk-like.is-owner{cursor:default;margin:0;color:var(--muted)}
.dk-like:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.dk-report{display:grid;gap:8px;margin-top:8px}
.dk-report label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.dk-about{margin-top:18px}
.dk-about h3{margin:0 0 6px;font-size:20px}
.dk-about p{margin:0 0 10px;white-space:normal;overflow-wrap:anywhere}
.dk-about-form{display:grid;gap:8px;margin-top:18px}
.dk-about-form label{font-weight:600}
.dk-about-form label span{font-weight:400;font-size:13px;color:var(--muted);margin-left:6px}
.dk-about-form textarea{width:100%;min-height:120px;padding:10px;background:var(--bg);color:var(--ink);border:1px solid var(--soft);font:15px/1.5 var(--body)}
.dk-about-form div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* More holds the secondary actions as plain rows; the star holds its place until the script wakes it. */
.reader-more button.reader-secondary{width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
/* Delete deck, the owner's last item (W3c): red, as in the builder's ••• menu. */
.reader-more button.reader-secondary.is-danger{color:#f08a7e}:root[data-theme=light] .reader-more button.reader-secondary.is-danger{color:#b4372a}
.dk-play[data-play-pending]{visibility:hidden}
@media(max-width:600px){.dk-play{min-height:44px;padding:4px 12px}}
/* The price beside the title, filled once prices load. */
.dk-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;min-height:32px;margin:4px 0 0;font:14px/1.5 var(--body);color:var(--muted)}
.dk-price b{font:600 15px var(--mono);color:var(--ink)}
.dk-price a{display:inline-flex;align-items:center;min-height:32px;color:var(--ac)}
.dk-like[data-like-pending]{visibility:hidden}

/* Each row's domain colour at its left edge, split for a two-domain card, so a list can be read
   and pulled one domain at a time. The Pull list's rows and headings use the same colours. */
.deck-study [data-domain-1=Fury]{--d1:var(--fury);--d2:var(--fury)}.deck-study [data-domain-1=Calm]{--d1:var(--calm);--d2:var(--calm)}.deck-study [data-domain-1=Mind]{--d1:var(--mind);--d2:var(--mind)}.deck-study [data-domain-1=Body]{--d1:var(--body-color);--d2:var(--body-color)}.deck-study [data-domain-1=Chaos]{--d1:var(--chaos);--d2:var(--chaos)}.deck-study [data-domain-1=Order]{--d1:var(--order);--d2:var(--order)}
.deck-study [data-domain-2=Fury]{--d2:var(--fury)}.deck-study [data-domain-2=Calm]{--d2:var(--calm)}.deck-study [data-domain-2=Mind]{--d2:var(--mind)}.deck-study [data-domain-2=Body]{--d2:var(--body-color)}.deck-study [data-domain-2=Chaos]{--d2:var(--chaos)}.deck-study [data-domain-2=Order]{--d2:var(--order)}
.deck-reader .deck-study:not([data-view=visual]) .deck-list .dk-row{position:relative;padding-left:14px}
.deck-reader .deck-study:not([data-view=visual]) [data-domain-1]>.dk-row::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:5px;background:linear-gradient(var(--d1) 50%,var(--d2) 50%)}

/* Pull list: the deck as a checklist for putting it together. One tap per copy pulled. */
.pull-intro{margin:0 0 18px;font:14px/1.6 var(--body);color:var(--muted)}
.pull-intro p{margin:0 0 4px;max-width:72ch}
.pull-intro a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pull-tools{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.pull-tools label{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);cursor:pointer}
.pull-tools input{width:18px;height:18px;margin:0;accent-color:var(--ac)}
.pull-reset{min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pull-reset:hover{color:var(--ac)}
.pull-group .deck-section-title h3{display:flex;align-items:center;gap:10px}
.pull-group[data-domain-1] .deck-section-title h3::before{content:'';flex:none;width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--d1) 50%,var(--d2) 50%)}
.deck-reader .deck-list .pull-row{width:100%;min-height:52px;grid-template-columns:30px minmax(0,1fr) auto;border:0;background:none;color:var(--ink);font:15px/1.4 var(--body);text-align:left;cursor:pointer}
@media(hover:hover){.deck-reader .deck-list .pull-row:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}}
.deck-reader .deck-list .pull-row:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.deck-reader .deck-list li[data-last] .pull-row{background:color-mix(in srgb,var(--d1,var(--ink)) 12%,transparent)}
.pull-name{min-width:0;overflow-wrap:anywhere}
.pull-name small{display:block;font:13px/1.4 var(--body);color:var(--muted)}
.pull-pips{display:inline-flex;gap:5px;align-items:center}
.pull-pips i{width:12px;height:12px;box-sizing:border-box;border:1.5px solid var(--muted);border-radius:50%}
.pull-pips i[data-on]{border:0;background:linear-gradient(90deg,var(--d1,var(--ink)) 50%,var(--d2,var(--ink)) 50%)}
.pull-count{font:13px var(--mono);color:var(--muted)}
.deck-list li[data-done] .pull-name{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.deck-reader .deck-list li[data-done] .pull-row b{background:var(--ink);border-color:transparent;color:var(--bg)}
.deck-reader .deck-list li[data-done][data-domain-1] .pull-row b{background:var(--d1);color:#111}
.deck-list li[data-done] .pull-pips{opacity:.55}
/* The running count and Undo stay at the bottom of the screen while the list is in view. */
.pull-bar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 10px;margin-top:4px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--soft)}
.pull-status{margin:0;min-width:0;font:14px/1.35 var(--body);color:var(--muted)}
.pull-status b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:15px;font-weight:600}
.pull-bar .button{min-height:44px;padding:8px 16px}
.pull-bar .button[disabled]{opacity:.45;cursor:default}
.pull-track{grid-column:1/-1;height:3px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.pull-track i{display:block;height:100%;background:var(--ac);transform:scaleX(var(--pull,0));transform-origin:left;transition:transform .2s}
/* Pull list and Sample hand keep their own buttons at the bottom of a phone screen, so the deck code dock steps aside. */
.deck-reader:has(.deck-study:is([data-view=pull],[data-view=hand])) .dk-dock{display:none!important}
@media(max-width:600px){.pull-bar{margin-inline:-16px;padding-inline:16px}}

/* Five views share one row on a phone: the two long labels drop their second word
   (the full name stays the button's label), and a very narrow screen scrolls the row. */
@media(max-width:600px){.deck-reader .deck-study-heading{flex:1 1 100%;min-width:0}.deck-reader .deck-study-views{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.deck-reader .deck-study-views::-webkit-scrollbar{display:none}.deck-reader .deck-study-views .button{flex:1 0 auto;padding-inline:10px;white-space:nowrap}.deck-study-views .view-long{display:none}}
/* Card names keep their printed case. */
.dk-preview h2{text-transform:none}
/* Legal lists say so beside the Legend. On a phone it takes its own line rather than wrapping
   mid-phrase. */
.dk-legal{color:var(--muted);padding-left:12px;border-left:1px solid var(--soft)}
@media(max-width:600px){.dk-legal{flex-basis:100%;padding-left:0;border-left:0}}
/* A Best-Of award below 1st, in plain words. */
.dk-meta .best-of{color:var(--muted)}
/* On a player's deck, the owner's Playing pick is about them, not the visitor's star. */
.dk-owner-playing{color:var(--ink)}
.dk-owner-playing:before{content:'★ ';color:var(--muted)}

/* Text rows: the count, the name, then the cost in a fixed column, so energy circles line up down
   the list. Champion and Banned sit under the name instead of squeezing it. */
.deck-reader .deck-study:not([data-view=visual]) [data-study-entry]>.dk-row{grid-template-columns:30px minmax(0,1fr) 48px;grid-template-rows:auto auto auto;gap:0 10px}
.deck-reader .deck-study:not([data-view=visual]) [data-study-entry]>.dk-row>.dk-qty{grid-column:1;grid-row:1/-1}
.deck-reader .deck-study:not([data-view=visual]) [data-study-entry]>.dk-row>.deck-study-name{grid-column:2;grid-row:1}
.deck-reader .deck-study:not([data-view=visual]) [data-study-entry]>.dk-row>.dk-tag{grid-column:2;grid-row:2;justify-self:start;font:13px/1.4 var(--body);text-transform:none}
.deck-reader .deck-study:not([data-view=visual]) [data-study-entry]>.dk-row>.deck-flag{grid-column:2;grid-row:3;justify-self:start;margin:2px 0 0}
.deck-reader .deck-study:not([data-view=visual]) [data-study-entry]>.dk-row>.dk-cost{grid-column:3;grid-row:1/-1;justify-self:start}
/* Stats has its own Legend column and curve, so it takes the whole width. */
.dk-body:has(.deck-study[data-view=stats]){grid-template-columns:minmax(0,1fr)}
.dk-body:has(.deck-study[data-view=stats]) .dk-side{display:none}
/* The phone dock covers the end of the page, so the page ends that much later. */
@media(max-width:700px){body:has(.dk-dock){padding-bottom:calc(68px + env(safe-area-inset-bottom))}}

@media(hover:none){.reader-actions .save-button{min-height:44px}}
/* Phones (W3a, D-15, D-16): the list on the first screen. The header is art, title and two lines of
   details; Playing and Like are small toggles on the title row; the actions are one row (Copy deck code,
   then Edit, Share and More as icon buttons that keep their words for screen readers); the view switch
   stays pinned under the header and fills the chosen view. */
@media(max-width:700px){
 .deck-reader .dk-head{gap:10px 12px;padding:12px 16px}
 .deck-reader .dk-title{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
 .deck-reader .dk-title h1{flex:1;min-width:0;font-size:30px;line-height:1.05;overflow-wrap:break-word}
 .deck-reader .dk-play{flex:none;width:44px;min-width:44px;height:44px;padding:0;font-size:0;display:grid;place-items:center;border:1px solid var(--soft);background:transparent;color:var(--ink)}
 .deck-reader .dk-play::before{content:'☆';content:'☆' / '';font:20px/1 var(--body)}
 .deck-reader .dk-play[aria-pressed=true]::before{content:'★';content:'★' / '';color:var(--ac)}
 .deck-reader .dk-like{flex:none;min-height:44px;padding:0 10px;font-size:14px;white-space:nowrap}
 .deck-reader .dk-meta{margin:6px 0 0;font-size:14px;line-height:1.45}
 .deck-reader .dk-legend{margin:2px 0 0;font-size:14px;line-height:1.45}
 .deck-reader .dk-head .reader-actions.has-code{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
 .deck-reader .dk-head .reader-actions.has-code>:is([data-copy-status],[data-copy-fallback]){flex:0 0 100%}
 .deck-reader .dk-head .reader-actions.has-code>.button.primary{flex:1;min-width:0}
 .deck-reader .dk-head .reader-actions.has-code>:is(a.button,[data-deck-copy=link]),.deck-reader .dk-head .reader-actions.has-code .reader-more>summary{flex:none;width:48px;min-width:48px;min-height:48px;padding:0;font-size:0;display:grid;place-items:center;border:1px solid var(--soft)}
 .deck-reader .dk-head .reader-actions.has-code>:is(a.button,[data-deck-copy=link])::before{content:'';display:block;margin:auto;width:20px;height:20px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
 .deck-reader .dk-head .reader-actions.has-code>a.button{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20h4L19 9l-4-4L4 16z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M13 7l4 4' stroke='black' stroke-width='2'/></svg>")}
 .deck-reader .dk-head .reader-actions.has-code>[data-deck-copy=link]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v12M7 8l5-5 5 5M5 13v7h14v-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
 .deck-reader .dk-head .reader-actions.has-code .reader-more{flex:none}
 .deck-reader .dk-head .reader-actions.has-code .reader-more>summary::before{content:'•••';content:'•••' / '';font:600 15px/1 var(--body);letter-spacing:1px}
 .deck-reader .dk-head .reader-actions.has-code .reader-more>summary span{display:none}
 .deck-reader .deck-study-controls:not([hidden]){display:contents}
 .deck-reader .deck-study-heading{position:sticky;top:var(--top-bar,0px);z-index:5;margin:0 -16px 10px;padding:8px 16px;background:var(--bg)}
 .deck-reader .deck-study-heading h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .deck-reader .deck-study-views [data-study-view][aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
}
/* The owner's strip sits under the title (D-17); their own like count is a plain line, not a button. */
.deck-reader .dk-head+.dk-owner{border-top:0}
.deck-reader .dk-like.is-owner{border:0;background:none;padding:0;min-height:0;color:var(--muted);font-size:14px}
@media(max-width:700px){
 .deck-reader .dk-owner{padding:8px 16px;gap:8px}
 .deck-reader .dk-owner [data-visibility-note]{font-size:13px;margin:0}
}
/* Phones, tighter (W3a): the legality joins the Legend line, section headings are list labels, and the
   owner strip is one row of who can see it with Copy link; the breadcrumb already leads to the owner's decks. */
@media(max-width:700px){
 .deck-reader .dk-legend .dk-legal{flex-basis:auto;padding-left:0;border-left:0}
 .deck-reader .dk-legend .dk-legal::before{content:'· '}
 .deck-reader .dk-head .reader-actions.has-code>:is(a.button,[data-deck-copy=link]),.deck-reader .dk-head .reader-actions.has-code .reader-more>summary{width:44px;min-width:44px;min-height:44px}
 .deck-reader .dk-head .reader-actions.has-code>.button.primary{min-height:44px}
 .deck-reader .deck-section-title h3{font-size:20px}
 .deck-reader .deck-section-title{margin-bottom:6px}
 .deck-reader .dk-owner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
 .deck-reader .dk-owner .player-owner-actions{display:none}
 .deck-reader .dk-owner .dk-visibility-note{flex-basis:100%;margin:0;font-size:13px;line-height:1.4}
}
/* Phones: the art sits beside the title only; the details below it use the full width, so they take two
   lines instead of four. */
@media(max-width:700px){
 .deck-reader .dk-head{grid-template-columns:40px minmax(0,1fr);row-gap:4px;align-items:center}
 .deck-reader .dk-head>.dk-art{grid-column:1;grid-row:1;width:40px}
 .deck-reader .dk-head>.dk-id{display:contents}
 .deck-reader .dk-id>.dk-title{grid-column:2;grid-row:1}
 .deck-reader .dk-id>:not(.dk-title){grid-column:1/-1}
 .deck-reader .dk-head>.reader-actions{grid-column:1/-1;margin-top:8px}
 .dk-crumbs{padding-block:6px}
 .deck-reader .dk-head>.dk-art{overflow:hidden}
}
/* Phones: one line of details (place · player · event · dates); the full line with its source link is
   for wider screens, and the source is credited at the foot of the page. The Decks tab already says where
   a tournament list sits, so its breadcrumb steps aside. */
.dk-meta-short,.dk-legal .dk-short{display:none}
@media(max-width:700px){
 .deck-reader:not(.community-deck) .dk-meta{display:none}
 .deck-reader .dk-meta-short{display:block;margin:6px 0 0;font-size:14px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .deck-reader .dk-legal .dk-long{display:none}
 .deck-reader .dk-legal .dk-short{display:inline}
 .deck-reader .dk-legend .dk-legal::before{content:none}
 .deck-reader .dk-head>.dk-art img{width:40px;height:auto}
 main:has(>.deck-reader:not(.community-deck))>.breadcrumbs,main:has(>.deck-reader:not(.community-deck)) .breadcrumbs:not(.dk-crumbs){display:none}
 .deck-reader .deck-study-heading{padding:4px 16px;margin-bottom:6px}
 .deck-reader .deck-study>details:first-of-type,.deck-reader .study-filters{margin-bottom:8px}
}