/* Atkinson Hyperlegible Next and Mono, served from this site (build.py FONT_PINNED; SIL Open Font License 1.1, /fonts/OFL.txt) */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-v7-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-mono-v8-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'MS Figures';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ms-figures-400-v1.woff2) format('woff2');unicode-range:U+0030-0039}
@font-face{font-family:'MS Figures';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ms-figures-700-v1.woff2) format('woff2');unicode-range:U+0030-0039}
/* mtgstuff.com. Minimal. Every color is a token.

   The design system, in one place (September 25, 2026):
   - type: --fs-xs 13, --fs-sm 14, --fs-md 15, --fs-lg 16, --fs-xl 18, --fs-2xl 20, --fs-3xl 24, --fs-4xl 32, and one
     page title, --fs-title, all in rem (sizes here at the browser's default 16 px). Data text never goes under 13 px.
     One face, Atkinson Hyperlegible Next, at 400 and 700; Atkinson Hyperlegible Mono (--code) only where characters must
     line up or read as typed: the wordmark, search syntax, set codes, format tags, key caps.
   - color (October 15, 2026): ink on white, a warm stone for the side menu, hairline rules. No blue: links are ink with
     an underline and primary buttons are ink. One spark of orange, only for where you are (the current page's icon,
     the wordmark cursor, the search prompt), never for text. Green and red only for prices going up and down and for
     facts that pass or fail. The display setting (data-text on html) scales them all; see "display".
   - radii: --r-sm 4, --r-md 8, --r-lg 12, --r-pill; circles use 50% and Magic cards keep their own corner, --r-card.
   - spacing: --sp-2xs 2, --sp-xs 4, --sp-sm 8, --sp-md 12, --sp-lg 16, --sp-xl 24, --sp-2xl 32, --sp-3xl 48,
     --sp-4xl 64. Inside components, small paddings sit on a 2 px grid.
   - breakpoints (media queries can't read custom properties, so these four are the only widths used):
     480 small phones, 720 phones, 1024 tablets, 1360 wide screens. Written as (width < N).
     Components that live in panels of different widths use container queries instead.
   - controls: --ctl-h is the height of a button or field; on a touch screen every control gets a 44 px target.
   - elevation: --shadow-1 chips on pictures, --shadow-2 lifted cards and menus, --shadow-3 dialogs and bars.
   Scryfall card images are never cropped, tinted or covered by these rules. */
/* While Atkinson Hyperlegible loads (served from /fonts/, font-display swap: build.py FONT_CSS), text is set in a local font
   sized to its metrics, so the swap moves nothing: the same average width (size-adjust) and the same line box (ascent,
   descent and line gap overrides). Measured with fontTools over the text of the site's pages (391,000 characters),
   October 15, 2026: Atkinson Hyperlegible Next 400 is 0.4371 em wide a character, 700 is 0.4717; Arial (and Helvetica and
   Liberation Sans, the same metrics) 0.4412, bold 0.4739; Roboto 400 0.4387, 700 0.4456; Atkinson Hyperlegible Mono
   0.6320 at every weight, Courier New (and Liberation Mono) 0.6001. So size-adjust is Atkinson's width over the local
   font's. Atkinson's ascent and descent are 0.984 and 0.316 em, with no line gap; each face's overrides are those figures
   divided by its size-adjust. A face whose local fonts are all missing is skipped (Android has no Arial, so its Roboto
   face is next). */
@font-face{font-family:"Atkinson Fallback";font-weight:100 549;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Arimo");size-adjust:99.07%;ascent-override:99.32%;descent-override:31.9%;line-gap-override:0%}
@font-face{font-family:"Atkinson Fallback";font-weight:550 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Arimo Bold"),local("Arial");size-adjust:99.54%;ascent-override:98.86%;descent-override:31.75%;line-gap-override:0%}
@font-face{font-family:"Atkinson Fallback Roboto";font-weight:100 549;src:local("Roboto"),local("Roboto-Regular"),local("Roboto Regular");size-adjust:99.64%;ascent-override:98.76%;descent-override:31.71%;line-gap-override:0%}
@font-face{font-family:"Atkinson Fallback Roboto";font-weight:550 900;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:105.86%;ascent-override:92.95%;descent-override:29.85%;line-gap-override:0%}
@font-face{font-family:"Atkinson Mono Fallback";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono"),local("Cousine");size-adjust:105.32%;ascent-override:93.43%;descent-override:30%;line-gap-override:0%}
:root{
  --ground:#FFFFFF;
  --stone:#F7F6F4;
  --fill:#F3F1EE;
  --hover:#EFEDE9;
  --sel:#E8E5E0;
  --rule2:#D5D1CA;
  --icon-acc:#ABA69E;
  --spark:#E0561C;
  --up:#2B7149;
  --down:#AD3D2B;
  --surface:#FFFFFF;
  --ink:#191816;
  --muted:#57534D;
  --faint:#6E6A64;
  --rule:#E6E3DE;
  --line-field:#8E8981;
  --code-bg:#F3F1EE;
  --accent:#191816;
  --accent-soft:#E8E5E0;
  --on-accent:#FFFFFF;
  --ok:#2B7149;
  --bad:#AD3D2B;
  --warn:#94570F;
  --warn-bg:#FBF4E8;
  --warn-line:#E5CC9E;
  --ok-soft:color-mix(in srgb,var(--ok) 8%,transparent);
  --bad-soft:color-mix(in srgb,var(--bad) 10%,transparent);
  --bad-line:color-mix(in srgb,var(--bad) 35%,transparent);
  --accent-tint:color-mix(in srgb,var(--accent) 15%,transparent);
  --bad-on-ink:#FCA5A5;
  --star:#94600A;
  /* fills that carry white text in both themes */
  --ok-fill:#2B7149;
  --bad-fill:#AD3D2B;
  --warn-fill:#94570F;
  --draw-fill:#57534D;
  --proxy:#6B5AA6;
  --accent-fill:rgba(25,24,22,.9);
  /* pictures: the dark ground behind art, and what sits on art */
  --media-ground:#191816;
  --on-media:#FFFFFF;
  --on-media-dim:rgba(255,255,255,.82);
  --paper:#FFFFFF;
  --glass:rgba(25,24,22,.85);
  --glass-soft:rgba(25,24,22,.55);
  --veil:rgba(255,255,255,.14);
  --veil-strong:rgba(255,255,255,.24);
  --veil-line:rgba(255,255,255,.3);
  --veil-faint:rgba(255,255,255,.06);
  --shade:rgba(0,0,0,.35);
  --shade-strong:rgba(0,0,0,.5);
  --pin-on:#F5B83D;
  --text-shadow-media:0 2px 12px rgba(0,0,0,.35);
  /* card states */
  --dot-good:#1FA463;
  --dot-close:#E9A91C;
  --dot-low:#D93B30;
  --dot-na:#9AA1B1;
  --dot-shadow:0 1px 2px rgba(0,0,0,.35);
  --foil-a:#F39BD8;
  --foil-b:#8FD0FF;
  --foil-strip:linear-gradient(90deg,#D7A1F9,#8EC5FC,#B8F5C9);
  --foil-stops:#FF8FCF,#FFD66E,#86F5B8,#7CC4FF,#B99BFF,#FF8FCF;
  --etched-stops:#D9D2C3,#FFF6DE,#B8B0A0,#EFE7D4,#D9D2C3;
  --foil-pink:#FF8FCF;
  --foil-blue:#7CC4FF;
  --foiltag-strip:linear-gradient(90deg,#FFE0F2,#FFF3CF,#DCFBE9,#DCEFFF,#ECE2FF);
  --foiltag-ink:#1D2230;
  --plat-paper:#7A5B2E;
  --plat-arena:#C2410C;
  --plat-mtgo:#3F3D3A;
  --stage-idea:#7A68B0;
  --stage-brewing:#B07424;
  --stage-idea-bg:#EEEAF6;
  --stage-idea-ink:#5B4A93;
  --stage-brewing-bg:#F7EEDF;
  --stage-brewing-ink:#83560F;
  --stage-ready-bg:#E3F0E7;
  --stage-ready-ink:#22603C;
  --muted-on-light:#57534D;
  --muted-on-dark:#B3AEA6;
  --ms-ring:rgba(25,24,22,.12);
  --swatch-ring:rgba(0,0,0,.18);
  --print-ink:#000000;
  --print-muted:#444444;
  --print-paper:#FFFFFF;
  /* overlays and elevation */
  --scrim:rgba(20,19,18,.45);
  --scrim-strong:rgba(20,19,18,.72);
  --shadow-1:0 1px 4px rgba(25,24,22,.22);
  --shadow-2:0 8px 24px rgba(25,24,22,.12);
  --shadow-3:0 24px 60px rgba(20,19,18,.28);
  --shadow-side:-16px 0 48px rgba(20,19,18,.22);
  /* three shadows that were written in place (October 22, named so every color is a token; the same in both themes) */
  --shadow-bar:0 2px 8px rgba(0,0,0,.06);
  --shadow-tip:0 4px 14px rgba(0,0,0,.12);
  --shadow-pic:0 1px 0 rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.14);
  --shadow-card:0 1px 0 rgba(25,24,22,.22),0 4px 10px rgba(25,24,22,.1);
  /* type */
  /* one face for everything you read; --code (Atkinson Hyperlegible Mono) only for the wordmark, search syntax, set codes,
     format tags, key caps and typed lists. --mono is the old name for the UI face and now means the reading face too */
  --sans:"Atkinson Hyperlegible Next","Atkinson Fallback","Atkinson Fallback Roboto",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:var(--sans);
  --code:"Atkinson Hyperlegible Mono","Atkinson Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* in rem: the browser's own text size counts, and so does the display setting (html font-size, below) */
  --fs-xs:.8125rem;
  --fs-sm:.875rem;
  --fs-md:.9375rem;
  --fs-lg:1rem;
  --fs-xl:1.125rem;
  /* the seven steps (October 22, 2026; docs/DESIGN_SYSTEM.md): 13 14 15 16 18, then 30 for titles and the numbers a
     tile is about, 48 for the landing's headline. --fs-num and --fs-hero step down on phones (18 and 30) */
  --fs-title:1.875rem;
  --fs-num:1.875rem;
  --fs-hero:3rem;
  /* older names, kept so every rule written with them lands on a step: 2xl a section heading, 3xl a number, 4xl a title */
  --fs-2xl:var(--fs-xl);
  --fs-3xl:var(--fs-num);
  --fs-4xl:var(--fs-title);
  /* big numbers: Atkinson Hyperlegible Next's digits with a plain zero and tabular widths (MS Figures, build.py
     FONT_PINNED), every other character in the reading face */
  --num-face:"MS Figures",var(--sans);
  /* shape and space */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:12px;
  --r-pill:999px;
  --r-card:4.8%/3.4%;
  --sp-2xs:2px;
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-md:12px;
  --sp-lg:16px;
  --sp-xl:24px;
  --sp-2xl:32px;
  --sp-3xl:48px;
  --sp-4xl:64px;
  --ctl-h:2rem;
  --ctl-h-sm:1.75rem;
  --ctl-h-text:1.5rem;   /* a text button (reads as a link): one 24 px line, the WCAG minimum target */
  --tap:24px;
  --sticky-top:0px;
  --wrap:960px;
  /* card pictures in grids (the display setting, data-pics on html): a width multiplier on wider screens, and the
     column counts of a phone's two- and three-across grids */
  --pic:1;
  --pc2:2;
  --pc3:3;
  /* October 22, 2026 (docs/DESIGN_SYSTEM.md): amber is the third fact color, "close": near a line but not past it
     (castability up to 8 points under, a card a format is about to retire). Never decoration */
  --close:var(--warn);
  --close-bg:var(--warn-bg);
  --close-line:var(--warn-line);
  /* the shade at an edge with more to scroll (the menu, tab and chip rows) */
  --edge-shade:rgba(25,24,22,.14);
  /* the clear x drawn in every search box (a mask: only its shape counts) */
  /* the source note's info mark: a ring with an i (a mask) */
  --info-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Crect x='7.1' y='6.6' width='1.8' height='5' rx='.5' fill='black'/%3E%3Ccircle cx='8' cy='4.4' r='1.05' fill='black'/%3E%3C/svg%3E");
  --clear-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (pointer:coarse){:root{--tap:44px}}
@media (width < 720px){:root{--fs-num:1.125rem;--fs-hero:1.875rem}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141413;
    --surface:#1A1918;
    --ink:#EEECE8;
    --muted:#B3AEA6;
    --faint:#938E86;
    --rule:#2A2927;
    --line-field:#6F6A63;
    --code-bg:#1F1E1C;
    --accent:#EEECE8;
    --accent-soft:#2C2B28;
    --on-accent:#141413;
    --ok:#5FBF86;
    --bad:#F08A73;
    --warn:#E3A857;
    --warn-bg:#251D12;
    --warn-line:#5A4523;
    --bad-on-ink:#B42318;
    --star:#E0A526;
    --stage-idea-bg:#2A2540;
    --stage-idea-ink:#C9BEF0;
    --stage-brewing-bg:#33270F;
    --stage-brewing-ink:#F0CC8A;
    --stage-ready-bg:#15301F;
    --stage-ready-ink:#8FD8AE;
    --shadow-1:0 2px 6px rgba(0,0,0,.5);
    --shadow-2:0 10px 24px rgba(0,0,0,.4);
    --shadow-3:0 24px 60px rgba(0,0,0,.6);
    --shadow-side:-16px 0 48px rgba(0,0,0,.5);
        --stone:#1A1918;
    --fill:#1F1E1C;
    --hover:#242321;
    --sel:#2C2B28;
    --rule2:#3A3835;
    --icon-acc:#6F6A63;
    --spark:#FF7A3F;
    --up:#5FBF86;
    --down:#F08A73;
    --accent-fill:rgba(238,236,232,.92);
    --media-ground:#0E0E0D;
    --edge-shade:rgba(0,0,0,.55);
color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#141413;
  --surface:#1A1918;
  --ink:#EEECE8;
  --muted:#B3AEA6;
  --faint:#938E86;
  --rule:#2A2927;
  --line-field:#6F6A63;
  --code-bg:#1F1E1C;
  --accent:#EEECE8;
  --accent-soft:#2C2B28;
  --on-accent:#141413;
  --ok:#5FBF86;
  --bad:#F08A73;
  --warn:#E3A857;
  --warn-bg:#251D12;
  --warn-line:#5A4523;
  --bad-on-ink:#B42318;
  --star:#E0A526;
  --stage-idea-bg:#2A2540;
  --stage-idea-ink:#C9BEF0;
  --stage-brewing-bg:#33270F;
  --stage-brewing-ink:#F0CC8A;
  --stage-ready-bg:#15301F;
  --stage-ready-ink:#8FD8AE;
  --shadow-1:0 2px 6px rgba(0,0,0,.5);
  --shadow-2:0 10px 24px rgba(0,0,0,.4);
  --shadow-3:0 24px 60px rgba(0,0,0,.6);
  --shadow-side:-16px 0 48px rgba(0,0,0,.5);
  --stone:#1A1918;
  --fill:#1F1E1C;
  --hover:#242321;
  --sel:#2C2B28;
  --rule2:#3A3835;
  --icon-acc:#6F6A63;
  --spark:#FF7A3F;
  --up:#5FBF86;
  --down:#F08A73;
  --accent-fill:rgba(238,236,232,.92);
  --media-ground:#0E0E0D;
  --edge-shade:rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-lg);line-height:1.6;padding-inline:clamp(var(--sp-lg),4vw,var(--sp-2xl));-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.wrap{max-width:var(--wrap);margin-inline:auto}

/* Header */
@keyframes blink{50%{opacity:0}}

/* Intro */
.intro{padding-block:var(--sp-4xl) var(--sp-3xl)}
.intro h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.02em;margin:0}
.intro p{margin:14px 0 0;max-width:54ch;font-size:var(--fs-xl);line-height:1.6;color:var(--muted)}

/* Tool list */
.list-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-lg);flex-wrap:wrap;margin-bottom:14px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.list-head b{font-weight:500;color:var(--muted)}
.tool-section{margin-top:var(--sp-3xl)}
.intro + .tool-section{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid.cols-1{grid-template-columns:1fr}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:10px;padding:var(--sp-lg) var(--sp-lg) var(--sp-lg);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);transform:translateY(-2px);outline:none}@media (hover:hover){.card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);transform:translateY(-2px);outline:none}}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}

/* Pixel icons: 16x16 grids drawn at whole-number scales so every pixel stays crisp */
.px{display:block;flex:none;width:32px;height:32px;color:var(--ink);transition:transform .2s steps(2)}
.px-lg{width:48px;height:48px}
.px-ink{fill:currentColor}
.px-acc{fill:var(--accent)}
.card:focus-visible .px{transform:translateY(-2px)}@media (hover:hover){.card:hover .px{transform:translateY(-2px)}}
.arrow{font-family:var(--mono);color:var(--faint);transition:transform .15s,color .15s}
.card:focus-visible .arrow{color:var(--accent);transform:translateX(3px)}@media (hover:hover){.card:hover .arrow{color:var(--accent);transform:translateX(3px)}}
.card h2{font-family:var(--mono);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;line-height:1.3;margin:0}
.card p{flex:1;margin:0;font-size:var(--fs-lg);line-height:1.5;color:var(--muted)}
.path{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);transition:color .15s}
.card:focus-visible .path{color:var(--accent)}@media (hover:hover){.card:hover .path{color:var(--accent)}}
.card.wide{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px var(--sp-xl);padding:var(--sp-xl) var(--sp-xl)}
.card.wide .card-body{display:flex;flex-direction:column;gap:4px}
.card.wide h2{font-size:var(--fs-xl)}
.card.wide .card-end{display:flex;align-items:center;gap:14px}

/* Status */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,transparent)}
.s-live{--dot:var(--ok)}
.s-lab{--dot:var(--accent)}
.s-board::before{box-shadow:inset 0 0 0 1.5px var(--faint)}

/* Tool page */
.back{display:inline-block;margin-top:var(--sp-2xl);font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);text-decoration:none}
@media (hover:hover){.back:hover{color:var(--accent)}}
.tool-head{padding-block:var(--sp-xl) var(--sp-2xl);border-bottom:1px solid var(--rule)}
.tool-id{display:flex;align-items:center;gap:14px}
.tool-head h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.02em;margin:14px 0 0}
.tool-head .lede{margin:12px 0 0;max-width:56ch;font-size:var(--fs-xl);line-height:1.55;color:var(--muted)}
.block{padding-block:var(--sp-2xl);border-bottom:1px solid var(--rule)}
.block:last-of-type{border-bottom:0}
.label{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--faint);margin:0 0 14px}
.label::before{content:"# ";color:var(--accent)}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--sp-3xl)}
.dash{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dash li{position:relative;padding-left:var(--sp-xl)}
.dash li::before{content:"-";position:absolute;left:0;font-family:var(--mono);color:var(--accent)}
.why{margin:0;color:var(--muted)}
.log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.log li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px}
.log time{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);padding-top:2px}
.tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;padding:2px 8px;border-radius:var(--r-sm);background:var(--code-bg);color:var(--muted);vertical-align:middle;margin-left:6px}
.note{margin:14px 0 0;max-width:62ch;color:var(--muted);font-size:var(--fs-lg)}

/* Downloads */
.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:4px var(--sp-lg);padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.file:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}@media (hover:hover){.file:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}}
.fname{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;color:var(--accent);overflow-wrap:anywhere}
.fname::before{content:"\2193  "}
.fdesc{font-size:var(--fs-lg);color:var(--muted)}
.fsize{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);white-space:nowrap}

/* Sample: odds table */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
table.odds{width:100%;min-width:440px;border-collapse:collapse;font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.odds th,.odds td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--rule)}
.odds tr:last-child td{border-bottom:0}
.odds th:first-child,.odds td:first-child{text-align:left}
.odds thead th{font-size:var(--fs-xs);font-weight:500;color:var(--faint)}
.odds td b{display:block;font-weight:500}
.meter{display:block;height:3px;margin:6px 0 0 auto;max-width:110px;background:var(--code-bg);border-radius:var(--r-sm);overflow:hidden}
.meter i{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--accent)}
.odds td.hl b{color:var(--accent);font-weight:700}

/* Sample: search */
.search{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);font-family:var(--mono);font-size:var(--fs-md)}
.search svg{width:16px;height:16px;flex:none;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-size:var(--fs-xs);padding:4px 10px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent)}
.roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px}
.roles li{padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-md);color:var(--muted)}
.roles b{display:block;font-family:var(--mono);font-size:var(--fs-md);font-weight:700;color:var(--ink)}

/* Sample: eval */
.scale{list-style:none;margin:0;padding:0}
.scale li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding-block:8px;border-bottom:1px solid var(--rule);font-size:var(--fs-lg);color:var(--muted)}
.scale li:first-child{padding-top:0}
.scale b{font-family:var(--mono);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;font-size:var(--fs-lg)}
.steps li::before{content:counter(s) ".";font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);padding-top:1px}
.steps b{font-weight:500}
.callout{margin-top:var(--sp-lg);padding:12px 14px;border-left:2px solid var(--accent);background:var(--surface);font-size:var(--fs-lg);border-radius:0 var(--r-md) var(--r-md) 0}

/* Footer */
.foot{margin-top:var(--sp-4xl);padding-block:var(--sp-xl) var(--sp-3xl);border-top:1px solid var(--rule);display:grid;gap:8px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;color:var(--faint)}
.foot p{margin:0;max-width:92ch}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-links a{color:var(--muted)}
@media (hover:hover){.foot-links a:hover{color:var(--accent)}}
@media (pointer:coarse){.foot-links a{display:inline-flex;align-items:center;min-height:var(--tap)}}

/* Missing */
.missing{padding-block:var(--sp-4xl) var(--sp-xl)}
.missing h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);margin:0}
.missing p{color:var(--muted);margin:12px 0 var(--sp-xl)}
.missing-find{max-width:520px;margin-bottom:var(--sp-xl);grid-template-columns:minmax(0,1fr)}
.missing-row{display:flex;gap:8px}
.missing-row input{flex:1;min-width:0}

@media (width < 1024px){
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:var(--sp-2xl)}
}
@media (width < 720px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .card.wide{grid-template-columns:1fr;gap:10px;padding:var(--sp-lg) var(--sp-lg) var(--sp-lg)}
  .card.wide .card-end{justify-content:space-between;flex-wrap:wrap;gap:8px 14px}
  .file{grid-template-columns:minmax(0,1fr) auto}
  .fdesc{grid-column:1 / -1}
  .top-note{display:none}
  .intro{padding-block:var(--sp-3xl) var(--sp-2xl)}
  .log li{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .card:focus-visible{transform:none}@media (hover:hover){.card:hover{transform:none}}
}

/* ================================================================ v0.2: scale, quotes, accounts */

/* Header right side */
kbd{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);background:var(--code-bg);border-radius:var(--r-sm);padding:1px 6px}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--code-bg)}
.avatar .px{width:16px;height:16px}
.avatar.lg{width:64px;height:64px}
.avatar.lg .px{width:48px;height:48px}

/* Quote of the visit */
.quote{margin:var(--sp-xl) 0 0;max-width:64ch;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline}
.quote .q-mark{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);grid-row:1 / span 2}
.quote blockquote{margin:0;font-size:var(--fs-lg);line-height:1.55;color:var(--muted);font-style:italic}
.quote figcaption{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.5;color:var(--faint);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.quote figcaption a{color:var(--faint);text-decoration:none;border-bottom:1px dotted var(--faint)}
@media (hover:hover){.quote figcaption a:hover{color:var(--accent);border-color:var(--accent)}}
.q-cap{display:contents}
.q-next{font:inherit;color:var(--faint);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.q-next:focus-visible{color:var(--accent);outline:none}@media (hover:hover){.q-next:hover{color:var(--accent);outline:none}}

/* Pinned tools (signed in) */
.pinned{margin:0 0 var(--sp-2xl)}
.pin-row{display:flex;flex-wrap:wrap;gap:8px}
.pin{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);text-decoration:none}
@media (hover:hover){.pin:hover{border-color:var(--accent)}}
.pin .px{width:32px;height:32px}
.pin-edit{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);align-self:center;margin-left:4px}

/* Category chips */
.cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-xl)}
.cat{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer}
.cat span{color:var(--faint);margin-left:4px}
@media (hover:hover){.cat:hover{border-color:var(--accent)}}
.cat[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.cat[aria-pressed="true"] span{color:var(--ground);opacity:.7}

/* Coming soon rows */
.rows{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.rows li + li{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:32px minmax(0,170px) minmax(0,1fr) 84px 110px 16px;align-items:center;gap:14px;padding:10px 14px;color:var(--ink);text-decoration:none;transition:background-color .15s}
.row:focus-visible{background:var(--code-bg);outline:none}@media (hover:hover){.row:hover{background:var(--code-bg);outline:none}}
.row b{font-family:var(--mono);font-size:var(--fs-md);font-weight:700}
.row-desc{font-size:var(--fs-md);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-cat{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.row:focus-visible .arrow{color:var(--accent);transform:translateX(3px)}@media (hover:hover){.row:hover .arrow{color:var(--accent);transform:translateX(3px)}}
.empty-cat{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);padding:14px 0}

/* Command palette */
.palette{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;padding:12vh var(--sp-lg) var(--sp-lg);padding:12svh var(--sp-lg) var(--sp-lg)}
.pal-box{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.pal-box input{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-lg);padding:14px var(--sp-lg);outline:none}
.pal-list{list-style:none;margin:0;padding:6px;max-height:50vh;max-height:50dvh;overflow:auto}
.pal-list a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-md);color:var(--ink);text-decoration:none}
.pal-list a[aria-selected="true"]{background:var(--code-bg)}
.pal-list b{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;display:block}
.pal-list small{display:block;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-kind{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.pal-foot{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);padding:8px var(--sp-lg);border-top:1px solid var(--rule)}
.pal-none{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);padding:14px 10px}

/* Design preview bar (preview only) */
.design-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;padding:8px 12px;border:1px dashed var(--accent);border-radius:var(--r-md);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.design-bar b{color:var(--accent);font-weight:700}
.design-bar button{font:inherit;color:var(--muted);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:2px 8px;cursor:pointer}
.design-bar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.design-bar a{color:var(--muted)}
.wrap[data-as="guest"] [data-when="user"],.wrap[data-as="user"] [data-when="guest"]{display:none!important}
.sample-flag{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);border:1px dashed var(--accent);border-radius:var(--r-sm);padding:1px 8px;vertical-align:middle}

/* Auth screens */
.auth{max-width:420px;margin:var(--sp-4xl) auto 0;padding:var(--sp-2xl);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg)}
.auth h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);letter-spacing:-.01em;margin:0}
.auth .sub{color:var(--muted);font-size:var(--fs-lg);margin:8px 0 var(--sp-xl)}
.btn-block{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-family:var(--mono);font-size:var(--fs-md);font-weight:500;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer}
.btn-block + .btn-block{margin-top:8px}
@media (hover:hover){.btn-block:hover{border-color:var(--accent)}}
.btn-block.primary{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.or{display:flex;align-items:center;gap:10px;margin:var(--sp-lg) 0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--rule)}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.field input{font-family:var(--mono);font-size:var(--fs-md);padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.hint{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin:0}
.hint.ok{color:var(--ok)}
.fine-print{font-size:var(--fs-sm);color:var(--faint);margin:var(--sp-lg) 0 0;line-height:1.5}
.steps-v{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:var(--sp-xl)}
.steps-v > li{counter-increment:st;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}
.steps-v > li::before{content:counter(st);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--accent);border:1.5px solid var(--accent);border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.steps-v h2{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:1px 0 10px}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.avatar-pick{display:grid;place-items:center;height:52px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);cursor:pointer}
.avatar-pick .px{width:32px;height:32px}
.avatar-pick[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.bring{border:1px solid var(--rule);border-radius:var(--r-md);padding:12px 14px;background:var(--ground);display:grid;gap:8px}
.bring-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:var(--fs-md)}
.bring-item small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}

/* My stuff hub */
.hub{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-2xl);margin-top:var(--sp-xl);align-items:start}
.hub-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:var(--sp-2xl) 0}
.hub-id{display:flex;align-items:center;gap:14px}
.hub-id h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);margin:0;letter-spacing:-.01em}
.hub-id p{margin:2px 0 0;font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.side-nav{display:grid;gap:var(--sp-lg);position:sticky;top:16px}
.side-nav h3{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);margin:0 0 6px;letter-spacing:.04em}
.side-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.side-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:var(--r-sm)}
@media (hover:hover){.side-nav a:hover{background:var(--code-bg);color:var(--ink)}}
.side-nav a[aria-current="true"]{background:var(--code-bg);color:var(--ink);font-weight:700}
.side-nav a span{color:var(--faint);font-weight:400}
.side-nav .soon{color:var(--faint)}
.hub-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.hub-tools input{flex:1;min-width:180px;font-family:var(--mono);font-size:var(--fs-md);padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.hub-tools select{font-family:var(--mono);font-size:var(--fs-sm);padding:8px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.items{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.items li + li{border-top:1px solid var(--rule)}
.item{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;color:var(--ink);text-decoration:none}
@media (hover:hover){a.item:hover{background:var(--code-bg)}}
.item b{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;display:block}
.item small{display:block;font-size:var(--fs-sm);color:var(--muted)}
.item .when{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);white-space:nowrap}
.vis{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);border:1px solid var(--rule);border-radius:var(--r-sm);padding:1px 6px}
.folder-chip{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);background:var(--code-bg);border-radius:var(--r-sm);padding:1px 6px;margin-left:6px}
.guest-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px dashed var(--rule);border-radius:var(--r-md);margin-bottom:14px;font-size:var(--fs-md);color:var(--muted)}

/* Deck page */
.deck-head{padding-block:var(--sp-2xl) var(--sp-xl);border-bottom:1px solid var(--rule)}
.deck-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.deck-title h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);margin:0;letter-spacing:-.02em}
.deck-meta{display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);margin-top:10px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.deck-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-lg)}
.btn-sm{font-family:var(--mono);font-size:var(--fs-sm);padding:8px 12px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer}
@media (hover:hover){.btn-sm:hover{border-color:var(--accent)}}
.btn-sm.primary{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.alert{display:flex;gap:10px;align-items:baseline;margin-top:var(--sp-lg);padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--warn-line);background:var(--warn-bg);font-size:var(--fs-md);color:var(--ink)}
.alert b{font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn);white-space:nowrap}
.deck-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-2xl)}
.cardgroup + .cardgroup{margin-top:var(--sp-lg)}
.cardgroup h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--faint);margin:0 0 6px}
.cardlist{list-style:none;margin:0;padding:0;font-size:var(--fs-md)}
.cardlist li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;padding:4px 0}
.cardlist .n{font-family:var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.cardlist .nl{font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn);border:1px solid var(--warn-line);border-radius:var(--r-sm);padding:0 6px;align-self:center}
.curve{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;align-items:end;height:120px;padding-top:var(--sp-lg);border-bottom:1px solid var(--rule)}
.curve .bar{position:relative;background:var(--accent);border-radius:var(--r-sm) var(--r-sm) 0 0;min-height:2px}
@media (hover:hover){.curve .bar:hover{opacity:.8}}
.curve .bar[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ground);background:var(--ink);padding:4px 8px;border-radius:var(--r-sm);pointer-events:none}
.curve-x{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);text-align:center;margin-top:6px}
.plans{display:grid;gap:14px}
.plan{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);padding:14px var(--sp-lg)}
.plan-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;align-items:baseline}
.plan-head h3{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:0}
.plan-head span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg);margin-top:12px}
.plan-cols h4{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin:0 0 6px}
.inout{list-style:none;margin:0;padding:0;font-size:var(--fs-md);display:grid;gap:2px}
.inout li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px}
.inout .plus{font-family:var(--mono);color:var(--ok)}
.inout .minus{font-family:var(--mono);color:var(--muted)}
.balance{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ok);margin-top:8px}
.plan-note{margin:12px 0 0;font-size:var(--fs-md);color:var(--muted)}
.versions{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.versions li{display:grid;grid-template-columns:40px 100px minmax(0,1fr);gap:10px;font-size:var(--fs-md)}
.versions b{font-family:var(--mono);font-size:var(--fs-sm)}
.versions time{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}

/* Settings */
.settings{max-width:680px}
.set-sec{padding-block:var(--sp-xl);border-bottom:1px solid var(--rule)}
.set-sec:last-child{border-bottom:0}
.set-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.set-row span{font-size:var(--fs-lg)}
.set-row small{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.danger{border:1px solid var(--warn-line);border-radius:var(--r-md);padding:14px var(--sp-lg);background:var(--warn-bg)}

@media (width < 1024px){
  .hub{grid-template-columns:1fr}
  .side-nav{position:static;grid-template-columns:1fr 1fr}
  .deck-grid{grid-template-columns:1fr}
  .row{grid-template-columns:32px minmax(0,1fr) auto 16px}
  .row-desc,.row-cat{display:none}
}
@media (width < 720px){
  .plan-cols{grid-template-columns:1fr}
  .item{grid-template-columns:32px minmax(0,1fr) auto}
  .item .vis{display:none}
  .side-nav{grid-template-columns:1fr}
  .auth{margin-top:var(--sp-2xl);padding:var(--sp-xl)}
}

/* v0.3: deck results, links in alerts */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stats div{padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.stats b{display:block;font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.4;color:var(--faint)}
.alert a{color:var(--accent);font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap}

/* v0.4: card lab (Super Search and card pages) */
:root{--ms-w:#F1EAC8;--ms-u:#C5DBF1;--ms-b:#C9C0BC;--ms-r:#F0C0AE;--ms-g:#BFDDBF;--ms-c:#DCDFE5;--ms-n:#DCDFE5;--ms-p:#DCDFE5;--ms-ink:#1B1F27}
body.app .wrap{max-width:1280px}
.cl-wait{font-family:var(--mono);font-size:var(--fs-md);color:var(--muted);padding:var(--sp-3xl) 0}
/* the app shell (build.py app_shell, app.js SHELL): a tool's box keeps at least a screen's height below the header (the
   small viewport, so a phone's address bar showing or hiding moves nothing), so the blocks under it never jump while the
   card data loads or the tool redraws. Until the tool draws, its name, promise and placeholders fill the box. */
:root{--top-h:100px}   /* just under the header's height (104 on phones, 90 wider), until app.js measures it: never more, or the box would come up short and grow in view */
@media (width >= 720px){:root{--top-h:86px}}
main > [id$="-app"]{min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h))}
main > :where([id$="-app"]){display:flow-root}
#mt-body:has(> .cl-wait:only-child){min-height:calc(100svh - var(--top-h))}   /* Meta Lens: the receipts wait below the fold */   /* a tool's first margin stays inside its box, so the box never moves when the tool draws */
.shell{padding:var(--sp-2xl) 0 var(--sp-xl)}
.shell-h{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--sp-sm);color:var(--ink)}
.shell-lede{color:var(--muted);max-width:62ch;margin:0;line-height:1.5}
.shell .cl-wait{padding:var(--sp-md) 0 var(--sp-lg)}
.shell-body{display:flex;flex-direction:column;gap:var(--sp-lg)}
.sk{display:block;background:var(--code-bg);border-radius:var(--r-md)}
.shell-ctl{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.sk-in{height:max(var(--ctl-h),var(--tap));flex:1 1 220px;max-width:520px}
.sk-btn{height:max(var(--ctl-h),var(--tap));width:104px}
.shell-lines{display:flex;flex-direction:column;gap:var(--sp-md);flex:1;min-width:0}
.sk-line{height:14px;width:min(100%,560px)}
.sk-line:nth-child(3n+2){width:min(78%,430px)}
.shell-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-md)}
.sk-tile,.sk-pic{aspect-ratio:488/680;border-radius:var(--r-card)}
.shell-panels{display:grid;gap:var(--sp-md)}
.sk-panel{height:168px;border-radius:var(--r-lg)}
.shell-card{display:grid;grid-template-columns:minmax(0,336px) minmax(0,1fr);gap:var(--sp-xl)}
@media (width < 720px){.shell-card{grid-template-columns:minmax(0,1fr)}.sk-pic{width:min(100%,336px)}}
@media (prefers-reduced-motion:no-preference){.sk{animation:sk-pulse 1.6s ease-in-out infinite}}
@keyframes sk-pulse{50%{opacity:.55}}
/* the site's own notices (offline, a new version): one strip fixed at the bottom, never pushing the page */
.ms-bars{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm);padding:0 var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom,0px));pointer-events:none}
.ms-bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-md);width:min(640px,100%);box-sizing:border-box;padding:var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-lg);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-3);font-size:var(--fs-md);line-height:1.45}
.ms-bar p{margin:0;flex:1 1 220px}
.ms-bar-btns{display:flex;gap:var(--sp-sm)}
.ms-bar-off{background:var(--warn-bg);border-color:var(--warn-line)}
.cl-muted{color:var(--muted)}
.cl-small{font-size:var(--fs-md)}
.cl-hero{padding:var(--sp-2xl) 0 6px}
.cl-titlebar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-lg);flex-wrap:wrap;margin-bottom:14px}
.cl-titlebar h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);letter-spacing:-.02em;margin:0}
.cl-stat{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.cl-form{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.cl-inputwrap{position:relative;flex:1 1 420px;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-lg);transition:border-color .15s}
.cl-inputwrap:focus-within{border-color:var(--accent)}
.cl-prompt{font-family:var(--mono);color:var(--accent);padding-left:14px;font-weight:700}
#cl-q{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-lg);padding:14px 12px;outline:none}

.cl-go,.cl-mode{font-family:var(--mono);font-size:var(--fs-md);border-radius:var(--r-lg);padding:0 var(--sp-lg);cursor:pointer;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);min-height:48px}
.cl-go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cl-mode[aria-pressed="true"],.cl-mode.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.cl-lock{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);border:1.5px solid var(--rule);background:var(--surface);border-radius:var(--r-lg);padding:0 6px 0 14px;min-height:48px}
.cl-lock select{font:inherit;font-size:var(--fs-md);color:var(--ink);background:transparent;border:0;padding:8px 4px;cursor:pointer}
.cl-lock.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.cl-lock.on select{color:var(--accent);font-weight:700}
.cl-lock:focus-within{border-color:var(--accent)}
.cl-parts li.cl-part-lock{background:var(--accent);color:var(--surface)}
.cl-parts li.cl-part-lock button{color:var(--surface)}
.cl-part-lock small{font-size:var(--fs-xs);opacity:.8;margin-left:4px}
.ms-ac li.ms-misfit b{opacity:.55}
.ms-ac li.ms-misfit em{font-style:normal;color:var(--warn)}
.db-fit{font-weight:700}
.cl-ac{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 6px);z-index:20;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.cl-ac li a{display:grid;grid-template-columns:minmax(0,auto) auto;gap:2px 12px;align-items:center;padding:8px 10px;border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.cl-ac li a small{grid-column:1/-1;color:var(--faint);font-size:var(--fs-sm)}
.cl-ac li[aria-selected="true"] a{background:var(--code-bg)}@media (hover:hover){.cl-ac li a:hover{background:var(--code-bg)}}
.cl-ac-foot{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);padding:6px 10px 2px}
.cl-ac-foot[aria-selected="true"]{background:var(--code-bg);color:var(--ink);border-radius:var(--r-md)}
.cl-explain{margin-top:10px;min-height:8px}
.cl-from{font-size:var(--fs-md);margin:0 0 8px}
.cl-parts{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cl-parts li{display:inline-flex;align-items:center;gap:2px;font-family:var(--mono);font-size:var(--fs-sm);background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);padding:4px 4px 4px 12px}
.cl-parts button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:var(--fs-lg);line-height:1;padding:0 6px;border-radius:var(--r-pill)}
@media (hover:hover){.cl-parts button:hover{background:var(--accent-tint)}}
.cl-errors{margin:8px 0 0;padding:0;list-style:none;font-size:var(--fs-md);color:var(--warn)}
.cl-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--rule);margin-top:10px}
.cl-count{font-family:var(--mono);font-size:var(--fs-md)}
.cl-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.cl-controls select,.cc-tools select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px}
.cl-dir,.cl-views button,.cl-facet-toggle{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--muted);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px;cursor:pointer}
.cl-views{display:inline-flex}
.cl-views button{border-radius:0;margin-left:-1px}
.cl-views button:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
.cl-views button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.cl-views button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.cl-facet-toggle{display:none}
.cl-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp-2xl);padding-top:var(--sp-lg)}
.cl-facets{font-size:var(--fs-md)}
.cl-facet-note{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin:0 0 10px}
.cl-facets section{margin-bottom:var(--sp-lg)}
.cl-facets h3{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);margin:0 0 6px}
.cl-facets ul{list-style:none;margin:0;padding:0}
.cl-facets button{position:relative;display:flex;justify-content:space-between;gap:8px;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-md);text-align:left;padding:4px 6px;border-radius:var(--r-sm);cursor:pointer;overflow:hidden}
@media (hover:hover){.cl-facets button:hover{background:var(--code-bg)}}
.cl-facets .fl{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-facets .fc{position:relative;z-index:1;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.cl-facets .fb{position:absolute;left:0;top:0;bottom:0;background:var(--accent-soft);opacity:.7;border-radius:var(--r-sm)}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(172px * var(--pic)),1fr));gap:14px}
.cl-tile{display:block;border-radius:var(--r-card);overflow:hidden;background:var(--code-bg);aspect-ratio:488/680;transition:transform .15s,box-shadow .15s}
@media (hover:hover){.cl-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}}
.cl-tile img,.cc-twin img{display:block;width:100%;height:100%;object-fit:contain}
.cl-fallback{display:flex;flex-direction:column;gap:6px;height:100%;padding:12px;border:1px solid var(--rule);border-radius:inherit;background:var(--surface);color:var(--ink);font-size:var(--fs-sm);line-height:1.4;overflow:hidden;aspect-ratio:488/680}
.cl-fallback > b{font-family:var(--mono);font-size:var(--fs-sm)}
.cl-fallback > i{color:var(--muted);font-style:normal;border-bottom:1px solid var(--rule);padding-bottom:4px}
.cl-fallback > span:not(.mana){flex:1;overflow:hidden}
.cl-fallback > em{font-family:var(--mono);font-style:normal;align-self:flex-end}
.cl-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.cl-table th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule)}
.cl-table td{padding:8px 8px;border-bottom:1px solid var(--rule);vertical-align:middle}
.cl-table td a{color:var(--ink);font-weight:500;text-decoration:none}
@media (hover:hover){.cl-table td a:hover{color:var(--accent)}}
.cl-table .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-text{padding:var(--sp-lg) 0;border-bottom:1px solid var(--rule)}
.cl-text header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-text header a{font-family:var(--mono);font-weight:700;color:var(--ink);text-decoration:none}
.cl-tl{margin:4px 0;color:var(--muted);font-size:var(--fs-md)}
.cl-oracle p,.cc-oracle p{margin:0 0 6px}
.cl-oracle{font-size:var(--fs-lg)}
.cl-dna{margin:8px 0 0}
.dna{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;padding:4px 10px;margin:0 6px 6px 0;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);text-decoration:none;white-space:nowrap}
@media (hover:hover){a.dna:hover{background:var(--accent);color:var(--ground)}}
.dna-quiet{background:var(--code-bg);color:var(--muted)}
.cl-more{display:block;margin:var(--sp-xl) auto 0;font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:10px var(--sp-lg);cursor:pointer}
@media (hover:hover){.cl-more:hover{border-color:var(--accent);color:var(--accent)}}
.cl-none{padding:var(--sp-2xl) 0;font-size:var(--fs-lg)}
.cl-inline{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.cl-home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-3xl);padding-top:var(--sp-xl)}
.cl-examples{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cl-examples a{display:grid;grid-template-columns:minmax(0,auto);gap:1px;padding:10px 12px;border-radius:var(--r-md);text-decoration:none;border:1px solid transparent}
@media (hover:hover){.cl-examples a:hover{background:var(--surface);border-color:var(--rule)}}
.cl-examples code{font-family:var(--mono);font-size:var(--fs-md);color:var(--accent);overflow-wrap:anywhere}
.cl-examples span{font-size:var(--fs-md);color:var(--muted)}
.cl-say{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cl-say button{font-family:var(--sans);font-size:var(--fs-md);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 14px;cursor:pointer}
@media (hover:hover){.cl-say button:hover{border-color:var(--accent);color:var(--accent)}}
.cl-links{display:flex;gap:var(--sp-lg);font-family:var(--mono);font-size:var(--fs-sm)}
.cl-guide{margin-top:var(--sp-3xl);padding-top:var(--sp-xl);border-top:1px solid var(--rule)}
.cl-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl)}
.cl-guide h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:14px 0 8px}
.cl-guide table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.cl-guide td{padding:6px 8px 6px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cl-guide td:first-child{width:44%}
.cl-guide code,.cl-vocab code{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:var(--r-sm);overflow-wrap:anywhere}
.cl-vocab{margin-top:10px;border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 14px;background:var(--surface)}
.cl-vocab summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm)}
.cl-vocab p{line-height:2.1;margin:10px 0 0}
.cl-peek{position:fixed;z-index:60;width:244px;border-radius:var(--r-lg);box-shadow:var(--shadow-3);pointer-events:none}
.mana{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;white-space:nowrap}
.mana-sep{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin:0 4px}
.ms{display:inline-grid;place-items:center;min-width:1.25em;height:1.25em;padding:0 .2em;border-radius:var(--r-pill);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;line-height:1;color:var(--ms-ink);background:var(--ms-n);box-shadow:inset 0 0 0 1px var(--ms-ring);vertical-align:-.15em}
.ms-w{background:var(--ms-w)}.ms-u{background:var(--ms-u)}.ms-b{background:var(--ms-b)}.ms-r{background:var(--ms-r)}.ms-g{background:var(--ms-g)}.ms-c{background:var(--ms-c)}
.ms-hy{font-size:var(--fs-xs);letter-spacing:-.02em}
.ms-hy i{font-style:normal;margin-left:1px;font-size:.85em}
.ms-phy{text-decoration:underline;text-underline-offset:2px}
.ms-tap{font-size:var(--fs-xs)}
.rem{color:var(--faint);font-style:italic}
/* card page */
.cc{display:grid;grid-template-columns:minmax(260px,336px) minmax(0,1fr);gap:var(--sp-3xl);padding:var(--sp-xl) 0 8px}
.cc-imgwrap{border-radius:var(--r-card);overflow:hidden;background:var(--code-bg);aspect-ratio:488/680;box-shadow:var(--shadow-2)}
.cc-imgwrap img{display:block;width:100%;height:100%;object-fit:contain}
.cc-art .btn-sm{margin-top:12px}
.cc-facts{margin:var(--sp-lg) 0 0;display:grid;gap:0}
.cc-facts div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.cc-facts dt{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.cc-facts dd{margin:0;text-align:right}
.cc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cc-head h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.2;margin:0}
.cc-head .ms{font-size:var(--fs-lg)}
.cc-type{font-size:var(--fs-lg);color:var(--muted);margin:6px 0 var(--sp-lg);padding-bottom:14px;border-bottom:1px solid var(--rule)}
.cc-oracle{font-size:var(--fs-xl);line-height:1.6;max-width:62ch}
.cc-stats{font-family:var(--mono);font-weight:700;margin-top:10px}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-xl) 0}
.cc-legal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:6px 0 0;padding:0;list-style:none}
.cc-legal li{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-sm);padding:6px 10px;border-radius:var(--r-md);background:var(--code-bg)}
.cc-legal a{color:var(--ink);text-decoration:none}
.cc-legal span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.cc-legal .lg-legal{background:var(--ok-soft)}
.cc-legal .lg-legal span{color:var(--ok)}
.cc-legal .lg-banned{background:var(--bad-soft)}
.cc-legal .lg-banned span{color:var(--bad)}
.cc-legal .lg-restricted{background:var(--warn-bg)}
.cc-legal .lg-restricted span{color:var(--warn)}
.cc-legal .lg-no a{color:var(--faint)}
.cc-readout dl{margin:0}
.ro{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.ro dt{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);padding-top:4px}
.ro dd{margin:0}
.ro-x{display:inline-block;font-size:var(--fs-md);color:var(--muted);margin:0 14px 6px -2px;vertical-align:middle}
.ro-x a{color:var(--muted)}
.cc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 12px;font-size:var(--fs-md);color:var(--muted)}
.cc-tools label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.cc-twins{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--pic)),1fr));gap:14px}
.cc-twin{display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.cc-twin img,.cc-twin .cl-fallback{height:auto;border-radius:var(--r-card);aspect-ratio:488/680;background:var(--code-bg);transition:transform .15s}
@media (hover:hover){.cc-twin:hover img{transform:translateY(-2px)}}
.cc-twin-meta{display:grid;gap:1px;font-size:var(--fs-sm)}
.cc-twin-meta b{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent)}
.cc-twin-meta small{color:var(--muted);font-size:var(--fs-xs);line-height:1.35}
.cc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cc-tabs button{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--muted);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 12px;cursor:pointer}
.cc-tabs button span{color:var(--faint);margin-left:4px}
.cc-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.cc-tabs button[aria-pressed="true"] span{color:inherit;opacity:.7}
.cc-ans{list-style:none;margin:0;padding:0;columns:2 320px;column-gap:var(--sp-2xl)}
.cc-ans li{break-inside:avoid;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.cc-ans li>a{color:var(--ink);font-weight:500;text-decoration:none}
@media (hover:hover){.cc-ans li>a:hover{color:var(--accent)}}
.cc-m{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);background:var(--accent-soft);border-radius:var(--r-sm);padding:1px 6px}
.cc-cond{font-size:var(--fs-sm);color:var(--warn)}
.cc-ans .cl-muted{margin-left:auto;font-family:var(--mono);font-size:var(--fs-sm)}
.cc-sub{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--muted);margin:var(--sp-xl) 0 8px}
.cc-combos{list-style:none;margin:0;padding:0}
.cc-combos li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.cc-with a{color:var(--ink);font-weight:500}
.cc-res{color:var(--muted);font-size:var(--fs-md)}
.cc-print{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.cc-stamp{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;color:var(--faint);margin:var(--sp-2xl) 0 0;max-width:90ch}
.cl-missing{padding:var(--sp-3xl) 0}
.cl-missing h1{font-family:var(--mono);font-size:var(--fs-title);margin:0 0 8px}
@media (width < 1024px){
  .cl-layout{grid-template-columns:minmax(0,1fr)}
  .cl-facets{display:none}
  .cl-facets.open{display:block;border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px;background:var(--surface)}
  .cl-facet-toggle{display:inline-block}
  .cl-home,.cl-guide-grid{grid-template-columns:minmax(0,1fr)}
  .cc{grid-template-columns:minmax(0,1fr)}
  .cc-art{max-width:336px}
}
@media (width < 720px){
  .cl-grid{grid-template-columns:repeat(var(--pc2),minmax(0,1fr));gap:10px}
  .cl-go,.cl-mode{flex:1}
  .cl-lock{flex:1 1 100%}
  .cl-lock select{flex:1}
  .ro{grid-template-columns:minmax(0,1fr);gap:4px}
  .cc-combos li{grid-template-columns:minmax(0,1fr);gap:2px}
  .cl-table .cl-muted{display:none}
}
.cc-face{padding:0 0 12px;margin:0 0 14px;border-bottom:1px dashed var(--rule)}
.cc-face:last-child{border-bottom:0;margin-bottom:0}
.cc-face-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:var(--fs-lg)}
.cc-face-name b{font-family:var(--mono);font-weight:700}
.cc-face-type{margin:2px 0 8px;font-size:var(--fs-md);color:var(--muted)}
/* ---------------------------------------------------------------- shared app kit: toasts, modals, name box */
.ms-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:min(92vw,560px)}
.ms-toast{pointer-events:auto;background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:var(--fs-sm);padding:10px var(--sp-lg);border-radius:var(--r-md);box-shadow:var(--shadow-2);transition:opacity .3s,transform .3s;max-width:100%}
.ms-toast.out{opacity:0;transform:translateY(8px)}
.ms-modal{position:fixed;inset:0;z-index:80;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:6vh var(--sp-lg);padding:6svh var(--sp-lg);overflow-y:auto}
.ms-modal-box{position:relative;width:min(560px,100%);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-xl) var(--sp-xl) var(--sp-xl);box-shadow:var(--shadow-3)}
.ms-modal-box.wide{width:min(980px,100%)}
.ms-modal-box h2{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;margin:0 var(--sp-2xl) 12px 0}
.ms-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:var(--r-md);background:transparent;color:var(--muted);font-size:var(--fs-xl);line-height:1;cursor:pointer}
@media (hover:hover){.ms-x:hover{background:var(--code-bg);color:var(--ink)}}
.ms-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.ms-confirm{font-size:var(--fs-lg);margin:4px var(--sp-2xl) 0 0}
.ms-modal label,.ms-lbl{display:grid;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin:0 0 10px}
.ms-modal input:not([type=checkbox]):not([type=radio]):not([type=range]),.ms-modal select,.ms-modal textarea{font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;width:100%}
.ms-modal textarea{font-family:var(--mono);font-size:var(--fs-sm);min-height:120px;resize:vertical}
.ms-modal label.ms-check,.ms-modal label.db-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.ms-qa{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-xl)}
.ms-qa img{width:100%;height:auto;border-radius:var(--r-card);background:var(--code-bg);aspect-ratio:488/680}
.ms-qa-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ms-qa-price{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.ms-ac{min-width:280px}
.cc-mine{margin-top:var(--sp-lg);padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);font-size:var(--fs-md)}
.cc-mine:empty{display:none}
.cc-mine-h{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);margin:0 0 4px}
.cc-mine p{margin:0 0 6px}
.cc-mine-btns{display:flex;flex-wrap:wrap;gap:6px}
.cc-mine-btns .btn-sm{margin:0}
@media (width < 720px){.ms-qa{grid-template-columns:minmax(0,1fr)}.ms-qa img{max-width:220px}.ms-qa-row{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- Deckbuilder Pro */
.db{padding-bottom:var(--sp-3xl)}
.db-banner{position:relative;margin:14px 0 0;border-radius:var(--r-lg);overflow:hidden;min-height:260px;display:flex;align-items:flex-end;background:var(--media-ground);color:var(--on-media)}
.db-banner.noart{background:var(--surface);color:var(--ink);border:1px solid var(--rule);min-height:0}
.db-banner.hasart{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.db-banner.hasart .db-banner-body{grid-column:1;grid-row:1}
.db-banner-art{grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:var(--sp-lg) var(--sp-lg) 14px 0;max-width:280px}
/* a picture frame (MS.frameLayout): the picture fills it, then zooms about its focal point; before layout it simply fills */
.dimg{position:relative;display:block;overflow:hidden}
.dimg>img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--x,50%) var(--y,30%);user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.db-banner-frame,.dimg-banner{width:260px;max-width:100%;aspect-ratio:1.368;border-radius:var(--r-lg);background:var(--veil-faint)}
.db-banner-body{position:relative;width:100%;padding:var(--sp-xl) var(--sp-xl) var(--sp-lg)}
.db-back{display:inline-block;font-family:var(--mono);font-size:var(--fs-sm);color:inherit;opacity:.85;text-decoration:none;margin-bottom:8px}
@media (hover:hover){.db-back:hover{opacity:1;text-decoration:underline}}
.db-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.db-title{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.15;margin:0;outline:none;border-radius:var(--r-md);padding:0 4px;margin-left:-4px;text-shadow:var(--text-shadow-media)}
.db-banner.noart .db-title{text-shadow:none}
@media (hover:hover){.db-title[contenteditable]:hover{box-shadow:inset 0 0 0 1px var(--veil-line)}}
.db-title[contenteditable]:focus{box-shadow:inset 0 0 0 1.5px currentColor}
.db-colors .ms{font-size:var(--fs-md);margin-right:2px}
.db-meta{display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);align-items:center;font-family:var(--mono);font-size:var(--fs-sm);margin-top:8px}
.db-meta>span{opacity:.92}
.db-pill,.db-pill-select{font-family:var(--mono);font-size:var(--fs-sm);border-radius:var(--r-pill);padding:4px 10px;background:var(--veil);color:inherit;border:1px solid var(--veil-line)}
.db-pill-select option{color:var(--ink);background:var(--surface)}
.db-banner.noart .db-pill,.db-banner.noart .db-pill-select{background:var(--code-bg);border-color:var(--rule)}
.db-legal{font-family:var(--mono);font-size:var(--fs-sm);border-radius:var(--r-pill);padding:4px 12px;border:0;cursor:pointer;color:var(--on-media)}
.db-legal.ok{background:var(--ok-fill)}
.db-legal.bad{background:var(--bad-fill)}
.db-saved{font-size:var(--fs-xs);opacity:.75}
.db-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.db-banner:not(.noart) .db-actions .btn-sm:not(.primary){background:var(--glass-soft);color:var(--on-media);border-color:var(--veil-line);backdrop-filter:blur(6px)}
@media (hover:hover){.db-banner:not(.noart) .db-actions .btn-sm:hover{border-color:var(--on-media)}}
.db-actions .btn-sm[disabled]{opacity:.45;cursor:default}
.db-credit{margin:0;max-width:260px;font-size:var(--fs-xs);line-height:1.35;font-family:var(--mono);color:var(--on-media-dim);text-align:right}
.db-tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin:var(--sp-lg) 0 var(--sp-lg);overflow-x:auto}
.db-tabs button{font-family:var(--mono);font-size:var(--fs-sm);background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 12px;cursor:pointer;white-space:nowrap}
.db-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.db-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--sp-xl)}
.db-add{margin-bottom:12px}
.db-addrow{display:flex;gap:8px;flex-wrap:wrap}
.db-addbox{position:relative;flex:1 1 360px;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-lg)}
.db-addbox:focus-within{border-color:var(--accent)}
#db-add{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-lg);padding:12px 12px;outline:none}
.db-addrow select,.db-controls select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px}
.db-addopts{display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);align-items:center;font-size:var(--fs-sm);margin-top:8px}
.db-addopts label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.db-rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 10px;font-size:var(--fs-md)}
.db-rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;max-height:620px;overflow-y:auto;padding:4px 4px 8px;border-bottom:1px solid var(--rule)}
.db-rcard{position:relative}
.db-rcard img{display:block;width:100%;height:auto;border-radius:var(--r-card);aspect-ratio:488/680;background:var(--code-bg)}
.db-radd{position:absolute;left:6px;right:6px;top:42%;display:flex;gap:6px;justify-content:center;opacity:0;transition:opacity .12s}
.db-rcard:hover .db-radd,.db-rcard:focus-within .db-radd{opacity:1}
.db-radd button{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;border:0;border-radius:var(--r-md);padding:8px 12px;background:var(--accent);color:var(--on-accent);cursor:pointer;box-shadow:var(--shadow-2)}
.db-rmeta{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin-top:4px;text-align:center}
@media (hover:none){.db-radd{opacity:1;top:auto;bottom:26px}}
.db-controls{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:14px}
.db-controls label{display:inline-flex;gap:6px;align-items:center}
.db-seg{display:inline-flex}
.db-seg button{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--muted);border:1px solid var(--rule);padding:6px 10px;margin-left:-1px;cursor:pointer}
.db-seg button:first-child{border-radius:var(--r-md) 0 0 var(--r-md);margin-left:0}
.db-seg button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.db-seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.db-board{margin-bottom:var(--sp-xl)}
.db-board-h{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:var(--fs-md);font-weight:700;margin:0 0 10px}
.db-board-h b{color:var(--faint);font-weight:500}
.db-empty{color:var(--muted);font-size:var(--fs-md);border:1px dashed var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg)}
.db-gh{display:inline-flex;gap:6px;align-items:baseline;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.db-gh span{color:var(--faint);font-weight:500}
.db-gh::before{content:"-";font-family:var(--mono);color:var(--faint);width:.8em}
.shut .db-gh::before{content:"+"}
/* stacks: the Arena and Archidekt view */
.db-stacks{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(172px * var(--pic)),1fr));gap:var(--sp-xl) 10px;align-items:start}
.db-stack{padding-left:14px}
.db-stack h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:0 0 8px;color:var(--ink)}
.db-card{position:relative;display:block;border-radius:var(--r-card);cursor:pointer;outline:none;transition:transform .12s}
.db-card img,.db-fb{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg);box-shadow:var(--shadow-card)}
.db-fb{display:flex;align-items:flex-start;padding:10px;font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.db-stack .db-card+.db-card{margin-top:-121%}
.db-stack .db-card:focus-visible{z-index:5;transform:translateY(-6px)}@media (hover:hover){.db-stack .db-card:hover{z-index:5;transform:translateY(-6px)}}
.db-card:focus-visible img{box-shadow:0 0 0 3px var(--accent)}
.db-q{position:absolute;left:-16px;top:5px;min-width:21px;height:21px;display:grid;place-items:center;padding:0 6px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;box-shadow:var(--shadow-1);z-index:2}
.db-dot{position:absolute;right:-7px;top:5px;width:15px;height:15px;border-radius:50%;border:2.5px solid var(--surface);padding:0;cursor:pointer;z-index:3;box-shadow:var(--shadow-1)}
.db-dot.good{background:var(--dot-good)}.db-dot.close{background:var(--dot-close)}.db-dot.low{background:var(--dot-low)}.db-dot.na{background:var(--dot-na);opacity:.6}
@media (hover:hover){.db-dot:hover{transform:scale(1.25)}}
.db-row .db-dot{position:static;display:inline-block;width:12px;height:12px;border-width:2px;flex:none}
.db-cmarks{position:absolute;left:6px;top:14%;right:6px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none}
.db-mark,.db-own{font-family:var(--mono);font-size:var(--fs-xs);line-height:1;padding:4px 6px;border-radius:var(--r-pill);background:var(--glass);color:var(--on-media)}
.db-q.own{box-shadow:0 0 0 2.5px var(--dot-good),var(--shadow-1)}.db-q.part{box-shadow:0 0 0 2.5px var(--dot-close),var(--shadow-1)}.db-q.miss{box-shadow:0 0 0 2.5px var(--dot-low),var(--shadow-1)}
.db-mark.proxy{background:var(--proxy)}.db-mark.foil{background:var(--foil-strip);color:var(--foiltag-ink)}
.db-own.own{background:var(--ok-fill)}.db-own.part{background:var(--warn-fill)}.db-own.miss{background:var(--bad-fill)}
/* foil copies: Scryfall has one scan per printing and asks that scans not be tinted or covered, so foil is marked with a ring around the card, never a sheen over it */
.db-card.is-foil>img{box-shadow:0 0 0 2px var(--foil-a),0 0 0 4px var(--foil-b),var(--shadow-1)}
.db-gridview{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--pic)),1fr));gap:var(--sp-lg) var(--sp-lg);padding-left:14px}
.db-listview{columns:2 300px;column-gap:var(--sp-xl)}
.db-lgroup{break-inside:avoid;margin-bottom:var(--sp-lg)}
.db-lgroup h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:0 0 4px}
.db-lgroup ul{list-style:none;margin:0;padding:0}
.db-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
@media (hover:hover){.db-row:hover{background:var(--surface)}}
.db-sel input{margin:0}
.db-rq{font-family:var(--mono);font-size:var(--fs-sm);min-width:1.4em;text-align:right;color:var(--muted)}
.db-rname{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.db-rname:hover{color:var(--accent)}}
.db-row .db-mark,.db-row .db-own{font-size:var(--fs-xs)}
.db-rmana{flex:none}
.db-rprice{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);min-width:52px;text-align:right}
.db-textview{font-family:var(--mono);font-size:var(--fs-md);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px;white-space:pre-wrap;margin:0}
.db-side .db-panel{position:static}
.db-panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px var(--sp-lg);margin-bottom:14px}
.db-panel h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:0 0 10px}
.db-curve{display:flex;align-items:flex-end;gap:4px;height:84px;border-bottom:1px solid var(--rule)}
.db-curve.big{height:150px}
.db-bar{flex:1;position:relative;background:var(--accent);border-radius:var(--r-sm) var(--r-sm) 0 0;min-height:1px}
.db-bar span,.db-bar2 span{position:absolute;top:-17px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.db-bar2{flex:1;position:relative;display:flex;flex-direction:column-reverse;height:100%}
.db-bar2 i{display:block;width:100%}
.db-bar2 i.c{background:var(--accent);order:-1}
.db-bar2 i.n{background:color-mix(in srgb,var(--accent) 38%,var(--surface));order:1;border-radius:var(--r-sm) var(--r-sm) 0 0}
.db-curve-x{display:flex;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin-top:4px}
.db-curve-x span{flex:1;text-align:center}
.db-key{display:inline-block;width:10px;height:10px;border-radius:var(--r-sm);margin:0 4px 0 8px;vertical-align:-1px}
.db-key.c{background:var(--accent)}.db-key.n{background:color-mix(in srgb,var(--accent) 38%,var(--surface))}
.db-kv{display:flex;justify-content:space-between;gap:10px;margin:8px 0 0;font-size:var(--fs-md)}
.db-kv span{color:var(--muted)}
.db-kv b{font-family:var(--mono);font-weight:700}
.db-c-good{color:var(--ok)}.db-c-close{color:var(--warn)}.db-c-low{color:var(--bad)}
.db-issues ul,.db-issue-list{margin:0;padding-left:var(--sp-lg);font-size:var(--fs-md)}
.db-issues li,.db-issue-list li{margin-bottom:4px}
kbd{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 6px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r-sm);background:var(--ground)}
.db-pop{position:absolute;z-index:70;width:330px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg) var(--sp-lg) 12px;box-shadow:var(--shadow-3);font-size:var(--fs-md)}
.db-pop h4{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:var(--fs-md);margin:0 var(--sp-2xl) 8px 0}
.db-pop-big{margin:0 0 10px}
.db-pop-big b{font-family:var(--mono);font-size:var(--fs-xl);margin-right:4px}
.db-pop-t{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:8px}
.db-pop-t th{font-family:var(--mono);font-weight:500;color:var(--faint);text-align:right;padding:4px 4px}
.db-pop-t td{padding:4px 4px;border-top:1px solid var(--rule);text-align:right;font-family:var(--mono)}
.db-pop-t td:first-child{text-align:left;font-family:var(--sans);color:var(--muted)}
.db-pop-src{display:grid;gap:2px;margin:0 0 8px;font-size:var(--fs-sm)}
.db-pop-note{font-size:var(--fs-xs);color:var(--faint);margin:0}
/* inspector */
.db-insp{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--sp-xl)}
.db-insp-img img{width:100%;height:auto;border-radius:var(--r-card);background:var(--code-bg);aspect-ratio:488/680;box-shadow:var(--shadow-2)}
.db-insp-img .btn-sm{margin-top:8px}
.db-insp-body h2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.db-insp-body>p.cl-muted{margin:-6px 0 12px;font-size:var(--fs-md)}
.db-insp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.db-insp-row select{width:auto!important}
.db-stepper{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.db-stepper button{width:34px;height:34px;border:0;background:var(--code-bg);color:var(--ink);font-size:var(--fs-xl);cursor:pointer}
.db-stepper b{min-width:38px;text-align:center;font-family:var(--mono)}
.db-insp-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.db-insp-facts{margin:10px 0;display:grid}
.db-insp-facts div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.db-insp-facts dt{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.db-insp-facts dd{margin:0}
.db-insp-links{display:flex;gap:var(--sp-lg);font-size:var(--fs-md);align-items:center}
.db-sub{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:var(--sp-lg) 0 8px}
.db-prints{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:360px;overflow-y:auto;padding:2px}
.db-print{display:grid;gap:2px;border:1.5px solid transparent;border-radius:var(--r-md);background:none;padding:4px;cursor:pointer;color:var(--ink);text-align:center}
.db-print img{width:100%;height:auto;border-radius:var(--r-card);aspect-ratio:488/680;background:var(--code-bg)}
.db-print span{font-family:var(--mono);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-print small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.db-print.on{border-color:var(--accent);background:var(--accent-soft)}
.db-swaplist{list-style:none;margin:0;padding:0}
.db-swaplist li{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.db-swaplist li .db-rname{flex:1}
/* art picker */
.db-artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;max-height:340px;overflow-y:auto;padding:2px;margin-bottom:12px}
.db-artpick{position:relative;display:flex;flex-direction:column;gap:4px;border:0;padding:0;border-radius:var(--r-md);cursor:pointer;background:none;color:var(--ink);text-align:left;font:inherit}
.db-artpick-img{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--code-bg);aspect-ratio:626/457}
.db-artpick-img img{width:100%;height:100%;object-fit:cover;display:block}
.db-artpick.on .db-artpick-img,.db-artpick:focus-visible .db-artpick-img{box-shadow:0 0 0 3px var(--accent)}
.db-artpick-cap{font-size:var(--fs-xs);line-height:1.3}
.db-artpick small{color:var(--muted)}
@media (width < 720px){.db-artgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the deck picture editor: the same frame as the banner, on the banner's dark ground */
.dimg-edit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-lg);align-items:start;margin:4px 0 var(--sp-lg);padding:14px;border-radius:var(--r-lg);background:var(--media-ground);color:var(--on-media)}
.dimg-edit .cl-muted{color:var(--on-media-dim)}
.dimg-edit-frame{cursor:grab;touch-action:none;outline:none}
.dimg-edit-frame:active{cursor:grabbing}
.dimg-edit-frame:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.dimg-credit{margin:0;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.4}
.dimg-zoom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.dimg-zoom input[type=range]{flex:1;min-width:120px}
.db-aerr{margin:6px 0 0;color:var(--warn)}
.db-aerr:empty{display:none}
@media (width < 720px){.dimg-edit{grid-template-columns:minmax(0,1fr)}}
/* stats tab */
.db-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-items:start}
.db-stats .db-panel{margin:0}
.db-stats .wide{grid-column:1/-1}
/* on a touch screen the stats tab's sections past the first two (Manabase+'s report alone is hundreds of rows) are drawn
   when they near the screen, so switching to the tab lays out only what shows; each keeps its size once drawn (October 2:
   the switch's style and layout was a 270 ms task on a 4x phone). Inside them each long table waits too, so Manabase+'s
   rows wait while its heading is near the screen. Touch only: there every row is a 44 px target, while a desktop's
   smaller rows need their neighbors laid out to be checked for spacing. The curve's tips sit in the first two */
@media (pointer:coarse){
  .db-stats>:nth-child(n+3){content-visibility:auto;contain-intrinsic-size:auto 480px}
  .db-stats .db-tablewrap{content-visibility:auto;contain-intrinsic-size:auto 600px}
}
.db-live{display:contents}
.db-ctable{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.db-ctable td{padding:6px 4px;border-bottom:1px solid var(--rule)}
.db-hbar{display:inline-block;height:9px;background:var(--accent);border-radius:var(--r-sm);vertical-align:0;max-width:60%}
.db-tablewrap{overflow-x:auto}
.db-dna{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--sp-lg)}
.db-dna li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md);break-inside:avoid}
.db-dna li b{font-family:var(--mono);font-weight:500}
.db-dna li.none{color:var(--muted)}
.db-dna a{color:var(--ink);text-decoration:none}
@media (hover:hover){.db-dna a:hover{color:var(--accent)}}
.db-top{list-style:none;margin:10px 0;padding:0}
.db-top li{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-md);padding:4px 0}
.db-top span{font-family:var(--mono)}
.db-bracket{font-size:var(--fs-lg);margin:0 0 6px}
.db-bracket b{font-family:var(--mono);font-size:var(--fs-xl);margin-right:6px}
.db-why{margin:0 0 10px;padding-left:var(--sp-lg);font-size:var(--fs-md)}
.db-combolist{list-style:none;margin:0;padding:0}
.db-combolist li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.db-combolist a{color:var(--ink)}
.db-combolist a.db-miss{color:var(--bad);font-weight:700}
/* plans and results */
.db-plans{display:grid;gap:14px;margin-bottom:14px}
.db-plan{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px var(--sp-lg)}
.db-plan header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.db-pvs{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--ink);padding:4px 6px;flex:1;min-width:180px}
.db-pvs:focus{border-color:var(--rule);outline:none}@media (hover:hover){.db-pvs:hover{border-color:var(--rule);outline:none}}
.db-rec{font-family:var(--mono);font-size:var(--fs-sm)}
.db-pcols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
.db-pside h4{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);margin:0 0 6px}
.db-pside ul{list-style:none;margin:0 0 8px;padding:0}
.db-pside li{display:flex;gap:8px;align-items:center;font-size:var(--fs-md);padding:4px 0}
.db-pside li span{font-family:var(--mono);font-weight:700;min-width:2.2em}
.db-pside li.in span{color:var(--ok)}.db-pside li.out span{color:var(--bad)}
.db-pside li button{margin-left:auto;border:0;background:none;color:var(--faint);cursor:pointer;font-size:var(--fs-lg)}
.db-pbtns{display:flex;flex-wrap:wrap;gap:6px}
.db-bal{font-family:var(--mono);font-size:var(--fs-xs);margin:8px 0 0}
.db-bal.ok{color:var(--ok)}.db-bal.bad{color:var(--bad)}
.db-pnote{width:100%;margin-top:10px;min-height:56px;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;resize:vertical}
.db-pickl{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
.db-pickl li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule)}
.db-pickq{display:inline-flex;gap:6px;align-items:center}
.db-pickq select{width:auto!important;padding:4px 6px!important}
.db-rstats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.db-rstats div{display:grid;background:var(--ground);border-radius:var(--r-md);padding:8px 12px;min-width:110px}
.db-rstats b{font-family:var(--mono);font-size:var(--fs-xl)}
.db-rstats span{font-size:var(--fs-xs);color:var(--muted)}
.db-logform{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.db-logform input,.db-logform select{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px}
.db-logform #db-lvs{flex:1 1 180px}
.db-logform #db-lnote{flex:1 1 160px}
.db-reslist{list-style:none;margin:0;padding:0}
.db-reslist li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.db-reslist button{margin-left:auto;border:0;background:none;color:var(--faint);cursor:pointer;font-size:var(--fs-lg)}
.db-res{font-family:var(--mono);font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);color:var(--on-media)}
.db-res.W{background:var(--ok-fill)}.db-res.L{background:var(--bad-fill)}.db-res.D{background:var(--draw-fill)}
/* primer */
.db-primer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-xl)}
.db-primer-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.db-lbl{display:grid;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin-bottom:10px}
.db-lbl input,.db-lbl textarea{font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
#db-primer-text{width:100%;min-height:520px;font-family:var(--mono);font-size:var(--fs-md);line-height:1.55;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px;resize:vertical}
.db-primer-view{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:6px var(--sp-xl) var(--sp-lg);font-size:var(--fs-lg);line-height:1.65;max-width:78ch}
.db-primer-view h2,.db-primer-view h3,.db-primer-view h4{font-family:var(--mono);letter-spacing:-.01em;margin:var(--sp-lg) 0 8px}
.db-primer-view blockquote{margin:10px 0;padding:6px 14px;border-left:3px solid var(--accent);color:var(--muted)}
.db-primer-view a[data-peek]{font-weight:500}
/* versions */
.db-vsave{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.db-vsave input{flex:1 1 260px;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
.db-versions{list-style:none;margin:0;padding:0}
.db-versions li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.db-versions time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.db-versions .btn-sm{margin-left:auto}
.db-cmp{margin-top:14px;font-size:var(--fs-md)}
.db-cmp select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;margin-left:6px}
.db-difflist{list-style:none;margin:0;padding:0;columns:2 260px}
.db-difflist li{display:flex;gap:8px;padding:4px 0;font-size:var(--fs-md);break-inside:avoid}
.db-difflist span{font-family:var(--mono);font-weight:700;min-width:2.4em}
.db-difflist .in span{color:var(--ok)}.db-difflist .out span{color:var(--bad)}
/* menus and dialogs */
.db-exports{list-style:none;margin:0;padding:0}
.db-exports li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.db-exports li>span{flex:1 1 220px}
.db-exports li textarea{flex:1 1 100%;min-height:70px}
.db-exports li input:not([type=checkbox]){flex:0 1 200px}
.db-imptext{width:100%;min-height:220px}
.db-receipt{margin-top:12px;font-size:var(--fs-md)}
.db-receipt ul{padding-left:var(--sp-lg);margin:6px 0}
.db-receipt code{font-family:var(--mono);font-size:var(--fs-sm);background:var(--code-bg);padding:1px 6px;border-radius:var(--r-sm)}
.db-shareurl{font-family:var(--mono)!important;font-size:var(--fs-xs)!important}
.db-hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(120px * var(--pic)),1fr));gap:8px;margin:6px 0}
.db-hand img{width:100%;height:auto;border-radius:var(--r-card);aspect-ratio:488/680;background:var(--code-bg)}
.db-bulk{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--ink);color:var(--ground);padding:8px 10px;border-radius:var(--r-lg);box-shadow:var(--shadow-2);font-family:var(--mono);font-size:var(--fs-sm);max-width:calc(100vw - 24px)}
.db-bulk b{margin:0 6px}
.db-bulk button{font-family:var(--mono);font-size:var(--fs-xs);background:var(--veil);color:inherit;border:1px solid var(--veil-line);border-radius:var(--r-md);padding:6px 10px;cursor:pointer}
@media (hover:hover){.db-bulk button:hover{background:var(--veil-strong)}}
/* the deck list page */
.db-home{padding-top:var(--sp-xl)}
.db-home-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.db-home-head h1{font-family:var(--mono);font-size:var(--fs-title);letter-spacing:-.02em;margin:0}
.db-home-actions{display:flex;gap:8px}
.db-home-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.db-home-filters input,.db-home-filters select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
.db-folders{display:inline-flex;flex-wrap:wrap;gap:6px}
.db-folders button{font-family:var(--mono);font-size:var(--fs-xs);background:var(--surface);color:var(--muted);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer}
.db-folders button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.db-decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.db-deck{display:grid;grid-template-rows:140px auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
@media (hover:hover){.db-deck:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}}
.db-deck-art{background:var(--code-bg) center/cover no-repeat}
.db-deck-body{display:grid;gap:4px;padding:12px 14px}
.db-deck-body b{font-family:var(--mono);font-size:var(--fs-lg)}
.db-deck-meta{font-size:var(--fs-sm);color:var(--muted);display:flex;gap:8px;align-items:center}
.db-deck-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.db-deck-when{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.db-deck-credit{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.35;color:var(--faint);overflow-wrap:anywhere}
.db-emptyhome{border:1px dashed var(--rule);border-radius:var(--r-lg);padding:var(--sp-2xl);text-align:center;margin-top:var(--sp-xl)}
@media (width < 1024px){
  .db-layout{grid-template-columns:minmax(0,1fr)}
  .db-side{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .db-side .db-panel{margin:0}
  .db-primer{grid-template-columns:minmax(0,1fr)}
}
@media (width < 720px){
  .db-banner{min-height:220px;border-radius:var(--r-lg)}
  .db-banner-body{padding:var(--sp-lg) 14px var(--sp-xl)}
  .db-banner.hasart{grid-template-columns:minmax(0,1fr)}
  .db-banner-art{grid-column:1;grid-row:1;align-items:flex-start;padding:14px 14px 0;max-width:none}
  .db-banner.hasart .db-banner-body{grid-row:2}
  .db-credit{text-align:left;font-size:var(--fs-xs)}
  .db-stacks{grid-template-columns:repeat(var(--pc3),minmax(0,1fr));gap:var(--sp-lg) 8px}
  .db-gridview{grid-template-columns:repeat(var(--pc3),minmax(0,1fr));gap:8px}
  .db-insp{grid-template-columns:minmax(0,1fr)}
  .db-insp-img{max-width:220px}
  .db-pcols{grid-template-columns:minmax(0,1fr)}
  .db-dna{columns:1}
  .db-combolist li{grid-template-columns:minmax(0,1fr)}
  .db-q{font-size:var(--fs-xs);min-width:19px;height:19px;left:-12px}
  .db-stack,.db-gridview{padding-left:10px}
  .db-side{grid-template-columns:minmax(0,1fr)}
}
@media print{.top,.foot,.db-tabs,.db-actions,.db-add,.db-controls,.db-side{display:none!important}}
@media (hover:none){.db-keys{display:none}}
/* ---------------------------------------------------------------- Collection */
.co{padding-bottom:var(--sp-3xl)}
.co-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px var(--sp-xl);align-items:end;padding:var(--sp-xl) 0 4px}
.co-title h1{font-family:var(--mono);font-size:var(--fs-title);letter-spacing:-.02em;margin:0}
.co-refresh{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin-top:4px}
.co-kpis{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.co-kpis div{display:grid;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px var(--sp-lg);min-width:120px}
.co-kpis b{font-family:var(--mono);font-size:var(--fs-num);font-weight:700}
.co-kpis span{font-size:var(--fs-sm);color:var(--muted)}
.co-actions{grid-row:1;grid-column:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.co-tabs button span{color:var(--faint);margin-left:4px}
.co-add{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px;margin-bottom:14px}
.co-addrow{display:flex;gap:8px;flex-wrap:wrap}
.co-addbox{background:var(--ground)}
#co-add{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-lg);padding:12px;outline:none}
.co-addrow select,.co-addopts select,.co-controls select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px}
.co-addopts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px;font-size:var(--fs-sm)}
.co-addopts label{display:inline-flex;gap:6px;align-items:center}
.co-pick{margin-top:12px;border-top:1px solid var(--rule);padding-top:10px}
.co-pick-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:var(--fs-md);margin-bottom:8px}
.co-pick-head .btn-sm{margin-left:auto}
.co-pick-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.co-pp{flex:0 0 118px;display:grid;gap:2px;border:2px solid transparent;border-radius:var(--r-lg);background:none;padding:4px;cursor:pointer;color:var(--ink);text-align:center;scroll-snap-align:center}
.co-pp img{width:100%;height:auto;border-radius:var(--r-card);aspect-ratio:488/680;background:var(--code-bg)}
.co-pp span{font-family:var(--mono);font-size:var(--fs-xs)}
.co-pp small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.co-pp em{font-style:normal;font-size:var(--fs-xs);color:var(--accent);line-height:1.2}
.co-pp.on{border-color:var(--accent);background:var(--accent-soft)}@media (hover:hover){.co-pp:hover{border-color:var(--accent);background:var(--accent-soft)}}
.co-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}
.co-controls label{display:inline-flex;gap:6px;align-items:center}
.co-filter{flex:1 1 320px}
.co-filter input{width:100%;font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
.co-filter input:focus{border-color:var(--accent);outline:none}
.co-count{font-size:var(--fs-md);color:var(--muted);margin:6px 0 12px}
.co-count b{color:var(--ink);font-family:var(--mono)}
.co-crumb{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 12px}
.co-crumb h2{font-family:var(--mono);font-size:var(--fs-xl);margin:0}
.co-crumb a{font-family:var(--mono);font-size:var(--fs-sm);text-decoration:none}
.co-gh{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:var(--sp-lg) 0 8px;display:flex;gap:10px;align-items:baseline}
.co-gh span{color:var(--faint);font-weight:500}
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--pic)),1fr));gap:var(--sp-lg) 12px}
.co-tile{position:relative;cursor:pointer;outline:none;border-radius:var(--r-lg)}
.co-tile.picked{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}
.co-img{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--code-bg);aspect-ratio:488/680;transition:transform .12s}
.co-tile:focus-visible .co-img{transform:translateY(-2px)}@media (hover:hover){.co-tile:hover .co-img{transform:translateY(-2px)}}
.co-img img{display:block;width:100%;height:100%;object-fit:contain}
.co-tile.is-foil .co-img{box-shadow:0 0 0 2px var(--foil-a),0 0 0 4px var(--foil-b)}
/* the count sits between its steppers, under the picture: nothing covers a card's name or art */
.co-q{min-width:3ch;text-align:center;color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm);font-weight:700}
.co-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:6px;min-height:20px}
.co-bs{display:flex;flex-wrap:wrap;gap:4px}
.co-b{font-family:var(--mono);font-size:var(--fs-xs);line-height:1;padding:4px 6px;border-radius:var(--r-pill);background:var(--code-bg);color:var(--muted)}
.co-b.foil{background:var(--foil-strip);color:var(--foiltag-ink)}
.co-b.proxy{background:var(--proxy);color:var(--on-media)}
.co-price{font-family:var(--mono);font-size:var(--fs-xs)}
.co-price.muted{color:var(--faint);text-decoration:line-through}
.co-step{display:flex;align-items:center;gap:4px;margin-top:6px}
.co-step button{width:28px;height:28px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:var(--fs-lg);font-weight:700;cursor:pointer}
@media (hover:hover){.co-step button:hover{border-color:var(--accent);color:var(--accent)}}
.co-step button[disabled]{opacity:.35;cursor:default}
.co-tile.faded .co-img{outline:2px dashed var(--rule);outline-offset:2px}
.co-miss{margin:4px 0 0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn)}
.co-table td{font-size:var(--fs-md)}
.co-table th[data-csort]{cursor:pointer;user-select:none}
@media (hover:hover){.co-table th[data-csort]:hover{color:var(--accent)}}
.co-table tr[data-entry]{cursor:pointer}
@media (hover:hover){.co-table tr[data-entry]:hover td{background:var(--surface)}}
.co-table tr.picked td{background:var(--accent-soft)}
.co-name{font-weight:500}
.co-empty{margin-top:10px}
.co-binders{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:12px}
.co-newb{border:1.5px dashed var(--rule);border-radius:var(--r-lg);background:none;color:var(--muted);font-family:var(--mono);font-size:var(--fs-md);cursor:pointer;min-height:200px}
@media (hover:hover){.co-newb:hover{border-color:var(--accent);color:var(--accent)}}
.co-bar{display:block;height:8px;border-radius:var(--r-pill);background:var(--code-bg);overflow:hidden}
.co-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.co-decks{display:grid;gap:10px}
.co-deckrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px var(--sp-xl);align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px var(--sp-lg)}
.co-dk-main{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.co-dk-main .co-bar{grid-column:1/-1}
.co-dk-main a{color:var(--ink);text-decoration:none;font-family:var(--mono)}
.co-dk-stat{grid-column:1/-1;font-size:var(--fs-sm);color:var(--muted)}
.co-dk-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-sm)}
.co-over{margin-top:var(--sp-lg)}
.co-over ul{margin:0;padding-left:var(--sp-lg);font-size:var(--fs-md)}
.co-misslist{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
.co-misslist li{display:grid;grid-template-columns:2.4em 1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.co-misslist li span:first-child,.co-misslist li span:last-child{font-family:var(--mono)}
.co-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px var(--sp-lg);margin-top:10px}
.co-set{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
@media (hover:hover){.co-set:hover{border-color:var(--accent)}}
.co-set-name{display:grid;min-width:0}
.co-set-name b{font-size:var(--fs-md);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-set-name span{font-family:var(--mono);font-size:var(--fs-xs)}
.co-set .co-bar{grid-column:1/-1}
.co-set-n{font-family:var(--mono);font-size:var(--fs-sm);grid-row:1;grid-column:3}
.co-set>.ss,.co-set>.ss-none{width:1.9em;height:1.9em;grid-row:1}
.co-setgrid .co-tile{cursor:default}
/* a set's checklist is 60 tiles a page: the ones out of sight wait to be laid out until they near the screen (opening a
   set on a 4x phone: 192 ms to 152 ms, median of four), each keeping its size once drawn */
.co-setgrid .co-tile{content-visibility:auto;contain-intrinsic-size:auto 348px}
.co-setmore{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0}
.co-chart{width:100%;height:auto;color:var(--accent);background:var(--ground);border-radius:var(--r-md)}
.co-hist{list-style:none;margin:0;padding:0}
.co-hist li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.co-hist time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.co-top li>span:first-child{font-family:var(--sans)}
.co-drop{border-radius:var(--r-lg);border:2px dashed transparent}
.co-drop.over{border-color:var(--accent)}
.co-iopts{margin-top:10px;align-items:end}
.co-iopts label.db-check{align-self:center}
@media (width < 720px){
  .co-head{grid-template-columns:minmax(0,1fr)}
  .co-actions{grid-row:auto;grid-column:auto;justify-content:flex-start}
  .co-kpis div{min-width:0;flex:1 1 30%;padding:8px 10px}
  .co-kpis b{font-size:var(--fs-lg)}
  .co-grid{grid-template-columns:repeat(var(--pc3),minmax(0,1fr));gap:10px 8px}
  .co-deckrow{grid-template-columns:minmax(0,1fr)}
  .co-sets{grid-template-columns:minmax(0,1fr)}
}
@media (width < 480px){.co-grid{grid-template-columns:repeat(var(--pc2),minmax(0,1fr))}}
/* ---------------------------------------------------------------- My Stuff */
.me{padding-bottom:var(--sp-3xl)}
.me-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;padding:var(--sp-xl) 0 var(--sp-lg)}
.me-head h1{font-family:var(--mono);font-size:var(--fs-title);letter-spacing:-.02em;margin:0 0 4px}
.me-head p{margin:0;max-width:70ch;font-size:var(--fs-md)}
.me-actions{display:flex;flex-wrap:wrap;gap:8px}
.me-prog{flex-basis:100%;margin:0;text-align:right;color:var(--muted)}
.me-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
/* your picture or icon: the avatar wherever it shows, and the picker (me.js) */
.me-id{display:flex;align-items:flex-end;gap:14px;min-width:0}
.me-avbtn{display:grid;justify-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;font:500 var(--fs-xs) var(--mono);color:var(--muted)}
.me-avbtn:focus-visible span{color:var(--accent)}@media (hover:hover){.me-avbtn:hover span{color:var(--accent)}}
.me-avbtn span{max-width:104px;text-align:center;line-height:1.3}
.av{display:inline-grid;place-items:center;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--rule);flex:none;vertical-align:middle}
.av svg,.av img{display:block;width:100%;height:100%}
.av img{object-fit:cover}
.av-sm{width:22px;height:22px;border-radius:var(--r-sm)}
.av-md{width:40px;height:40px;border:0}
.av-lg{width:72px;height:72px}
.av-xl{width:88px;height:88px}
.avp-tabs{margin:0 0 12px}
.avp-tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.avp-prev{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.avp-th{display:grid;justify-items:center;gap:6px;padding:10px 14px 8px;border-radius:var(--r-lg);border:1px solid var(--rule)}
.avp-th small{font:500 var(--fs-xs) var(--mono)}
.avp-light small{color:var(--muted-on-light)}
.avp-dark small{color:var(--muted-on-dark)}
.avp-find{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.avp-find input{flex:1 1 200px;min-width:0}
.avp-groups{max-height:min(46vh,420px);max-height:min(46dvh,420px);overflow-y:auto;border:1px solid var(--rule);border-radius:var(--r-lg);padding:4px 10px 10px;background:var(--ground)}
.avp-gh{font:700 var(--fs-xs) var(--mono);color:var(--muted);margin:10px 0 6px}
.avp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.avp-i{display:grid;place-items:center;height:50px;padding:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.avp-i[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.avp-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avp-colors{margin:12px 0 0;display:grid;gap:8px}
.avp-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;align-items:center}
.avp-l{font:500 var(--fs-xs) var(--mono);color:var(--muted)}
.avp-sws{display:flex;flex-wrap:wrap;gap:6px}
.avp-s{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--rule);cursor:pointer;background:linear-gradient(135deg,var(--l) 50%,var(--d) 50%)}
.avp-s.avp-none{background:repeating-conic-gradient(var(--code-bg) 0 25%,var(--surface) 0 50%) 50%/10px 10px}
.avp-s[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.avp-s.off{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,transparent 44%,var(--ink) 44% 56%,transparent 56%),linear-gradient(135deg,var(--l) 50%,var(--d) 50%)}
.avp-s:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.avp-drop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px;border:1.5px dashed var(--rule);border-radius:var(--r-lg)}
.avp-drop.on{border-color:var(--accent);background:var(--accent-soft)}
.avp-err{color:var(--bad);font-size:var(--fs-md);margin:8px 0 0}
.avp-err:empty{display:none}
.avp-crop{margin:12px 0 0;display:grid;justify-items:start;gap:8px}
.avp-stage{touch-action:none;cursor:grab;border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--code-bg)}
.avp-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.avp-zoom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avp-zoom input{width:min(200px,50vw)}
.avp-acts{margin-top:14px;align-items:center}
@media (width < 480px){.avp-row{grid-template-columns:minmax(0,1fr)}}
.me-sec{margin:0}
.me-sec.wide{grid-column:1/-1}
.me-sec-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.me-sec-h h2{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;margin:0 auto 0 0}
.me-sec-h h2 span{color:var(--faint);font-weight:500;margin-left:4px}
/* art tiles: 200 px columns keep a tile under about 307 px wide, so a 626 px art crop stays at 2 source px per CSS px */
.me-decks{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* two across on phones: one column stretched a 626 px art crop past 2x */
@media (width < 720px){.me-decks,.co-binders{grid-template-columns:repeat(2,minmax(0,1fr))}}
.me-decks .db-deck{grid-template-rows:110px auto}
.me-big{display:grid;margin:0 0 10px}
.me-big b{font-family:var(--mono);font-size:var(--fs-num)}
.me-big span{font-size:var(--fs-sm);color:var(--muted)}
.me-list{list-style:none;margin:0;padding:0}
.me-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.me-list li a{color:var(--ink);text-decoration:none}
@media (hover:hover){.me-list li a:hover{color:var(--accent)}}
.me-searches code{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:var(--r-sm);overflow-wrap:anywhere}
.me-searches button{border:0;background:none;color:var(--faint);font-size:var(--fs-lg);cursor:pointer}
.me-danger{margin-top:14px;border-color:var(--bad-line)}
.me-danger h2{font-family:var(--mono);font-size:var(--fs-md);margin:0 0 6px}

/* ---------------------------------------------------------------- Manabase+ report */
.mb-head{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 var(--sp-lg)}
.mb-big{flex:1 1 180px;border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.mb-big b{font-family:var(--mono);font-size:var(--fs-num);line-height:1;font-variant-numeric:tabular-nums}
.mb-big span{font-size:var(--fs-sm);color:var(--muted);line-height:1.35}
.mb-big.ghost b{color:var(--faint)}
.mb-big.warn b{color:var(--warn)}
.mb-big.ok b{color:var(--ok)}
.mb-table td,.mb-table th{white-space:nowrap}
.mb-table td.mb-names{white-space:normal;min-width:160px;max-width:280px}
.mb-table small{font-size:var(--fs-xs);color:var(--faint);font-weight:400}
.mb-table tr.mb-cmdr td{background:var(--accent-soft)}
.mb-gain{color:var(--ok)!important;font-family:var(--mono)}
.mb-gain.neg{color:var(--warn)!important}
.mb-spark{display:inline-flex;align-items:flex-end;gap:4px;height:26px;vertical-align:middle}
.mb-spark i{position:relative;display:block;width:9px;height:100%;background:var(--code-bg);border-radius:var(--r-sm);overflow:hidden}
.mb-spark i.na{background:transparent}
.mb-spark i s,.mb-spark i b{position:absolute;left:0;right:0;bottom:0;display:block}
.mb-spark i s{background:var(--rule);z-index:1}
.mb-spark i b{background:var(--accent);opacity:.55;z-index:2}
.mb-spark i.on b{opacity:1}
.mb-read{margin-top:10px;max-width:80ch}
.mb-h{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:var(--sp-xl) 0 8px;text-transform:lowercase;letter-spacing:.02em}
.mb-cats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mb-cats li{display:grid;grid-template-columns:minmax(0,220px) minmax(80px,1fr) 56px;grid-template-areas:"l bar n" "s s s" "c c c";column-gap:10px;row-gap:2px;align-items:center}
.mb-cat-l{grid-area:l;font-size:var(--fs-md)}
.mb-cat-bar{grid-area:bar;height:8px;background:var(--code-bg);border-radius:var(--r-pill);overflow:hidden}
.mb-cat-bar i{display:block;height:100%;background:var(--ok);border-radius:var(--r-pill)}
.mb-cats b{grid-area:n;font-family:var(--mono);font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums}
.mb-cats small{grid-area:s;font-size:var(--fs-xs);color:var(--muted)}
.mb-cat-cards{grid-area:c;font-size:var(--fs-xs);color:var(--faint)}
.mb-notes{margin:0;padding-left:var(--sp-lg);font-size:var(--fs-sm);line-height:1.5;display:grid;gap:6px}
.mb-prog{height:6px;background:var(--code-bg);border-radius:var(--r-pill);overflow:hidden;margin:6px 0 4px;max-width:360px}
.mb-prog i{display:block;height:100%;background:var(--accent);transition:width .2s}
.db-pop.wide{width:400px;max-width:calc(100vw - 16px)}
.mb-turns{display:flex;gap:6px;margin:10px 0 2px}
.mb-turns span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--mono)}
.mb-turns i{position:relative;display:block;width:100%;height:38px;background:var(--code-bg);border-radius:var(--r-sm);overflow:hidden}
.mb-turns i::before,.mb-turns i::after{content:"";position:absolute;left:0;right:0;bottom:0}
.mb-turns i::before{height:var(--g);background:var(--rule)}
.mb-turns i::after{height:var(--v);background:var(--accent);opacity:.5;width:60%;left:20%}
.mb-turns span.on i::after{opacity:1}
.mb-turns b{font-size:var(--fs-xs)}
.mb-turns small{font-size:var(--fs-xs);color:var(--faint)}
@media (width < 720px){.mb-cats li{grid-template-columns:minmax(0,1fr) 70px 48px}}
.mb-th1 :is(th,td){border-bottom:0!important;padding-bottom:0!important;text-align:left;font-size:var(--fs-xs);color:var(--accent);letter-spacing:.03em}
.mbp .mb-page-h{margin:0 0 var(--sp-lg)}
.mbp .mb-page-h h1{margin:0 0 6px}
.mb-in{margin-bottom:var(--sp-lg)}
.mb-in-row{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:center;margin-bottom:12px}
.mb-in label{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.mb-in select{font:inherit;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);padding:8px 10px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);max-width:100%}
.mb-in textarea{display:block;width:100%;box-sizing:border-box;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.55;padding:12px 14px;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--ground);color:var(--ink);resize:vertical;min-height:220px}
.mb-in textarea:focus,.mb-in select:focus{outline:none;border-color:var(--accent)}
.mb-odds td[style]{background:linear-gradient(90deg,var(--accent-soft) var(--v),transparent var(--v));font-variant-numeric:tabular-nums}
.mb-odds tr.mb-landrow td{font-weight:700}
.mb-odds small,.mb-odds td small{color:var(--faint);font-weight:400}
.db-oldcast summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}

/* ---------------------------------------------------------------- the deck library */
.lib{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-2xl);align-items:start;position:relative}
.lib-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;display:flex;flex-direction:column;gap:1px;padding:4px 4px var(--sp-lg) 0;scrollbar-width:thin}
.lib-nav :is(h2,h4){font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--faint);margin:var(--sp-lg) 0 4px 10px}
.lib-nav-i{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-md);text-align:left;padding:6px 10px;border-radius:var(--r-md);cursor:pointer}
.lib-nav-i>span{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-nav-i b{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
@media (hover:hover){.lib-nav-i:hover{background:var(--code-bg)}}
.lib-nav-i[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.lib-nav-i[aria-pressed="true"] b{color:var(--accent)}
.lib-nav-i.dim>span{color:var(--muted)}
.lib-star{color:var(--star)}
.lib-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0 6px}
.lib-tag{border:1px solid var(--rule);background:var(--surface);color:var(--muted);font:inherit;font-family:var(--mono);font-size:var(--fs-xs);padding:4px 8px;border-radius:var(--r-pill);cursor:pointer}
.lib-tag b{font-weight:500;color:var(--faint)}
.lib-tag[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.lib-plat{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-sm);font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--on-media);flex:none}
.lib-plat.paper{background:var(--plat-paper)}
.lib-plat.arena{background:var(--plat-arena)}
.lib-plat.mtgo{background:var(--plat-mtgo)}
.lib-stage{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;border:2px solid currentColor}
.lib-stage.idea{color:var(--stage-idea);border-style:dashed}
.lib-stage.brewing{color:var(--stage-brewing)}
.lib-stage.ready{color:var(--ok);background:currentColor}
.lib-stage.retired{color:var(--faint)}
.lib-stagechip{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--r-pill);background:var(--code-bg);color:var(--muted)}
.lib-stagechip.idea{background:var(--stage-idea-bg);color:var(--stage-idea-ink)}
.lib-stagechip.brewing{background:var(--stage-brewing-bg);color:var(--stage-brewing-ink)}
.lib-stagechip.ready{background:var(--stage-ready-bg);color:var(--stage-ready-ink)}
.lib-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lib-top-l{display:flex;align-items:center;gap:10px;min-width:0}
.lib-top h1{margin:0;font-size:var(--fs-title)}
.lib-top h1 span{font-family:var(--mono);font-size:var(--fs-lg);color:var(--faint);font-weight:500;margin-left:6px}
.lib-navbtn{display:none}
.lib-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:14px}
.lib-tools label{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.lib-tools select{font:inherit;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);padding:6px 8px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.lib-search{flex:1 1 320px;display:flex;align-items:center;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding-left:12px}
.lib-search:focus-within{border-color:var(--accent)}
.lib-search input{flex:1;border:0;background:transparent;font:inherit;font-size:var(--fs-md);color:var(--ink);padding:10px 10px 10px 6px;min-width:0;outline:none}
.lib-hint{margin:-6px 0 12px}
.lib-group{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:var(--sp-xl) 0 10px;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:6px}
.lib-group span{color:var(--faint);font-weight:500}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.lib-card{position:relative;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}
@media (hover:hover){.lib-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));box-shadow:var(--shadow-2);transform:translateY(-1px)}}
.lib-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.lib-card.focus{outline:2px solid var(--accent);outline-offset:2px}
.lib-card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none;height:100%}
.lib-art{position:relative;display:block;aspect-ratio:16/7;background:linear-gradient(135deg,var(--code-bg),var(--rule));overflow:hidden}
.lib-art img{width:100%;height:100%;object-fit:cover;display:block}
.lib-badges{position:absolute;left:10px;bottom:8px;display:flex;gap:4px;align-items:center}
.lib-badges .lib-stagechip{box-shadow:var(--shadow-1)}
.lib-credit{display:block;padding:6px 12px 0;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.35;color:var(--faint);overflow-wrap:anywhere}
.lib-rowcredit{display:block;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.35;font-weight:400;color:var(--faint);overflow-wrap:anywhere}
.lib-body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;min-width:0}
.lib-title{font-size:var(--fs-lg);line-height:1.25;overflow-wrap:anywhere}
.lib-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
.lib-cols{display:inline-flex;gap:2px;vertical-align:middle}
.lib-cmdr{font-size:var(--fs-xs);color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-stats{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.lib-tagrow{display:flex;gap:4px;flex-wrap:wrap}
.lib-tagrow span,.lib-c-tags span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);background:var(--accent-soft);padding:1px 8px;border-radius:var(--r-pill)}
.lib-tagrow .lib-folder{color:var(--muted);background:var(--code-bg)}
.lib-when{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin-top:2px}
.lib-check{position:absolute;top:8px;left:8px;z-index:3;opacity:0;transition:opacity .12s}
.lib-card:hover .lib-check,.lib-card.sel .lib-check,.lib-card.focus .lib-check,.lib-card:focus-within .lib-check{opacity:1}
.lib-check input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;margin:0}
.lib-pin{position:absolute;top:6px;right:8px;z-index:3;border:0;background:var(--shade);color:var(--on-media-dim);width:26px;height:26px;border-radius:50%;font-size:var(--fs-md);cursor:pointer;opacity:0;transition:opacity .12s}
.lib-card:hover .lib-pin,.lib-pin.on,.lib-card:focus-within .lib-pin{opacity:1}
.lib-pin.on{color:var(--pin-on);background:var(--shade-strong)}
.lib-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.lib-table th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
.lib-table td{padding:8px 8px;border-bottom:1px solid var(--rule);vertical-align:middle;white-space:nowrap}
.lib-table .num{text-align:right;font-family:var(--mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.lib-table tr.sel td{background:var(--accent-soft)}
.lib-table tr.focus td{box-shadow:inset 0 1px 0 var(--accent),inset 0 -1px 0 var(--accent)}
@media (hover:hover){.lib-table tr:hover td{background:color-mix(in srgb,var(--code-bg) 70%,transparent)}}
.lib-table .lib-pin{position:relative;opacity:1;background:transparent;color:var(--rule);width:22px;height:22px;font-size:var(--fs-lg)}
.lib-table .lib-pin.on{color:var(--star);background:transparent}
@media (hover:hover){.lib-table tr:hover .lib-pin:not(.on){color:var(--faint)}}
.lib-c-sel,.lib-c-pin{width:26px}
.lib-c-sel input{accent-color:var(--accent);width:16px;height:16px}
.lib-c-name{white-space:normal!important;min-width:200px}
.lib-c-name a{color:var(--ink);text-decoration:none;display:inline-flex;flex-direction:column;vertical-align:middle}
@media (hover:hover){.lib-c-name a:hover b{color:var(--accent)}}
.lib-c-name small{color:var(--muted);font-size:var(--fs-xs)}
.lib-thumb{display:inline-block;width:54px;height:30px;border-radius:var(--r-sm);overflow:hidden;background:var(--code-bg);vertical-align:middle;margin-right:10px}
.lib-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lib-bw{display:inline-flex;gap:4px;align-items:center}
.lib-c-tags{white-space:normal!important}
.lib-c-tags span{margin:0 4px 4px 0;display:inline-block}
.lib-c-when{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.lib-table.compact td{padding:4px 8px}
.lib-empty{padding:var(--sp-3xl) 0;color:var(--muted)}
.lib-foot{margin-top:var(--sp-xl)}
.lib-foot kbd,.db-keys kbd{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r-sm);padding:0 4px;background:var(--surface)}
.lib-bulk{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:40;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--ink);color:var(--ground);padding:8px 10px 8px var(--sp-lg);border-radius:var(--r-lg);box-shadow:var(--shadow-3);max-width:calc(100vw - 32px)}
.lib-bulk b{font-family:var(--mono);font-size:var(--fs-sm);margin-right:6px}
.lib-bulk .btn-sm{background:transparent;color:var(--ground);border-color:color-mix(in srgb,var(--ground) 30%,transparent)}
@media (hover:hover){.lib-bulk .btn-sm:hover{background:color-mix(in srgb,var(--ground) 14%,transparent)}}
.lib-bulk .btn-sm.danger{color:var(--bad-on-ink);border-color:var(--bad-on-ink)}
.lib-org fieldset{border:0;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.lib-org legend{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin-bottom:6px;padding:0}
.lib-orgchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--rule);border-radius:var(--r-lg);padding:8px 12px;cursor:pointer;font-size:var(--fs-md)}
.lib-orgchip:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.lib-orgchip input{accent-color:var(--accent);margin:0}
.lib-org .db-lbl small{font-weight:400;color:var(--faint);margin-left:6px}
.db-orgline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:0;background:var(--shade);color:var(--on-media);font:inherit;font-size:var(--fs-xs);font-family:var(--mono);padding:6px 10px;border-radius:var(--r-lg);cursor:pointer;margin:8px 0 2px;width:fit-content;max-width:100%}
.db-banner.noart .db-orgline{background:var(--code-bg);color:var(--ink)}
.db-orgline .dim{opacity:.7}
@media (hover:hover){.db-orgline:hover{background:var(--shade-strong)}}
@media (hover:hover){.db-banner.noart .db-orgline:hover{background:var(--rule)}}
@media (width < 1024px){
  .lib{grid-template-columns:minmax(0,1fr)}
  .lib-navbtn{display:inline-flex}
  .lib-nav{display:none;position:static;max-height:none;border:1px solid var(--rule);border-radius:var(--r-lg);padding:8px;background:var(--surface)}
  .lib-nav.open{display:flex}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
  .lib-check,.lib-pin{opacity:1}
}

.lib-nm{display:flex;align-items:center;gap:10px}
.lib-nm .lib-thumb{margin-right:0;flex:none}
.lib-tagrow span,.lib-c-tags span{white-space:nowrap}
.co-dfilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.co-dfilter input{flex:1 1 220px;font:inherit;font-size:var(--fs-md);padding:8px 12px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.co-dfilter select{font:inherit;font-size:var(--fs-md);padding:8px 8px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.me-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.me-chips a{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink);text-decoration:none;border:1px solid var(--rule);background:var(--surface);border-radius:var(--r-pill);padding:4px 10px}
.me-chips a b{color:var(--faint);font-weight:500;margin-left:2px}
@media (hover:hover){.me-chips a:hover{border-color:var(--accent);color:var(--accent)}}

/* ---------------------------------------------------------------- Super Search filters */
#cl-filters b{font-family:var(--mono);font-size:var(--fs-xs);margin-left:4px;background:var(--accent);color:var(--surface);border-radius:var(--r-pill);padding:0 6px}
#cl-filters b:empty{display:none}
.fb{margin:12px 0 4px;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:6px var(--sp-lg) 14px;max-height:min(72vh,760px);max-height:min(72dvh,760px);overflow:auto;scrollbar-width:thin}
.fb-head{position:sticky;top:-6px;z-index:2;background:var(--surface);display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.fb-head>div:first-child{display:flex;flex-direction:column;gap:2px;max-width:70ch}
.fb-head b{font-family:var(--mono);font-size:var(--fs-md)}
.fb-head-r{display:flex;gap:6px}
.fb-sec{border-bottom:1px solid var(--rule)}
.fb-sec:last-child{border-bottom:0}
.fb-sec>summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;padding:12px 0;list-style:none;display:flex;align-items:center;gap:8px}
.fb-sec>summary::-webkit-details-marker{display:none}
.fb-sec>summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-sm);background:var(--code-bg);color:var(--muted);font-size:var(--fs-sm)}
.fb-sec[open]>summary::before{content:"\2212"}
.fb-active{font-size:var(--fs-xs);background:var(--accent);color:var(--surface);border-radius:var(--r-pill);padding:1px 8px}
.fb-sec-b{display:flex;flex-direction:column;gap:14px;padding:0 0 var(--sp-lg)}
.fb-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.fb-l{flex:0 0 100%;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.fb-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.fb-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:6px 10px;border-radius:var(--r-pill);cursor:pointer;transition:border-color .1s,background .1s}
.fb-chip small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
@media (hover:hover){.fb-chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--rule))}}
.fb-chip.inc{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.fb-chip.inc small{color:var(--accent)}
.fb-chip.exc{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn);text-decoration:line-through}
.fb-chip.exc::before{content:"not";font-family:var(--mono);font-size:var(--fs-xs);text-decoration:none;display:inline-block;margin-right:2px}
.fb-colors{display:flex;gap:6px}
.fb-color{border:1.5px solid var(--rule);background:var(--surface);border-radius:var(--r-lg);padding:6px 8px;cursor:pointer;line-height:1}
.fb-color.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.fb-row select,.fb-sel select{font:inherit;font-size:var(--fs-md);color:var(--ink);padding:8px 8px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);max-width:100%}
.fb-anyall{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.fb-anyall button{border:0;background:transparent;font:inherit;font-size:var(--fs-xs);color:var(--muted);padding:2px 8px;cursor:pointer}
.fb-anyall button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.fb-nums{gap:10px var(--sp-lg)}
.fb-num{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.fb-num span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);min-width:0}
.fb-num input{width:74px;font:inherit;font-size:var(--fs-md);padding:6px 8px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.fb-num i{font-style:normal;color:var(--faint);font-size:var(--fs-xs)}
.fb-text,.fb-sel{display:flex;flex-direction:column;gap:4px;flex:1 1 200px}
.fb-text span,.fb-sel span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.fb-text input{font:inherit;font-size:var(--fs-md);padding:8px 10px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.fb-two{align-items:flex-end}
.fb-find{flex:0 1 220px;font:inherit;font-size:var(--fs-sm);padding:6px 10px;border:1.5px solid var(--rule);border-radius:var(--r-pill);background:var(--ground);color:var(--ink)}
.fb input:focus,.fb select:focus{outline:none;border-color:var(--accent)}
@media (width < 720px){.fb{padding:4px 12px 12px;max-height:none}.fb-num input{width:64px}}

/* ---------------------------------------------------------------- Card Eval Sheets */
.ev-head{margin:0 0 var(--sp-lg)}
.ev-head h1{margin:0 0 6px}
.ev-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 var(--sp-lg)}
.ev-set{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:14px var(--sp-lg);color:var(--ink);text-decoration:none;transition:border-color .12s,transform .12s}
@media (hover:hover){.ev-set:hover{border-color:var(--accent);transform:translateY(-1px)}}
.ev-set-code{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--accent)}
.ev-set-code .ss{width:1.6em;height:1.6em;margin-right:4px}
.ev-set b{font-size:var(--fs-xl)}
.ev-set-meta,.ev-set-prog{font-size:var(--fs-sm);color:var(--muted)}
.ev-bar{display:block;height:6px;background:var(--code-bg);border-radius:var(--r-pill);overflow:hidden;flex:1}
.ev-bar i{display:block;height:100%;background:var(--ok);border-radius:var(--r-pill)}
.ev-top{margin-bottom:12px}
.ev-top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.ev-top h1{margin:0;font-size:var(--fs-title)}
.ev-top h1 span{font-family:var(--mono);font-size:var(--fs-md);color:var(--faint);margin-left:6px}
.ev-prog{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);max-width:520px}
.ev-filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 var(--sp-lg);padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ev-fchips{display:flex;flex-wrap:wrap;gap:4px}
.ev-fchips .fb-chip{padding:4px 10px;font-size:var(--fs-sm)}
.ev-filters select,.ev-filters input{font:inherit;font-size:var(--fs-md);padding:6px 10px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.ev-filters input{flex:1 1 160px;min-width:0}
.ev-focus{display:grid;grid-template-columns:minmax(0,336px) minmax(0,1fr);gap:var(--sp-xl);align-items:start}
.ev-card{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.ev-img{width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);box-shadow:var(--shadow-2);display:block}
.ev-text{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:12px 14px;font-size:var(--fs-md);line-height:1.5}
.ev-card:not(.noimg) .ev-text{font-size:var(--fs-sm)}
.ev-text-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ev-text-h b{font-size:var(--fs-lg)}
.ev-text-t{font-size:var(--fs-sm);color:var(--muted);border-bottom:1px solid var(--rule);padding:4px 0 8px;margin-bottom:8px}
.ev-text-t span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin-left:4px}
.ev-text-o{white-space:normal}
.ev-text-pt{text-align:right;font-family:var(--mono);font-weight:700;margin-top:8px}
.ev-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ev-pos{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap}
.ev-grades{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.ev-grades button{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;padding:12px 0;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
@media (hover:hover){.ev-grades button:hover{border-color:var(--accent)}}
.ev-grades button.sug{border-style:dashed;border-color:var(--accent)}
.ev-grades button.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.ev-scale{margin:0;font-size:var(--fs-md);min-height:1.5em}
.ev-machine{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:4px 14px 12px}
.ev-machine summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);padding:8px 0}
.ev-machine summary b{color:var(--accent)}
.ev-mrow{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.ev-mrow>span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.ev-mrow>div{display:flex;flex-wrap:wrap;gap:4px 14px}
.ev-machine label{font-size:var(--fs-md);cursor:pointer}
.ev-machine small{font-family:var(--mono);color:var(--faint)}
.ev-machine input{accent-color:var(--accent)}
.ev-mcheck{display:block;margin:6px 0}
.ev-mfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-xs);color:var(--muted)}
.ev-note{display:flex;flex-direction:column;gap:4px}
.ev-note span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.ev-note textarea,.ev-check-in textarea,.ev-misses textarea{font:inherit;font-size:var(--fs-md);padding:10px 12px;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);resize:vertical;width:100%;box-sizing:border-box}
.ev-keys kbd{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r-sm);padding:0 4px;background:var(--surface)}
.ev-table select,.ev-table input{font:inherit;font-size:var(--fs-sm);padding:4px 6px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.ev-table input{width:100%;min-width:160px}
.ev-check-in{margin-bottom:var(--sp-lg)}
.ev-metric{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);margin:0 0 14px;flex-wrap:wrap}
.ev-metric select{font:inherit;font-family:var(--sans);font-size:var(--fs-md);padding:6px 8px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.ev-score{display:flex;gap:var(--sp-lg);align-items:center;flex-wrap:wrap}
.ev-score .mb-big{flex:0 1 320px}
.ev-tiers{display:grid;gap:8px;max-width:640px}
.ev-tier{display:grid;grid-template-columns:28px minmax(0,150px) minmax(60px,1fr) 70px;gap:10px;align-items:center}
.ev-tier b{font-family:var(--mono);font-size:var(--fs-lg)}
.ev-tbar{height:10px;background:var(--code-bg);border-radius:var(--r-pill);overflow:hidden}
.ev-tbar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.ev-tval{font-family:var(--mono);font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums}
.ev-clusters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-lg)}
.ev-clusters ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:var(--fs-sm)}
.ev-clusters li{display:flex;justify-content:space-between;gap:8px}
.ev-clusters small{color:var(--faint);font-family:var(--mono)}
.ev-hi{color:var(--warn)}
.ev-lo{color:var(--accent)}
.ev-misses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-xl)}
.ev-misses ol{margin:0;padding-left:var(--sp-xl);display:grid;gap:10px}
.ev-miss-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:var(--fs-md)}
.ev-miss-h span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.ev-miss-d{color:var(--faint)!important}
@media (width < 720px){
  .ev-focus{grid-template-columns:minmax(0,1fr)}
  .ev-card{position:static;max-width:336px}
  .ev-grades{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ev-tier{grid-template-columns:24px minmax(0,1fr) 60px;grid-template-areas:"k l v" "b b b"}
  .ev-tier b{grid-area:k}.ev-tier .cl-small{grid-area:l}.ev-tbar{grid-area:b}.ev-tval{grid-area:v}
}

/* ---------------------------------------------------------------- site-wide: app bar, continue strip, key sheet, loading, transitions */
.continue{margin:0 0 var(--sp-2xl)}
.continue .list-head a{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.cont-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cont{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:12px 14px;color:var(--ink);text-decoration:none;transition:border-color .12s,transform .12s}
@media (hover:hover){.cont:hover{border-color:var(--accent);transform:translateY(-1px)}}
.cont-k{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
.cont b{font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cont span:last-child{font-size:var(--fs-sm);color:var(--muted)}
.cont.more{background:transparent;border-style:dashed;justify-content:center}
.keysheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--scrim);padding:var(--sp-lg);animation:ks-in .12s ease-out}
.keysheet-box{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-xl) var(--sp-xl);max-width:520px;width:100%;max-height:85vh;max-height:85dvh;overflow:auto;box-shadow:var(--shadow-3)}
.keysheet h2{font-family:var(--mono);font-size:var(--fs-lg);margin:0 0 14px}
.keysheet dl{display:grid;grid-template-columns:auto 1fr;gap:10px var(--sp-lg);margin:0 0 14px;align-items:baseline}
.keysheet dt{white-space:nowrap}
.keysheet dd{margin:0;font-size:var(--fs-md);color:var(--muted)}
.keysheet i{font-style:normal;font-size:var(--fs-xs);color:var(--faint)}
.keysheet p{font-size:var(--fs-sm);color:var(--faint);margin:0}
.keysheet kbd{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r-sm);padding:1px 6px;background:var(--ground);color:var(--ink)}
@keyframes ks-in{from{opacity:0}to{opacity:1}}
.cl-wait{position:relative}
/* the loading bar fills and empties by transform, which the compositor draws: sliding its gradient (background-position)
   repainted it on the main thread every frame, and that alone slowed reading the card list by about 0.3 s on a slow phone */
.cl-wait::after{content:"";display:block;height:3px;width:min(280px,70%);margin-top:14px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--code-bg),var(--accent));transform-origin:0 50%}
/* endless motion only for people who haven't asked for less (A9 #22): with reduced motion the bar stands still, full */
@media (prefers-reduced-motion:no-preference){.cl-wait::after{animation:wait-fill 1.1s ease-in-out infinite alternate;will-change:transform}}
@keyframes wait-fill{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:reduce){
  .cl-wait::after,.keysheet{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .lib-card,.ev-set,.cont{transition:none;transform:none!important}
}

.db-legal.wip{background:var(--veil);color:inherit;border:1px dashed currentColor}
.db-banner.noart .db-legal.wip{background:var(--code-bg);color:var(--muted);border-color:var(--rule)}
.db-wip h3{color:var(--muted)}
.db-wip ul,.db-wip-list{margin:0 0 6px;padding-left:var(--sp-lg);font-size:var(--fs-md)}
.mb-rules{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:8px 14px;margin:0 0 14px;font-size:var(--fs-md);line-height:1.5}
.mb-rules p{margin:4px 0}
.mr-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 10px}
.mr-controls label{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.mr-controls select{font:inherit;font-family:var(--sans);font-size:var(--fs-md);padding:6px 8px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.mr-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;counter-reset:mr}
.mr-list li{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr) auto;gap:6px 14px;align-items:center;border:1px solid var(--rule);border-radius:var(--r-lg);padding:8px 12px;background:var(--surface)}
.mr-list li.mr-up{border-left:3px solid var(--ok)}
.mr-list li.mr-down{border-left:3px solid var(--warn);opacity:.8}
.mr-main{display:flex;flex-direction:column;min-width:0}
.mr-main small{font-size:var(--fs-xs);color:var(--muted)}
.mr-nums{display:flex;gap:14px;font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.mr-nums span{display:flex;flex-direction:column;align-items:flex-end}
.mr-nums small{font-size:var(--fs-xs);color:var(--faint)}
.mr-up .mr-nums span:first-child{color:var(--ok)}
.mr-why{font-size:var(--fs-xs);color:var(--muted)}
@media (width < 720px){.mr-list li{grid-template-columns:minmax(0,1fr) auto}.mr-why{grid-column:1/-1}.mr-nums{grid-column:1/-1;flex-wrap:wrap}.mr-nums span{align-items:flex-start}}

.cc-fresh{margin:.4rem 0 .6rem;padding:.5rem .7rem;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:var(--fs-md);line-height:1.45;color:var(--ink);border-radius:0 var(--r-md) var(--r-md) 0}

/* Commander bracket, with receipts */
.db-bracket-chip{font:inherit;font-size:var(--fs-sm);border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:var(--r-pill);padding:.15rem .6rem;cursor:pointer}
@media (hover:hover){.db-bracket-chip:hover{border-color:var(--accent)}}
.db-bracket-chip.b3{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.db-bracket-chip.b4{border-color:var(--warn);background:var(--warn-bg);color:var(--warn);font-weight:700}
.br-head{display:grid;gap:.35rem;margin-bottom:.75rem}
.br-verdict{margin:0;font-size:var(--fs-xl);line-height:1.2;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.br-verdict span{font-size:var(--fs-lg);color:var(--muted)}
.br-push{border-left:3px solid var(--warn-line);background:var(--warn-bg);padding:.5rem .8rem;border-radius:0 var(--r-md) var(--r-md) 0;margin:.25rem 0 .9rem}
.br-push ul{margin:.25rem 0 0;padding-left:1.1rem}
.br-push li{margin:.2rem 0;line-height:1.45}
.br-list{display:grid;gap:.9rem;margin:0}
.br-list>div{display:grid;grid-template-columns:minmax(9rem,12rem) 1fr;gap:.35rem 1rem;border-top:1px solid var(--rule);padding-top:.7rem}
.br-list dt{font-weight:700;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.br-list dd{margin:0;min-width:0}
.br-list dd p{margin:.1rem 0 .35rem}
.br-tag{font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;border-radius:var(--r-sm);padding:.05rem .4rem;border:1px solid var(--rule);color:var(--muted);background:var(--surface)}
.br-tag.b2{color:var(--ink)}
.br-tag.b3{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.br-tag.b4{border-color:var(--warn);background:var(--warn-bg);color:var(--warn);font-weight:700}
.br-tag.ok{color:var(--ok);border-color:var(--rule)}
.br-combos,.br-simple{list-style:none;margin:0 0 .4rem;padding:0;display:grid;gap:.45rem}
.br-combos li{display:grid;gap:.1rem}
.br-res{font-size:var(--fs-md)}
.br-facts{font-size:var(--fs-sm);color:var(--muted)}
.br-receipts{margin-top:1rem;border-top:1px solid var(--rule);padding-top:.6rem;font-size:var(--fs-md);line-height:1.5}
.br-receipts summary{cursor:pointer;color:var(--accent);font-weight:500}
.br-receipts p{margin:.5rem 0;max-width:72ch}
@media (width < 720px){.br-list>div{grid-template-columns:1fr}}

/* quick filters: the common ones, one click each, above the full menu */
.qf{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:10px 0 2px;font-size:var(--fs-sm)}
.qf-g{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.qf-l{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin-right:2px}
.qf-c{border:1.5px solid var(--rule);background:var(--surface);border-radius:var(--r-md);padding:4px 6px;cursor:pointer;line-height:1}
.qf-c.on{border-color:var(--accent);background:var(--accent-soft)}
.qf-chip{border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:4px 10px;border-radius:var(--r-pill);cursor:pointer}
@media (hover:hover){.qf-chip:hover,.qf-c:hover{border-color:var(--accent)}}
.qf-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.qf-end{margin-left:auto}
.qf-all,.qf-clear{font:inherit;font-size:var(--fs-sm);background:none;border:0;color:var(--accent);cursor:pointer;padding:4px 4px;text-decoration:underline;text-underline-offset:3px}
.qf-clear{color:var(--muted)}
@media (width < 720px){.qf{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.qf-g{flex-wrap:nowrap;flex-shrink:0}.qf-end{margin-left:0}}

/* the deck you're brewing, on Super Search */
.brew{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0;padding:8px 12px;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm)}
.brew-l{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.brew-name{font-weight:700;color:var(--ink)}
.brew-meta,.brew-hint{color:var(--muted)}
.brew select{font:inherit;font-size:var(--fs-sm);max-width:14rem}
.brew #brew-off{margin-left:auto}
.cl-tw{position:relative}
.cl-add{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font:700 var(--fs-xl)/1 var(--sans);cursor:pointer;box-shadow:var(--shadow-1);opacity:.92;transition:transform .12s,opacity .12s}
@media (hover:hover){.cl-add:hover{opacity:1;transform:scale(1.08)}}
.cl-add.pulse{transform:scale(1.25)}
.cl-inbrew{position:absolute;left:8px;top:8px;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-lg);background:var(--ink);color:var(--ground);font:700 var(--fs-xs)/24px var(--mono);text-align:center;box-shadow:var(--shadow-1)}
.cl-table .cl-addcol{width:64px;white-space:nowrap}
.cl-table .cl-add,.cl-text .cl-add{position:relative;width:26px;height:26px;font-size:var(--fs-lg);box-shadow:none;vertical-align:middle}
.cl-table .cl-inbrew,.cl-text .cl-inbrew{position:static;display:inline-block;margin-left:6px;height:20px;line-height:20px;min-width:20px;vertical-align:middle;box-shadow:none}
.cl-text header .cl-add{margin-left:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms-toast-act{margin-left:14px;background:none;border:0;color:var(--ground);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* quick view: a big look at one card, everything else dimmed */
/* the lock sits on body (it reaches the viewport all the same): overflow set on html restyles every element on the page */
html.qv-open body{overflow:hidden}
.qv{position:fixed;inset:0;z-index:85;background:var(--scrim-strong);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:max(var(--sp-lg),env(safe-area-inset-top,0px)) var(--sp-lg) max(var(--sp-lg),env(safe-area-inset-bottom,0px));overflow-y:auto}
.qv-box{position:relative;display:grid;grid-template-columns:minmax(0,336px) minmax(0,1fr);gap:var(--sp-xl);width:min(900px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-xl);box-shadow:var(--shadow-3)}
.qv-x{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:none;color:var(--muted);font-size:var(--fs-xl);cursor:pointer;border-radius:var(--r-md);z-index:2}
@media (hover:hover){.qv-x:hover{background:var(--code-bg);color:var(--ink)}}
.qv-nav{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:var(--r-lg);background:var(--veil);color:var(--on-media);font-size:var(--fs-title);cursor:pointer}
@media (hover:hover){.qv-nav:hover:not(:disabled){background:var(--veil-strong)}}
.qv-nav:disabled{opacity:.25;cursor:default}
.qv-nav.prev{left:14px}.qv-nav.next{right:14px}
.qv-art{display:flex;flex-direction:column;gap:10px;align-items:center}
.qv-art img,.qv-art .cl-fallback{width:100%;max-width:336px;aspect-ratio:488/680;height:auto;border-radius:var(--r-card);background:var(--code-bg)}
.qv-art img{display:block}
.qv-art .cl-fallback{font-size:var(--fs-md);padding:var(--sp-lg)}
.qv-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.qv-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-right:var(--sp-2xl)}
.qv-head h2{margin:0;font-size:var(--fs-xl);line-height:1.2;text-wrap:balance}
.qv-type{margin:0;color:var(--muted)}
.qv-flags{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.qv-flag{font-family:var(--mono);font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--muted)}
.qv-flag.gc{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.qv-flag.new{border-color:var(--accent);color:var(--accent)}
.qv-oracle p,.qv-main .cc-face p{margin:.25rem 0;line-height:1.5}
.qv-main .cc-face{border-top:1px solid var(--rule);padding-top:6px}
.qv-stats{font-family:var(--mono);margin:0}
.qv-roles{margin:2px 0 0}
.qv-facts{display:flex;flex-wrap:wrap;gap:6px var(--sp-xl);margin:4px 0 0}
.qv-facts div{display:flex;flex-direction:column}
.qv-facts dt{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.qv-facts dd{margin:0;font-variant-numeric:tabular-nums}
.qv-facts .qv-sets{flex-basis:100%}
.qv-sets dd{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:var(--fs-xl)}
.qv-sets dd a,.qv-sets dd span[title]{color:var(--ink);display:inline-flex;padding:2px;border-radius:var(--r-sm)}
.qv-sets dd a:focus-visible{background:var(--accent-soft)}@media (hover:hover){.qv-sets dd a:hover{background:var(--accent-soft)}}
.qv-sets dd .cl-muted{font-size:var(--fs-xs);font-family:var(--mono)}
.qv-legal{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:4px}
.qv-legal li{display:flex;justify-content:space-between;gap:6px;font-size:var(--fs-xs);padding:4px 8px;border-radius:var(--r-md);background:var(--code-bg)}
.qv-legal li b{font-weight:500;color:var(--faint)}
.qv-legal .lg-legal{background:var(--ok-soft)}.qv-legal .lg-legal b{color:var(--ok)}
.qv-legal .lg-banned b{color:var(--bad)}.qv-legal .lg-restricted b{color:var(--warn)}
.qv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.qv-keys{margin:4px 0 0}
@media (width < 720px){.qv{align-items:flex-start}.qv-box{grid-template-columns:1fr;padding:var(--sp-lg);max-height:none}.qv-art img,.qv-art .cl-fallback{max-width:260px}.qv-nav{top:auto;bottom:14px;transform:none;height:48px}}
/* the card view's parts (stuff.js): one overlay showing at a time (the one underneath waits, hidden); a top bar with back,
   forward, the one link to the full card page and close; the artist under the picture; the page's own part under the
   name. On a phone it is a full-screen sheet */
.ms-under{visibility:hidden!important}
.qv-box{--qvpad:var(--sp-xl)}
.qv-navs{display:contents}
.qv-top,.qv-rest{display:flex;flex-direction:column;gap:8px;min-width:0}
.qv-top .qv-head{padding-right:0}
.qv-head h2:focus:not(:focus-visible){outline:none}
.qv-bar{grid-column:1/-1;position:sticky;top:calc(-1 * var(--qvpad));z-index:3;display:flex;align-items:center;gap:6px;min-width:0;margin:calc(-1 * var(--qvpad)) calc(-1 * var(--qvpad)) 0;padding:8px var(--sp-md) 8px var(--sp-lg);background:var(--surface);border-bottom:1px solid var(--rule);border-radius:var(--r-lg) var(--r-lg) 0 0}
.qv-bar.ds-qvbar{padding:6px var(--sp-md) 8px var(--sp-lg)}
.qv-bar .qv-x{position:static;float:none;flex:none;margin-left:auto;width:40px;height:40px;background:none}
.qv-bar .qv-full~.qv-x{margin-left:0}
.qv-hb{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:var(--fs-xl);line-height:1;cursor:pointer}
@media (hover:hover){.qv-hb:hover:not(:disabled){background:var(--code-bg)}}
.qv-hb:disabled{opacity:.35;cursor:default}
.qv-full{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);color:var(--accent);font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}
.qv-full:focus-visible{background:var(--accent-soft)}@media (hover:hover){.qv-full:hover{background:var(--accent-soft)}}
.qv-credit{margin:0;max-width:336px;font-size:var(--fs-xs);line-height:1.4;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.qv-ctx{margin:4px 0;padding:var(--sp-md);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);min-width:0}
.qv-ctx .db-insp{display:block}
.qv-ctx .db-insp-body>*:last-child{margin-bottom:0}
.qv-ctxh{margin:0 0 8px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.qv-ctx details.db-more>summary{cursor:pointer;color:var(--accent);font-size:var(--fs-md);padding:4px 0}
.qv-rel{margin:4px 0 0}
.qv-rel h3{margin:0 0 4px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint)}
.qv-rellist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.qv-rellist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qv-rellist .cl-muted{font-size:var(--fs-xs);font-family:var(--mono)}
/* the picture is a button (a tap shows it large, inside the view); a section asked for inside the view (add to a deck,
   add to a binder, move some) sits under the name with a row back to the card; "back to N things to fix" in the bar */
.qv-zoomb{display:block;width:100%;max-width:336px;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-card)}
.qv-zoomb img{width:100%}
.qv-box.qv-zoomed{grid-template-columns:minmax(0,1fr)}
.qv-zoomed .qv-main{display:none}
.qv-zoomed .qv-zoomb{max-width:min(100%,calc((100dvh - 190px) * 488 / 680));margin:0 auto;cursor:zoom-out}
.qv-zoomed .qv-art img,.qv-zoomed .qv-art .cl-fallback{max-width:none}
.qv-backto{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-sub{margin:4px 0;padding:var(--sp-md);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground)}
.qv-subrow{margin:0 0 8px}
.qv-subbox h2{font-size:var(--fs-lg);margin:0 0 8px}
.qv-subbox .ms-qa{grid-template-columns:120px minmax(0,1fr);gap:var(--sp-md)}
.gf-handhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.gf-handhead .gf-h{margin:0}
.gf-quick[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.gf-moves{display:flex;flex-wrap:wrap;gap:8px}
.tr-qvline{list-style:none;margin:0 0 6px;padding:0}
.tr-qvside{margin:0}
/* the deck's fix list: a panel under the header that stays open while you work through it */
.db-fix{margin:12px 0;padding:var(--sp-md) var(--sp-lg);border:1px solid var(--warn-line);border-radius:var(--r-lg);background:var(--surface)}
.db-fix-top{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 0 6px}
.db-fix-top h2{margin:0;font-size:var(--fs-lg)}
.db-fix-list{margin:0;padding-left:1.4em;display:grid;gap:6px}
.db-fix-row{padding:4px 0}
.db-fix-row .db-fix-name{flex:none;display:inline;white-space:normal;font-weight:700}
.db-fix-msg{color:var(--ink)}
.db-fix-acts{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:8px;vertical-align:middle}
.db-fix-swaps{margin:6px 0 2px}
@media (pointer:coarse){.qv-hb,.qv-bar .qv-x{width:44px;height:44px}.qv-full{min-height:44px}.qv-backto{min-height:44px}.db-fix-row .db-fix-name{min-height:44px;display:inline-flex;align-items:center}.qv-rellist a,.co-top a[data-peek],.co-misslist a[data-peek],.me-list a[data-peek]{display:inline-flex;align-items:center;min-height:44px}}
@media (width < 720px){
  .qv{padding:0;align-items:flex-start;scroll-padding:64px 0 84px}
  .qv-box{--qvpad:var(--sp-lg);width:100%;min-height:100%;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0 var(--qvpad) max(var(--sp-2xl),env(safe-area-inset-bottom,0px))}
  .qv-bar{top:0;margin:0 calc(-1 * var(--qvpad));padding:max(6px,env(safe-area-inset-top,0px)) var(--sp-sm) 6px;border-radius:0}
  .qv-bar.ds-qvbar{padding:max(6px,env(safe-area-inset-top,0px)) var(--sp-sm) 8px}
  /* opened from your own list (deck, collection, trade, the goldfish table): a small picture strip, then that list's
     controls; the whole picture is one tap away */
  .qv-own .qv-art{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
  .qv-own .qv-zoomb{width:72px;flex:none}
  .qv-own .qv-credit{text-align:left;flex:1;max-width:none}
  .qv-own.qv-zoomed .qv-art{flex-direction:column;align-items:center}
  .qv-own.qv-zoomed .qv-zoomb{width:100%}
  .qv-backto{max-width:52vw}
  .qv-subbox .ms-qa{grid-template-columns:minmax(0,1fr)}
  .qv-subbox .ms-qa img{max-width:120px}
}
/* the card's name, its cost, then "full card page", the first control after the name; moving inside the view in words */
.qv-head .qv-full{margin-left:auto;align-self:center}
.qv-fwd{flex:none;white-space:nowrap}
@media (pointer:coarse){.qv-fwd{min-height:44px}}
/* a card's picture as large as the screen allows (stuff.js MS.bigPicture, the card page's picture tapped): never cropped */
.bigpic{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm);padding:0 var(--sp-lg) max(var(--sp-lg),env(safe-area-inset-bottom,0px));background:var(--surface);overflow-y:auto}
.bigpic-bar{position:sticky;top:0;z-index:1;align-self:stretch;display:flex;align-items:center;padding:max(8px,env(safe-area-inset-top,0px)) 0 8px;background:var(--surface)}
.bigpic-img{display:block;flex:none;padding:0;border:0;background:var(--code-bg);cursor:zoom-out;width:min(100%,calc((100dvh - 130px) * 488 / 680));aspect-ratio:488/680;border-radius:var(--r-card);overflow:hidden}
.bigpic-img img{display:block;width:100%;height:100%;object-fit:contain}
.bigpic-credit{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.cc-zoomb{display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;border-radius:inherit}
.cc-zoomb img{display:block;width:100%;height:100%;object-fit:contain}

/* deck builder: group by types, roles, flat, or your own categories */
.db-groupby{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.db-ctl-l{font-size:var(--fs-sm);color:var(--muted)}
.db-groupby select{font:inherit;font-size:var(--fs-sm)}
.db-cats{border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;margin:0 0 14px;background:var(--surface)}
.db-cats-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:8px}
.db-catlist{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.db-catlist li{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--rule);border-radius:var(--r-md);padding:4px 6px 4px 10px;font-size:var(--fs-sm);background:var(--ground)}
.db-catlist li.drop,.db-stack.drop,.db-lgroup.drop{border-color:var(--accent);background:var(--accent-soft)}
.db-catn{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.db-catbtns{display:inline-flex;gap:2px}
.db-catbtns button{font:inherit;font-size:var(--fs-xs);border:0;background:none;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:var(--r-sm)}
@media (hover:hover){.db-catbtns button:hover:not(:disabled){background:var(--code-bg);color:var(--ink)}}
.db-catbtns button:disabled{opacity:.35;cursor:default}
.db-catedit{font:inherit;font-size:var(--fs-sm);width:12rem;max-width:50vw}
.db-catnew{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.db-catnew input{font:inherit;font-size:var(--fs-sm);flex:1 1 16rem;min-width:0;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.db-catpre{display:inline-flex;flex-wrap:wrap;gap:4px}
.db-catpre .fb-chip{font-size:var(--fs-xs);padding:4px 10px}
.db-stack,.db-lgroup{border:1.5px solid transparent;border-radius:var(--r-md);transition:border-color .1s,background .1s}
[draggable="true"].dragging{opacity:.45}

.cl-tablewrap{overflow-x:auto;max-width:100%}

.mb-keeps{margin:0 0 12px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.mb-keeps p{margin:.2rem 0}

.db-gf-ctrl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:var(--fs-sm);margin:0 0 10px}
.db-gf-ctrl input,.db-gf-ctrl select{font:inherit;font-size:var(--fs-sm);max-width:16rem}
.db-hcard{border:0;padding:0;background:none;cursor:pointer;border-radius:var(--r-card);overflow:hidden}
@media (hover:hover){.db-hcard:hover{outline:2px solid var(--accent);outline-offset:2px}}

.db-mark.rot{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.db-rot ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:2px}

/* Meta Lens */
.mt-lede{color:var(--muted);max-width:68ch;margin:6px 0 0;line-height:1.5}
.mt-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);padding:10px 0 8px;border-bottom:1px solid var(--rule);margin:14px 0 var(--sp-lg);display:grid;gap:8px}
.mt-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.mt-tabs button{font:inherit;font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap;border:1.5px solid var(--rule);background:var(--surface);color:var(--muted);padding:6px 12px;border-radius:var(--r-md);cursor:pointer}
.mt-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.mt-ctrls{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:var(--fs-sm)}
.mt-seg{display:inline-flex}
.mt-seg button.off{color:var(--faint);border-style:dashed;cursor:help}
.mt-seg button.off small{font-size:var(--fs-xs)}
.mt-feednote{margin:8px 0 0;padding:8px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-sm);max-width:90ch}
.mt-seg button{font-family:var(--mono);font-size:var(--fs-xs);background:var(--surface);color:var(--muted);border:1px solid var(--rule);padding:4px 10px;margin-left:-1px;cursor:pointer}
.mt-seg button:first-child{border-radius:var(--r-md) 0 0 var(--r-md);margin-left:0}.mt-seg button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.mt-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);position:relative;z-index:1}
.mt-sel select{font:inherit;font-size:var(--fs-sm)}
.mt-kinds{display:inline-flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted)}
.mt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 var(--sp-lg)}
.mt-kpi{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.mt-kpi b{font-family:var(--mono);font-size:var(--fs-num);font-variant-numeric:tabular-nums}
.mt-kpi span{font-size:var(--fs-xs);color:var(--muted)}
.mt-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-lg);align-items:start}
.mt-table{width:100%}
.mt-main,.mt-side{min-width:0}
.mt-table th button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0;font-weight:700}
.mt-table tbody tr{cursor:pointer}
@media (hover:hover){.mt-table tbody tr:hover{background:var(--accent-soft)}}
.mt-table tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mt-name{min-width:14rem}
.mt-alink{font:inherit;background:none;border:0;padding:0;color:var(--ink);font-weight:700;cursor:pointer;text-align:left}
@media (hover:hover){.mt-alink:hover{color:var(--accent);text-decoration:underline}}
.mt-n{margin-left:8px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.mt-tag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);border:1px solid var(--rule);border-radius:var(--r-sm);padding:0 4px;margin-left:4px}
.mt-cols{display:inline-flex;gap:1px;margin-right:6px;vertical-align:-2px}
.mt-sharec{position:relative;min-width:6.5rem}
.mt-bar-i{position:absolute;left:0;top:50%;height:6px;margin-top:-4px;background:var(--accent-soft);border-radius:var(--r-sm);z-index:0}
.mt-sharec b{position:relative;z-index:1;font-variant-numeric:tabular-nums}
.mt-table td small{display:block;font-size:var(--fs-xs);color:var(--faint);font-variant-numeric:tabular-nums}
.mt-up{color:var(--ok)}.mt-down{color:var(--bad)}
.mt-trend{color:var(--accent);width:92px}
.mt-spark{display:block}
.mt-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px var(--sp-lg);margin:0 0 var(--sp-lg)}
.mt-side .mt-card{margin:0}
.mt-h{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);margin:0 0 10px;font-weight:700}
.mt-h3{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin:14px 0 6px}
.mt-clist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.mt-clist li{display:flex;flex-direction:column;font-size:var(--fs-md)}
.mt-clist a{color:var(--ink);font-weight:500}
.mt-cmeta{font-size:var(--fs-xs);color:var(--muted)}
.mt-design .mt-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px var(--sp-xl)}
.mt-dline{display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule)}
.mt-dl{font-weight:700;font-size:var(--fs-md)}
.mt-dline b{font-family:var(--mono);font-size:var(--fs-xl)}
.mt-dx{font-size:var(--fs-sm);color:var(--muted)}
.mt-dtop{grid-column:1/-1;font-size:var(--fs-sm)}
.mt-meth{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-xs);color:var(--muted);margin:0 0 4px}
.mt-tough{padding:8px 0;border-top:1px solid var(--rule)}
.mt-tough p{margin:4px 0}
.mt-tgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.mt-tgrid span{display:flex;flex-direction:column;align-items:center;background:var(--code-bg);border-radius:var(--r-md);padding:4px 0}
.mt-tgrid i{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.mt-tgrid b{font-family:var(--mono);font-size:var(--fs-sm)}
/* the field: a diverging scale around 50% (blue above, red below, gray midpoint), always beside the number it repeats */
/* Meta Lens's heat colors: e_compete.css (.mt --fx-*, from --up and --down); the blue first draft is gone (October 22) */
.mt-flede{margin:0 0 10px;color:var(--muted);font-size:var(--fs-md);line-height:1.5;max-width:80ch}
.mt-fctrl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:var(--fs-sm);margin:0 0 8px}
.mt-fscope,.mt-fprior{font-size:var(--fs-sm);line-height:1.5;max-width:80ch;margin:0 0 8px}
.mt-fnote{margin:8px 0 0;padding:10px 12px;border:1px dashed var(--rule);border-radius:var(--r-md);color:var(--muted);font-size:var(--fs-md);max-width:80ch}
.mt-fnote p{margin:0 0 6px}.mt-fnote p:last-child{margin:0}.mt-fnote b{color:var(--ink)}
.mt-fset{display:flex;flex-wrap:wrap;gap:6px}
.mt-fxbox{position:relative}
.mt-fxwrap{max-width:100%}
.mt-fx{border-collapse:separate;border-spacing:2px;font-size:var(--fs-xs)}
.mt-fx thead th{position:relative;vertical-align:bottom;height:7.5rem;font-weight:500;padding:2px 4px}
.mt-fx thead th span[aria-hidden]{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.mt-fx thead th.mt-fxc,.mt-fx tbody th{position:sticky;left:0;z-index:1;background:var(--surface)}
.mt-fx tbody th{text-align:left;font-weight:500;font-size:var(--fs-sm);line-height:1.25;padding:2px 8px 2px 0;min-width:7.5rem;max-width:11rem}
.mt-fx td{padding:0;border-radius:var(--r-sm);background:var(--fx-0)}
.mt-fx td button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.5rem;height:2.7rem;border:0;margin:0;padding:0;background:none;color:var(--ink);font:inherit;cursor:pointer;border-radius:var(--r-sm);font-variant-numeric:tabular-nums}
@media (hover:hover){.mt-fx td button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.mt-fx td button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mt-fx td b{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700}
.mt-fx td small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink)}
.mt-fx td.fx-none b{font-weight:400;color:var(--muted)}
.mt-fx td.mt-fxm{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.mt-fx td.mt-fxm small{color:var(--muted)}
.mt-fx td.fx-p1,.mt-flegs.fx-p1 i{background:var(--fx-p1)}.mt-fx td.fx-p2,.mt-flegs.fx-p2 i{background:var(--fx-p2)}.mt-fx td.fx-p3,.mt-flegs.fx-p3 i{background:var(--fx-p3)}
.mt-fx td.fx-m1,.mt-flegs.fx-m1 i{background:var(--fx-m1)}.mt-fx td.fx-m2,.mt-flegs.fx-m2 i{background:var(--fx-m2)}.mt-fx td.fx-m3,.mt-flegs.fx-m3 i{background:var(--fx-m3)}
.mt-flegs.fx-0 i{background:var(--fx-0)}
.mt-fxtip{position:absolute;z-index:5;width:max-content;max-width:min(22rem,calc(100vw - 40px));background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:8px 10px;font-size:var(--fs-sm);line-height:1.45;pointer-events:none}
.mt-fxtip p{margin:4px 0 0}
.mt-fk{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.mt-fleg{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin:8px 0 4px}
.mt-flegs{display:inline-flex;align-items:center;gap:4px}
.mt-flegs i{width:14px;height:14px;border-radius:var(--r-sm);display:inline-block;box-shadow:inset 0 0 0 1px var(--rule)}
.mt-flegl{font-family:var(--sans);font-size:var(--fs-xs)}
.mt-field .db-tablewrap{margin:2px 0 8px}
.mt-ftab td small{display:block;font-size:var(--fs-xs);color:var(--faint);font-variant-numeric:tabular-nums}
.mt-ftab th button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0;font-weight:700;text-align:inherit}
.mt-ftab .mt-name{min-width:11rem}
.mt-fcap{caption-side:top;text-align:left;font-size:var(--fs-xs);color:var(--muted);padding:0 0 4px}
.mt-fmute{color:var(--muted)}
.mt-fcav{margin:12px 0 0;max-width:80ch}
@media (width < 720px){.mt-fx tbody th{min-width:6.5rem;max-width:8rem;font-size:var(--fs-xs)}.mt-ftab .mt-name{min-width:9rem}}
.mt-events summary{cursor:pointer;list-style:none}.mt-events summary h2{display:inline}
.mt-elist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:var(--fs-sm)}
.mt-elist li{display:flex;flex-wrap:wrap;gap:4px 10px}
.mt-edate{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);min-width:3.6rem}
.mt-receipts{margin:6px 0 var(--sp-xl);border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px var(--sp-lg);background:var(--surface)}
.mt-receipts summary{cursor:pointer;color:var(--accent);font-weight:500}
.mt-rc{font-size:var(--fs-md);line-height:1.55;max-width:80ch}
.mt-rc ul{margin:4px 0 10px;padding-left:1.1rem}
.mt-cov{margin:6px 0 12px;font-size:var(--fs-sm)}
.mt-empty{padding:var(--sp-2xl) 0;color:var(--muted)}
/* one archetype, up close */
.mt-drawer{position:fixed;inset:0;z-index:84;background:var(--scrim);display:flex;justify-content:flex-end}
.mt-dbox{position:relative;width:min(980px,100%);height:100%;overflow-y:auto;background:var(--ground);color:var(--ink);padding:var(--sp-xl) var(--sp-xl) max(var(--sp-xl),env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-side)}
.mt-dh h2{margin:0;font-size:var(--fs-xl);display:flex;align-items:center;gap:8px;padding-right:var(--sp-3xl)}
.mt-dsum{margin:6px 0 10px;color:var(--muted);line-height:1.5}
.mt-dsum b{color:var(--ink)}
.mt-dacts{display:flex;flex-wrap:wrap;gap:8px}
.mt-dcols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-xl);margin-top:8px}
.mt-avg{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mt-avg li{display:grid;grid-template-columns:70px 3rem 2.4rem 1fr;gap:8px;align-items:center;font-size:var(--fs-md)}
.mt-avg li.spice{color:var(--muted)}
.mt-avg b{font-family:var(--mono);font-size:var(--fs-xs);text-align:right;font-weight:500}
.mt-cp{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);text-align:right}
.mt-inc{height:6px;background:var(--code-bg);border-radius:var(--r-sm);overflow:hidden}
.mt-inc i{display:block;height:100%;background:var(--accent)}
.mt-avg li.flex .mt-inc i{opacity:.6}.mt-avg li.spice .mt-inc i{opacity:.3}
.mt-avg a,.mt-lists a,.mt-mu button{color:var(--ink)}
.mt-mu{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mt-mu li{display:grid;grid-template-columns:1fr auto 3.4rem;gap:8px;align-items:baseline;font-size:var(--fs-sm)}
.mt-mu b{font-family:var(--mono)}.mt-mu small{font-family:var(--mono);color:var(--faint);text-align:right}
.mt-lists{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt-lists li{display:grid;grid-template-columns:3.2rem minmax(0,10rem) minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule);font-size:var(--fs-sm)}
.mt-fin{font-family:var(--mono);font-weight:700}
.mt-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-ev{color:var(--muted)}
.mt-lacts{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px}
.mt-list{grid-column:1/-1}
.mt-lcols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg);font-size:var(--fs-sm)}
.mt-lcols ul{list-style:none;margin:4px 0 0;padding:0}
.mt-lcols li span{display:inline-block;width:1.6rem;font-family:var(--mono);color:var(--faint)}
.mt-copy{width:100%;font-family:var(--mono);font-size:var(--fs-sm)}
@media (width < 1024px){.mt-layout{grid-template-columns:minmax(0,1fr)}.mt-design .mt-dgrid{grid-template-columns:1fr}.mt-dcols{grid-template-columns:1fr}}
@media (width < 720px){.mt-name{min-width:10rem}.mt-trendh,.mt-trend{display:none}.mt-dbox{padding:var(--sp-lg)}.mt-lists li{grid-template-columns:3rem 1fr}.mt-ev{grid-column:1/-1}.mt-lacts{grid-column:1/-1}.mt-lcols{grid-template-columns:1fr}.mt-avg li{grid-template-columns:48px 2.6rem 2rem 1fr}}

/* filters: everything clickable, nothing to type */
.fb-live{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);margin-left:6px}
.fb-live b{color:var(--accent)}
.fb-jump{position:sticky;top:-6px;z-index:2;display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;background:var(--surface);padding:8px 0;margin:4px 0 0;border-bottom:1px solid var(--rule)}
.fb-jump button{font:inherit;font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap;border:1px solid var(--rule);background:var(--ground);color:var(--muted);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer}
@media (hover:hover){.fb-jump button:hover{border-color:var(--accent);color:var(--accent)}}
.fb-jump button b{color:var(--accent)}
.fb-recipes .fb-chip{background:var(--ground)}
.fb-subs{border:1px dashed var(--rule);border-radius:var(--r-lg);padding:6px 10px}
.fb-subs summary{cursor:pointer;font-size:var(--fs-sm);color:var(--accent)}
.fb-sub{margin:10px 0}
.fb-sub .fb-l small{color:var(--faint)}
.fb-range .fb-chip{min-width:2.4rem;justify-content:center;font-family:var(--mono)}
.fb-atl{display:grid;grid-template-columns:minmax(9rem,12rem) 1fr;align-items:center;gap:8px}
.fb-atl .fb-chip{font-family:var(--mono);min-width:2.6rem;justify-content:center}
.fb-sel select{max-width:100%}
@media (width < 720px){.fb-atl{grid-template-columns:1fr}}
.fb-sec{scroll-margin-top:56px}
.fb-subs>summary{list-style:revert}

/* real symbols inside text */
.cc-head .mana .sym{width:1.35em;height:1.35em}
.cl-oracle .sym,.cc-oracle .sym,.qv-oracle .sym{vertical-align:-.2em}
.qf-c .sym,.fb-color .sym{width:1.25em;height:1.25em}
.qf-chip .ss{margin-right:4px}
.qf-more{color:var(--accent)}
/* the set picker */
.sp{position:absolute;z-index:88;width:min(700px,calc(100vw - 24px))}
.sp-box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-height:min(70vh,640px);max-height:min(70dvh,640px)}
.sp-head{display:flex;gap:10px;align-items:center;padding:12px 14px 8px;position:relative}
.sp-head b{font-family:var(--mono);font-size:var(--fs-sm)}
.sp-find{flex:1;min-width:0;font:inherit;font-size:var(--fs-sm);padding:6px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.sp-x{position:static}
.sp-kinds{display:flex;gap:4px;padding:0 14px 8px;overflow-x:auto;border-bottom:1px solid var(--rule)}
.sp-kinds button{font:inherit;font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap;border:1px solid var(--rule);background:var(--ground);color:var(--muted);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer}
.sp-kinds button[aria-selected="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.sp-list{overflow-y:auto;padding:6px 14px 14px}
.sp-y h3{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--faint);margin:12px 0 6px;position:sticky;top:-6px;background:var(--surface);padding:4px 0}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px}
.sp-set{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;border:1px solid transparent;background:none;color:var(--ink);border-radius:var(--r-md);padding:6px 8px;cursor:pointer}
.sp-set:focus-visible{border-color:var(--accent);background:var(--accent-soft)}@media (hover:hover){.sp-set:hover{border-color:var(--accent);background:var(--accent-soft)}}
.sp-set.on{border-color:var(--accent);background:var(--accent-soft)}
.sp-set .ss{width:1.7em;height:1.7em;color:var(--ink)}
.ss-none{display:inline-block;width:1.7em;height:1.7em}
.sp-set span{display:flex;flex-direction:column;min-width:0}
.sp-set b{font-weight:500;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-set small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
@media (width < 720px){.sp{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%}.sp-box{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:80vh;max-height:80dvh}}
.sp-head,.sp-kinds{flex:none}

/* ---------------------------------------------------------------- Wildcard Planner */
.btn-xs{font-family:var(--mono);font-size:var(--fs-xs);padding:4px 8px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;line-height:1.3}
@media (hover:hover){.btn-xs:hover:not([disabled]){border-color:var(--accent)}}
.btn-xs[disabled]{opacity:.4;cursor:default}
.wc{--wc-c:#2B2F36;--wc-u:linear-gradient(135deg,#4f5d68 0%,#c6d0d8 48%,#6b7984 100%);--wc-r:linear-gradient(135deg,#8d6a1f 0%,#f2cf72 48%,#9a7526 100%);--wc-m:linear-gradient(135deg,#b23a12 0%,#f7a43b 48%,#c24a16 100%)}
:root[data-theme="dark"] .wc{--wc-c:#C9CED8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wc{--wc-c:#C9CED8}}
.wc-hero{margin:8px 0 var(--sp-lg)}
.wc-lede{font-size:var(--fs-xl);max-width:62ch;margin:6px 0 8px}
.wc-cite{font-size:var(--fs-sm);color:var(--muted);max-width:80ch;margin:0}
.wc-h{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:0 0 10px}
.wc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wc-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-lg);margin:0 0 var(--sp-lg)}
.wc-wallet,.wc-coll,.wc-sec{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px var(--sp-lg)}
.wc-sec{margin:0 0 var(--sp-lg)}
.wc-coll p{margin:0 0 10px}
.wc-wcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 8px}
.wc-wci{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 8px;align-items:center;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.wc-wci span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.wc-wci input{grid-column:1/-1;width:100%;font-family:var(--mono);font-size:var(--fs-xl);font-variant-numeric:tabular-nums;border:1px solid var(--rule);border-radius:var(--r-md);padding:4px 8px;background:var(--surface);color:var(--ink)}
.wc-wci i,.wc-rc i,.wc-bl i{display:inline-block;width:.78em;height:1.08em;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--swatch-ring);flex:none}
.wc-c i{background:var(--wc-c)}.wc-u i{background:var(--wc-u)}.wc-r i{background:var(--wc-r)}.wc-m i{background:var(--wc-m)}
.wc-rc{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;margin-right:10px;white-space:nowrap}
.wc-rc b{font-weight:700}
.wc-sechead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px var(--sp-lg);margin:0 0 12px}
.wc-sechead .wc-h{margin:0}
.wc-targets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.wc-t{border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--ground)}
.wc-t.off{opacity:.62}
.wc-thead{display:flex;align-items:flex-start;gap:10px}
.wc-tn{font-family:var(--mono);font-size:var(--fs-xs);width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.wc-tt{display:flex;flex-direction:column;min-width:0;flex:1}
.wc-tt b{overflow-wrap:anywhere}
.wc-tt span{font-size:var(--fs-sm)}
.wc-toggle{font-size:var(--fs-sm);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.wc-tcost{display:flex;flex-wrap:wrap;align-items:center;min-height:1.4em}
.wc-prog{height:6px;border-radius:var(--r-sm);background:var(--code-bg);overflow:hidden}
.wc-prog i{display:block;height:100%;background:var(--ok)}
.wc-tnotes{font-size:var(--fs-sm);color:var(--muted);margin:0}
.wc-tacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wc-tacts select{font-family:var(--mono);font-size:var(--fs-xs);padding:4px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.wc-good{color:var(--ok)}
.wc-bad{color:var(--bad)}
.wc-ok{font-size:var(--fs-sm);color:var(--ok)}
.wc-empty{max-width:70ch}
.wc-billgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wc-b{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.wc-bl{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.wc-b b{font-family:var(--mono);font-size:var(--fs-num);font-variant-numeric:tabular-nums;line-height:1.2}
.wc-b span{font-size:var(--fs-sm)}
.wc-short{color:var(--bad);font-weight:700}
.wc-packs{margin:12px 0 0;max-width:80ch}
.wc-step-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:var(--sp-lg) 0 8px}
.wc-step-h:first-of-type{margin-top:4px}
.wc-step-h h3{font-size:var(--fs-lg);margin:0}
.wc-step-h p{flex-basis:100%;margin:0}
.wc-stepn{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
.wc-table td{vertical-align:top}
.wc-table .wc-rar .wc-rc{margin:0}
.wc-name{min-width:200px}
.wc-name a{font-weight:500}
.wc-flags{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
.wc-out{margin:4px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.wc-flag{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--r-sm);background:var(--code-bg);color:var(--muted)}
.wc-flag.rot{background:var(--warn-bg);color:var(--warn)}
.wc-flag.bad{color:var(--bad)}
.wc-note{font-size:var(--fs-sm);margin:4px 0 0}
.wc-note summary{cursor:pointer;color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs)}
.wc-note p{margin:4px 0 0;max-width:60ch}
.wc-users{white-space:nowrap}
.wc-user{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:var(--fs-xs);margin-right:4px}
.wc-step{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.wc-step button{width:24px;height:24px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);cursor:pointer;font-family:var(--mono)}
.wc-step button[disabled]{opacity:.35;cursor:default}
.wc-table td.num small{display:block;font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap}
.wc-acts{white-space:nowrap}
.wc-acts .btn-xs+.btn-xs{margin-left:4px}
.wc-altrow td{background:var(--ground)}
.wc-alts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.wc-alts li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.wc-later{border-style:dashed}
.wc-receipts{margin:0 0 var(--sp-lg);font-size:var(--fs-md)}
.wc-receipts summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.wc-rcpts ul{padding-left:var(--sp-lg)}
.wc-rcpts li{margin:0 0 6px;max-width:80ch}
.wc-otabs{display:flex;gap:6px;margin:0 0 8px}
.wc-otabs button{font-family:var(--mono);font-size:var(--fs-xs);padding:6px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);cursor:pointer}
.wc-otabs button[aria-selected="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.wc-omode{border:0;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.wc-dlist{list-style:none;padding:0;margin:8px 0;max-height:50vh;max-height:50dvh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.wc-dlist label{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.wc-copytext{width:100%;font-family:var(--mono);font-size:var(--fs-sm)}
@media (width < 720px){
  .wc-table,.wc-table tbody{display:block}
  .wc-table thead{display:none}
  .wc-table tr[data-k]{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 0;border-bottom:1px solid var(--rule)}
  .wc-table tr[data-k] td{display:block;padding:0;border:0}
  .wc-table td.wc-rar{order:0}
  .wc-table td.wc-name{order:1;flex:1 1 60%;min-width:0}
  .wc-table td[data-l]{order:2;display:inline-flex;align-items:center;gap:6px}
  .wc-table td[data-l]::before{content:attr(data-l);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
  .wc-table td.num small{display:inline;margin-left:6px}
  .wc-table td.wc-acts{order:3;flex-basis:100%}
  .wc-altrow,.wc-altrow td{display:block}
}
@media (width < 720px){
  .wc-top{grid-template-columns:minmax(0,1fr)}
  .wc-wcs,.wc-billgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-name{min-width:150px}
}

/* ---------------------------------------------------------------- how the numbers are made (every tool page) */
.how{margin:var(--sp-2xl) 0 10px;border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 14px;background:var(--surface)}
.how summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm)}
.how[open] summary{margin-bottom:6px}
.how-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:4px var(--sp-2xl)}
.how-sec h3{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin:14px 0 6px}
.how-sec p{font-size:var(--fs-md);line-height:1.55;margin:0 0 8px;max-width:68ch}
.how-f{margin:6px 0 10px}
.how-f code{display:block;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.5;background:var(--code-bg);border-radius:var(--r-md);padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.how-src{margin:0 0 8px;padding-left:var(--sp-lg);font-size:var(--fs-md);line-height:1.5}
.how-src li{margin:0 0 6px}

/* ---------------------------------------------------------------- King Goldfish */
.gf{--gf-w:128px}
.gf-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px var(--sp-lg);align-items:center;margin:4px 0 12px}
.gf-deck,.gf-game{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gf-lbl{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.gf-lbl select,.gf-lbl input{font-family:var(--mono);font-size:var(--fs-sm);padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);max-width:240px}
.gf-lbl input{width:120px}
.gf-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--sp-lg);padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);margin:0 0 12px;font-size:var(--fs-md);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.gf-status b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.gf-turn{font-family:var(--mono);font-size:var(--fs-md)}
.gf-life{display:inline-flex;align-items:center;gap:4px}
.gf-life b{min-width:2.2em;text-align:center;font-size:var(--fs-xl)}
.gf-acts{margin-left:auto;display:inline-flex;gap:6px}
.gf-dead{color:var(--accent)}
.gf-mull{border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg);padding:10px 14px;margin:0 0 12px}
.gf-mull p{margin:0 0 8px}
.gf-judge{margin:10px 0 0}
.gf-jt th{font-weight:500}
.gf-jt tr.gf-diff th,.gf-jt tr.gf-diff td{border-top:1.5px solid var(--rule);font-weight:700}
.gf-zone{margin:0 0 14px}
.gf-h{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.gf-h span{font-weight:400}
.gf-cmdz{text-transform:none;letter-spacing:0;font-weight:400}
.gf-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;min-height:40px}
.gf-bf{border:1px dashed var(--rule);border-radius:var(--r-lg);padding:10px 12px;background:var(--ground)}
.gf-lands{margin-top:10px;--gf-w:96px}
.gf-perms{--gf-w:112px}
.gf-card{position:relative;width:var(--gf-w);padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-sm);transition:transform .12s;flex:none;color:var(--ink)}
.gf-card img,.gf-card .cl-fallback{width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);display:block;background:var(--code-bg)}
.gf-card .cl-fallback{font-size:var(--fs-xs);padding:6px;line-height:1.3}
.gf-card.tapped{transform:rotate(90deg);margin:0 calc(var(--gf-w) * .2)}
.gf-card.sel{outline:3px solid var(--accent);outline-offset:2px}
.gf-card.picked{outline:3px dashed var(--warn);outline-offset:2px;padding-bottom:var(--sp-xl)}
.gf-card.picked::after{content:"bottom";position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-xs);background:var(--ink);color:var(--ground);padding:2px 6px;border-radius:var(--r-sm)}
.gf-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gf-odds{position:absolute;left:4px;right:4px;top:46%;font-family:var(--mono);font-size:var(--fs-xs);text-align:center;padding:2px 4px;border-radius:var(--r-sm);background:var(--glass);color:var(--on-media)}
.gf-odds{background:linear-gradient(90deg,var(--veil-strong) var(--p,0%),transparent var(--p,0%)),var(--glass)}
.gf-odds.now{background:var(--accent-fill)}
.gf-menu{display:flex;flex-direction:column;gap:2px;min-width:170px;max-width:220px;padding:8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-2);font-size:var(--fs-sm)}
.gf-menu b{font-size:var(--fs-sm);margin:0 0 4px}
.gf-menu button,.gf-menu a{text-align:left;padding:6px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:inherit;cursor:pointer;text-decoration:none}
.gf-menu button:focus-visible{background:var(--accent-soft)}@media (hover:hover){.gf-menu button:hover,.gf-menu a:hover{background:var(--accent-soft)}}
.gf-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 14px}
.gf-side .gf-zone{border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;background:var(--surface);margin:0}
.gf-poolrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gf-mana{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono)}
.gf-mana .sym{width:1.3em;height:1.3em}
.gf-mana button{width:32px;height:32px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-family:var(--mono);cursor:pointer;touch-action:manipulation}
.gf-mana b{min-width:1.4em;text-align:center}
.gf-pile{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto;font-size:var(--fs-sm)}
.gf-plist{list-style:none;padding:0;margin:8px 0;max-height:55vh;max-height:55dvh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.gf-plist li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gf-plist li span{flex:1;min-width:140px}
.gf-log{margin:0 0 14px;border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 12px;background:var(--surface)}
.gf-log summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm)}
.gf-log ol{margin:8px 0 0;padding-left:var(--sp-xl);max-height:240px;overflow:auto;font-size:var(--fs-sm)}
.gf-report{border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 14px;background:var(--surface);margin:0 0 14px}
@media (width < 720px){
  .gf{--gf-w:96px}
  .gf-lands{--gf-w:76px}
  .gf-perms{--gf-w:86px}
  .gf-status{gap:6px 12px}
  .gf-acts{margin-left:0}
}

/* card page: the printing up top, its foil mark, printings with pictures, tokens */
.cc-frame{position:relative;border-radius:5.4%/3.9%}
.cc-frame .cc-imgwrap{position:relative;z-index:1}
.cc-frame.is-foil::before{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:0;background:conic-gradient(from var(--foil-a,0deg),var(--foil-stops))}
@media (prefers-reduced-motion:no-preference){.cc-frame.is-foil::before{animation:cc-foil 6s linear infinite}}
.cc-frame.is-etched::before{background:conic-gradient(from var(--foil-a,0deg),var(--etched-stops))}
@property --foil-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cc-foil{to{--foil-a:360deg}}
@media (prefers-reduced-motion:reduce){.cc-frame.is-foil::before{animation:none}}
.cc-showing{margin:10px 0 0;font-size:var(--fs-sm);line-height:1.5;min-height:0}
.cc-showing:empty{display:none}
.cc-foiltag{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--r-pill);background:var(--foiltag-strip);color:var(--foiltag-ink);border:1px solid var(--rule)}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.cc-ptools{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin:0 0 12px}
.cc-pchips{display:flex;flex-wrap:wrap;gap:6px}
.cc-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:14px 12px}
.cc-pt{display:flex;flex-direction:column;gap:4px;min-width:0;padding:4px;border:2px solid transparent;border-radius:var(--r-lg)}
.cc-pt.on{border-color:var(--accent);background:var(--accent-soft)}
.cc-pt-img{border:0;padding:0;background:none;cursor:pointer;display:block;border-radius:var(--r-card)}
.cc-pt-img img,.cc-pt .cl-fallback{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.cc-pt .cl-fallback{font-size:var(--fs-xs);padding:6px;gap:4px}
.cc-pt-set{font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-pt-v{font-size:var(--fs-xs);color:var(--muted);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-pt-f{display:flex;flex-wrap:wrap;gap:4px}
.cc-fin{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:var(--r-pill);padding:2px 6px;cursor:pointer;white-space:nowrap}
.cc-fin.is-foil{background:linear-gradient(90deg,color-mix(in srgb,var(--foil-pink) 14%,var(--surface)),color-mix(in srgb,var(--foil-blue) 14%,var(--surface)))}
.cc-fin.on{border-color:var(--accent);color:var(--accent)}
/* a finish and its price wrap inside a narrow printing tile rather than spill out of it (etched foil $80.20 at 768 px) */
.cc-pt-f .cc-fin{white-space:normal;max-width:100%;min-width:0;text-align:left;overflow-wrap:anywhere}
.cc-prints tr.on td{background:var(--accent-soft)}
.cc-toks{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--pic)),1fr));gap:var(--sp-lg)}
.cc-tok{margin:0;display:flex;flex-direction:column;gap:6px}
.cc-tok-img{border:0;padding:0;background:none;display:block;cursor:default;border-radius:var(--r-card)}
.cc-tok-img[data-flip]{cursor:pointer}
.cc-tok img,.cc-tok .cl-fallback{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg);box-shadow:var(--shadow-2)}
.cc-tok figcaption{font-size:var(--fs-sm);line-height:1.35}
.cc-tok figcaption .cl-muted{display:block;font-size:var(--fs-xs)}
.cl-scroll{overflow-x:auto;max-width:100%}

.mt-lview{margin:0 0 10px}
.mt-pics>b{display:block;font-size:var(--fs-sm);margin:6px 0 8px}
.mt-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(104px * var(--pic)),1fr));gap:10px;margin-bottom:12px}
.mt-pt{position:relative;display:block;border-radius:var(--r-card)}
.mt-pt img,.mt-pt .cl-fallback{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.mt-pt .cl-fallback{font-size:var(--fs-xs);padding:6px;gap:4px}
.mt-pq{position:absolute;left:5px;top:13%;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;border-radius:var(--r-pill);background:var(--glass);color:var(--on-media);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700}

/* Manabase+: the land plan */
.mr-plan{border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg);padding:12px 14px;margin:0 0 14px}
.mr-plan h4{margin-top:0}
.mr-plan ol{margin:0 0 8px;padding-left:var(--sp-xl);display:grid;gap:8px}
.mr-plan li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.mr-plan li small{grid-column:1/-1;color:var(--muted);font-size:var(--fs-sm)}
.mr-plan li .mr-apply{grid-column:1/-1;justify-self:start}
.mr-pd{font-family:var(--mono);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mr-catch{display:block;color:var(--warn);font-size:var(--fs-xs)}
.gf-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ================================================================ Life Log */
.lf-setup{display:grid;gap:var(--sp-lg);max-width:760px;margin:var(--sp-lg) 0 8px}
.lf-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg) var(--sp-lg);display:grid;gap:12px}
.lf-card h2{margin:0}
.lf-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.lf-l{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);min-width:9.5rem}
.lf-row select,.lf-row input[type=number],.lf-row input:not([type]){font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
.lf-row input[type=number]{width:5.5rem}
.lf-check{display:inline-flex;gap:8px;align-items:center;font-size:var(--fs-md)}
.lf-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.lf-names label{display:flex;align-items:center;gap:8px}
.lf-names input{flex:1;min-width:0;font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
.lf-dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.lf-resume{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px var(--sp-lg);border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg)}
.lf-past{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lf-past li{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;align-items:center;font-size:var(--fs-md);padding:6px 0;border-bottom:1px solid var(--rule)}
/* the table: the page gives way to the game */
body.lf-playing{overflow:hidden}
body.lf-playing #lf-app{position:fixed;inset:0;z-index:40;background:var(--ground);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.lf-table{flex:1;display:flex;gap:6px;padding:6px;min-height:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.lf-rows{flex-direction:column}
.lf-cols{flex-direction:row}
.lf-line{flex:1;display:flex;gap:6px;min-width:0;min-height:0}
.lf-cols .lf-line{flex-direction:column}
.lf-seat{position:relative;flex:1;min-width:0;min-height:0;border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--c) 16%,var(--surface));border:2px solid color-mix(in srgb,var(--c) 45%,var(--rule));transition:border-color .15s,box-shadow .15s}
.lf-seat.lf-active{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 35%,transparent)}
.lf-seat.lf-dead{filter:grayscale(.85);opacity:.7}
.lf-in{position:absolute;top:50%;left:50%;display:grid;grid-template-rows:auto 1fr auto;container-type:size;transform-origin:50% 50%}
.lf-top{display:flex;justify-content:center;padding:6px 8px 0}
.lf-name{font:inherit;font-family:var(--mono);font-size:clamp(var(--fs-xs),6cqmin,18px);font-weight:700;color:var(--ink);background:none;border:0;padding:4px 10px;border-radius:var(--r-pill);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-name:focus-visible{background:color-mix(in srgb,var(--c) 22%,transparent)}@media (hover:hover){.lf-name:hover{background:color-mix(in srgb,var(--c) 22%,transparent)}}
.lf-turn{font-size:.72em;font-weight:500;color:var(--on-media);background:var(--c);border-radius:var(--r-pill);padding:1px 8px;margin-left:4px;vertical-align:2px}
.lf-life{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;min-height:0}
.lf-tap{border:0;background:none;color:color-mix(in srgb,var(--ink) 65%,transparent);font-size:clamp(20px,11cqmin,48px);font-family:var(--mono);cursor:pointer;display:flex;align-items:center;padding:0 6%;min-width:0}
.lf-minus{justify-content:flex-start}.lf-plus{justify-content:flex-end}
.lf-tap:focus-visible{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink);outline:none}@media (hover:hover){.lf-tap:hover{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink);outline:none}}
.lf-tap:active{background:color-mix(in srgb,var(--c) 22%,transparent)}
.lf-num{display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;min-width:0}
.lf-num b{font-family:var(--mono);font-weight:700;font-size:clamp(40px,34cqmin,200px);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.lf-num em{font-style:normal;font-family:var(--mono);font-size:clamp(14px,8cqmin,34px);font-weight:700;color:var(--c);margin-top:2px}
.lf-num small{font-size:clamp(var(--fs-xs),4.5cqmin,15px);color:var(--bad);margin-top:4px;text-align:center}
.lf-life.out .lf-num b{text-decoration:line-through;text-decoration-thickness:3px}
.lf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0 8px 8px}
.lf-chip{font-family:var(--mono);font-size:clamp(var(--fs-xs),4.2cqmin,14px);border:1.5px solid color-mix(in srgb,var(--c) 40%,var(--rule));background:var(--surface);color:var(--muted);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer;min-height:30px;display:inline-flex;align-items:center;gap:4px}
.lf-chip.on{color:var(--ink);border-color:var(--c)}
.lf-chip.lf-cmd{border-left:6px solid var(--cc)}
.lf-chip.lf-cmd small{font-size:.85em;color:var(--muted)}
.lf-chip.hot{background:var(--warn-bg);border-color:var(--warn-line)}
.lf-tag{cursor:default;background:var(--c);color:var(--surface);border-color:var(--c)}
.lf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);background:var(--surface)}
.lf-where{flex:1;min-width:8rem;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);text-align:center}
.lf-where b{color:var(--ink)}
.lf-panel{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--sp-lg)}
.lf-pbox{position:relative;width:min(560px,100%);max-height:88vh;max-height:88dvh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg) var(--sp-lg) var(--sp-lg);display:grid;gap:10px}
.lf-pbox h2{font-family:var(--mono);font-size:var(--fs-xl);margin:0 var(--sp-2xl) 4px 0}
.lf-step{display:grid;grid-template-columns:minmax(0,1fr) auto 3.2rem auto;gap:8px;align-items:center;font-size:var(--fs-md);padding:4px 0;border-bottom:1px solid var(--rule)}
.lf-step b{font-family:var(--mono);text-align:center;font-variant-numeric:tabular-nums}
.lf-step .btn-xs{min-width:36px;min-height:32px;font-size:var(--fs-lg)}
.lf-colors{gap:6px}
.lf-sw{width:30px;height:30px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--rule);cursor:pointer}
.lf-sw[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--ink)}
.lf-roll{font-family:var(--mono);font-size:var(--fs-title);font-weight:700;text-align:center;min-height:1.4em;margin:6px 0 0}
.lf-logbox{position:fixed;right:0;top:0;bottom:var(--lf-barh,0px);z-index:50;width:min(420px,92vw);background:var(--surface);border-left:1px solid var(--rule);box-shadow:var(--shadow-side);display:flex;flex-direction:column;padding:12px 14px env(safe-area-inset-bottom,0px)}
.lf-loghead{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px}
.lf-log{list-style:none;margin:0;padding:0;overflow:auto;display:grid;gap:0;align-content:start}
.lf-e{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;gap:8px;align-items:baseline;font-size:var(--fs-md);padding:6px 0;border-bottom:1px solid var(--rule)}
.lf-t{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);display:grid}
.lf-t small{font-size:var(--fs-xs)}
.lf-e.undone span:not(.lf-t){text-decoration:line-through;color:var(--faint)}
.lf-e em{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn);text-decoration:none;display:inline-block}
.lf-k-turn{background:var(--code-bg)}
.lf-k-turn span:not(.lf-t){font-weight:700}
.lf-k-out span:not(.lf-t){color:var(--bad);font-weight:700}
.lf-recbox{width:min(720px,100%)}
.lf-copy{width:100%;font-family:var(--mono);font-size:var(--fs-sm)}
@media (width < 720px){.lf-l{min-width:0;width:100%}.lf-bar .btn-sm{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){.lf-seat{transition:none}}

/* ================================================================ Film Room */
.fr{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px}
.fr-empty{display:grid;gap:14px;max-width:820px}
.fr-drop{border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--rule));border-radius:var(--r-lg);padding:var(--sp-xl) var(--sp-xl);background:var(--surface);display:grid;gap:6px;text-align:center;transition:background .15s,border-color .15s}
.fr-drop p{margin:0}
.fr-dragging .fr-drop,.fr-dragging .fr-top{background:var(--accent-soft);border-color:var(--accent)}
.fr-pick{cursor:pointer;display:inline-block}
.fr-prog{height:6px;border-radius:var(--r-pill);background:var(--code-bg);overflow:hidden}
.fr-prog span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.fr-how{border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px var(--sp-lg);background:var(--surface);max-width:820px}
.fr-how summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-md)}
.fr-how ol{display:grid;gap:10px;margin:12px 0 8px;padding-left:1.3em;font-size:var(--fs-md)}
.fr-how ul{margin:8px 0 0;padding-left:1.1em;display:grid;gap:8px}
.fr-path{font-size:var(--fs-sm);word-break:break-all;background:var(--code-bg);border-radius:var(--r-sm);padding:2px 6px}
.fr-sample p{margin:0;flex:1 1 20rem}
.fr-sample{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-lg);font-size:var(--fs-md)}
.fr-top{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.fr-filters{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.fr-filters label{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);color:var(--muted)}
.fr-filters select{font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;max-width:14rem}
.fr-stats{margin:0}
.fr-stats div{min-width:128px}
.fr-tabs{flex-wrap:wrap}
.fr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fr-m{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.fr-m.open{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule))}
.fr-mhead{width:100%;display:grid;grid-template-columns:8.6rem 5.4rem minmax(0,1fr) auto;grid-template-areas:"when res vs gs" "when res ev ev";gap:2px 12px;align-items:center;text-align:left;font:inherit;font-size:var(--fs-md);color:var(--ink);background:none;border:0;padding:10px 12px;cursor:pointer}
.fr-mhead:focus-visible{background:color-mix(in srgb,var(--accent) 6%,transparent)}@media (hover:hover){.fr-mhead:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}}
.fr-when{grid-area:when;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.fr-mhead>.fr-res{grid-area:res;justify-self:start}
.fr-vs{grid-area:vs;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-gs{grid-area:gs;display:flex;gap:4px}
.fr-ev{grid-area:ev;font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-has{font-weight:500;color:var(--accent)}
.fr-res{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:2px 10px;border:1px solid transparent;white-space:nowrap}
.fr-W{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.fr-L{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.fr-D,.fr-u{color:var(--muted);background:var(--code-bg)}
.fr-g{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-md);border:1px solid transparent}
.fr-g sub{font-size:var(--fs-xs);font-weight:500;margin-left:1px}
.fr-pips{display:inline-flex;gap:1px;margin-right:6px;vertical-align:-2px}
.fr-pips .sym{width:15px;height:15px}
.fr-detail{border-top:1px solid var(--rule);padding:12px 14px 14px;display:grid;gap:10px;background:var(--ground)}
.fr-detail p{margin:0}
.fr-game{display:grid;gap:6px;padding:8px 10px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md)}
.fr-game b{font-family:var(--mono);font-size:var(--fs-sm);margin-right:4px}
.fr-seen,.fr-side,.fr-cards{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-md)}
.fr-card{font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer;text-align:left}
span.fr-card{cursor:default}
.fr-card small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin-left:4px}
button.fr-card:focus-visible{border-color:var(--accent);color:var(--accent)}@media (hover:hover){button.fr-card:hover{border-color:var(--accent);color:var(--accent)}}
.fr-unk{color:var(--muted);font-style:italic}
.fr-note{display:grid;gap:6px}
.fr-note textarea{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;resize:vertical;width:100%;box-sizing:border-box}
.fr-tags{display:flex;flex-wrap:wrap;gap:6px}
.fr-tag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer}
.fr-tag[aria-pressed="true"]{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}
.fr-tw{overflow-x:auto}
.fr-t{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
.fr-t th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.fr-t td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top;font-variant-numeric:tabular-nums}
.fr-t td:first-child{min-width:10rem}
.fr-confirm{border:1.5px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-lg);padding:12px 14px;display:grid;gap:10px;max-width:640px}
.fr-confirm p{margin:0}
.fr-confirm select{font:inherit;font-size:var(--fs-md);padding:6px 8px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);color:var(--ink);max-width:100%}
.fr-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--rule))}
.fr-lastimp{margin:0}
@media (width < 720px){
  .fr-mhead{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"res vs gs" "when ev ev";font-size:var(--fs-md)}
  .fr-when{font-size:var(--fs-xs)}
  .fr-filters select{max-width:10rem}
}

/* ================================================================ Draft Sim */
.ds{display:grid;gap:14px;margin-top:14px}
.ds-setup{display:grid;gap:var(--sp-lg);max-width:780px}
.ds-setup input#ds-seed{font:inherit;font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;width:14rem;max-width:100%}
.ds-setup select{max-width:100%}
.ds-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);font-size:var(--fs-md)}
.ds-head code{font-size:var(--fs-sm)}
.ds-where{display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);align-items:baseline}
.ds-where h2{margin:0;font-family:var(--mono);font-size:var(--fs-xl)}
.ds-pack,.ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--pic)),1fr));gap:12px}
.ds-grid{grid-template-columns:repeat(auto-fill,minmax(calc(112px * var(--pic)),1fr));gap:8px}
.ds-slot{position:relative;min-width:0}
.ds-card{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-card);transition:transform .12s,box-shadow .12s}
.ds-card img,.ds-card .cl-fallback{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.ds-card .cl-fallback{font-size:var(--fs-xs);padding:8px;gap:4px;line-height:1.3;text-align:left}
.ds-grid .ds-card .cl-fallback{font-size:var(--fs-xs);padding:6px;gap:4px}
.ds-card:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 3px var(--accent),var(--shadow-2);outline:none}@media (hover:hover){.ds-card:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--accent),var(--shadow-2);outline:none}}
.ds-basic{outline:1.5px dashed var(--rule);outline-offset:3px}
.ds-val{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;background:var(--ink);color:var(--surface);border-radius:var(--r-pill);padding:2px 10px;box-shadow:var(--shadow-1)}
.ds-pool{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.ds-pool h3{margin:0}
.ds-colors{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.ds-cc{display:inline-flex;gap:4px;align-items:center;font-family:var(--mono);font-size:var(--fs-sm)}
.ds-picks{display:flex;flex-wrap:wrap;gap:6px}
.ds-curve{display:flex;gap:6px;align-items:flex-end;height:84px;max-width:360px}
.ds-curve span{flex:1;display:grid;grid-template-rows:1fr auto auto;align-items:end;justify-items:center;height:100%;font-family:var(--mono)}
.ds-curve i{display:block;width:100%;background:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--r-sm) var(--r-sm) 0 0;min-height:2px}
.ds-curve b{font-size:var(--fs-xs);font-weight:500}
.ds-curve small{font-size:var(--fs-xs);color:var(--muted)}
.ds-drill{display:grid;gap:12px;padding:var(--sp-lg) var(--sp-lg);border:1.5px solid var(--accent);border-radius:var(--r-lg);background:var(--accent-soft);max-width:860px}
.ds-drill h2,.ds-drill p{margin:0}
.ds-drillpick{display:flex;flex-wrap:wrap;gap:8px}
.ds-dc{font:inherit;font-family:var(--mono);font-size:var(--fs-md);display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.ds-dc[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.ds-drillres{display:grid;gap:10px}
.ds-drillres p{margin:0}
.ds-open td{background:var(--accent-soft);font-weight:700}
.ds-deckhead{display:grid;gap:10px}
.ds-deckhead p{margin:0}
.ds-warn{color:var(--warn)}
.ds-basics{display:flex;flex-wrap:wrap;gap:8px 14px}
.ds-bas{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono)}
.ds-bas b{min-width:1.6em;text-align:center}
.ds-review{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ds-rv{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-md);border-left-width:4px}
.ds-rvn{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);padding-top:4px}
.ds-g{font-family:var(--mono);font-size:var(--fs-xs);padding-top:4px;white-space:nowrap}
.ds-body{display:grid;gap:12px}
.ds-body h3{margin:6px 0 0}
.ds-seg{flex-wrap:wrap;row-gap:4px;max-width:100%}
.ds-note{margin:0;max-width:70ch}
.ds-timer{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums;padding:2px 10px;border:1.5px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);min-width:4.2em;text-align:center}
.ds-timer.ds-low{border-color:var(--bad);color:var(--bad)}
.ds-pc::after{content:"%"}
.ds-buildclock{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.ds-buildclock .ds-timer{font-size:var(--fs-lg)}
.ds-facedown p{margin:0}
.ds-rev .ms-row{align-items:center}
.ds-qvbar{grid-column:1/-1;min-width:0;max-width:100%;position:sticky;top:0;z-index:2;display:flex;flex-wrap:nowrap;gap:8px 10px;align-items:center;padding:6px 0 8px;background:var(--surface);border-bottom:1px solid var(--rule)}
.ds-qvbar .qv-x{position:static;float:none;order:3;margin-left:auto;flex:0 0 auto}
.ds-qvbar .btn-sm{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.3}
.ds-qvbar .ds-timer{flex:0 0 auto;font-size:var(--fs-lg)}
@media (width < 720px){.qv-box.qv-hasbar{overflow:visible}}
.ds-tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);position:relative;z-index:1}
.ds-pairnote{margin-top:-4px}
.ds-handed{border-left-color:var(--rule)}
.ds-away{margin:0;padding:8px 12px;border:1px solid var(--warn-line);border-radius:var(--r-md);background:var(--warn-bg);color:var(--ink);font-size:var(--fs-md)}
@media (width < 720px){.ds-seats thead{display:none}.ds-seats,.ds-seats tbody{display:block}.ds-seats tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--rule)}.ds-seats td{border:0;padding:2px 0}.ds-seats td.ds-seat{grid-column:1/-1;font-weight:700}.ds-seats td.fr-cards{grid-column:1/-1}.ds-seats td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:var(--fs-xs);font-family:var(--mono)}
.ds-pack{grid-template-columns:repeat(var(--pc2),minmax(0,1fr));gap:10px}.ds-grid{grid-template-columns:repeat(var(--pc3),minmax(0,1fr))}.ds-rv{grid-template-columns:2.8rem minmax(0,1fr)}.ds-g{grid-column:2}}

/* ================================================================ Cube Generator */
.cb{display:grid;gap:14px;margin-top:14px}
.cb-home{display:grid;gap:var(--sp-lg);max-width:820px}
.cb-home input#cb-seed,.cb-home input#cb-budget{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px}
.cb-home input#cb-seed{font-family:var(--mono);width:12rem;max-width:100%}
.cb-home input#cb-budget{width:7rem}
.cb-home textarea,.cb-export textarea{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;width:100%;box-sizing:border-box;resize:vertical}
.cb-top{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.cb-title{display:grid;gap:2px;min-width:0;flex:1 1 18rem}
.cb-title input{font:inherit;font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;color:var(--ink);background:none;border:1px solid transparent;border-radius:var(--r-md);padding:2px 6px;margin-left:-6px;max-width:100%}
.cb-title input:focus{border-color:var(--rule);background:var(--ground)}@media (hover:hover){.cb-title input:hover{border-color:var(--rule);background:var(--ground)}}
.cb-body{display:grid;gap:12px}
.cb-add{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.cb-add input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;width:18rem;max-width:100%}
.cb-addbox{display:inline-block;max-width:100%}
.cb-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-items:start}
.cb-col{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:10px 12px}
.cb-col :is(h2,h3){margin:0 0 6px;display:flex;gap:6px;align-items:center}
.cb-col ul{list-style:none;margin:0;padding:0;display:grid}
.cb-col li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;font-size:var(--fs-md);border-bottom:1px solid var(--rule);padding:4px 0}
.cb-col li:last-child{border-bottom:0}
.cb-card{font:inherit;font-size:var(--fs-md);color:var(--ink);background:none;border:0;padding:2px 0;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-card:focus-visible{color:var(--accent)}@media (hover:hover){.cb-card:hover{color:var(--accent)}}
.cb-col .mana .sym{width:13px;height:13px}
.cb-x{font:inherit;font-size:var(--fs-lg);line-height:1;color:var(--faint);background:none;border:0;cursor:pointer;padding:2px 4px;border-radius:var(--r-sm)}
.cb-x:focus-visible{color:var(--bad);background:var(--code-bg)}@media (hover:hover){.cb-x:hover{color:var(--bad);background:var(--code-bg)}}
.cb-flags{margin:0;padding:10px 14px 10px var(--sp-2xl);border:1px solid var(--rule);background:var(--code-bg);border-radius:var(--r-lg);display:grid;gap:4px;font-size:var(--fs-md)}
.cb-ok{margin:0;padding:10px 14px;border:1px solid var(--rule);background:var(--code-bg);border-radius:var(--r-lg);font-size:var(--fs-md)}
.cb-export{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-lg)}
.cb-export section{display:grid;gap:8px}
.cb-export h3,.cb-export p{margin:0}
.cb-night{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.cb-night label{display:grid;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.cb-night input:not([type=checkbox]){font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px}
.cb-night input[type=number]{width:4.5rem}
.cb-ncols{display:flex;gap:8px;align-items:center;padding-bottom:6px}
.cb-ncols label{display:inline-flex;gap:4px;align-items:center}
/* Cube Generator: sets, rules, the planner, balance against a night, sharing and printing (September 25, 2026) */
.cb-build .mt-seg,.cb-plan .mt-seg,.cb-setbar .mt-seg,.ds-rotbar .mt-seg{flex-wrap:wrap;row-gap:4px}
.cb-sets{display:grid;gap:10px}
.cb-setlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;max-height:22rem;overflow-y:auto;overscroll-behavior:contain;padding:2px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.cb-set{display:grid;gap:2px;text-align:left;font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;min-height:44px;cursor:pointer}
.cb-set span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.cb-set:focus-visible{border-color:var(--accent)}@media (hover:hover){.cb-set:hover{border-color:var(--accent)}}
.cb-set[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.cb-chosen .fr-t{font-size:var(--fs-sm)}
.cb-unset{font:inherit;font-size:var(--fs-lg);line-height:1;min-width:32px;min-height:32px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--muted);cursor:pointer}
.cb-unset:focus-visible{color:var(--bad);border-color:var(--bad)}@media (hover:hover){.cb-unset:hover{color:var(--bad);border-color:var(--bad)}}
.cb-rules{border:1px solid var(--rule);border-radius:var(--r-lg);padding:8px 12px;background:var(--ground)}
.cb-rules>summary,.cb-thrs>summary,.cb-rulesx>summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);min-height:32px;display:flex;align-items:center}
.cb-rules[open]{display:grid;gap:10px}
.cb-fs{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;min-width:0}
.cb-fs legend{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);padding:0 0 4px;width:100%}
.cb-chk{min-height:32px}
.cb-per{display:inline-flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:var(--fs-sm)}
.cb-per input,.cb-rules input[type=number],.cb-build input[type=number],#cb-psize,.cb-thr input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;width:5rem}
.cb-inline{display:inline-flex}
.cb-funnel h3{margin:0 0 4px}
.cb-fun{margin:0;padding:0 0 0 1.4rem;display:grid;gap:2px;font-size:var(--fs-md)}
.cb-fun b{font-family:var(--mono)}
.cb-funnel:empty{display:none}
.cb-sizelist{margin:0;padding:0 0 0 1.2rem;display:grid;gap:4px;font-size:var(--fs-md)}
.cb-plan{display:grid;gap:12px}
.cb-prow{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:end}
.cb-popt{display:grid;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);min-width:0}
.cb-popt select{font:inherit;font-size:var(--fs-md);color:var(--ink);max-width:100%}
.cb-pfmt{flex:1 1 16rem}
.cb-pfmt select{width:100%}
.cb-step{display:inline-flex;align-items:center;gap:6px}
.cb-step .btn-sm{min-width:var(--ctl-h);min-height:var(--ctl-h);font-size:var(--fs-lg);padding:4px 10px}
.cb-step output{min-width:2.4ch;text-align:center;font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;color:var(--ink)}
.cb-tiles div b{font-size:var(--fs-xl)}
.cb-arith{margin:0;padding:0 0 0 1.2rem;display:grid;gap:4px;font-size:var(--fs-md)}
.cb-rulesx p{margin:6px 0 0;font-size:var(--fs-md);max-width:80ch}
.cb-nightline{margin:0;font-size:var(--fs-md);max-width:90ch}
.cb-thrs{border:1px solid var(--rule);border-radius:var(--r-lg);padding:8px 12px;background:var(--ground)}
.cb-thrgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px var(--sp-lg);margin:8px 0}
.cb-thr{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:var(--fs-md)}
.cb-thr>span:first-child{flex:1 1 12rem}
.cb-x2{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.cb-tabs{flex-wrap:wrap;row-gap:4px}
.cb-tabs button{min-height:40px;padding:6px 12px}
@media (width < 720px){.cb-build .mt-seg button,.cb-setbar .mt-seg button,.ds-rotbar .mt-seg button,.cb-tabs button{min-height:44px}.cb-x{min-width:40px;min-height:40px}}
.cb-tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);position:relative;z-index:1}
.cb-shared{max-width:820px}
.cb-printbar{margin-bottom:12px}
.cb-printpage h2{margin:0 0 4px}
.cb-printcols{columns:3 14rem;column-gap:var(--sp-xl)}
.cb-printcols section{break-inside:avoid-column;margin:0 0 12px}
.cb-printcols h3{margin:0 0 4px;font-size:var(--fs-md);text-transform:capitalize}
.cb-printcols ul{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.cb-printcols li{display:flex;gap:6px;align-items:baseline;padding:1px 0;break-inside:avoid}
.cb-printcols small{color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs)}
.cb-box{display:inline-block;width:10px;height:10px;border:1px solid currentColor;border-radius:var(--r-sm);flex:none}
@media print{body.cb-printing .top,body.cb-printing .foot,body.cb-printing .how,body.cb-printing .cl-about,body.cb-printing noscript,body.cb-printing .cb-printbar,body.cb-printing .lf-toast{display:none!important}body.cb-printing{background:var(--print-paper);color:var(--print-ink)}body.cb-printing .cb-printcols small{color:var(--print-muted)}}
@media (width < 720px){
  .cb-bt thead,.cb-sett thead{display:none}.cb-bt,.cb-bt tbody,.cb-sett,.cb-sett tbody{display:block}
  .cb-bt tr,.cb-sett tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--rule)}
  .cb-bt td,.cb-sett td{border:0;padding:2px 0}
  .cb-bt td:first-child,.cb-sett td:first-child{grid-column:1/-1;font-weight:700}
  .cb-bt td[data-l="themes"],.cb-sett td[data-l="legal"]{grid-column:1/-1}
  .cb-bt td[data-l]::before,.cb-sett td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:var(--fs-xs);font-family:var(--mono)}
  .cb-setlist{grid-template-columns:minmax(0,1fr);max-height:18rem}
  .cb-printcols{columns:1}
}
@media (pointer:coarse){.cb-build .mt-seg button,.cb-setbar .mt-seg button,.cb-tabs button,.ds-rotbar .mt-seg button{min-height:44px;padding:6px 12px}.cb-x{min-width:44px;min-height:44px}.cb-chk{min-height:44px}}
/* Draft Sim's cube formats */
.ds-cuberow{align-items:end}
.ds-cubeopt{display:grid;gap:4px}
.ds-cubeopt .lf-l{min-width:0}
.ds-plan{padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.ds-plan p{margin:0 0 4px}
.ds-cmlog h3{margin:0 0 4px}
.ds-cmtook{margin:0;padding:0 0 0 1.6rem;display:grid;gap:2px;font-size:var(--fs-md)}
.ds-cmall{max-height:none}
.ds-cmwho{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);display:inline-block;min-width:4.5rem}
.ds-rotbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ds-rotbar input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;width:14rem;max-width:100%}
.ds-rotcol li{grid-template-columns:minmax(0,1fr) auto auto}
.ds-rotpick{min-height:32px}
/* a cube of thousands: rows off screen skip layout until they scroll near (the list and Rotisserie's face-up cube) */
.cb-listcols li,.ds-rotcol li{content-visibility:auto;contain-intrinsic-size:auto 34px}
.ds-rotmore{margin-top:6px;justify-self:start}
.cb-thrg{grid-column:1/-1;flex-wrap:nowrap}
.cb-thr.cb-thrg input{width:auto;padding:0;border:0;background:none;flex:none;margin:0}
.cb-thrg span{flex:1 1 auto}
.ds-wpiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ds-wpile{display:grid;gap:4px;align-content:start;padding:10px;border:1px dashed var(--rule);border-radius:var(--r-lg);background:var(--surface);font-size:var(--fs-md)}
.ds-wpile span{font-size:var(--fs-sm);color:var(--muted)}
.ds-won{border-style:solid;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ds-cmacts .btn-sm{min-height:44px}
.ds-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:560px}
.ds-gcell{min-width:0}
.ds-gempty{aspect-ratio:488/680;border:1px dashed var(--rule);border-radius:var(--r-card)}
.ds-gcell.ds-gon .ds-card,.ds-gcell.ds-gon.ds-gempty{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-card)}
.ds-glines{display:flex;flex-wrap:wrap;gap:8px}
.ds-gline{min-height:44px}
@media (width < 720px){.ds-wpiles{grid-template-columns:minmax(0,1fr)}.ds-grid3{gap:6px}.ds-cmwho{min-width:3.6rem}}
.lf-toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;max-width:min(92vw,520px);background:var(--ink);color:var(--surface);font-size:var(--fs-md);padding:10px var(--sp-lg);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.lf-card,.lf-row{min-width:0}
.lf-row select,.lf-row input{max-width:100%}
.lf-card select{min-width:0}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{position:static;display:inline-block;margin:0 0 8px;padding:6px 10px;border-radius:var(--r-md);background:var(--ink);color:var(--surface);font-family:var(--mono);font-size:var(--fs-sm)}
.cl-skip2:focus{position:absolute;left:0;top:calc(100% + 6px);z-index:21;margin:0}
.cl-lock.fromq select{border-style:dashed}
.ms-stale{margin:0 0 10px;padding:8px 12px;border:1.5px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-md)}
.co-already{margin:6px 0;padding:8px 12px;border-left:4px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-md)}
.db-notes{margin:6px 0;padding-left:1.2em;font-size:var(--fs-md);color:var(--muted)}

/* storage warnings: shown once at the top of the page, dismissable */
.ms-banner{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin:12px 0;padding:12px 14px;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--ink);border-radius:var(--r-lg);font-size:var(--fs-md);line-height:1.5}
.ms-banner p{margin:0;max-width:72ch}
.ms-banner button{flex:none}
/* a file picker is a label holding a visually hidden input: the input still takes keyboard focus, and the label shows it */
label:has(> input[type=file]:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
label:has(> input.vh){position:relative}

/* ---------------------------------------------------------------- combos (combos.js): card pages and Deckbuilder Pro */
.cx-lead{margin:0 0 12px;max-width:78ch;line-height:1.55}
.cx-filters{display:grid;gap:10px;margin:0 0 10px}
.cx-kinds{display:flex;flex-wrap:wrap;gap:6px}
.cx-sel{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.cx-sel label{display:grid;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.cx-sel select,.cx-sel input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;min-width:0}
.cx-q input{width:12rem;max-width:100%}
@media (width < 720px){.cx-q input,.cx-sel select{font-size:var(--fs-lg)}}
.cx-count{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);margin:4px 0 10px;font-variant-numeric:tabular-nums}
.cx-list{display:grid;gap:12px}
.cx-combo{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:14px var(--sp-lg);transition:border-color .15s,box-shadow .15s}
.cx-combo.open{border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));box-shadow:var(--shadow-2)}
.cx-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px var(--sp-lg);align-items:center}
.cx-cards{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:420px}
.cx-pic{display:block;width:72px;flex:none;border-radius:var(--r-card);overflow:hidden;background:var(--code-bg);aspect-ratio:146/204;box-shadow:var(--shadow-1)}
.cx-pic img{display:block;width:100%;height:auto}
.cx-pic.cx-missing{outline:2px dashed var(--warn);outline-offset:2px}
.cx-pic.cx-any,.cx-pic.cx-noimg{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;padding:6px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;color:var(--muted);border:1.5px dashed var(--rule);box-shadow:none;background:transparent}
.cx-pic.cx-noimg{border-style:solid;background:var(--code-bg);color:var(--ink)}
.cx-any small{font-size:var(--fs-xs);color:var(--faint)}
.cx-plus{font-family:var(--mono);font-size:var(--fs-lg);color:var(--faint)}
.cx-title{font-family:var(--sans);letter-spacing:0;margin:0 0 4px;font-size:var(--fs-lg);line-height:1.35;font-weight:700;text-wrap:balance}
.cx-win{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;vertical-align:2px}
.cx-with{margin:0 0 8px;font-size:var(--fs-md);color:var(--muted);line-height:1.5}
.cx-with a{color:var(--ink);font-weight:500}
.cx-need-one{margin:0 0 8px;font-size:var(--fs-md);color:var(--warn)}
.cx-need-one a{color:inherit}
.cx-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.cx-b{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--rule);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cx-br i{font-style:normal;color:var(--faint)}
.cx-br4{border-color:color-mix(in srgb,var(--bad) 45%,var(--rule));color:var(--bad)}
.cx-br3{border-color:color-mix(in srgb,var(--warn) 45%,var(--rule));color:var(--warn)}
.cx-brx{color:var(--bad)}
.cx-toggle{align-self:start;white-space:nowrap}
.cx-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.cx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.9fr);gap:var(--sp-lg) var(--sp-xl)}
.cx-cols h4{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);margin:0 0 8px}
.cx-cols h4:not(:first-child){margin-top:var(--sp-lg)}
.cx-cols ul,.cx-cols ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--fs-md);line-height:1.5}
.cx-need li{padding-left:14px;position:relative}
.cx-need li::before,.cx-pre li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cx-pre li{padding-left:14px;position:relative}
.cx-tmpl b{font-weight:700}
.cx-ext{font-size:var(--fs-sm);margin-left:4px}
.cx-hard::before{background:var(--warn)!important}
.cx-flag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);padding:0 6px;margin-right:4px}
.cx-steps{counter-reset:cx}
.cx-steps li{counter-increment:cx;position:relative;padding-left:var(--sp-2xl);min-height:22px}
.cx-steps li::before{content:counter(cx);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;background:var(--code-bg);color:var(--ink)}
.cx-steps li.cx-repeat{color:var(--accent);font-weight:700}
.cx-steps li.cx-repeat::before{content:"\21BB";background:var(--accent-soft);color:var(--accent);font-size:var(--fs-sm)}
.cx-res li b{font-weight:700}
.cx-along{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.cx-along span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.cx-gloss{margin:10px 0 0;font-size:var(--fs-sm);color:var(--faint);line-height:1.5}
.cx-notes{margin:14px 0 0;font-size:var(--fs-md);color:var(--muted);max-width:80ch}
.cx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:var(--sp-lg);padding-top:12px;border-top:1px dashed var(--rule)}
.cx-foot-act{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.cx-foot a.btn-sm{text-decoration:none}
.cx-ci .mana{font-size:var(--fs-lg)}
.cx-addrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cx-more{justify-self:start}
.db-combo-chip{font:inherit;font-size:var(--fs-sm);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--rule));background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);padding:.15rem .6rem;cursor:pointer}
@media (width < 1024px){
  .cx-cols{grid-template-columns:minmax(0,1fr)}
}
@media (width < 720px){
  .cx-head{grid-template-columns:minmax(0,1fr)}
  .cx-pic{width:64px}
  .cx-toggle{justify-self:start}
  .cx-combo{padding:12px}
  .cx-foot-act{margin-left:0}
}
/* a page that couldn't load its data: says what failed and offers to try again (no progress bar) */
.cl-err{margin:var(--sp-3xl) auto;max-width:560px;padding:var(--sp-lg) var(--sp-xl);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);display:grid;gap:10px;justify-items:start}
.cl-err p{margin:0}
.fr-dropnote{margin:12px 0 0;padding:10px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);color:var(--ink);font-size:var(--fs-md)}
main:focus{outline:none}
.kbd-search:focus-visible,.q-next:focus-visible,.row:focus-visible,.file:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* small controls get a 24px target without looking bigger */
.cb-x{min-width:24px;min-height:24px;display:inline-grid;place-items:center}
.db-row .db-dot{position:relative}
.db-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%}
/* scrolling tables can be reached and scrolled by keyboard */
.db-tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (width < 720px){
  .mt-bar{position:static}
  .db-bulk{left:8px;right:8px;transform:none;flex-wrap:nowrap;overflow-x:auto}
  .qv-x{position:sticky;top:8px;float:right;z-index:2;background:var(--surface)}
}
body:has(.db-bulk) .ms-toasts{bottom:88px}
.cx-face{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.cx-pic.cx-pic-text{display:flex;align-items:center;justify-content:center;padding:6px;border:1.5px solid var(--rule);box-shadow:none}
.cx-noimg{font-family:var(--sans);font-size:var(--fs-xs);line-height:1.25;text-align:center;color:var(--ink);overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto}

.mb-swipe{display:none;margin:0 0 4px}
@media (width < 720px){.mb-swipe{display:block}}

/* Film Room luck audit */
.fr-luckhead{margin:4px 0 14px}
.fr-luckbig{font-size:var(--fs-xl);line-height:1.5;margin:0 0 6px;max-width:70ch}
.fr-ok{color:var(--ok);font-family:var(--mono);font-size:var(--fs-sm)}
.fr-off{color:var(--warn);font-family:var(--mono);font-size:var(--fs-sm)}
.fr-dist td.fr-bars{position:relative;width:45%;min-width:120px}
.fr-bar{display:block;height:12px;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--accent)}
.fr-distw{margin-top:var(--sp-xl)}
.fr-exp{position:absolute;top:6px;bottom:6px;width:2px;background:var(--ink);transform:translateX(-1px)}
.fr-dist caption{caption-side:top;text-align:left;padding:0 0 6px}
.fr-legend{display:flex;align-items:center;gap:8px;margin:6px 0 14px}
.fr-key{display:inline-block;width:14px;height:10px;border-radius:var(--r-sm)}
.fr-key-bar{background:var(--accent)}
.fr-key-exp{width:2px;height:14px;background:var(--ink);border-radius:0}
.fr-h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:var(--sp-lg) 0 8px}
.fr-t td.num,.fr-t th.num{text-align:right}

/* Film Room replay timeline: the life chart is the turn slider; the list below is the turn on screen */
.fr-rp{--you:var(--accent);--them:var(--warn);display:grid;gap:var(--sp-md);max-width:980px}
.fr-rphead{display:flex;flex-wrap:wrap;gap:8px var(--sp-md);align-items:center;justify-content:space-between}
.fr-rptitle{display:grid;gap:4px}
.fr-rptitle h2{margin:0;font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.fr-rptitle p{margin:0;max-width:80ch}
.fr-rpopen{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--sp-sm)}
.fr-rpchart{position:relative;height:168px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.fr-rpchart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fr-rpplot{position:absolute;top:14px;bottom:34px;left:36px;right:var(--sp-xl)}
.fr-rpsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fr-rpsvg path{fill:none;vector-effect:non-scaling-stroke}
.fr-lyou{stroke:var(--you);stroke-width:2.5}
.fr-lthem{stroke:var(--them);stroke-width:2.5;stroke-dasharray:7 4}
.fr-rpbase{stroke:var(--rule);stroke-width:1}
.fr-rpzero{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.fr-rpcur{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--ink);opacity:.45;pointer-events:none}
.fr-rpdot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--surface);pointer-events:none}
.fr-dyou{background:var(--you)}
.fr-dthem{background:var(--them)}
.fr-rpflag{position:absolute;top:-10px;width:10px;height:10px;margin-left:-5px;border-radius:var(--r-sm);background:var(--warn-line);border:1.5px solid var(--warn);pointer-events:none}
.fr-rpticks{position:absolute;left:36px;right:var(--sp-xl);bottom:8px;height:18px;pointer-events:none}
.fr-rpticks span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);line-height:18px}
.fr-rphi,.fr-rplo{position:absolute;left:0;width:30px;text-align:right;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);pointer-events:none}
.fr-rphi{top:6px}.fr-rplo{bottom:30px}
.fr-rplegend{margin:0}
.fr-kyou{height:3px;width:18px;background:var(--you);border-radius:0}
.fr-kthem{height:3px;width:18px;background:repeating-linear-gradient(90deg,var(--them) 0 7px,transparent 7px 11px);border-radius:0}
.fr-kflag{width:10px;height:10px;border-radius:var(--r-sm);background:var(--warn-line);border:1.5px solid var(--warn)}
.fr-rpnav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-sm) var(--sp-md)}
.fr-rpnow{margin:0;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px var(--sp-md)}
.fr-rpnow b{font-family:var(--mono);font-size:var(--fs-md)}
.fr-rplives{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 var(--sp-md);font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.fr-rplives>span{white-space:nowrap}
.fr-lv0{color:var(--you)}.fr-lv1{color:var(--them)}
.fr-rplist{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-height:48px;touch-action:pan-y}
.fr-rpe{display:flex;align-items:center;gap:var(--sp-sm) var(--sp-md);padding:4px 4px 4px var(--sp-md);background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule);border-radius:var(--r-md);font-size:var(--fs-md);min-height:40px}
.fr-s0{border-left-color:var(--you)}.fr-s1{border-left-color:var(--them)}
.fr-rpmark{background:var(--warn-bg);border-color:var(--warn-line)}
.fr-who{flex:none;min-width:2.6rem;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.fr-what{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.fr-what .fr-card{vertical-align:baseline}
.fr-rpx{flex:none;width:32px;height:32px;border:0;border-radius:var(--r-md);background:none;color:var(--muted);font-size:var(--fs-lg);line-height:1;cursor:pointer}
.fr-rpx:focus-visible{color:var(--bad);background:var(--bad-soft)}@media (hover:hover){.fr-rpx:hover{color:var(--bad);background:var(--bad-soft)}}
.fr-rpempty{padding:var(--sp-sm) 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fr-rped{display:grid;gap:10px;padding:var(--sp-md) var(--sp-lg);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.fr-rped .fr-h3{margin:0}
.fr-rprow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fr-rpfield{position:relative;flex:1 1 14rem;min-width:0}
.fr-rpfield input,.fr-rplf input{box-sizing:border-box;font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:6px 10px;min-height:var(--ctl-h)}
.fr-rpfield input{width:100%}
.fr-rpchips,.fr-rprecent{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fr-rprecent:empty{display:none}
.fr-rplifes{display:flex;flex-wrap:wrap;gap:8px var(--sp-xl)}
.fr-rplf{display:inline-flex;align-items:center;gap:4px}
.fr-rplf input{width:4.6em;text-align:center;font-family:var(--mono);font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.fr-rplf input::-webkit-inner-spin-button,.fr-rplf input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fr-rplfn{font-family:var(--mono);font-size:var(--fs-sm);min-width:2.8rem}
.fr-lf0 .fr-rplfn{color:var(--you)}.fr-lf1 .fr-rplfn{color:var(--them)}
.fr-rpact{align-items:center}
.fr-rpact p{margin:0;flex:1 1 20rem}
.fr-rptools{display:grid;gap:10px}
.fr-rpimp{border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px var(--sp-lg);background:var(--surface);display:grid;gap:8px}
.fr-rpimp summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm)}
.fr-rpimp p{margin:8px 0}
.fr-rpimp textarea{width:100%;box-sizing:border-box;font:inherit;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--line-field);border-radius:var(--r-md);padding:8px 10px;resize:vertical;margin-bottom:8px}
@media (width < 720px){
  .fr-rpchart{height:136px}
  .fr-rpplot{right:var(--sp-md)}
  .fr-rpticks{right:var(--sp-md)}
  /* the turn bar stays at the top of the screen while the list and the editor scroll under it; focus scrolls clear of it */
  .fr-rpnav{position:sticky;top:0;z-index:5;margin:0 calc(-1 * var(--sp-lg));padding:6px var(--sp-lg);background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:var(--shadow-2)}
  html:has(.fr-rpnav){scroll-padding-top:84px}
  .fr-rpnav .btn-sm{padding-inline:10px}
  .fr-rpnow{flex-direction:column;align-items:center;gap:0}
  .fr-rpnow b{font-size:var(--fs-sm)}
  /* recent cards: one row that scrolls sideways */
  .fr-rprecent{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--sp-md));padding-inline:var(--sp-md)}
  .fr-rprecent::-webkit-scrollbar{display:none}
  .fr-rprecent>*{flex:none}
  .fr-rpe{font-size:var(--fs-sm)}
  .fr-rped{padding:var(--sp-md)}
}

/* Film Room, your cards: rates with and without each card; a phone shows each card as a block of labeled numbers */
.fr-lhead p{margin:0 0 6px;max-width:80ch}
.fr-lbig{font-size:var(--fs-lg);line-height:1.5}
.fr-lctl{display:flex;flex-wrap:wrap;gap:8px var(--sp-lg);align-items:center;margin:var(--sp-sm) 0}
.fr-lseg{flex-wrap:wrap;row-gap:4px}
.fr-lpick{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--mono);color:var(--muted)}
.fr-lpick select{font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;max-width:22rem}
.fr-lshape{margin:0 0 var(--sp-md);font-size:var(--fs-md);max-width:86ch}
.fr-lshape summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.fr-lshape ul{margin-top:8px}
.fr-lens caption{caption-side:top;text-align:left;padding:0 0 6px}
.fr-lens td small{white-space:nowrap}
@media (width < 720px){
  .fr-lens thead{display:none}
  .fr-lens,.fr-lens tbody{display:block;width:100%}
  .fr-lens caption{display:block}
  .fr-lens tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px var(--sp-sm);padding:10px 0;border-bottom:1px solid var(--rule)}
  .fr-lens td{border:0;padding:0;min-width:0}
  .fr-lens td:first-child{grid-column:1/-1;min-width:0}
  .fr-lens td[data-l]:not([data-l=""])::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
  .fr-lens td.fr-ldiff,.fr-lens td.fr-lread{grid-column:span 2}
  .fr-lens td small{white-space:normal}
}

/* card page rulings */
.cc-rulings{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:78ch}
.cc-rulings li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px var(--sp-lg);padding:8px 0;border-bottom:1px solid var(--rule)}
.cc-rulings time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);padding-top:4px}
.cc-rulings p{margin:0;font-size:var(--fs-lg);line-height:1.55}
.cc-rulings .cl-small{grid-column:2}
@media (width < 720px){.cc-rulings li{grid-template-columns:minmax(0,1fr)}.cc-rulings .cl-small{grid-column:1}}

/* Interaction Oracle */
.oracle{padding-top:var(--sp-lg)}
.or-pickers{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end}
.or-pick label{display:block;font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin-bottom:6px}
.or-inwrap{position:relative}
.or-pick input{width:100%;font-family:var(--mono);font-size:var(--fs-lg);padding:12px 14px;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
.or-pick input:focus{outline:none;border-color:var(--accent)}
.or-swap{min-height:48px}
.or-empty{padding:var(--sp-xl) 0}
.or-lead{font-size:var(--fs-xl);color:var(--muted);max-width:66ch;margin:0 0 var(--sp-xl)}
.or-ex{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.or-ex a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none}
.or-ex a:focus-visible{border-color:var(--accent)}@media (hover:hover){.or-ex a:hover{border-color:var(--accent)}}
.or-ex small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.or-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--sp-lg);align-items:center;padding:var(--sp-xl) 0 8px}
.or-vs{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.or-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:start}
.or-img{display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:488/680;background:var(--code-bg)}
.or-img img{display:block;width:100%;height:100%;object-fit:contain}
.or-noimg{display:flex;align-items:center;justify-content:center;height:100%;padding:8px;text-align:center;font-size:var(--fs-xs);border:1px solid var(--rule);border-radius:inherit;background:var(--surface)}
.or-role{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.or-card h2{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;margin:2px 0;line-height:1.3}
.or-card h2 a{color:var(--ink);text-decoration:none}
@media (hover:hover){.or-card h2 a:hover{color:var(--accent)}}
.or-card p{margin:2px 0;font-size:var(--fs-md)}
.or-defs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.or-def{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.or-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-lg);margin:var(--sp-lg) 0 8px}
.or-side{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-lg) var(--sp-lg) 10px;border-top-width:3px}
.or-side.or-yes{border-top-color:var(--ok)}
.or-side.or-maybe{border-top-color:var(--warn)}
.or-side.or-no{border-top-color:var(--bad)}
.or-side.or-none{border-top-color:var(--rule)}
.or-side h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;margin:0 0 8px;color:var(--muted)}
.or-side h3 b{color:var(--ink);font-weight:700}
.or-verdict{margin:0 0 10px;font-size:var(--fs-lg)}
.or-v{font-family:var(--mono);font-size:var(--fs-xl);margin-right:6px}
.or-yes .or-v{color:var(--ok)}.or-maybe .or-v{color:var(--warn)}.or-no .or-v{color:var(--bad)}.or-none .or-v{color:var(--muted)}
.or-rows{list-style:none;margin:0;padding:0}
.or-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--rule)}
.or-m{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent)}
.or-st{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.or-works .or-st{color:var(--ok)}.or-maybe .or-st{color:var(--warn)}.or-blocked .or-st{color:var(--bad)}
.or-why{grid-column:1/-1}
.or-why p{margin:2px 0;font-size:var(--fs-md);line-height:1.5}
.or-notes{color:var(--muted);font-size:var(--fs-md)!important}
.or-miss{opacity:.75}
.or-ruls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-xl)}
.or-rul h3{font-family:var(--mono);font-size:var(--fs-md);margin:0 0 8px}
.or-rul .cc-rulings li{grid-template-columns:minmax(0,1fr)}
.or-rul .cc-rulings .cl-small{grid-column:1}
.or-foot{margin-top:var(--sp-lg);max-width:80ch}
@media (width < 720px){
  .or-pickers{grid-template-columns:minmax(0,1fr)}
  .or-swap{justify-self:start;min-height:40px}
  .or-pair,.or-sides,.or-ruls{grid-template-columns:minmax(0,1fr)}
  .or-vs{justify-self:center}
  .or-pick input{font-size:var(--fs-lg)}
}
.or-sides.or-one{grid-template-columns:minmax(0,1fr);max-width:760px}
.cc-why{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
.co-plat{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);background:var(--accent-soft);border-radius:var(--r-sm);padding:0 6px;margin-left:6px;vertical-align:middle}
/* playgroup banned lists */
.db-exports li>span.db-houserow{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.db-houserow select{max-width:240px;width:auto!important}
.db-hl-name,.db-hl-bans{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:var(--fs-sm);color:var(--muted)}
.db-hl-bans textarea{font-family:var(--mono)!important;font-size:var(--fs-sm)!important}
.db-hl-list{list-style:none;margin:12px 0 0;padding:0}
.db-hl-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--rule)}
.db-hl-list li>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.db-hl-list .ms-row{margin-top:0}
.db-hl-cards{columns:2 200px;column-gap:var(--sp-xl);margin:8px 0;padding-left:var(--sp-lg);font-size:var(--fs-md)}
.db-hl-follow{border:1px solid var(--rule);border-radius:var(--r-md);margin:14px 0 0;padding:8px 12px 10px;max-height:240px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:4px 14px}
.db-hl-follow legend{font-size:var(--fs-sm);padding:0 4px;color:var(--muted)}
.db-hl-follow label{font-size:var(--fs-md);display:flex;gap:6px;align-items:baseline;min-width:0}
/* phones zoom into any field under 16px, so dialogs use 16px there */
@media (width < 720px){.ms-modal input:not([type=checkbox]):not([type=radio]):not([type=range]),.ms-modal select,.ms-modal textarea{font-size:var(--fs-lg)!important}}
/* one box: how the search was read, and the other reading one click away */
.cl-from .cl-alt{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.cl-from .cl-alt code{font-size:var(--fs-xs);color:var(--muted);margin-left:4px}
.cl-from .cl-inline{font-size:inherit}
/* quick filters: a thin divider between owning and where */
.qf-sep{width:1px;height:18px;background:var(--rule);margin:0 4px}
/* the set picker picks several */
.sp-head{flex-wrap:wrap}
.sp-set.on::after{content:"\2713";margin-left:auto;color:var(--accent);font-weight:700}
@media (width < 720px){.sp-head b{flex:1 1 100%}}
.or-note{margin:4px 0 0;color:var(--muted)}
.or-note:empty{display:none}
/* long rulings (a URL, a long name) wrap instead of widening the page */
.cc-rulings p,.cc-rulings li{overflow-wrap:anywhere}
/* names people type (lists, decks) can be one long word: they wrap rather than widen a phone screen */
.ms-modal-box h2,.db-issues li,.db-hl-list b,.db-hl-cards li,.db-shareurl{overflow-wrap:anywhere}
/* deck box labels */
.lbl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-xl);align-items:start;margin-top:12px}
.lbl-prev{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg) 12px;position:sticky;top:0}
.lbl-art{max-width:100%;box-shadow:var(--shadow-1);border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.lbl-art svg{display:block;width:100%;height:100%}
.lbl-dens{margin:4px 0 0;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:var(--fs-sm);gap:2px}
.lbl-dens span{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.lbl-d2 b{color:var(--ok)}.lbl-d1 b{color:var(--warn)}.lbl-d0 b{color:var(--bad)}
.lbl-form{display:flex;flex-direction:column;gap:10px;min-width:0}
.lbl-link{border:1px solid var(--rule);border-radius:var(--r-lg);padding:8px 12px 10px;margin:0;display:flex;flex-direction:column;gap:6px}
.lbl-link legend{font-size:var(--fs-sm);color:var(--muted);padding:0 4px}
.lbl-link label{font-size:var(--fs-md);display:block}
.lbl-link small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-left:var(--sp-xl)}
.lbl-custom,.lbl-print{display:flex;gap:10px;flex-wrap:wrap}
.lbl-custom .ms-lbl,.lbl-print .ms-lbl{flex:1 1 120px}
.lbl-print small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.lbl-checks{display:flex;gap:var(--sp-lg);flex-wrap:wrap;font-size:var(--fs-md)}
@media (width < 720px){.lbl-wrap{grid-template-columns:minmax(0,1fr)}.lbl-prev{position:static}}
/* the Oracle, together and apart: a section per way two cards meet */
.or-h{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:0 0 10px;color:var(--ink)}
.or-tog,.or-clash,.or-apart{margin:var(--sp-lg) 0 0;padding:var(--sp-lg) var(--sp-lg) 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.or-apart{background:transparent;padding-bottom:4px}
.or-apart .or-sides{margin-top:10px}
.or-tog{border-top-width:3px}
.or-tog.or-strong{border-top-color:var(--ok)}.or-tog.or-good{border-top-color:var(--accent)}.or-tog.or-minor,.or-tog.or-none{border-top-color:var(--rule)}
.or-strong .or-v{color:var(--ok)}.or-good .or-v{color:var(--accent)}.or-minor .or-v{color:var(--muted)}
.or-tog .or-verdict{max-width:80ch;line-height:1.5}
.or-line{margin:12px 0 4px;padding:12px 14px;border-radius:var(--r-md);background:var(--accent-soft)}
.or-line h3{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);margin:0 0 6px;font-weight:700}
.or-line ol{margin:0;padding-left:var(--sp-xl);display:grid;gap:4px}
.or-line li{font-size:var(--fs-md);line-height:1.5}
.or-finds{list-style:none;margin:10px 0 0;padding:0}
.or-f{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--rule)}
.or-f p{margin:0;font-size:var(--fs-md);line-height:1.5}
.or-badge{font-family:var(--mono);font-size:var(--fs-xs);text-align:center;padding:1px 6px;border-radius:var(--r-sm);border:1px solid var(--rule);color:var(--muted);white-space:nowrap}
.or-f3 .or-badge{color:var(--ok);border-color:currentColor}
.or-f2 .or-badge{color:var(--accent);border-color:currentColor}
.or-bad .or-badge{color:var(--bad);border-color:currentColor}
.or-ev{margin-top:4px}
.or-ev summary{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);cursor:pointer;width:max-content;max-width:100%}
@media (hover:hover){.or-ev summary:hover{color:var(--accent)}}
.or-ev p{font-size:var(--fs-md)!important;color:var(--muted);margin:4px 0 0!important;overflow-wrap:anywhere}
.or-ev q{quotes:"\201C" "\201D"}
.or-tog #or-combos:not(:empty){margin-top:14px}
.or-clash{border-color:var(--warn-line);background:var(--warn-bg)}
.or-clash .or-h{color:var(--warn)}
.or-clash .or-f{border-top-color:var(--warn-line)}
/* one card: the cards that work with it */
.or-pair.or-solo{grid-template-columns:minmax(0,1fr);max-width:560px}
.or-pfilters{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:center;margin:6px 0 14px}
.or-pfilters label{display:flex;gap:8px;align-items:center;color:var(--muted)}
.or-pfilters select{font-size:var(--fs-md);padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);max-width:100%}
.or-plist{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:10px}
.or-p{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.or-pimg{display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:488/680;background:var(--code-bg)}
.or-pimg img{display:block;width:100%;height:100%;object-fit:contain}
.or-pname{margin:0 0 4px;font-size:var(--fs-md);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.or-pname>a{font-weight:700;color:var(--ink);text-decoration:none}
@media (hover:hover){.or-pname>a:hover{color:var(--accent)}}
.or-pwhy{margin:0 0 6px;font-size:var(--fs-md);line-height:1.45;color:var(--muted)}
.or-see{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
@media (width < 720px){.or-tog,.or-clash{padding:14px 12px 10px}.or-f{grid-template-columns:minmax(0,1fr);gap:4px}.or-badge{justify-self:start}.or-pfilters select{font-size:var(--fs-lg)}}
/* honest records: the rate, its 95% range, and a bar that draws both on 0 to 100% with 50% marked */
.rec-head{display:flex;flex-wrap:wrap;gap:10px var(--sp-2xl);align-items:flex-end;margin:4px 0 8px}
.rec-big{display:grid}
.rec-big b{font-family:var(--mono);font-size:var(--fs-num);line-height:1.1}
.rec-big span{font-size:var(--fs-sm);color:var(--muted)}
.rec-games b{font-size:var(--fs-xl)}
.rec-range{display:grid;gap:4px;min-width:min(220px,100%)}
.rec-range span{font-size:var(--fs-xs);color:var(--muted)}
.rec-range b{font-family:var(--mono);font-size:var(--fs-lg)}
.rec-bar{position:relative;display:block;width:100%;min-width:90px;max-width:220px;height:8px;border-radius:var(--r-sm);background:var(--ground);border:1px solid var(--rule);margin-top:4px}
.rec-bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--faint)}
.rec-ci{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-radius:var(--r-sm)}
.rec-p{position:absolute;top:-2px;width:3px;height:10px;margin-left:-1px;background:var(--accent);border-radius:var(--r-sm)}
.rec-notes{margin:0 0 10px;max-width:80ch}
.rec-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px;margin:0 0 10px}
.rec-tile{display:grid;gap:2px;background:var(--ground);border-radius:var(--r-md);padding:8px 12px}
.rec-tile b{font-family:var(--mono);font-size:var(--fs-xl)}
.rec-tile span{font-size:var(--fs-xs);color:var(--muted)}
.rec-lab{font-family:var(--mono);font-size:var(--fs-xs)!important;color:var(--faint)!important}
.rec-rng{font-family:var(--mono)}
.rec-cmp{margin:0 0 12px}
.rec-h{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:var(--sp-lg) 0 6px}
.rec-tw{overflow-x:auto;margin:0 0 8px}
.rec-t{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
.rec-t th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--faint);text-align:left;padding:4px 10px 4px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.rec-t td{padding:6px 10px 6px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-variant-numeric:tabular-nums}
.rec-t td .rec-bar{max-width:140px}
.rec-real{color:var(--accent);font-weight:700}
.rec-plan{font-family:var(--mono);font-size:var(--fs-xs);padding:0 6px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent)}
.rec-src{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--r-sm);border:1px solid var(--rule);color:var(--muted);white-space:nowrap}
.rec-src.film{border-color:var(--accent);color:var(--accent)}
.db-reslist button.btn-xs{border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:var(--fs-xs)}
.db-reslist [data-res-edit]{margin-left:auto}
.db-reslist [data-res-rm]{margin-left:0}
.db-rnote{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.db-logbox{margin:14px 0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.db-sharerec{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:var(--fs-md)}
.db-sharerec input{margin-top:4px}
/* the match form: two taps for the usual match */
.mf{display:grid;gap:10px}
.mf-f{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
.mf-f input,.mf-f select{font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;max-width:100%}
.mf-vs input{width:100%}
.mf-set{border:0;margin:0;padding:0;min-width:0}
.mf-set legend{font-size:var(--fs-sm);color:var(--muted);padding:0;margin-bottom:4px}
.mf-chips{display:flex;flex-wrap:wrap;gap:6px}
.mf-chips label{font-family:var(--mono);font-size:var(--fs-sm);padding:6px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--ground);color:var(--ink);cursor:pointer;min-height:34px;display:inline-flex;align-items:center;user-select:none}
@media (hover:hover){.mf-chips label:hover{border-color:var(--accent)}}
.mf-chips input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--surface)}
/* game by game (October 18, 2026): the order of a three-game match and each later game's seat */
.mf-gbg .mf-opt{color:var(--faint)}
.mf-seats{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}
.mf-seatnote{margin:4px 0 0}
.mf-chips input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.mf-other{display:flex;flex-wrap:wrap;gap:10px}
.mf-other[hidden]{display:none}
.mf-row{display:flex;flex-wrap:wrap;gap:10px}
.mf-note{flex:1 1 220px}
.mf-note input{width:100%}
.mf-msg{color:var(--bad);margin:0;min-height:0}
.mf-msg:empty{display:none}
/* the Game Diary */
.me-diary .di-month{margin-bottom:6px}
.di-list{list-style:none;margin:0;padding:0}
.di-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.di-day{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);min-width:3.2em}
.di-main{min-width:0;overflow-wrap:anywhere}
.di-main a{color:var(--ink)}
.di-meta{color:var(--muted);font-size:var(--fs-sm)}
.di-note{color:var(--muted);flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.di-acts{display:flex;gap:4px;margin-left:auto}
.di-compact .di-row{font-size:var(--fs-sm)}
.di-filters{display:flex;flex-wrap:wrap;gap:8px var(--sp-lg);margin:6px 0 var(--sp-lg)}
.di-filters label{display:flex;gap:6px;align-items:center;font-size:var(--fs-sm);color:var(--muted)}
.di-filters select{font-size:var(--fs-md);padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);max-width:min(60vw,260px)}
.di-month-sec h3{font-family:var(--mono);font-size:var(--fs-md);margin:var(--sp-lg) 0 4px}
.di-new{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.di-newdeck{margin-top:10px}
.btn-link{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}
@media (width < 720px){.mf-f input,.mf-f select,.di-filters select{font-size:var(--fs-lg)}.rec-big b{font-size:var(--fs-num)}.di-acts{margin-left:0}}
.db-reslist li b,.db-reslist li>span{min-width:0;overflow-wrap:anywhere}

/* ---------- Matchup Lab ---------- */
/* Matchup Lab's two sides: e_compete.css (.mu --mu-you, --mu-them) */
.mu-pick{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:start}
.mu-slot{margin:0;padding:14px 14px 10px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.mu-slot legend{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);padding:0 6px}
#mu-slot-a{border-top:3px solid var(--mu-you)}#mu-slot-b{border-top:3px solid var(--mu-them)}
.mu-swap{align-self:center;min-height:44px}
.mu-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;margin:0 8px 8px 0;background:var(--surface)}
.mu-seg button{font-family:var(--mono);font-size:var(--fs-sm);padding:8px 12px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer;min-height:36px}
.mu-seg button:last-child{border-right:0}
.mu-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.mu-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mu-sel{width:100%;font-family:var(--mono);font-size:var(--fs-md);padding:10px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);margin:0 0 6px;min-height:40px}
.mu-metarow{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,20fr);gap:6px}
.mu-paste{width:100%;font-family:var(--mono);font-size:var(--fs-sm);padding:10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);resize:vertical;box-sizing:border-box}
.mu-pasterow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.mu-pasterow .mu-sel{width:auto;margin:0;flex:1 1 140px}
.mu-slotinfo{margin:4px 0 0;color:var(--muted);min-height:1.2em}
.mu-warn{color:var(--warn)}
.mu-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:var(--sp-lg) 0 4px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ground);padding:8px 0 2px}
.mu-key{flex:1 1 100%;margin:2px 0 6px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.mu-k{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--r-sm);border:1px solid var(--rule);vertical-align:2px;white-space:nowrap;font-weight:400}
.mu-k-m{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.mu-k-r{background:var(--code-bg);color:var(--muted)}
.mu-k-c{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.mu-head{padding:14px 0 4px}
.mu-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}
.mu-deck{display:grid;gap:2px;padding:10px 14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--rule);border-left-width:4px;min-width:0}
.mu-deck b{font-size:var(--fs-xl);overflow-wrap:anywhere}
.mu-you.mu-deck{border-left-color:var(--mu-you)}.mu-them.mu-deck{border-left-color:var(--mu-them)}
.mu-who{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.mu-v{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.mu-note{margin:10px 0 0;font-size:var(--fs-md);color:var(--muted);max-width:75ch}
.mu-warnbox{padding:8px 12px;border-radius:var(--r-md);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--ink)}
.mu-prog{height:6px;border-radius:var(--r-sm);background:var(--code-bg);overflow:hidden;margin:12px 0 4px}
.mu-prog span{display:block;height:100%;background:var(--accent);transition:width .2s}
.mu-sec{margin:var(--sp-xl) 0 0;padding-top:var(--sp-lg);border-top:1px solid var(--rule)}
.mu-sec h2{font-size:var(--fs-xl);margin:0 0 8px;text-wrap:balance}
.mu-sec h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:var(--sp-lg) 0 8px;text-transform:lowercase;letter-spacing:.02em}
.mu-sec h4{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);margin:0 0 6px}
.mu-lead{color:var(--muted);max-width:75ch;margin:0 0 12px}
.mu-glance{border-top:0;padding-top:4px}
.mu-find{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.mu-find li{display:flex;gap:10px;align-items:baseline;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--rule);font-size:var(--fs-lg);line-height:1.45}
.mu-find .mu-k{flex:none}
.mu-tags{display:inline-flex;flex-direction:column;gap:4px;flex:none;align-items:flex-start}
.mu-chart{margin:8px 0 6px;max-width:720px}
.mu-chart svg{width:100%;height:auto;display:block}
.mu-gl{stroke:var(--rule);stroke-width:1}
.mu-ax{fill:var(--faint);font-family:var(--mono);font-size:var(--fs-xs)}
.mu-line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mu-line.mu-you{stroke:var(--mu-you)}.mu-line.mu-them{stroke:var(--mu-them)}
.mu-dot{stroke:var(--surface);stroke-width:2}
.mu-dot.mu-you{fill:var(--mu-you)}.mu-dot.mu-them{fill:var(--mu-them)}
.mu-legend{display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
.mu-sw{display:inline-block;width:14px;height:3px;border-radius:var(--r-sm);vertical-align:4px;margin-right:6px}
.mu-sw.mu-you{background:var(--mu-you)}.mu-sw.mu-them{background:var(--mu-them)}
.mu-facts{margin:8px 0;padding-left:var(--sp-xl);max-width:80ch}
.mu-facts li{margin:4px 0}
.mu-tscroll{overflow-x:auto;margin:6px 0 10px;-webkit-overflow-scrolling:touch;position:relative}
.mu-g[tabindex]{cursor:pointer}
.mu-g[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mu-greason{min-height:1.4em;color:var(--muted);margin:0 0 10px}
.mu-t{border-collapse:collapse;font-size:var(--fs-md);min-width:min(100%,420px)}
.mu-t th,.mu-t td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top;font-variant-numeric:tabular-nums}
.mu-t thead th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--faint);white-space:nowrap}
.mu-t tbody th{font-weight:400}
.mu-cov{width:100%}
.mu-cov td:nth-child(2){white-space:nowrap}
.mu-row-none{background:var(--code-bg)}
.mu-none{font-weight:700}
.mu-mc .mana{vertical-align:-2px}
.mu-det{margin:6px 0 10px}
.mu-det summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);padding:6px 0}
.mu-grid{border-collapse:collapse;font-size:var(--fs-sm)}
.mu-grid th,.mu-grid td{border:1px solid var(--rule);padding:0}
.mu-grid tbody th{padding:4px 8px;text-align:left;white-space:nowrap;font-weight:400}
.mu-gh{padding:4px 6px!important;font-weight:400;max-width:92px;vertical-align:bottom}
.mu-gh span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:88px}
.mu-gcorner{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);font-weight:400;padding:4px 8px!important;text-align:left}
.mu-g{width:30px;height:28px;text-align:center}
.mu-gd{display:inline-block;width:12px;height:12px;border-radius:50%}
.mu-g-works .mu-gd{background:var(--ok)}
.mu-g-maybe .mu-gd{background:transparent;border:2px solid var(--warn);width:8px;height:8px}
.mu-g-blocked .mu-gd{background:var(--bad);border-radius:var(--r-sm);width:10px;height:3px}
.mu-gkey{display:inline-block;width:18px;height:auto;border:0!important}
.mu-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:4px var(--sp-xl)}
.mu-list{list-style:none;margin:0 0 10px;padding:0}
.mu-list li{padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.mu-sb{width:100%}
.mu-sb tbody th{min-width:9em}
.mu-sb td:nth-child(2){white-space:nowrap}
.mu-sb td:last-child{min-width:18em;max-width:60ch}
.mu-sb-on{background:var(--accent-soft)}
.mu-step{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;white-space:nowrap;background:var(--surface)}
.mu-stb{min-width:40px;min-height:40px;padding:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-xl);line-height:1;cursor:pointer}
.mu-stb[aria-disabled="true"]{color:var(--faint);cursor:default}
.mu-stb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mu-stv{min-width:24px;text-align:center;font-family:var(--mono);font-variant-numeric:tabular-nums}
.mu-stv-on{color:var(--accent);font-weight:700}
.mu-tally{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--fs-md);margin:8px 0 4px;max-width:80ch}
.mu-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.mu-limits ul{padding-left:var(--sp-xl);max-width:80ch;color:var(--muted)}
@media (width < 720px){
  .mu-bar{position:static}
  .mu-pick{grid-template-columns:minmax(0,1fr)}
  .mu-swap{justify-self:center}
  .mu-vs{grid-template-columns:minmax(0,1fr)}
  .mu-v{justify-self:center}
  .mu-find li{flex-direction:column;gap:4px}
}
@media (width < 720px){
  .mu-metarow{grid-template-columns:minmax(0,1fr)}
  .mu-cov thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mu-cov,.mu-cov tbody,.mu-cov tr,.mu-cov th,.mu-cov td{display:block;width:auto}
  .mu-cov tr{padding:8px 10px;border-bottom:1px solid var(--rule)}
  .mu-cov th,.mu-cov td{border:0;padding:2px 0}
  .mu-cov td[data-l]::before{content:attr(data-l) ": ";font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
  .mu-tscroll:has(.mu-cov){overflow:visible}
  .mu-sb thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mu-sb,.mu-sb tbody,.mu-sb tr,.mu-sb th,.mu-sb td{display:block;width:auto;min-width:0!important;max-width:none}
  .mu-sb tr{padding:8px 10px;border-bottom:1px solid var(--rule)}
  .mu-sb th,.mu-sb td{border:0;padding:2px 0}
  .mu-sb td[data-l]::before{content:attr(data-l) ": ";font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
  .mu-sb td[data-l="in"]::before,.mu-sb td[data-l="out"]::before{vertical-align:14px}
  .mu-tscroll:has(.mu-sb){overflow:visible}
}

/* ---------- Set Lab ---------- */
.sl-bar{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:flex-end;padding:14px 14px 10px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.sl-ctl{display:flex;flex-direction:column;gap:4px;min-width:0}
.sl-cl{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.sl-sec>.sl-ctl{align-items:flex-start;margin:0 0 8px}
.sl-ctls{display:flex;flex-wrap:wrap;gap:8px var(--sp-lg);margin:0 0 8px}
.sl-ctls .sl-ctl{align-items:flex-start}
.sl-sel{font-family:var(--mono);font-size:var(--fs-md);padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);min-height:40px;max-width:100%}
.sl-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.sl-seg button{font-family:var(--mono);font-size:var(--fs-sm);padding:8px 12px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer;min-height:38px}
.sl-seg button:last-child{border-right:0}
.sl-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.sl-seg button:focus-visible,.sl-sel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sl-check{display:flex;gap:8px;align-items:center;font-size:var(--fs-md);min-height:38px;cursor:pointer}
.sl-key{flex:1 1 100%;margin:2px 0 0;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.sl-platnote{flex:1 1 100%;margin:0}
.sl-k{font-family:var(--mono);font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--r-sm);border:1px solid var(--rule);white-space:nowrap;font-weight:400;vertical-align:2px}
.sl-k-n{background:var(--code-bg);color:var(--muted)}
.sl-k-r{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.sl-k-e{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.sl-tags{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.sl-head{padding:var(--sp-lg) 0 0}
.sl-title{font-size:var(--fs-xl);margin:0 0 4px;text-wrap:balance}
.sl-toc ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--mono);font-size:var(--fs-sm)}
.sl-sec{margin:var(--sp-xl) 0 0;padding-top:var(--sp-lg);border-top:1px solid var(--rule)}
/* off-screen sections skip layout and paint on a redraw (every count toggle redraws the page), but only once each has
   been drawn in full and its real height is on record (setlab.js settle and patch): with the 800px placeholder a
   section's buttons sat over the next section's (axe target-size) and the scrollbar jumped */
.sl-sec{contain-intrinsic-size:auto 800px}
.sl-cv .sl-sec{content-visibility:auto;overflow-clip-margin:6px}
.sl-cv .sl-sec[data-cv="off"]{content-visibility:visible}
.sl-sec h2{font-size:var(--fs-xl);margin:0 0 8px;text-wrap:balance}
.sl-sec h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:var(--sp-lg) 0 8px;text-transform:lowercase}
.sl-lead{color:var(--muted);max-width:75ch;margin:0 0 12px}
.sl-glance{border-top:0;padding-top:4px}
.sl-find{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sl-find li{display:flex;gap:10px;align-items:baseline;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--rule);font-size:var(--fs-lg);line-height:1.45}
.sl-find .sl-k{flex:none}
.sl-tw{overflow-x:auto;margin:6px 0 10px;-webkit-overflow-scrolling:touch}
.sl-t{border-collapse:collapse;font-size:var(--fs-md);min-width:min(100%,420px)}
.sl-t th,.sl-t td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--rule);vertical-align:top;font-variant-numeric:tabular-nums}
.sl-t thead th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--faint)}
.sl-t tbody th{font-weight:400}
.sl-cap{caption-side:top;text-align:left;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);padding:0 0 6px}
.sl-t tr.sl-tot th,.sl-t tr.sl-tot td{font-weight:700}
.sl-t tr.sl-me th,.sl-t tr.sl-me td{background:var(--accent-soft)}
.sl-t tr.sl-tempo th,.sl-t tr.sl-tempo td{color:var(--muted)}
.sl-t tr.sl-th th{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--ink);background:var(--code-bg)}
.sl-n{font:inherit;font-variant-numeric:tabular-nums;color:var(--accent);background:none;border:0;padding:1px 4px;margin:-1px -4px;min-width:24px;min-height:24px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;border-radius:var(--r-sm)}
@media (hover:hover){.sl-n:hover{text-decoration-style:solid}}
.sl-n:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sl-z{color:var(--faint)}
.sl-cp{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.sl-sym{display:inline-flex;gap:1px;vertical-align:-2px}
.sl-rs{display:none}
.sl-pair{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);margin:8px 0}
.sl-pair>summary{cursor:pointer;padding:12px 14px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.sl-pair>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-lg)}
.sl-pair[open]>summary{border-bottom:1px solid var(--rule)}
.sl-pairb{padding:4px 14px 12px}
.sl-sp{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}
.sl-sp>li{padding:8px 0;border-bottom:1px solid var(--rule)}
.sl-sph{overflow-wrap:anywhere}
.sl-txt summary,.sl-rules summary,.sl-av summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);padding:6px 0}
.sl-txt p{margin:4px 0;font-size:var(--fs-md);max-width:70ch}
.sl-wants{margin:4px 0 0;padding-left:var(--sp-lg);font-size:var(--fs-md)}
.sl-wants li{margin:4px 0}
.sl-q{overflow-wrap:anywhere}
.sl-rules ul{margin:4px 0;padding-left:var(--sp-lg);font-size:var(--fs-md);color:var(--muted);max-width:80ch}
.sl-links{margin:12px 0 0}
.sl-limits{padding-left:var(--sp-xl);max-width:80ch;color:var(--muted)}
.sl-rule{font-size:var(--fs-md);max-width:70ch}
.sl-mh{margin-right:var(--sp-3xl)}
.sl-mh:focus{outline:none}
.sl-lt{width:100%}
.sl-lt td.sl-q{font-size:var(--fs-sm);color:var(--muted);min-width:14em}
@media (width < 720px){
  .sl-bar{padding:12px}
  .sl-ctl{flex:1 1 100%}
  .sl-sel{width:100%}
  .sl-find li{flex-direction:column;gap:4px}
  .sl-t{font-size:var(--fs-sm)}
  .sl-t th,.sl-t td{padding:6px 6px}
  .sl-curve .sl-rl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sl-curve .sl-rs{display:inline}
  .sl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sl-stack,.sl-stack tbody,.sl-stack tr{display:block;width:auto}
  .sl-stack caption{display:block}
  .sl-stack tr{padding:8px 4px;border-bottom:1px solid var(--rule)}
  .sl-stack th,.sl-stack td{display:inline-block;border:0;padding:1px 12px 1px 0}
  .sl-stack th{display:block;font-weight:700}
  .sl-stack td[data-l]::before{content:attr(data-l) ": ";font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
  .sl-tw:has(.sl-stack){overflow:visible}
  .sl-lt td.sl-q{min-width:0}
}
/* ---------------------------------------------------------------- Prices and where to buy (prices.js): Deckbuilder, card pages, quick view */
.db-pricechip{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;border-radius:var(--r-pill);padding:4px 12px;background:var(--veil);color:inherit;border:1px solid var(--veil-line);cursor:pointer}
.db-banner.noart .db-pricechip{background:var(--code-bg);border-color:var(--rule)}
@media (hover:hover){.db-pricechip:hover{border-color:currentColor}}
.db-pricechip:focus-visible,.px-link:focus-visible,.px-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.px-hn{font-size:var(--fs-xs);opacity:.82}
.db-rprice{min-width:64px}
.px-cell{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-family:var(--mono);font-variant-numeric:tabular-nums}
.px-cell b{font-weight:500;font-size:var(--fs-sm);color:var(--ink)}
.px-cell small{font-size:var(--fs-xs);color:var(--faint)}
.px-cell.px-out b{color:var(--faint)}
.px-none{font-size:var(--fs-xs);color:var(--faint)}
.px-chip{font-variant-numeric:tabular-nums;background:var(--glass)}
.px-chip.px-out{opacity:.72}
.px-hide .db-rprice,.px-hide .px-chip,.px-hide .db-pricechip{display:none}
.px-side .db-kv b,.px-statsp .db-kv b{font-variant-numeric:tabular-nums}
.px-kv-need b{color:var(--accent)}
.px-sidebtns{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.px-tight{margin:10px 0 0;line-height:1.45}
.px-statsp .px-optrow{display:flex;margin-top:10px}
.px-buy{display:grid;gap:var(--sp-lg)}
.px-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.px-kpi{display:grid;gap:2px;align-content:start;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px var(--sp-lg);min-width:0}
.px-kpi-l{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.px-kpi b{font-family:var(--mono);font-size:var(--fs-num);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.px-kpi-s{font-size:var(--fs-sm);color:var(--muted)}
.px-kpi-need{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.px-kpi-need b{color:var(--accent)}
.px-opts{display:flex;flex-wrap:wrap;gap:10px var(--sp-xl);align-items:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.px-optrow{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.px-pick-l{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.px-altbox:empty{display:none}
.px-alt{margin:0;font-size:var(--fs-md);color:var(--muted)}
.px-alt b{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.px-boardwrap{margin-top:10px}
.px-boards{max-width:640px}
.px-boards th[scope="row"]{font-family:var(--sans);font-size:var(--fs-md);font-weight:500;color:var(--ink);border-bottom:1px solid var(--rule);padding:8px 8px}
.px-boards .px-maybe th,.px-boards .px-maybe td{color:var(--muted)}
.px-stores{margin:0}
.px-scope{border:0;padding:0;margin:0 0 10px;min-width:0}
.px-scope legend{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);padding:0;margin:0 0 2px}
.px-scope label{display:inline-flex;gap:6px;align-items:center;margin:0 var(--sp-lg) 4px 0;font-size:var(--fs-md);cursor:pointer}
.px-pick{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 12px}
.px-buyline{margin:4px 0 12px;font-size:var(--fs-lg)}
.px-buyline b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.px-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.px-acts form{display:contents}
.px-go{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;font-size:var(--fs-sm)}
.px-n{font-size:var(--fs-xs);opacity:.82;font-variant-numeric:tabular-nums}
.px-listbox{margin-top:12px}
.px-listbox summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);padding:4px 0}
.px-list{font-family:var(--mono);font-size:var(--fs-sm);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 12px;margin:8px 0 0;max-height:260px;overflow:auto;white-space:pre-wrap}
.px-notes{margin:12px 0 0;padding-left:var(--sp-lg);font-size:var(--fs-md);color:var(--muted)}
.px-notes li{margin-bottom:4px}
.px-notes.px-warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);padding:10px 12px 8px var(--sp-2xl);color:var(--ink)}
.px-done{font-size:var(--fs-lg);margin:6px 0 10px}
.px-tabletools{display:flex;flex-wrap:wrap;gap:8px var(--sp-lg);align-items:center;justify-content:space-between;margin:0 0 8px;font-size:var(--fs-md)}
.px-tabletools label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.px-tabletools .px-sortsel{display:none}
.px-m{color:var(--muted)}
.px-nc{display:block;font-size:var(--fs-xs);font-family:var(--sans)}
.px-sortsel select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px}
.px-table .px-sort{font:inherit;color:inherit;background:none;border:0;padding:2px 0;cursor:pointer;white-space:nowrap}
.px-table th[aria-sort="ascending"] .px-sort,.px-table th[aria-sort="descending"] .px-sort{color:var(--ink);font-weight:700}
.px-table th.num .px-sort{text-align:right}
.px-table .px-c-name{min-width:190px}
.px-table .px-c-name .db-rname{display:block;white-space:normal;font-weight:500}
.px-basis{display:block;font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;color:var(--faint);line-height:1.35;margin-top:1px;white-space:normal}
.px-src{display:block;font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;color:var(--faint);line-height:1.35;margin-top:2px}
.qv-histlink{display:inline-block;font-family:var(--sans);font-size:var(--fs-sm);color:var(--accent);margin-top:2px}
@media (pointer:coarse){.qv-histlink{display:inline-flex;align-items:center;min-height:44px;margin-top:-6px}}
.lib-pricenote{margin:var(--sp-md) 0 0;max-width:70ch}
.px-table td.px-own{white-space:normal;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);text-align:right}
.px-needn{color:var(--accent)}
.px-zero{color:var(--faint);font-weight:400}
.px-table tr.px-out td,.px-table tr.px-out .db-rname{color:var(--faint)}
.px-c-buy{white-space:nowrap}
.px-link{display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;margin:2px 4px 2px 0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;text-decoration:none;gap:6px}
.cl-table td .px-link{color:var(--ink)}
@media (hover:hover){.px-link:hover,.cl-table td .px-link:hover{border-color:var(--accent);color:var(--accent)}}
.px-nosale{font-size:var(--fs-xs);white-space:normal}
.px-factbox{border-top:1px solid var(--rule);padding-top:12px}
.px-facts{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;margin:0}
.px-cardtop{display:grid;gap:8px;margin-bottom:var(--sp-lg)}
#cc-buy .px-facts{margin-top:12px}
.px-sum{margin:0;font-size:var(--fs-lg)}
.px-sum b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.px-mine{margin:0;font-size:var(--fs-md);color:var(--muted)}
.px-mine:empty{display:none}
.px-ptable th.px-c-name{font-family:var(--sans);font-size:var(--fs-md);font-weight:400;color:var(--ink);text-align:left;border-bottom:1px solid var(--rule);padding:8px 8px}
.px-setn{font-weight:500}
.px-cn{font-family:var(--mono);font-size:var(--fs-xs)}
.px-nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px-ptable + .cl-more,.px-tablewrap + .cl-more{margin-top:14px}
.cc-buylink{display:block;font-size:var(--fs-sm)}
.qv-buy dd{display:flex;flex-wrap:wrap;gap:4px}
.qv-buy .px-link{min-height:28px;padding:2px 8px;margin:0}
.db-insp-facts dd .px-basis{text-align:right}
.px-insp-buy dd{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
@media (width < 720px){
  .px-kpis{grid-template-columns:minmax(0,1fr)}
  .px-kpi{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l b" "s b";align-items:center;gap:0 12px;padding:12px 14px}
  .px-kpi-l{grid-area:l}.px-kpi b{grid-area:b;font-size:var(--fs-num)}.px-kpi-s{grid-area:s}
}
@media (width < 720px){
  .px-acts{flex-direction:column}
  .px-go{justify-content:space-between;width:100%;min-height:44px}
  .px-tabletools .px-sortsel{display:inline-flex}
  .px-opts{display:grid;gap:10px}
  .px-opts .px-optrow[role="group"],.px-pick{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .px-buy .db-seg,.px-tabletools .db-seg{display:flex;width:100%}
  .px-buy .db-seg button,.px-tabletools .db-seg button{flex:1 1 0;min-height:44px;line-height:1.25}
  .px-tablewrap{overflow:visible}
  .px-table thead{display:none}
  .px-table,.px-table tbody{display:block}
  .px-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .px-table td,.px-table th{display:block;border:0;padding:0;text-align:left}
  .px-table .px-c-name,.px-table .px-c-buy{grid-column:1/-1}
  .px-table .px-c-name{min-width:0}
  .px-table .px-c-buy{display:flex;flex-wrap:wrap;gap:8px;white-space:normal}
  .px-table td.num,.px-table td.px-own{text-align:left}
  .px-table td[data-l]::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--faint)}
  .px-table .px-link{min-height:44px;padding:8px 12px;margin:0}
  .px-ptable th.px-c-name{border:0;padding:0}
  .px-dot{display:none}
  .px-nm{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:var(--fs-sm);color:var(--faint)}
  .px-boards th[scope="row"]{white-space:normal}
  .px-boardwrap{overflow:visible}
  .px-boards th,.px-boards td{padding:6px 4px;font-size:var(--fs-sm)}
  .px-ptable .px-c-buy .px-link{flex:1 1 auto;justify-content:center}
}
@media (pointer:coarse){
  .px-link,.db-pricechip,.px-table .px-sort,.px-buy .db-seg button,.px-tabletools .db-seg button,.px-listbox summary{min-height:44px}
  .px-scope label,.px-optrow,.px-tabletools label{min-height:44px}
  .qv-buy .px-link{min-height:44px;padding:8px 12px}
}
@media print{.px-acts,.px-listbox,.px-c-buy,.px-opts,.px-pick,.px-scope{display:none!important}}

/* ================================================================ design system: the shared layer (September 25, 2026)
   Rules every page shares, after every tool block so they settle the differences between tools: one page title, one
   button hierarchy, reflow that survives long card names, the app bar, touch targets and field sizes on touch screens,
   sticky bars that never hide focus, and reduced motion. Tool blocks keep their layouts and colors. */

/* one page title; long headings and names wrap instead of widening the page */
h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.02em}
body{overflow-wrap:break-word}
img,video{max-width:100%}
.dimg>img{max-width:none}
select{max-width:100%;min-width:0;text-overflow:ellipsis}
:where(input:not([type=checkbox]):not([type=radio]),textarea){max-width:100%}
label:has(> select){min-width:0;max-width:100%}
kbd{font-size:var(--fs-xs)}
small{font-size:max(var(--fs-xs),.8333em)}
sub,sup{font-size:max(var(--fs-xs),.75em)}

/* buttons: one hierarchy for every tool.
   button   bordered on the surface          .btn-sm .btn-xs .cl-more .cl-dir .cl-facet-toggle .kbd-search .login-link .px-link
   primary  the accent fill, one per view    .primary .cl-go
   segment  joined toggles                   .db-seg .cl-views .mt-seg .mu-seg .sl-seg .fb-anyall
   chip     pill toggles and filters         .cat .cc-tabs .db-folders .cl-say .fb-chip .qf-chip .lib-tag .fr-tag .fr-card ...
   text     reads as a link                  .cl-inline .linkish .btn-link .cc-print .q-next .qf-all .qf-clear
   Sizes: --ctl-h (32 px) for buttons and segments, --ctl-h-sm (28 px) for chips and .btn-xs; every one of them 44 px on a
   touch screen (below). Labels are mono at --fs-sm, one line height, so a link and a button of one kind match. */
:where(button){font-family:var(--mono);font-size:var(--fs-sm)}
:where(input,select,textarea){font-family:inherit}
/* a select no tool styled still follows the theme (the browser's dark select is a mid gray that fails contrast) */
:where(select){color:var(--ink);background-color:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:4px 8px}
.btn-sm,.btn-xs,.cl-more,.cl-dir,.cl-facet-toggle,.kbd-search,.login-link,.px-link,.db-bulk button,.wc-otabs button,.mt-tabs button{font-family:var(--mono);font-size:var(--fs-sm);font-weight:400;line-height:1.25;border-radius:var(--r-md);padding-block:6px;padding-inline:12px}
.btn-xs{font-size:var(--fs-xs);padding-block:4px;padding-inline:8px}
/* the standard heights sit at zero specificity: a tool that asks for a larger control (a 44 px phone button) keeps it */
:where(.btn-sm,.cl-more,.cl-dir,.cl-facet-toggle,.kbd-search,.login-link,.px-link,.db-bulk button,.wc-otabs button,.mt-tabs button,.db-seg button,.cl-views button,.mt-seg button,.mu-seg button,.sl-seg button){min-height:var(--ctl-h)}
:where(.btn-xs,.cat,.cc-tabs button,.db-folders button,.cl-say button,.fb-chip,.qf-chip,.lib-tag,.fr-tag,.fr-card,.sp-kinds button,.fb-jump button,.me-chips a,.ds-dc,.db-bracket-chip,.db-combo-chip,.cc-fin,.db-legal,.db-pricechip,.db-pill,.db-pill-select){min-height:var(--ctl-h-sm)}
a.btn-sm,a.btn-xs,.login-link,.px-link{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-sm.primary,.btn-block.primary,.cl-go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
@media (hover:hover){.btn-sm.primary:hover,.btn-block.primary:hover,.cl-go:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink));border-color:color-mix(in srgb,var(--accent) 88%,var(--ink))}}
.db-seg button,.cl-views button,.mt-seg button,.mu-seg button,.sl-seg button{font-family:var(--mono);font-size:var(--fs-sm);line-height:1.25;padding-inline:10px}
.fb-anyall button{font-size:var(--fs-xs);line-height:1.25;min-height:24px}
/* castability dots: the same 15 px mark, drawn inside a 24 px target (WCAG 2.5.8) */
.db-dot{--dc:var(--dot-na)}
.db-dot.good{--dc:var(--dot-good)}.db-dot.close{--dc:var(--dot-close)}.db-dot.low{--dc:var(--dot-low)}
.db-dot,.db-dot.good,.db-dot.close,.db-dot.low,.db-dot.na{width:24px;height:24px;border:0;box-shadow:none;background:radial-gradient(circle closest-side,var(--dc) 0 5px,var(--surface) 5.5px 7.5px,transparent 8px);filter:drop-shadow(var(--dot-shadow))}
.db-card .db-dot{right:-11px;top:1px}
.db-row .db-dot,.db-row .db-dot.good,.db-row .db-dot.close,.db-row .db-dot.low,.db-row .db-dot.na{width:24px;height:24px;margin:-6px;background:radial-gradient(circle closest-side,var(--dc) 0 4px,var(--surface) 4.5px 6px,transparent 6.5px)}
.cat,.cc-tabs button,.db-folders button,.cl-say button,.fb-chip,.qf-chip,.lib-tag,.fr-tag,.fr-card,.sp-kinds button,.fb-jump button,.me-chips a,.ds-dc,.db-bracket-chip,.db-combo-chip,.cc-fin,.db-legal,.db-pricechip,.db-pill{font-size:var(--fs-sm);line-height:1.25;border-radius:var(--r-pill);padding-block:4px;padding-inline:10px}
.db-pill-select{font-size:var(--fs-sm);border-radius:var(--r-pill)}
.wc-step button,.co-step button,.gf-mana button,.db-stepper button,.mu-stb,.cb-unset,.cl-parts button,.qf-c,.fb-color,.db-dot,.cc-pt-img{font-family:var(--mono)}
.wc-step button,.co-step button{font-size:var(--fs-sm)}
.me-chips a,.fr-card{display:inline-flex;align-items:center}
.cl-inline,.linkish,.btn-link,.cc-print,.q-next,.qf-all,.qf-clear{font:inherit;color:var(--accent);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.q-next,.qf-clear{color:var(--muted)}
.cc-print{text-decoration:none}


/* sticky bars never hide what has focus: the page scrolls a focused control clear of them (WCAG 2.4.11) */
html{scroll-padding-top:var(--sp-md)}
@media (width >= 720px){
  html:has(.mt-bar){scroll-padding-top:156px}
  html:has(.mu-bar){scroll-padding-top:96px}
}
html:has(.gf-status){scroll-padding-top:88px}
.fb{scroll-padding-top:104px}
.qv-box,.ms-modal-box{scroll-padding-top:56px}
.mt-table thead th,.mt-ftab thead th{scroll-margin-top:inherit}

/* fixed bars clear the phone's home indicator and notch (viewport-fit=cover) */
.ms-toasts{bottom:calc(var(--sp-xl) + env(safe-area-inset-bottom,0px))}
.db-bulk{bottom:calc(var(--sp-lg) + env(safe-area-inset-bottom,0px))}
@media (width < 720px){.sp-list{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}}

/* reflow: grid and flex children that hold names shrink, long names wrap (the rotation watch, stacks, lists) */
.db-layout>*,.db-side>*,.db-main,.mt-layout>*,.cl-layout>*,.lib>*,.hub>*,.cc>*,.or-card>*,.wc-top>*,.ev-focus>*,.db-stats>*,.db-primer>*,.me-grid>*,.co-head>*,.mu-pick>*,.cx-head>*,.lbl-wrap>*{min-width:0}
.db-rot ul{grid-template-columns:minmax(0,1fr)}
.db-rot li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.db-rot .db-rname{white-space:normal;overflow-wrap:anywhere;text-align:left;flex:0 1 auto;min-width:0}
.db-rname,.cb-card,.mt-alink,.co-name,.co-set-name b,.lib-title,.cc-head h1,.qv-head h2,.or-card h2,.mt-dh h2,.db-title,.mu-deck b,.fr-vs,.wc-tt b,.px-c-name .db-rname{overflow-wrap:anywhere}
.db-stack{min-width:0}
.db-stack h3{min-width:0;overflow-wrap:break-word;hyphens:auto}
.db-gh{max-width:100%;flex-wrap:wrap;text-align:left;row-gap:0}
.db-pricechip,.px-chip{white-space:nowrap}
.db-curve{margin-top:20px}
.or-pfilters label,.db-cmp label,.fr-filters label,.di-filters label,.mr-controls label,.lib-tools label,.gf-lbl{min-width:0;max-width:100%;flex-wrap:wrap}
.db-cmp select{max-width:100%}

/* text in fixed-size boxes grows the box instead of being cut (WCAG 1.4.12 text spacing) */
.cx-pic.cx-any,.cx-pic.cx-noimg,.cx-pic.cx-pic-text{overflow:visible;overflow-wrap:anywhere}
.db-deck-body{min-width:0}
.db-deck-body b{overflow-wrap:anywhere}

/* containers: components that sit in panels of different widths adapt to the panel, not the window */
.db-panel,.cx-combo,.mt-card,.wc-sec,.px-kpi{container-type:inline-size}
@container (width < 300px){
  .db-kv{flex-wrap:wrap}
  .db-rot li{justify-content:space-between}
  .db-combolist li{grid-template-columns:minmax(0,1fr)}
}
@container (width < 560px){
  .cx-head{grid-template-columns:minmax(0,1fr)}
  .cx-toggle{justify-self:start}
  .cx-cols{grid-template-columns:minmax(0,1fr)}
  .cx-foot-act{margin-left:0}
}
@container (width < 240px){
  .px-kpi b{font-size:var(--fs-xl)}
}

/* phones: lists become two lines so names show whole; small print stays readable */
@media (width < 720px){
  .db-stacks{gap:var(--sp-lg) 8px}
  .db-stack h3{font-size:var(--fs-xs);overflow-wrap:break-word;hyphens:auto}
  .fr-vs{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .fr-ev{white-space:normal}
  /* the collection list: each entry is two lines, the name whole with its total, then finish, condition, language, each */
  .co-table thead{display:none}
  .co-table,.co-table tbody{display:block;width:100%}
  .co-table tr{display:grid;grid-template-columns:auto 2.4em auto auto minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule)}
  .co-table td{border:0;padding:0;white-space:nowrap}
  .co-table td:nth-child(1),.co-table td:nth-child(2){grid-row:1/3}
  .co-table td:nth-child(2){text-align:right}
  .co-table td:nth-child(3){grid-column:3/6;white-space:normal;overflow-wrap:anywhere}
  .co-table td:nth-child(10){grid-column:6;grid-row:1;text-align:right}
  .co-table td:nth-child(5){grid-column:3;grid-row:2}
  .co-table td:nth-child(6){grid-column:4;grid-row:2}
  .co-table td:nth-child(7){grid-column:5;grid-row:2}
  .co-table td:nth-child(9){grid-column:6;grid-row:2;text-align:right}
  .co-table td:is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(9)){font-size:var(--fs-xs);color:var(--muted)}
  /* the deck header on a phone: see the UX-D1 block below. Super Search's sort and view controls are one row that scrolls */
  .cl-controls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
  .cl-controls::-webkit-scrollbar{display:none}
  .cl-controls>*{flex:none}
  .cl-bar{padding-block:var(--sp-sm)}
  /* Draft Sim: the start button stays in reach while the setup scrolls, and focus scrolls clear of it */
  html:has(.ds-setup #ds-go){scroll-padding-bottom:88px}
  .ds-setup .ms-row:has(#ds-go){position:sticky;bottom:0;z-index:5;margin:0 -18px -16px;padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule);border-radius:0 0 var(--r-lg) var(--r-lg)}
  .ds-setup #ds-go{flex:1}
  .gf-status{padding:6px 10px;gap:4px 10px}
  /* Set Lab's dense tables keep fitting a phone at the 13 px floor: tighter cells, headers that hyphenate */
  .sl-t th,.sl-t td{padding:4px}
  .sl-t thead th{hyphens:auto;overflow-wrap:break-word}
  .qv .qv-box{padding-bottom:max(84px,env(safe-area-inset-bottom,0px))}
  /* the blur would make the overlay the arrows' frame, so they'd scroll away with the card: on phones they stay put */
  .qv{backdrop-filter:none}
  .qv-nav{width:48px;height:48px;border-radius:50%;background:var(--glass);border:1px solid var(--veil-line);bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .qv-nav.prev{left:16px}.qv-nav.next{right:16px}
}

/* touch screens: every control gets a 44 by 44 px target (WCAG 2.5.8 asks 24, Apple asks 44), fields are 16 px so iOS
   never zooms, and small controls that sit on pictures keep their look with a larger invisible target */
@media (pointer:coarse){
  :is(a[href],button,[role=button],[role=tab],[role=switch],[role=option],[role=menuitem],select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),label:has(> input[type=checkbox]),label:has(> input[type=radio]),.mf-chips label,.lib-orgchip):not(.lf-tap,.cl-inline,.linkish,.btn-link,.cc-print,.db-card,.gf-card,.ds-card,.cl-tile,.cc-pt-img,.cc-tok-img,.db-hcard,.db-artpick,.co-pp,.db-print,.avp-i,.cl-add,.lib-pin,.db-dot,.skip-link,.mt-fx td button,.sl-n){min-height:var(--tap)!important;min-width:var(--tap)!important}
  summary{min-height:var(--tap)!important;box-sizing:border-box;padding-block:10px!important}
  :root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea){font-size:max(16px,1rem)!important}
  .cb-title input{font-size:var(--fs-xl)!important}
  .wc-wci input{font-size:var(--fs-xl)!important}
  /* chips and segments center their labels at the new height */
  :is(.cat,.cc-tabs button,.db-folders button,.fb-chip,.qf-chip,.lib-tag,.fr-tag,.sp-kinds button,.fb-jump button,.db-seg button,.cl-views button,.mt-seg button,.mu-seg button,.sl-seg button,.fb-anyall button,.btn-sm,.btn-xs,.qf-c,.fb-color,.cc-fin){display:inline-flex;align-items:center;justify-content:center}
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){display:inline-flex;align-items:center;gap:8px}
  /* small controls on pictures: the same look, a 44 px target */
  .cl-add,.lib-pin{min-width:0;min-height:0}
  /* each of these must be positioned itself (absolute or relative), or the target lands on whatever ancestor is */
  .cl-add::before,.lib-pin::before,.db-dot::after,.cl-parts button::after,.lib-check::after{content:"";position:absolute;inset:calc(50% - var(--tap) / 2)}
  .cl-parts button{position:relative}
  .lib-check{display:grid;place-items:center;width:var(--tap);height:var(--tap);top:0;left:0}
  .lib-pin{top:9px;right:9px}
  /* stacked cards overlap, so their castability dots are status marks on touch: tapping the card opens it, castability included */
  .db-card .db-dot{pointer-events:none}
  /* a checkbox with no label of its own (table rows, select all) is its own 44 px target, drawn at 20 px */
  input[type=checkbox]:not(label input){appearance:none;-webkit-appearance:none;position:relative;flex:none;width:var(--tap);height:var(--tap);margin:-8px;padding:0;border:0;background:none;vertical-align:middle;cursor:pointer}
  input[type=checkbox]:not(label input)::before{content:"";position:absolute;inset:calc(50% - 10px);border:1.5px solid var(--line-field);border-radius:var(--r-sm);background:var(--surface)}
  input[type=checkbox]:not(label input):checked::before,input[type=checkbox]:not(label input):indeterminate::before{background:var(--accent);border-color:var(--accent)}
  input[type=checkbox]:not(label input):checked::after{content:"";position:absolute;left:calc(50% - 3px);top:calc(50% - 7px);width:6px;height:11px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
  input[type=checkbox]:not(label input):indeterminate::after{content:"";position:absolute;left:calc(50% - 5px);top:calc(50% - 1px);width:10px;height:2px;background:var(--on-accent)}
  input[type=checkbox]:not(label input):focus-visible{outline:none}
  input[type=checkbox]:not(label input):focus-visible::before{outline:2px solid var(--accent);outline-offset:2px}
  /* a link standing alone in a table cell or a fact is a row-high target */
  :is(td,th,dd)>a[href],:is(h1,h2,h3,h4)>a[href],.mu-list li>a[href],.mt-ev a,.mt-who a,.mt-lists li>a,.sl-toc a,.di-main>a[href],.ry-rank li>a[href]{display:inline-flex;align-items:center;min-height:var(--tap)}
  label:has(> input[type=file]){display:inline-flex;align-items:center;min-height:var(--tap)}
  .cc-mine-decks a,.db-insp-links :is(a,button),.cx-with a,.how-src li>a,.quote figcaption a{display:inline-flex;align-items:center;min-height:var(--tap)}
  .db-insp-links .cl-inline{min-width:var(--tap)}
  /* a count inside a sentence is inline text (WCAG 2.5.8 inline exception); in a table it is a 44 px row */
  p .sl-n{display:inline;min-height:0}
  input[type=range]{min-height:var(--tap)}
  .lib-table .lib-pin{min-width:var(--tap)!important;min-height:var(--tap)!important}
  /* numbers inside dense data tables (Set Lab's counts, the Meta Lens field): a 44 px tall row, and as wide as the column
     allows but never under 24 px (WCAG 2.5.8), so the tables still fit a phone without scrolling sideways */
  .sl-n{min-height:var(--tap);min-width:24px}
  .mt-fx td button{height:var(--tap)}
  .lib-table .lib-pin::before{content:none}
  /* collection tiles: the steppers move under the picture instead of covering it */
  .co-step{position:static;opacity:1;justify-content:space-between;margin-top:4px}
  .co-step button{width:auto;flex:1;height:var(--tap);border-radius:var(--r-md);background:var(--code-bg);color:var(--ink)}
  .co-meta{min-height:0}
  /* list rows are the target: a row is 44 px tall */
  .db-row,.cb-col li,.me-list li,.co-hist li,.db-swaplist li,.db-versions li,.mt-clist li,.wc-dlist label,.gf-plist li{min-height:var(--tap)}
  .db-sel{justify-content:center}
  .lf-bar .btn-sm{min-height:var(--tap)}
}

/* Life Log: while a game is on, the page behind the table leaves the tab order and the screen reader's view */
body.lf-playing{visibility:hidden}
body.lf-playing :is(#lf-app,#lf-rec,.lf-toast,.palette,.ms-modal,.ms-toasts,[aria-live],[role=status],[role=alert]){visibility:visible}
.lf-turn{font-size:max(var(--fs-xs),.72em)}
/* a seat's rows never grow past the seat: under larger text spacing the number gives way, the + and - stay on screen */
.lf-in{grid-template-columns:minmax(0,1fr)}
.lf-life{grid-template-columns:minmax(1.5em,1fr) minmax(0,auto) minmax(1.5em,1fr)}
.lf-num{min-width:0}

/* ---- UX-D1 (September 26, 2026): rows on touch screens, over-wide states, phone headers, forced colors, print ---- */
/* a row of tabs, formats or jumps keeps every label whole and scrolls sideways; a segmented control wraps. (The 44 px
   touch minimum replaces a flex item's own minimum, its text, so without this the items shrank under their labels.) */
.db-tabs>*,.mt-tabs>*,.fb-jump>*,.sp-kinds>*,.fr-tabs>*,.wc-otabs>*,.cc-tabs>*,.db-folders>*,.qf-g>*,.cl-views>*,.db-seg>*,.mt-seg>*,.mu-seg>*,.sl-seg>*,.fb-anyall>*,.db-actions>*,.db-meta>*,.me-id>.me-avbtn{flex:none}
.db-seg,.cl-views,.mt-seg{flex-wrap:wrap;max-width:100%}
@media (pointer:coarse){
  [role=tablist]>[role=tab]{flex:none}
  /* Card Eval's grades: two rows of five on a touch screen, so each is a whole 44 px button */
  .ev-grades{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* labels sit in the middle of a 44 px button, not at its top */
  .db-gh,.db-pricechip{align-items:center}
  /* a field scrolled into view as the keyboard opens stops 24 px above it, not flush against it */
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){scroll-margin-bottom:24px}
}
/* My Stuff: on a small phone the picture keeps its own column (flex:none above), its label wrapping under it, beside the
   words and never on top of them */
@media (width < 480px){
  .me-id{gap:12px;flex:1 1 100%}
  .me-avbtn span{max-width:76px}
}
/* nothing reaches past the screen edge: scroll regions hold what they draw (a visually hidden header label included),
   grids that hold a select or a table start from zero, and Goldfish's mana pool is two across on a phone */
.fr-tw,.db-tablewrap,.cl-tablewrap,.cl-scroll,.sl-tw,.rec-tw,.scroll,.mu-tscroll,.px-tablewrap,.db-rgrid{position:relative}
.lf-card,.px-buy,.fr-rp,.fr-rped{grid-template-columns:minmax(0,1fr)}
.px-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* a 320 px screen (or 400% zoom): no auto-fill grid asks for a column wider than the screen, and the deck's value table
   tightens its cells */
.db-stats{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.me-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.db-decks,.wc-targets{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.ev-misses,.cb-export{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
@media (width < 480px){:root .px-boards :is(th,td){padding-inline:4px;white-space:normal}:root .px-boardwrap{overflow-x:auto}}
/* Film Room's replay editor on a narrow phone (320 to 479 px): each life stepper is a full-width row, its name above it */
@media (width < 480px){
  .fr-rplf{display:grid;grid-template-columns:repeat(2,var(--tap,44px)) minmax(3em,1fr) repeat(2,var(--tap,44px));width:100%}
  .fr-rplfn{grid-column:1/-1;min-width:0}
  .fr-rplf input{width:100%}
}
/* a stack's heading in a narrow column ("Planeswalkers 7" at 320 px) wraps inside its button instead of running out */
.db-stack .db-gh{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
/* focus in the site header (the skip link, the logo, the tool row) puts the deck's slim bar away at once, so it never
   covers what has focus while it slides off */
@media (width < 720px){body:has(.skip-link:focus,.top :focus) .db-slim{transform:translateY(-110%)!important;visibility:hidden!important;transition:none!important}}
.cb-cols>*,.cb-col,.cb-col li>*{min-width:0}
.cb-col ul{grid-template-columns:minmax(0,1fr)}
.wc-toggle{white-space:normal;min-width:0}
@media (width < 720px){
  .db-card .db-dot{right:-4px}
  .gf-poolrow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the deck page on a phone (and a phone held sideways): a 48 px picture beside its credit, the title, one line of
   status chips that scrolls, and the actions behind one "actions" button; the slim bar takes over once scrolled */
.db-actmore{display:none}
@media (width < 720px), (height < 480px) and (pointer:coarse){
  /* nothing here needs clipping (the picture has its own corners), and the status row scrolls on its own */
  .db-banner{min-height:0;overflow:visible}
  .db-banner.hasart{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:start}
  .db-banner-art{display:contents}
  .db-banner-art>.dimg{grid-column:2;grid-row:1;align-self:start;width:48px;max-width:48px;margin:12px 14px 0 0;z-index:1}
  .db-banner.hasart .db-banner-body{grid-column:1/-1;grid-row:1}
  .db-banner-art>.db-credit{grid-column:1/-1;grid-row:2;text-align:left;max-width:none;margin:0;padding:0 14px 10px;font-size:var(--fs-xs)}
  .db-banner-body{padding:10px 14px 14px}
  .db-title{font-size:var(--fs-xl)}
  .db-meta{position:relative;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:8px -14px 0;padding:2px 14px 4px}
  .db-counts>*{flex:none;white-space:nowrap}
  .db-meta .db-pill-select{width:auto;max-width:10rem}
  .db-meta::-webkit-scrollbar{display:none}
  .db-actmore{display:inline-flex;align-items:center;gap:6px;margin-top:10px}
  .db-actmore::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .db-actmore[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
  .db-banner:not(.noart) .db-actmore{background:var(--glass-soft);color:var(--on-media);border-color:var(--veil-line)}
  .db-actions{display:none}
  .db-actions.open{display:flex;flex-wrap:wrap;overflow:visible;margin:8px 0 0;padding:0}
}
/* deck list rows: two lines (the name whole, then its marks, cost, castability, ownership and price) wherever the column
   is under 480 px, a phone or a two-column list on a tablet */
.db-lgroup{container-type:inline-size}
@container (width < 480px){
  .db-row{flex-wrap:wrap;justify-content:flex-end;column-gap:8px;row-gap:2px;padding-block:6px}
  .db-row>:not(.db-sel,.db-rq,.db-rname){order:2}
  .db-row::after{content:"";order:1;flex:0 0 100%;height:0}
  .db-row .db-rname{flex:1 1 0;white-space:normal;overflow-wrap:anywhere}
}
/* Card Eval on a phone: the grades stay at the bottom of the screen, and the card is never taller than half of it */
@media (width < 720px){
  .ev-grades{position:fixed;left:0;right:0;bottom:0;z-index:30;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule);box-shadow:var(--shadow-3)}
  .ev-grades button{padding-block:8px}
  .ev-focus{padding-bottom:132px}
  .ev-img{width:min(100%,calc(55dvh * 488 / 680));margin-inline:auto}
  html:has(.ev-grades){scroll-padding-bottom:132px}
  body:has(.ev-grades) .ms-toasts{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
}
/* Super Search on a phone: the results start higher. The query's parts are one row that scrolls, and "sort" sits
   beside its menu in the controls row */
@media (width < 720px){
  .cl-parts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .cl-parts::-webkit-scrollbar{display:none}
  .cl-parts li{flex:none;padding-block:0}
  .cl-bar{margin-top:6px;row-gap:6px}
  .cl-controls label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .cl-controls #cl-order{max-width:min(52vw,15rem)}
  .cl-layout{padding-top:var(--sp-md)}
}
/* the card page: the long sections fold (open on wider screens, closed on a phone, where a jump menu leads to each), and
   on a phone the name and type line come before the picture */
.cc-jump{display:none}
.cc-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.cc-fold>summary::-webkit-details-marker{display:none}
.cc-fold>summary::before{content:"+";display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:var(--r-sm);background:var(--code-bg);color:var(--muted);font-family:var(--mono);font-size:var(--fs-sm)}
.cc-fold[open]>summary::before{content:"\2212"}
.cc-fold>summary .label{margin:0}
.cc-fold[open]>summary{margin-bottom:14px}
@media (width < 720px){
  .cc{row-gap:var(--sp-sm)}
  .cc-main{display:contents}
  .cc-head{order:-2}
  .cc-type{order:-1;margin-bottom:4px}
  .cc-art{max-width:min(100%,260px);margin-block:4px 8px}
  .cc-jump{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
  .cc-jump a{display:inline-flex;align-items:center;font-family:var(--mono);font-size:var(--fs-sm);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 12px;background:var(--surface);color:var(--ink);text-decoration:none}
}
/* a field shows focus with a 2 px ring, not only a border color; a search box's frame takes the ring for its field */
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
:root :is(.cl-inputwrap,.db-addbox,.lib-search,.co-addbox):focus-within{box-shadow:0 0 0 1px var(--accent)}
:root :is(#cl-q,#db-add,#co-add,.lib-search input,#pal-input):focus-visible{outline:none}
/* the library's select boxes: a 24 px target with a mouse, 44 on a touch screen (above) */
.lib-check{display:grid;place-items:center;min-width:24px;min-height:24px}
/* dialogs look alike: the quick view (and the Film card view) close at the top right with a mono heading; the Meta
   archetype drawer has the rounded corners every other panel has */
.qv-head h2,.mt-dh h2{font-family:var(--mono);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em}
.mt-dbox{border-radius:var(--r-lg) 0 0 var(--r-lg)}
/* the search palette: its field and, on a phone or touch screen, a close button beside it (Esc does it on a keyboard) */
.pal-top{display:flex;align-items:center;border-bottom:1px solid var(--rule)}
.pal-top input{flex:1;min-width:0;border-bottom:0}
.pal-x{display:none}
@media (width < 720px),(pointer:coarse){
  .pal-x{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:4px;border:0;border-radius:var(--r-md);background:none;color:var(--muted);font-size:var(--fs-xl);line-height:1;cursor:pointer}
  @media (hover:hover){.pal-x:hover{color:var(--ink);background:var(--code-bg)}}
}
@media (width < 720px){
  .qv-x{justify-self:end}
  .mt-dbox{border-radius:0}
}
/* Life Log: on a phone the bar's buttons stay one row and whose turn it is gets its own line above them (squeezed into
   the button row it shrank to "T" at 320 px) */
@media (width < 480px){
  .lf-bar{flex-wrap:wrap;gap:4px;padding-inline:6px}
  .lf-bar>*{flex:none}
  .lf-bar .btn-sm{padding-inline:8px}
  .lf-where{flex:1 0 100%;order:-1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs)}
}
/* home and the 404 page: the header spans the same 1280 px as every tool page, so the whole tool row shows on a desktop;
   the page itself keeps its 960 px column */
body:not(.app) .wrap{max-width:1280px}
body:not(.app) :is(main,.foot){max-width:var(--wrap);margin-inline:auto}
/* every tool's visible title (h1) starts the same distance under the site header, the same as the loading shell's, so
   it doesn't jump when the tool draws: 32 px, 24 on a phone */
.cl-hero,.mt-hero,.db-home,.co-head,.me-head,.mb-page-h,.ev-head,.wc-hero,.shell,.tool-title,.mk-head{padding-top:var(--sp-2xl)}
.wc-hero{margin-top:0}
.me-id{align-items:flex-start}
@media (width < 720px){.cl-hero,.mt-hero,.db-home,.co-head,.me-head,.mb-page-h,.ev-head,.wc-hero,.shell,.tool-title,.mk-head{padding-top:var(--sp-xl)}}
/* where am I (journey audit M1): the tool's name as the page's visible title, the same words as its app bar item, drawn
   by the page above the tool (build.py tool_title) so it's there before the tool and stays when it draws */
.tool-title h1{font-family:var(--mono);font-weight:700;font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--sp-sm);color:var(--ink)}
.tool-title+*>.shell-titled{padding-top:0}
/* a tool drawn as a grid keeps its rows to their content inside the screen-high box the page reserves for it */
main>[id$="-app"]{align-content:start}
/* the deck library: "Deckbuilder" is the page's title, the chosen view ("All decks 4") its heading */
.lib-top h2{margin:0;font-family:var(--mono);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em}
.lib-top h2 span{font-family:var(--mono);font-size:var(--fs-lg);color:var(--faint);font-weight:500;margin-left:6px}
/* Captain and Market draw their own title block: the title is first in it, at the same place as every tool's */
main .cap-head{display:flex;flex-direction:column;padding-top:var(--sp-2xl)}
main .cap-head h1{order:-1;margin:0}
.cap-head .cap-kicker{margin:8px 0 0}
.mk>.mk-head{padding-top:var(--sp-2xl)}
@media (width < 720px){main .cap-head,.mk>.mk-head{padding-top:var(--sp-xl)}}
.cap-tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* My Stuff is marked where you are, like a tool in the app bar */
/* ---- the tool first (journey audit M6, rule 7; round 30 design lead): each page's main control on the first screen ---- */
/* home: the greeting starts where every tool's title does, the tools come right after the house format and the daily
   pick, and the quote sits below the tools */
.intro{padding-block:var(--sp-2xl) var(--sp-xl)}
/* the site named first, Chad's byline and his own words under it (launch audit M5) */
.intro p.intro-by{margin:6px 0 0;font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent)}
.intro p.intro-by+p{margin-top:10px}
/* start here: three places to begin, above the house format and the full grid */
.start{margin:0 0 var(--sp-lg)}
.start h2{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:0 0 8px}
.start ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.start a{display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
@media (hover:hover){.start a:hover{border-color:var(--accent)}}
.start a .px{width:28px;height:28px;flex:none}
.start a>span:not(.arrow){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.start b{font-family:var(--mono);font-size:var(--fs-lg)}
.start a>span>span{color:var(--muted);font-size:var(--fs-md);line-height:1.4}
@media (width < 720px){.start ul{grid-template-columns:minmax(0,1fr);gap:8px}.start a{padding:10px 14px}}
/* about and privacy: a readable column of plain words */
.doc{max-width:44rem;font-size:var(--fs-lg);line-height:1.65}
.doc h2{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;margin:var(--sp-xl) 0 8px;scroll-margin-top:var(--sp-xl)}
.doc p,.doc ul{margin:0 0 12px}
.doc ul{padding-left:1.3em}
.doc li{margin:0 0 6px}
.quote-sec{margin:var(--sp-2xl) 0}
.quote-sec .quote{margin:0}
@media (width < 720px){
  .intro{padding-top:var(--sp-xl)}
  .intro p{font-size:var(--fs-lg)}
  .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .cats::-webkit-scrollbar{display:none}
  .cats>*{flex:none}
}
/* Meta Lens on a phone: the archetypes come first. The promise line is the page's description (it stays on wider
   screens), the controls are one row each that scrolls, the six counts sit three to a row */
@media (width < 720px){
  .mt-lede{display:none}
  .mt-ctrls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 4px}
  .mt-ctrls::-webkit-scrollbar{display:none}
  .mt-ctrls>*,.mt-kinds>*{flex:none}
  .mt-ctrls .mt-seg,.mt-kinds{flex-wrap:nowrap}
  .mt-kinds label{white-space:nowrap}
  .mt-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mt-kpi{padding:6px 8px}
  .mt-kpi b{font-size:var(--fs-lg)}
}
/* Set Lab: the sections' jump links sit right under the set's name; a section's method is in its "how it's counted",
   under its tables; on a phone each control is one row (its name, then its choices, which scroll) */
.sl-opts{flex:1 1 0;min-width:min(100%,24rem)}
.sl-bar:has(.sl-opts){align-items:flex-start;padding:10px 14px 8px}
.sl-optsin .sl-key{margin:0}
.sl-optsin{display:flex;flex-wrap:wrap;gap:10px var(--sp-lg);align-items:flex-end}
.sl-opts>summary{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:var(--tap,32px);font-size:var(--fs-sm);color:var(--ink)}
@media (width >= 720px){.sl-opts>summary{display:none}}
@media (width < 720px){.sl-opts{flex:1 1 100%}.sl-optsin{display:grid;gap:8px;margin-top:8px}}
.sl-how{margin:10px 0 0}
.sl-how>summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);width:max-content;max-width:100%}
.sl-how[open]>summary{margin-bottom:6px}
/* the first table right under the set's name; the findings at a glance and the section links after it */
.sl-head+.sl-sec{margin-top:var(--sp-md);padding-top:var(--sp-sm)}
.sl-sec+.sl-glance{border-top:1px solid var(--rule);padding-top:var(--sp-lg)}
.sl-glance+.sl-toc ul{margin:var(--sp-md) 0 0}
@media (width >= 1024px){.sl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding-top:var(--sp-md)}.sl-head .sl-title{margin:0}.sl-head p{margin:0}
  .sl-glance .sl-find{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sl-glance .sl-find li{font-size:var(--fs-md);padding:4px 10px;line-height:1.4}.sl-glance h2{margin-bottom:6px}.sl-sec.sl-glance{margin-top:var(--sp-md);padding-top:var(--sp-md)}}
@media (width < 720px){
  .sl-bar .sl-ctl{flex-direction:row;align-items:center;gap:8px}
  .sl-bar .sl-cl{flex:0 0 3.4rem}
  .sl-bar .sl-seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
  .sl-bar .sl-seg::-webkit-scrollbar{display:none}
  .sl-bar .sl-sel{flex:1 1 auto;min-width:0}
  .sl-find li{font-size:var(--fs-md)}
  .sl-bar .sl-key{display:block;line-height:1.9}
}
/* the deck page: what the castability dots mean, one line under the view controls (journey audit M10) */
.db-dotkey{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:6px 0 var(--sp-sm);color:var(--muted)}
.db-dotkey+.db-dotkey{margin-top:calc(-1 * var(--sp-sm) + 4px)}
.db-dotkey>span{display:inline-flex;align-items:center;gap:6px}
.db-dk{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--dot-na)}
.db-dk.good{background:var(--dot-good)}.db-dk.close{background:var(--dot-close)}.db-dk.low{background:var(--dot-low)}
@media (forced-colors:active){.db-dk{forced-color-adjust:none}}
/* the card view on a phone: previous and next sit in a bar of their own at the bottom of the view, so they never lie
   over the card's controls (the deck's +/-, "find a replacement"); the bar stays in reach while the card scrolls */
@media (width < 720px){
  .qv .qv-box{padding-bottom:var(--sp-lg)}
  .qv-navs:not(:empty){display:flex;order:99;position:sticky;bottom:0;z-index:4;justify-content:space-between;align-items:center;margin:var(--sp-md) calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-lg));padding:8px var(--sp-lg) max(8px,env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule)}
  .qv-navs .qv-nav{position:static;transform:none;width:64px;height:44px;border-radius:var(--r-pill);background:var(--code-bg);color:var(--ink);border:1px solid var(--rule)}
}
/* Life Log: "start" stays in reach while the new-game setup scrolls */
.lf-setup .ms-row:has(#lf-go){position:sticky;bottom:0;z-index:5;margin:0 calc(-1 * var(--sp-lg));padding:10px var(--sp-lg) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule)}
html:has(.lf-setup #lf-go){scroll-padding-bottom:88px}
/* Wildcard Planner: the promise reads at body size on a phone */
@media (width < 720px){.wc-lede{font-size:var(--fs-md)}}
/* Market's views stay one row that scrolls */
.mk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.mk-tabs>*{flex:none}
/* Trade Calculator: the trade's own name sits under the page title as a smaller heading */
.tool-title+.tr .tr-title{font-size:var(--fs-xl)}
.tool-title+.tr .tr-head{padding-top:var(--sp-xs)}
/* Windows high contrast (forced colors): the chosen tab, view or chip is outlined, and charts keep their bars */
@media (forced-colors:active){
  :is([aria-pressed="true"],[aria-selected="true"],[aria-current="page"],[aria-checked="true"]){outline:2px solid Highlight;outline-offset:-2px}
  .db-bar,.db-bar2 i,.curve .bar,.mb-cat-bar i,.ev-bar i,.ev-tbar i,.co-bar i,.mt-inc i,.mt-bar-i,.fr-bar,.rec-ci,.rec-p,.mu-gd,.mb-spark i b,.ds-curve i,.wc-prog i,.mb-prog i,.fr-prog span,.mu-prog span,.meter i,.db-hbar{forced-color-adjust:none;background:CanvasText}
  .db-dot,.mt-fx td,.lib-stage,.lf-dot,.lf-sw{forced-color-adjust:none}
}
/* print: black on white whatever the theme; the explainers stay on screen. A deck prints as its list (deckbuilder.js
   switches the view for the print), a cube's pick list flows across pages, a trade reads as plain rows */
@media print{
  :root,:root[data-theme]{color-scheme:light;--ground:var(--print-paper);--surface:var(--print-paper);--ink:var(--print-ink);--muted:var(--print-muted);--faint:var(--print-muted);--rule:#BBBBBB;--code-bg:#F2F2F2;--on-media:var(--print-ink);--media-ground:var(--print-paper)}
  body{background:var(--print-paper);color:var(--print-ink)}
  .how,.cl-about,.side,.top,.side-scrim,.skip,.lf-toast{display:none!important}
  .db-banner,.db-banner.hasart{display:block;min-height:0;border:0;border-radius:0}
  .db-banner-body{padding:0 0 8px}
  .db-banner-art,.db-back,.db-actmore,.db-orgline,.db-sel,.db-lgroup .db-dot,.db-keys,.db-slim{display:none!important}
  .db-title{text-shadow:none;margin-left:0;padding:0}
  .db-banner :is(.db-pill,.db-pill-select,.db-pricechip,.db-legal){background:none!important;color:var(--print-ink)!important;border-color:var(--rule)!important}
  /* (:root lifts these over the tools' own rules, which come later in this file) */
  :root .db-lgroup{break-inside:avoid-page;container-type:normal}
  :root .db-row{break-inside:avoid}
  :root .db-row .db-rname{white-space:normal;overflow:visible;text-overflow:clip}
  :root .db-banner .db-pill-select{appearance:none;-webkit-appearance:none;border:0!important;padding-inline:0;width:auto}
  :root .cb-printcols section{break-inside:auto}
  :root .cb-printcols h3{break-after:avoid}
  :root .tr-thumb{display:none}
  :root .tr-line{grid-template-columns:2.5em minmax(0,1fr) auto;grid-template-areas:"qty name price" "qty opts price";gap:2px 10px;padding:6px 0;break-inside:avoid}
  :root .tr-lqty{border:0;align-self:start;background:none}
  :root .tr-lqty input{width:2.5em;border:0;text-align:left;height:auto;padding:0}
  :root .tr-lopts{gap:2px 12px}
  :root .tr-sel-p{flex:0 1 auto}
  :root .tr-sel select{appearance:none;-webkit-appearance:none;width:auto;border:0;background:none;padding:0;min-height:0;font-size:var(--fs-xs);color:var(--print-muted)}
  :root .tr-tot{break-inside:avoid}
}

/* ---- UX pass three (September 26, 2026) ---- */
/* a card tile is one control: the picture is the button, and anything else on the tile (a castability dot, the + and -)
   is its own button beside it, never inside it */
.db-cbtn{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;border-radius:var(--r-card);cursor:pointer}
.db-cbtn:focus-visible{outline:none}
.db-cbtn:focus-visible :is(img,.db-fb){box-shadow:0 0 0 3px var(--accent)}
.db-stack .db-card:focus-within{z-index:5;transform:translateY(-6px)}
/* in a stack each card shows a strip above the next one: at least 26 px of it (a 24 px target and room), however narrow
   the column; a card is 139.34% as tall as it is wide */
.db-stack .db-card+.db-card{margin-top:max(-121%,calc(26px - 139.34%))}
.db-card.is-foil .db-cbtn>img{box-shadow:0 0 0 2px var(--foil-a),0 0 0 4px var(--foil-b),var(--shadow-1)}
.db-exports li>label[for]{flex:1 1 220px}
/* the deck's counts sit in one wrapper (redrawn on its own after an add) that takes no box of its own */
.db-counts{display:contents}
.db-counts>span{opacity:.92}
button.co-img{display:block;width:100%;margin:0;padding:0;border:0;font:inherit;color:inherit;cursor:pointer}
button.co-img:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.co-tile:focus-within .co-img{transform:translateY(-2px)}
/* the deck's slim bar: on a phone, once the header has scrolled away */
.db-slim{display:none}
@media (width < 720px){
  .db-slim{position:fixed;top:0;left:0;right:0;z-index:45;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:var(--shadow-2);transform:translateY(-110%);visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s}
  .db-slim.on{transform:none;visibility:visible;transition:transform .18s ease,visibility 0s}
  html:has(.db-slim.on){scroll-padding-top:calc(var(--top-h) + 72px)}   /* under the phone's top bar since v1.0 (css/b_decks.css) */
}
.db-slim-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:none;border:0;padding:0;font-family:var(--mono);font-size:var(--fs-md);font-weight:700;color:var(--ink);cursor:pointer}
.db-slim-n{flex:none;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.db-slim :is(.db-legal,.btn-sm){flex:none;white-space:nowrap}
.db-slim .db-legal.wip{background:var(--code-bg);color:var(--muted);border-color:var(--rule)}
/* the search palette's groups: tools and pages, your decks, cards, actions */
.pal-list ul{list-style:none;margin:0;padding:0}
.pal-h{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);padding:8px 10px 4px}
.pal-g+.pal-g{margin-top:4px;border-top:1px solid var(--rule)}
.pal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.pal-keys{font:inherit;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.pal-keys:hover{color:var(--ink)}}
/* work running in the background: a thin bar that fills, and the words beside it */
.ms-prog{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);margin:8px 0}
.ms-prog progress{flex:0 1 220px;height:6px;appearance:none;-webkit-appearance:none;border:0;border-radius:var(--r-pill);background:var(--code-bg);overflow:hidden}
.ms-prog progress::-webkit-progress-bar{background:var(--code-bg);border-radius:var(--r-pill)}
.ms-prog progress::-webkit-progress-value{background:var(--accent);border-radius:var(--r-pill)}
.ms-prog progress::-moz-progress-bar{background:var(--accent);border-radius:var(--r-pill)}
/* a long list drawn when it first scrolls near the screen keeps its place meanwhile */
.ms-later{min-height:120px}
/* reduced motion: nothing slides, pulses or spins */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* ---------------------------------------------------------------- Trade Calculator (trade.js) */
.tr{--tr-give:var(--accent);--tr-get:var(--muted);padding-bottom:var(--sp-2xl)}
.tr-banner{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-lg);align-items:center;justify-content:space-between;margin:var(--sp-md) 0 0;padding:10px 14px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg);font-size:var(--fs-md)}
.tr-banner p{margin:0}
.tr-banner-q{border-color:var(--rule);background:var(--surface);color:var(--muted)}
.tr-head{display:flex;flex-wrap:wrap;gap:var(--sp-md) var(--sp-xl);align-items:flex-end;justify-content:space-between;padding:var(--sp-xl) 0 var(--sp-md)}
.tr-titlebox{display:grid;gap:2px;min-width:0;flex:1 1 280px}
.tr-title-l,.tr-saved{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.tr-title{font:inherit;font-family:var(--mono);font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:var(--r-md);padding:2px 6px;margin-left:-7px;width:100%;min-width:0}
@media (hover:hover){.tr-title:hover{border-color:var(--rule)}}
.tr-title:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tr-actions{display:flex;flex-wrap:wrap;gap:6px}
.tr-sum{padding:var(--sp-sm) 0 var(--sp-md);border-bottom:1px solid var(--rule)}
.tr-tots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-md)}
.tr-tot{display:grid;gap:2px;align-content:start;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 16px;min-width:0}
.tr-tot-give{box-shadow:inset 4px 0 0 var(--tr-give)}
.tr-tot-get{box-shadow:inset 4px 0 0 var(--tr-get)}
.tr-tot-l{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.tr-tot b{font-family:var(--mono);font-size:var(--fs-num);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tr-tot-s{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.tr-bar{display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;margin:var(--sp-md) 0 4px;background:var(--code-bg)}
.tr-bar i{display:block;height:100%}
.tr-bar-g{background:var(--tr-give)}
.tr-bar-r{background:var(--tr-get)}
.tr-bar-l{display:flex;justify-content:space-between;gap:var(--sp-md);margin:0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.tr-basis{margin:6px 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.tr-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-xl);margin-top:var(--sp-lg)}
.tr-side{min-width:0}
.tr-side-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--sp-md);border-bottom:2px solid var(--tr-give);padding-bottom:6px;margin-bottom:var(--sp-md)}
[data-sidebox="get"] .tr-side-h{border-color:var(--tr-get)}
.tr-side-h h2{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:0}
.tr-side-t{font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums;text-align:right}
.tr-add{display:grid;gap:8px;margin-bottom:var(--sp-md)}
.tr-addbox{position:relative;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line-field);border-radius:var(--r-lg)}
.tr-addbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tr-addbox input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-lg);padding:10px 12px;outline:none}
.tr-addbtns{display:flex;flex-wrap:wrap;gap:6px}
.tr-lines{list-style:none;margin:0;padding:0}
.tr-line{display:grid;grid-template-columns:48px minmax(0,1fr) auto var(--ctl-h);grid-template-areas:"pic name name x" "pic opts opts opts" "pic qty price price";gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.tr-thumb{grid-area:pic;align-self:start;display:block}
.tr-thumb img{display:block;width:48px;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.tr-lmain{display:contents}
.tr-lname{grid-area:name;min-width:0;font-size:var(--fs-md);line-height:1.35}
.tr-lname a{color:var(--ink);font-weight:500;text-decoration:none}
@media (hover:hover){.tr-lname a:hover{color:var(--accent)}}
.tr-bad{font-size:var(--fs-xs);color:var(--warn)}
.tr-lopts{grid-area:opts;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tr-sel select{font:inherit;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:4px 8px;min-height:var(--ctl-h);max-width:100%}
.tr-sel-p{flex:1 1 180px;min-width:0}
.tr-sel-p select{width:100%}
.tr-lqty{grid-area:qty;display:inline-flex;align-items:center;justify-self:start;border:1px solid var(--line-field);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.tr-step{font:inherit;font-family:var(--mono);font-size:var(--fs-lg);width:var(--ctl-h);height:var(--ctl-h);border:0;background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover){.tr-step:hover{background:var(--code-bg)}}
.tr-lqty input{width:3.2em;height:var(--ctl-h);border:0;border-inline:1px solid var(--rule);text-align:center;font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums;background:transparent;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.tr-lqty input::-webkit-inner-spin-button,.tr-lqty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tr-lprice{grid-area:price;text-align:right;min-width:0}
.tr-lprice b{display:block;font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.tr-lprice small{display:block;font-size:var(--fs-xs);color:var(--faint);font-variant-numeric:tabular-nums}
.tr-noprice{color:var(--faint);font-weight:500}
.tr-lx{grid-area:x;align-self:start;font:inherit;font-size:var(--fs-xl);line-height:1;width:var(--ctl-h);height:var(--ctl-h);border:0;border-radius:var(--r-md);background:transparent;color:var(--faint);cursor:pointer}
@media (hover:hover){.tr-lx:hover{background:var(--code-bg);color:var(--ink)}}
.tr-step:focus-visible,.tr-lx:focus-visible,.tr-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tr-empty{color:var(--muted);font-size:var(--fs-md);border:1px dashed var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg);margin:0}
.tr-facts{margin:var(--sp-xl) 0 0;font-size:var(--fs-sm);color:var(--muted)}
.tr-dock{display:none}
.tr-me .me-list small{color:var(--faint)}
.tr-ptext{width:100%;font-family:var(--mono)}
.tr-pfilter input,.tr-shurl{width:100%;font:inherit;font-family:var(--mono);font-size:var(--fs-md);padding:10px 12px;border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.tr-plist{list-style:none;margin:10px 0 0;padding:0;max-height:60vh;max-height:60dvh;overflow:auto;display:grid;gap:4px}
.tr-pick{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 12px;min-height:44px;cursor:pointer}
@media (hover:hover){.tr-pick:hover{border-color:var(--accent)}}
.tr-pick-n{min-width:0}
.tr-pick-n b{display:block;font-weight:500;font-size:var(--fs-md)}
.tr-pick-n small{display:block;font-size:var(--fs-xs);color:var(--faint)}
.tr-pick-q{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.tr-pick-add{font-family:var(--mono);font-size:var(--fs-xl);color:var(--accent)}
.tr-fs{border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 14px;margin:0 0 var(--sp-md);min-width:0}
.tr-fs legend{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);padding:0 4px}
.tr-radio{display:flex;gap:8px;align-items:baseline;margin:6px 0;font-size:var(--fs-md);cursor:pointer}
.tr-ctable{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.tr-cin{display:grid;gap:4px;font-size:var(--fs-sm)}
.tr-cin-f{display:flex;align-items:center;gap:4px;font-family:var(--mono)}
.tr-cin input{width:5em;font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums;padding:6px 8px;border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.tr-warn{margin:0 0 var(--sp-md);padding:10px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-md);color:var(--ink)}
.tr-warn p{margin:0 0 4px}
.tr-warn ul{margin:0;padding-left:18px}
.tr-saved-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tr-saved-list li{display:flex;gap:8px;align-items:center}
.tr-saved-list a{flex:1;min-width:0;display:grid;gap:2px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:var(--ink);background:var(--surface);min-height:44px}
@media (hover:hover){.tr-saved-list a:hover{border-color:var(--accent)}}
.tr-saved-list small{color:var(--faint);font-size:var(--fs-xs)}
.tr-lnote{display:block;margin:4px 0 0;padding:4px 8px;border-left:3px solid var(--warn-line);background:var(--warn-bg);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--fs-sm);font-weight:400;color:var(--ink);line-height:1.4}
.tr-bannerbtns{display:flex;flex-wrap:wrap;gap:6px}
.tr-over{color:var(--ink);font-weight:700}
.tr-apph{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:var(--sp-md) 0 4px}
.tr-applist{margin:0 0 var(--sp-md);padding-left:18px;font-size:var(--fs-sm);line-height:1.45;max-height:40vh;max-height:40dvh;overflow:auto}
.tr-diffcopy{display:block;font-size:var(--fs-xs);color:var(--muted)}
.tr-shby{width:100%;font:inherit;font-size:var(--fs-md);padding:10px 12px;margin:4px 0 var(--sp-md);border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
/* ---- shared wishlists and trade binders (trade.js): the share-lists dialog, the list a link opens, Collection's "for trade" */
.ms-modal label.tr-radio{display:block;padding-left:26px;font-family:var(--sans);font-size:var(--fs-md);line-height:1.45;color:var(--ink);margin:6px 0}   /* a box beside its words, the words wrapping under each other (the modal's own label rule stacks the box over them) */
.ms-modal label.tr-radio input{margin:0 8px 0 -26px;vertical-align:-2px}
.tr-lsub{display:grid;margin:0 0 6px 26px}
.tr-lhelp{margin:2px 0 8px}
.tr-lsum{margin:var(--sp-sm) 0 6px;font-size:var(--fs-md)}
.tr-lqrbox{margin-top:var(--sp-md)}
.tr-lqr{max-width:min(100%,360px);margin:0 auto 8px;border-radius:var(--r-md);overflow:hidden;background:var(--paper)}   /* black on white in either theme (--paper is white in both): what a phone camera reads */
.tr-lqr svg{display:block;width:100%;height:auto}
body:has(.tr-lqr svg) .ms-toasts{visibility:hidden}   /* nothing sits on a code while it shows (a notice over it costs squares); notices are still read out, and "copy the link" says "copied" beside itself */
.tr-lhead{display:flex;flex-wrap:wrap;gap:var(--sp-md) var(--sp-xl);align-items:flex-end;justify-content:space-between;padding:var(--sp-lg) 0 var(--sp-sm)}
.tr-lhead-t{flex:1 1 320px;min-width:0}
.tr-lhead h2{font-family:var(--mono);font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px}
.tr-lhead p{margin:0 0 4px;font-size:var(--fs-sm);color:var(--muted);max-width:80ch}
.tr-ltabs{margin:var(--sp-sm) 0 var(--sp-md)}
.tr-lctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 var(--sp-sm)}
.tr-lctl input{flex:1 1 220px;min-width:0;font:inherit;font-family:var(--mono);font-size:var(--fs-md);padding:10px 12px;border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.tr-ltot{margin:0 0 var(--sp-sm);font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.tr-slist{list-style:none;margin:0;padding:0}
.tr-srow{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto auto;grid-template-areas:"pic main q p add" "pic in in in in";gap:2px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);content-visibility:auto;contain-intrinsic-size:auto 84px}   /* rows out of view skip layout and paint: a long binder switches tabs quickly */
.tr-sthumb{grid-area:pic;align-self:start;display:block}
.tr-sthumb img{display:block;width:48px;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.tr-smain{grid-area:main;min-width:0;display:grid;gap:2px}
.tr-sname{color:var(--ink);font-weight:500;font-size:var(--fs-md);text-decoration:none;line-height:1.35}
@media (hover:hover){a.tr-sname:hover{color:var(--accent)}}
.tr-sdet{font-size:var(--fs-xs);color:var(--muted)}
.tr-snote{font-size:var(--fs-sm);color:var(--muted)}
.tr-smatch{justify-self:start;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.2;padding:3px 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--ink)}
.tr-sq,.tr-sp{display:grid;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tr-sq{grid-area:q}
.tr-sp{grid-area:p;min-width:4.5em}
.tr-sq b,.tr-sp b{font-size:var(--fs-md);font-weight:700}
.tr-sq small,.tr-sp small{font-size:var(--fs-xs);color:var(--muted)}
.tr-sadd{grid-area:add;width:44px;height:44px;font:inherit;font-family:var(--mono);font-size:var(--fs-xl);line-height:1;border:1px solid var(--accent);border-radius:var(--r-md);background:var(--surface);color:var(--accent);cursor:pointer}
@media (hover:hover){.tr-sadd:hover{background:var(--accent-soft)}}
.tr-sadd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tr-sin{grid-area:in;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink)}
.tr-sin:empty{display:none}
.tr-sdock{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:nowrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-top:var(--sp-md);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--ground);border-top:1px solid var(--rule)}
.tr-sdock p{flex:1 1 auto;min-width:0;margin:0;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.35}
.tr-sdock .btn-sm{flex:none}
.tr-lback{margin:var(--sp-md) 0 0}
.tr-qvlist .tr-srow{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"main q p add" "in in in in"}
.co-b.trade{background:var(--accent-soft);color:var(--ink)}
.co-sharerow{align-items:center;margin:var(--sp-md) 0 0}
@media (width < 720px){
  .tr-srow{grid-template-columns:56px minmax(0,1fr) auto 44px;grid-template-areas:"pic main main add" "pic q p add" "pic in in in"}
  .tr-sthumb img{width:56px}
  .tr-sq{display:flex;gap:6px;align-items:baseline;text-align:left}
  .tr-lctl input{font-size:max(16px,1rem)}
  .tr-sdock .btn-sm,.co-sharerow .btn-sm{min-height:44px}
  .ms-modal label.tr-radio{min-height:44px;padding-block:10px;margin:0}
  .ms-modal .tr-lqr{width:calc(100% + 2 * var(--sp-xl));max-width:none;margin-inline:calc(-1 * var(--sp-xl))}   /* on a phone the code spans the dialog, its own white margin for an edge: bigger squares for the camera */
}
@media print{.tr-sadd,.tr-sdock{display:none!important}}
html:has(.tr-sdock){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}   /* Tab never lands a card under the trade's count at the foot */
@media (width < 1024px){
  .tr-sides{gap:var(--sp-lg)}
}
@media (width < 720px){
  .tr{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .tr-head{padding-top:var(--sp-lg)}
  .tr-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .tr-actions .btn-sm{min-height:44px;line-height:1.25;padding-inline:6px}
  .tr-addbtns .btn-sm{flex:1 1 auto;min-height:44px}
  .tr-tots{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tr-tot{padding:10px 12px}
  .tr-tot-diff{grid-column:1/-1}
  .tr-sides{grid-template-columns:minmax(0,1fr)}
  .tr-addbox input,.tr-pfilter input,.tr-shurl,.tr-shby,.tr-cin input,.tr-lqty input,.tr-sel select{font-size:max(16px,1rem)}
  .tr-typing .tr-dock,.tr-kbd .tr-dock{display:none}
  .tr-lname a{display:inline-flex;align-items:center;min-height:44px}
  .tr-title{font-size:var(--fs-xl)}
  .tr-line{grid-template-columns:56px minmax(0,1fr) auto 44px;grid-template-areas:"pic name name x" "pic opts opts opts" "qty qty price price"}
  .tr-thumb img{width:56px}
  .tr-sel select{min-height:44px}
  .tr-sel:not(.tr-sel-p){flex:1 1 auto}
  .tr-sel:not(.tr-sel-p) select{width:100%}
  .tr-step,.tr-lx{width:44px;height:44px}
  .tr-lqty input{height:44px}
  .tr-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-between;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule);box-shadow:var(--shadow-3);font-family:var(--mono);font-size:var(--fs-sm)}
  .tr-dock>span{display:grid;gap:0;text-align:center}
  .tr-dock b{font-variant-numeric:tabular-nums}
  .tr-dk-l{font-size:var(--fs-xs);color:var(--faint)}
  .tr-radio{min-height:44px;align-items:center}
}
@media (pointer:coarse){.tr-lname a{display:inline-flex;align-items:center;min-height:44px}}
@media print{.tr-actions,.tr-add,.tr-lx,.tr-step,.tr-dock,.tr-banner{display:none!important}}

/* ---------------------------------------------------------------- Captain, the house format (/captain/, captain_page.js) */
.tag-house{background:var(--accent-soft);color:var(--accent)}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.card-house{border-color:var(--accent)}
.house-banner{display:flex;align-items:center;gap:14px;margin:var(--sp-lg) 0;padding:14px 16px;border:1px solid var(--accent);border-radius:var(--r-lg);background:var(--accent-tint);color:var(--ink);text-decoration:none}
@media (hover:hover){.house-banner:hover{background:var(--accent-soft)}}
.house-banner .px{width:32px;height:32px;flex:none}
.hb-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hb-kick{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
.hb-text b{font-family:var(--mono);font-size:var(--fs-xl)}
.hb-desc{color:var(--muted);font-size:var(--fs-md)}
.cap{max-width:1100px}
.cap-head{padding-block:var(--sp-xl) var(--sp-lg)}
.cap-head h1{margin:10px 0 0}
.cap-head .lede{margin:12px 0 0;max-width:62ch;font-size:var(--fs-xl);line-height:1.55;color:var(--muted)}
.cap-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.cap-kicker .tag{margin-left:0}
.cap-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:18px 0 0;padding:0;list-style:none}
.cap-facts li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:var(--code-bg)}
.cap-facts b{font-family:var(--mono);font-size:var(--fs-xl)}
.cap-facts span{font-size:var(--fs-sm);color:var(--muted)}
.cap-acts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.cap-small{font-size:var(--fs-sm);color:var(--muted);max-width:72ch}
.cap-toc{border-block:1px solid var(--rule);padding:12px 0}
.cap-toc ol{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;counter-reset:none}
.cap-toc a{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);text-decoration:none;display:inline-block;padding:4px 0}
@media (hover:hover){.cap-toc a:hover{text-decoration:underline}}
.cap-sec{scroll-margin-top:72px}
.cap-h2{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
.cap-h3x{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:22px 0 6px}
.cap-anchor{scroll-margin-top:72px}
.cap-warn{color:var(--warn);font-size:var(--fs-sm)}
p.cap-warn{margin:0 0 8px}
.cap-lib{margin:0;justify-content:flex-end}
.cap-lib b{font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);min-height:40px;display:flex;align-items:center}
.cap-canon h3{font-size:var(--fs-lg)}
.cap-canon{max-width:72ch;line-height:1.6}
.cap-canon h4,.cap-canon h5,.cap-canon h3{font-family:var(--mono);font-size:var(--fs-md);margin:18px 0 6px}
.cap-canon li{margin:6px 0}
.cap-canon li p{margin:8px 0 0}
.cap-canon blockquote,.cap-q{margin:12px 0;padding:8px 14px;border-left:3px solid var(--accent);background:var(--accent-tint);border-radius:0 var(--r-md) var(--r-md) 0}
.cap-q p{margin:0}
.cap-q footer{margin-top:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.cap-pre{white-space:pre-wrap;font-size:var(--fs-sm);background:var(--code-bg);padding:10px 12px;border-radius:var(--r-md);overflow-x:auto}
.cap-src{font-size:var(--fs-sm);color:var(--faint);margin:14px 0 0}
.cap-note{font-size:var(--fs-sm);color:var(--muted);border:1px dashed var(--rule);border-radius:var(--r-md);padding:8px 12px}
.cap-tablewrap{overflow-x:auto;max-width:100%}
.cap-table{border-collapse:collapse;margin:10px 0;font-size:var(--fs-md);min-width:260px}
.cap-table caption{text-align:left;font-size:var(--fs-sm);color:var(--muted);padding-bottom:6px}
.cap-table th,.cap-table td{text-align:left;padding:6px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.cap-table thead th{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);font-weight:500}
.cap-ladder tr.is-done td,.cap-ladder tr.is-done th{color:var(--faint)}
.cap-ladder tr.is-next{background:var(--accent-tint)}
.cap-next{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);margin-left:6px}
.cap-taxnow{margin:12px 0;font-size:var(--fs-lg)}
.cap-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:10px 0}
.cap-field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
.cap-field small{color:var(--faint)}
.cap-field input,.cap-field select,.cap-field textarea{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;min-height:40px}
.cap-field input[type=number]{width:7em}
.cap-grow{flex:1 1 220px;min-width:0}
.cap-wide{width:100%}
.cap-wide textarea{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:var(--fs-sm)}
.cap-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);min-height:40px}
.cap-fresh-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.cap-receipt h3{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);font-weight:500;margin:0}
.cap-nums{margin:8px 0;padding-left:18px}
.cap-nums li{margin:4px 0}
.cap-dist tr.is-bad th,.cap-dist tr.is-bad td{color:var(--bad)}
.cap-barcell{width:50%;min-width:80px}
.cap-bar{display:block;height:10px;border-radius:var(--r-sm);background:var(--accent)}
.cap-dist tr.is-bad .cap-bar{background:var(--bad)}
.cap-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.cap-tab{font-family:var(--mono);font-size:var(--fs-sm);padding:8px 12px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;min-height:40px}
.cap-tab[aria-selected="true"]{background:var(--accent);color:var(--ground);border-color:var(--accent)}
.cap-n{margin-left:4px;font-weight:700}
.cap-means{max-width:72ch}
.cap-class{margin:12px 0;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md)}
.cap-class h4{font-family:var(--mono);font-size:var(--fs-sm);margin:0 0 6px}
.cap-law{font-weight:500;margin:0 0 6px}
.cap-notes summary,.cap-rule summary,.cc-capwhy summary{cursor:pointer}
.cap-names{font-size:var(--fs-sm);color:var(--muted);line-height:1.7}
.cap-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 10px}
.cap-colors{display:inline-flex;gap:4px}
.cap-col{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ctl-h);min-height:var(--ctl-h);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);cursor:pointer;padding:0}
.cap-col[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.cap-count{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--pic)),1fr));gap:14px;margin:0;padding:0;list-style:none}
.cap-tile{display:flex;flex-direction:column;gap:4px;min-width:0}
.cap-pic{display:block;border-radius:var(--r-card);overflow:hidden;background:var(--code-bg);aspect-ratio:488/680}
.cap-pic img{display:block;width:100%;height:100%;object-fit:contain}
.cap-cn{font-size:var(--fs-sm);color:var(--ink);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){a.cap-cn:hover{text-decoration:underline}}
.cap-missing{padding:10px;border:1px dashed var(--rule);border-radius:var(--r-md)}
.cap-meta{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted)}
.cap-bs{display:flex;flex-wrap:wrap;gap:4px}
.cap-b{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--r-sm);background:var(--code-bg);color:var(--muted)}
.cap-b.warn{background:var(--warn-bg);color:var(--warn)}
.cap-b.bad{background:var(--bad-soft);color:var(--bad)}
.cap-b.ok{background:var(--ok-soft);color:var(--ok)}
.cap-build{font-size:var(--fs-sm);display:inline-block;padding:4px 0}
.cap-namelist{margin:0;padding:0;list-style:none;columns:2 320px;column-gap:24px}
.cap-namelist li{break-inside:avoid;padding:5px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cap-ckform{max-width:760px}
.cap-ckout{margin-top:16px;max-width:760px}
.cap-ckhead{outline:none;padding:12px 14px;border-radius:var(--r-md);background:var(--code-bg)}
.cap-tier{margin:0 0 6px;font-size:var(--fs-lg)}
.cap-tier.is-comp b{color:var(--ok)}
.cap-tier.is-cracked b,.cap-tier.is-none b,.cap-tier.is-no b{color:var(--warn)}
.cap-why{margin:6px 0 0;padding-left:18px}
.cap-h3{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);font-weight:500;margin:18px 0 6px}
.cap-steps{margin:0;padding-left:22px}
.cap-steps>li{margin:8px 0}
.cap-steps ul{margin:4px 0 0;padding-left:18px;font-size:var(--fs-sm)}
.cap-st{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--r-sm);background:var(--ok-soft);color:var(--ok);margin-right:4px}
.cap-steps .is-fail .cap-st{background:var(--bad-soft);color:var(--bad)}
.cap-steps .is-warn .cap-st{background:var(--warn-bg);color:var(--warn)}
.cap-watch,.cap-notes2{padding-left:18px;font-size:var(--fs-sm)}
.cap-rule{border-bottom:1px solid var(--rule);padding:4px 0}
.cap-rule>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;list-style-position:inside}
.cap-rule>summary h3{display:inline;font-family:var(--mono);font-size:var(--fs-md);font-weight:500;margin:0}
.cap-rule>summary .tag{margin-left:0}
.cap-rule[open]>summary{margin-bottom:6px}
.cap-files{margin:10px 0;padding:0;list-style:none}
.cap-files li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.cap-files a{font-family:var(--mono)}
.cap-files span{color:var(--muted)}
.cap-credit{margin-top:18px;font-size:var(--fs-lg)}
.cc-cap{margin:14px 0 0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md)}
.cc-cap .label{margin:0 0 8px}
.cc-cap .label a{color:inherit}
.cc-capfacts{margin:0;padding-left:18px;font-size:var(--fs-md)}
.cc-capfacts li{margin:4px 0}
.cc-capwhy{margin-top:8px;font-size:var(--fs-sm)}
@media (width < 720px){
  .cap-fresh-grid{grid-template-columns:minmax(0,1fr)}
  .cap-grid{grid-template-columns:repeat(var(--pc2),minmax(0,1fr));gap:10px}
  .cap-namelist{columns:1}
  .house-banner{align-items:flex-start}
}
@media (pointer:coarse){
  .cap-toc a,.cap-build,.cap-namelist a,a.cap-cn,.cap-files a,.cap-src a,.cap-means a,.cap-q footer a{min-height:44px;display:inline-flex;align-items:center}
  .cap-col{min-width:44px;min-height:44px}
  .cap-tab,.cap-check,.cap-field input,.cap-field select{min-height:44px}
  .cap-field input,.cap-field select,.cap-field textarea,.cap-wide textarea{font-size:max(16px,1rem)}
}
/* ---- Captain page tools (captain_tools.js): the hub, the converter, new sets, the table kit */
.cap-hub{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:20px 0 0}
/* the five tool tabs and the cube link share one grid; the tab list itself draws no box */
.cap-hubtabs{display:contents}
.cap-hubout{border-style:dashed}
.cap-hubt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none}
.cap-hubt b{font-family:var(--mono);font-size:var(--fs-md);font-weight:700}
.cap-hubt span{font-size:var(--fs-sm);color:var(--muted)}
@media (hover:hover){.cap-hubt:hover{border-color:var(--accent)}}
.cap-hubt[aria-selected="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-tint)}
.cap-toolarea .cap-tool{scroll-margin-top:12px}
.cap-rulestop{padding-block:var(--sp-2xl) 0}
.cap-breath{max-width:66ch;font-size:var(--fs-lg);line-height:1.6;color:var(--muted);margin:0 0 6px}
.cap-head .cap-tagline{font-size:var(--fs-lg)}
.cap-rulestop .cap-toc{margin-top:12px}
.cap-totool{font-size:var(--fs-sm);margin:12px 0 0}
button.cap-build{font:inherit;font-size:var(--fs-sm);background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;text-align:left;padding:4px 0;max-width:100%;overflow-wrap:anywhere}
/* a select sized by its longest option (a long deck name, "Atraxa, Praetors' Voice (commander) ...") never widens the page */
.cap-toolarea .cap-field{min-width:0;max-width:100%}
.cap-toolarea .cap-field select,.cap-toolarea .cap-field input{max-width:100%;min-width:0}
.cap-toolarea .cap-row>*{min-width:0}
button.cap-build:disabled{color:var(--muted);cursor:progress}
.cap-stsay{margin:6px 0}
.cap-stpick{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cap-stmine{list-style:none;margin:0;padding:0}
.cap-stmine li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.cap-ck{max-width:760px}
.cap-ck-answer{margin:0 0 8px;padding:10px 12px;border-radius:var(--r-md);background:var(--code-bg);color:var(--ink);font-size:var(--fs-lg);font-weight:700;outline:none}
.cap-ck-answer.is-ok{background:var(--ok-soft);color:var(--ok)}
.cap-ck-answer.is-warn{background:var(--warn-bg);color:var(--warn)}
.cap-ck-answer.is-bad{background:var(--bad-soft);color:var(--bad)}
.cap-ck-tier,.cap-ck-gc{margin:6px 0;font-size:var(--fs-md)}
.cap-ck-watch{margin:6px 0;padding-left:18px;font-size:var(--fs-sm)}
.cap-ck-steps>summary{cursor:pointer;padding:9px 0;font-family:var(--mono);font-size:var(--fs-sm)}
.db-capreg .cap-ck-answer{font-size:var(--fs-md)}
.cap-cvstep{border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 14px 12px;margin:0 0 12px;min-width:0}
.cap-cvstep>legend{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;padding:0 6px}
.cap-cvstep p{margin:6px 0}
.cap-cvpaste>summary,.cap-cvout>summary,.cap-kitprev>summary{cursor:pointer;padding:9px 0;font-size:var(--fs-sm)}
.cap-cvout>summary .cl-muted{font-size:var(--fs-sm)}
.cap-seg{display:flex;flex-wrap:wrap;gap:4px 14px}
.cap-cvbar{position:sticky;top:var(--sticky-top,0px);z-index:2;display:flex;flex-wrap:wrap;gap:4px 18px;padding:8px 12px;margin:8px 0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-bar)}
.cap-cvn{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:var(--fs-sm)}
.cap-cvn b{font-family:var(--mono);font-size:var(--fs-lg)}
.cap-cvn small{color:var(--muted)}
.cap-cvn.is-ok b{color:var(--ok)}
.cap-cvn.is-warn b{color:var(--warn)}
.cap-cvbasics{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0}
.cap-cvbasic{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.cap-cvbasic .btn-sm{min-width:40px;min-height:40px;padding:4px 8px}
.cap-cvbasic output{font-family:var(--mono);min-width:2ch;text-align:center}
.cap-cvlist{margin:0;padding:0;list-style:none}
.cap-cvlist li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 8px;padding:3px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.cap-cvmain{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;min-width:0}
.cap-cvname{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}
.cap-cvsub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;flex:1 1 260px;min-width:0}
.cap-cvk{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;flex:none;cursor:pointer}
.cap-cvlist input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.cap-cvlist a{color:var(--ink);font-weight:500;min-height:32px;display:inline-flex;align-items:center}
.cap-cvlist li.is-cut a{color:var(--faint);text-decoration:line-through}
.cap-cvtl{color:var(--muted);flex:1 1 auto;min-width:0}
.cap-cvrk{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.cap-kitcard{max-width:760px;margin:10px 0;padding:22px 26px;background:var(--print-paper);color:var(--print-ink);border:1px solid var(--rule);border-radius:var(--r-md);line-height:1.45}
.cap-kit-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;border-bottom:2px solid var(--print-ink);padding-bottom:6px}
.cap-kit-head h3{margin:0;font-size:var(--fs-title);color:var(--print-ink)}
.cap-kit-head p{margin:0;font-family:var(--mono);font-size:13px;color:var(--print-muted)}
.cap-kit-rules{margin:12px 0 8px;padding-left:22px;font-size:14px}
.cap-kit-rules li{margin:4px 0}
.cap-kit-match{margin:6px 0 12px;font-size:14px;color:var(--print-muted)}
.cap-kit-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--print-muted);padding-top:10px}
.cap-kit-track{display:grid;gap:10px;flex:1 1 340px}
.cap-kit-player{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px}
.cap-kit-who{font-weight:700;min-width:6.5em}
.cap-kit-lab{color:var(--print-muted);width:100%}
.cap-kit-box{display:inline-flex;align-items:center;gap:4px}
.cap-kit-box i{display:inline-block;width:14px;height:14px;border:1.5px solid var(--print-ink)}
.cap-kit-rally{margin-left:8px}
.cap-kit-qrbox{margin:0;text-align:center;font-size:13px;color:var(--print-muted)}
.cap-kit-qr{width:112px;height:112px;margin:0 auto 2px}
.cap-kit-qr svg{display:block;width:100%;height:100%}
.db-tocap{text-decoration:none}
/* ---- community tags on card pages (tags.js): Scryfall Tagger's, credited, each one hideable */
.tg-h{margin:10px 0 6px}
.tg-list{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.tg-chip{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm)}
.tg-chip a{padding:4px 4px 4px 10px;color:var(--ink);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
@media (hover:hover){.tg-chip a:hover{text-decoration:underline}}
.tg-hide{font:inherit;font-size:var(--fs-xs);color:var(--muted);background:none;border:0;border-left:1px solid var(--rule);padding:4px 10px;min-height:32px;cursor:pointer;border-radius:0 var(--r-pill) var(--r-pill) 0}
@media (hover:hover){.tg-hide:hover{color:var(--ink)}}
.tg-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
@media (pointer:coarse){.tg-chip a,.tg-hide{min-height:44px}.tg-hide{min-width:44px}}
@media (pointer:coarse){
  .cap-cvk{min-width:44px;min-height:44px}
  .cap-cvlist input[type=checkbox]{width:24px;height:24px}
  .cap-cvlist a{min-height:44px}
  .cap-cvbasic .btn-sm{min-width:44px;min-height:44px}
  .cap-cvpaste>summary,.cap-cvout>summary,.cap-kitprev>summary,.cap-ck-steps>summary{padding:12px 0}
  .cap-totool a{display:inline-flex;align-items:center;min-height:44px}
}
@media (width < 1024px){.cap-hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width < 720px){
  .cap-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px}
  .cap-hubt:first-child,.cap-hubout{grid-column:1/-1}
  .cap-hubt{padding:8px 10px}
  .cap-cvbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:6px 10px}
  .cap-cvn b{font-size:var(--fs-md)}
  .cap-cvn small{font-size:var(--fs-xs);width:100%}
  .cap-cvsub{font-size:var(--fs-xs)}
}
@media print{
  html.printing-kit body>*:not(.wrap),html.printing-kit .wrap>*:not(main),html.printing-kit main>*:not(#cap-app),
  html.printing-kit #cap-app>*:not(#cap-tools),html.printing-kit #cap-tools>*:not(#kit),html.printing-kit #kit>*:not(.cap-kitprev),html.printing-kit .cap-kitprev>summary{display:none!important}
  html.printing-kit #kit,html.printing-kit #cap-tools,html.printing-kit .cap-kitprev,html.printing-kit main>#cap-app{margin:0;padding:0;border:0;min-height:0}
  html.printing-kit .cap-kitcard{max-width:none;margin:0;border:1px solid var(--print-ink);box-shadow:none}
}
/* ---- Captain in the deck tools (CAP-B): the registration panel, the Seat, King Goldfish, Life Log, Collection chips */
.db-capreg .db-captier{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px}
.db-captier>span:first-child{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.db-captier-w{font-size:var(--fs-lg)}
.db-captier-w.t-comp{color:var(--ok)}
.db-captier-w.t-cracked{color:var(--warn)}
.db-captier-w.t-none{color:var(--bad)}
.db-capwhy{margin:0 0 8px;padding-left:18px;font-size:var(--fs-sm)}
.db-capgc{margin:0 0 8px}
.db-capagreed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 2px;font-size:var(--fs-sm)}
.db-capagreed select{font:inherit;max-width:100%}
.db-capsteps{margin:10px 0 8px;padding:0;list-style:none;font-size:var(--fs-sm)}
.db-capsteps>li{padding:6px 0;border-top:1px solid var(--rule)}
.db-capsteps>li:first-child{border-top:0}
.db-capstep{margin-right:6px}
.db-capok{font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap}
.db-capsteps>li.ok .db-capok{color:var(--ok)}
.db-capsteps>li.no .db-capok{color:var(--bad)}
.db-capsteps>li.tier .db-capok{color:var(--warn)}
.db-capsteps ul{margin:4px 0 0;padding-left:18px}
.db-capsteps p{margin:4px 0 0}
.db-seattax{margin:8px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.db-capsug{margin-top:6px}
.db-capcands{margin:8px 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:6px}
.db-capcands li{display:flex;align-items:stretch;gap:6px;min-width:0}
.db-capcand{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px;cursor:pointer;min-height:44px}
.db-capcand:focus-visible{border-color:var(--accent)}@media (hover:hover){.db-capcand:hover{border-color:var(--accent)}}
.db-capcand b{overflow-wrap:anywhere}
.db-capcand small{flex-basis:100%;color:var(--faint);font-size:var(--fs-xs)}
.db-capfacts{margin:8px 0 0}
.db-caplinks{margin:4px 0 0}
.gf-caplib{margin:6px 0 0}
.db-capnote{margin:6px 0 0}
.ds-capcands{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.ds-capcands li{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ds-capleft{margin:6px 0 12px;padding-left:18px}
.mr-gc{display:block;font-size:var(--fs-xs);color:var(--ink);font-weight:700}
.db-caplinks a{display:inline-block;padding:4px 0;min-height:24px}
.gf-capbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:8px 0;font-size:var(--fs-sm)}
.gf-nav{border-color:var(--accent)}
.gf-card{position:relative}
.gf-rally{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:var(--r-sm,4px);background:var(--ink);color:var(--surface);font-family:var(--mono);font-size:var(--fs-xs)}
/* King Goldfish against the measured field: the picker, their side of the table, and the games' numbers */
.gf-vs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}
.gf-them{border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;background:var(--surface)}
.gf-themhead p{margin:0 0 6px}
.gf-themstat{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 6px;font-size:var(--fs-sm)}
.gf-themblk{margin:0 0 6px;font-size:var(--fs-sm)}
.gf-moments{margin:6px 0;padding-left:var(--sp-xl);font-size:var(--fs-sm);display:grid;gap:4px}
p.gf-moments{padding-left:0}
.gf-mot{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.gf-vsrep .gf-h3{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:14px 0 6px}
.gf-vsrep caption{text-align:left;padding:0 0 4px;color:var(--muted);caption-side:top}
.gf-vsrep progress{vertical-align:middle;width:min(240px,60vw)}
.gf-vshow{margin:10px 0 0}
.gf-vshow summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm)}
@media (pointer:coarse){.gf-them .cl-inline,.gf-vsrep .cl-inline{min-height:44px;display:inline-flex;align-items:center}.gf-vshow summary{min-height:44px;display:flex;align-items:center}}
.lf-seatc,.lf-rally{white-space:nowrap}
.lf-rem{font-size:var(--fs-xs)}
.lf-capmatch{margin-top:12px}
.co-capchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0}
.cb-capline{margin-top:8px}

/* Draft Sim's tabs (a draft, the daily pick), the Admiral Phase (admiral.js) and the daily pick (daily.js); the home
   page's daily pick line; Cube Generator's Captain cube */
.ds-ptabs{margin:0 0 var(--sp-md)}
.ds-admrow{flex-wrap:wrap;gap:8px 16px}
.ds-admline{margin:6px 0}
.ds-cmphase{list-style:none;margin:10px 0 4px;font-family:var(--mono);font-size:var(--fs-sm)}
.dd-stats{margin:10px 0}
.dd-t .dd-me td{background:var(--accent-tint)}
.dd-tag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
.dd-pack{margin-top:6px}
.dd-hist{margin-top:var(--sp-lg)}
.daily-line{display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-lg);padding:10px 16px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
@media (hover:hover){.daily-line:hover{border-color:var(--accent)}}
.dl-kick{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);white-space:nowrap}
.dl-desc{flex:1;min-width:0;color:var(--muted);font-size:var(--fs-md)}
.cb-captain .cb-capt{margin:8px 0}
.cb-idt td,.cb-idt th{text-align:right}
.cb-idt thead th{white-space:normal}
.cb-idt td:first-child,.cb-idt th:first-child{text-align:left}
.dd,.cb-captain,.ds-daily{min-width:0}
/* the Limited journey (round 30, two): a labeled pick under every card in a pack and a move button under every card in
   the deck; what a tap on a card does, on the pack; the tool first on the setups, how it works and the seed below */
.ds-pickbtn,.ds-mv{display:block;width:100%;margin-top:4px}
.ds-tapmode{margin:8px 0 10px}
.ds-tapmode .mf-chips label{min-height:44px;display:inline-flex;align-items:center}
.ds-how,.ds-adv{margin-top:10px}
.ds-how summary,.ds-adv summary,.cb-how summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--fs-sm)}
.ds-adv input#ds-seed{font:inherit;font-family:var(--mono)}
.cb-night{padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground);margin:8px 0}
.cb-night p{margin:4px 0}
.cb-need{font-family:var(--mono)}
.cb-drafthint,.cb-pphint{flex-basis:100%}
.fr-paper{margin-top:10px}
/* round three: a Captain deck's Seat, pass and play, a cube's lists, the cube night's one log */
.ds-capseat{display:grid;grid-template-columns:minmax(80px,130px) minmax(0,1fr);gap:12px;align-items:start;margin:10px 0;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.ds-capseat .gf-h{margin-top:0}
.ds-capseat p{margin:4px 0}
.ds-hand{text-align:center;padding:28px 16px}
.ds-hand .ms-row{justify-content:center}
.ds-ppturn{margin:6px 0 0}
.ds-ppsw{margin:8px 0}
.ds-ppnames .ds-cubeopt input{font:inherit;font-size:var(--fs-md);min-height:var(--tap);padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);color:var(--ink);max-width:14rem}
.ds-ppnote{flex-basis:100%;margin:4px 0 0}
.cb-kind{margin:0 0 12px}
.cb-holds{margin:8px 0;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.cb-holds p{margin:2px 0}
.cb-holdlist{margin:6px 0 0;padding-left:18px}
.cb-holdlist li{margin:4px 0}
.cb-gc{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--rule);border-radius:var(--r-sm,4px);padding:0 4px;margin-left:4px}
.cb-cclists{align-items:center}
/* Wildcard Planner's packs and sets tab (arenaplan.js) */
.wc-tabs{margin:0 0 var(--sp-lg)}
.ap-sec .fr-tw{margin:8px 0}
.ap-sets td,.ap-comp td,.ap-dr td{font-variant-numeric:tabular-nums}
.ap-sets th[scope=row] .btn-xs{text-align:left;white-space:normal}
.ap-sets tr.ap-on th[scope=row] .btn-xs{font-weight:700;border-color:var(--accent,var(--ink))}
.ap-miss{display:block;font-size:var(--fs-xs);color:var(--muted)}
.ap-done{color:var(--good,var(--muted))}
.ap-warn{border-left:3px solid var(--warn);padding-left:8px}
.ap-opts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0}
.ap-ins{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0}
.ap-ins input{font:inherit;font-size:var(--fs-md);min-height:var(--tap);width:6rem;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.ap-ins label{display:block;font-size:var(--fs-sm);color:var(--muted)}
.ap-total th,.ap-total td{font-weight:700}
.ap-cost{margin:8px 0}
.ap-how{margin-top:8px}
.ap-how summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--fs-sm)}
.ap-prz{columns:2 14rem;margin:4px 0 8px;padding-left:18px}
.ap-rules{padding-left:18px}
.ap-rules li{margin:6px 0}
.ap-rules q{quotes:"\201C" "\201D"}
.ap-decks{list-style:none;margin:8px 0 0;padding:0}
.ap-deck{display:flex;flex-wrap:wrap;gap:2px 12px;padding:8px 0;border-top:1px solid var(--rule)}
.ap-dn{font-weight:700;flex-basis:100%}
.ap-dn a{display:inline-flex;align-items:center;min-height:var(--tap)}
.ap-drot,.ap-dunk{flex-basis:100%;font-size:var(--fs-sm);color:var(--muted)}
#wc-panel>*{min-width:0}
/* the cube's tab panel is a grid: its parts may shrink, so a wide table scrolls inside its own frame, not the page */
.cb-body>*{min-width:0}
.cb-ndeck{margin:6px 0 10px}
.cb-ndeck summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--fs-sm)}
.cb-ndeck input#cb-nn{font:inherit;font-size:var(--fs-md);min-height:var(--tap);padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.cb-need.cb-short{border-left:3px solid var(--warn);padding-left:8px}
#cb-needline{margin:10px 0 0;font-family:inherit}
.cb-set b,.cb-set span{white-space:normal;overflow-wrap:anywhere;min-width:0;overflow:visible;text-overflow:clip}
.cb-set{height:auto;align-content:start}
/* the set list scrolls, so its rows would size to a tile's 44 px minimum and clip the date and count: rows fit the tile */
.cb-setlist{grid-auto-rows:max-content}
/* the generate button stays in reach while the build scrolls, on a phone and on a desktop; Draft Sim's start bar is
   the phone's already (see above), and on a desktop here */
.cb-build .ms-row:has(#cb-go){position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--rule);padding:10px 0;margin-top:8px}
html:has(.cb-build #cb-go){scroll-padding-bottom:120px}
@media (width >= 720px){
  .ds-setup .ms-row:has(#ds-go){position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--rule);padding:10px 0;margin-top:8px}
  html:has(.ds-setup #ds-go){scroll-padding-bottom:88px}
}
@media (width < 720px){.daily-line{align-items:flex-start}
  .dd-t thead{display:none}
  .dd-t,.dd-t tbody{display:block}
  .dd-t tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--rule)}
  .dd-t td,.dd-t td:first-child{border:0;padding:0;min-width:0}
  .dd-t td[data-l="card"]{grid-column:1/-1;order:-1}
  .dd-t td[data-l]:not([data-l="card"])::before{content:attr(data-l) ": ";font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
  .cb-idt td:first-child,.cb-idt th:first-child{min-width:0}}

/* ---- where every copy lives (copies.js): the card view's "your copies" and Collection's "copies in decks" */
.cp{margin:var(--sp-md) 0;padding:var(--sp-sm) var(--sp-md) var(--sp-md);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.cp-h{margin:0 0 4px;font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.cp-sum{margin:0 0 6px;font-size:var(--fs-md)}
.cp-short{color:var(--bad)}
.cp-where,.cp-decks{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px;font-size:var(--fs-sm);min-width:0}
.cp-where li{overflow-wrap:anywhere}
.cp-where b,.cp-w b{font-family:var(--mono);display:inline-block;min-width:2ch}
.cp-p{color:var(--muted);font-size:var(--fs-xs)}
.cp-proxy{display:inline-block;padding:0 6px;border-radius:var(--r-pill);background:var(--proxy);color:var(--on-media);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.5}
.cp-deck{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-top:6px;border-top:1px solid var(--rule)}
.cp-dn{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.cp-dq{color:var(--muted)}
.cp-tag{display:inline-block;padding:0 6px;border-radius:var(--r-pill);background:var(--code-bg);color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.5}
.cp-here .cp-tag:first-of-type{background:var(--accent-soft);color:var(--accent)}
.cp-acts{display:inline-flex;flex-wrap:wrap;gap:6px}
.cp-dig,.cp-links{margin:4px 0 0}
.cp-view{display:grid;gap:var(--sp-sm);min-width:0}
.cp-intro{margin:0}
.cp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cp-lbl{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);min-width:0;max-width:100%}
.cp-lbl select{max-width:min(320px,70vw)}
#cp-q{flex:1 1 180px;min-width:0;padding:6px 10px;border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:var(--fs-md)}
.cp-seg b{font-weight:700;margin-left:4px}
.cp-count{margin:0}
.cp-list{list-style:none;margin:0;padding:0;display:grid;min-width:0}
.cp-row{padding:10px 0;border-top:1px solid var(--rule);min-width:0}
.cp-row.cp-bad{box-shadow:inset 3px 0 0 var(--bad);padding-left:12px}
.cp-rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.cp-name{font-weight:700;overflow-wrap:anywhere}
.cp-own{color:var(--muted);font-size:var(--fs-sm)}
.cp-short{font-size:var(--fs-sm)}
.cp-rline{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:var(--fs-sm);min-width:0}
.cp-k{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);min-width:9ch}
.cp-w{overflow-wrap:anywhere;min-width:0}
.cp-deckp h2{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;margin:0 0 6px;overflow-wrap:anywhere}
.cp-deckp p{margin:0 0 8px}
/* on a touch screen each deck and card link in these lists is a row-high target */
@media (pointer:coarse){.cp-dn a,.cp-links a,.cp-where a,.cp-dig a,.cp-rline a,a.cp-name,.tk-by a{display:inline-flex;align-items:center;min-height:var(--tap)}}

/* ---- tokens and extras (tokens.js): Deckbuilder Pro's tab, and its print list */
.tk{display:grid;gap:var(--sp-lg);padding-top:var(--sp-md);min-width:0}
.tk-head{display:grid;gap:8px}
.tk-head p{margin:0}
.tk-h{font-family:var(--mono);font-size:var(--fs-md);margin:0 0 var(--sp-sm)}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--sp-md)}
.tk-item{margin:0;display:flex;gap:12px;align-items:flex-start;padding:var(--sp-md);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.tk-pics{flex:none;display:flex;gap:6px}
.tk-pic{width:110px;display:grid;gap:4px;justify-items:start}
.tk-many .tk-pic{width:80px}
.tk-pic img{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card)}
.tk-item figcaption{min-width:0;display:grid;gap:4px;font-size:var(--fs-sm);overflow-wrap:anywhere}
.tk-name{font-size:var(--fs-md)}
.tk-n{color:var(--muted)}
.tk-by{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tk-ctrs{list-style:none;margin:0;padding:0;display:grid}
.tk-ctrs>li{padding:8px 0;border-top:1px solid var(--rule);font-size:var(--fs-sm);overflow-wrap:anywhere}
.tk-ctrs .tk-by{margin-top:4px;padding-left:var(--sp-md)}
.tk-src{margin:0}
.tk-sheet{display:none}
@media (width < 480px){.tk-pic{width:88px}.tk-many .tk-pic{width:64px}.tk-item{flex-direction:column}}
@media print{
  html.tk-printing body>*:not(.wrap),html.tk-printing .wrap>*:not(main),html.tk-printing main>*:not(#db-app),html.tk-printing #db-app>*:not(#db-tab),
  html.tk-printing #db-tab>*:not(#tk),html.tk-printing #tk>*:not(#tk-sheet){display:none!important}
  html.tk-printing #tk-sheet{display:block!important;color:var(--print-ink);background:var(--print-paper)}
  html.tk-printing #db-app,html.tk-printing #db-tab,html.tk-printing #tk{margin:0;padding:0;border:0}
  .tk-sheet h2{font-size:18pt;margin:0 0 8pt}.tk-sheet h3{font-size:13pt;margin:12pt 0 4pt}
  .tk-sheet ul{list-style:none;margin:0;padding:0}.tk-sheet li{margin:0 0 6pt;break-inside:avoid}
  .tk-box{display:inline-block;width:10pt;height:10pt;border:1pt solid var(--print-ink);margin-right:6pt;vertical-align:-1pt}
}

/* ---- share pictures (share.js): the preview in its dialog */
.sh-prev img{display:block;max-width:100%;height:auto;max-height:62vh;max-height:62dvh;width:auto;margin:var(--sp-sm) 0;border:1px solid var(--rule);border-radius:var(--r-md)}
.sh-note{margin:0}

/* ---- the shared-link banner (MS.shareBanner, rule 12): Deckbuilder Pro, Cube Generator; Trade keeps its own of the same shape */
.ms-sharebar{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-lg);align-items:center;justify-content:space-between;margin:0 0 var(--sp-md);padding:10px 14px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--ink);border-radius:var(--r-lg);font-size:var(--fs-md)}
.ms-sharebar p{margin:0;max-width:72ch;min-width:0;overflow-wrap:anywhere}   /* a long handle with no spaces wraps instead of pushing the page sideways */
.ms-sharebtns{display:flex;flex-wrap:wrap;gap:6px}
/* ---- round-30 labels pass: Collection's empty views, bulk bar verbs, the card page's copies, Trade's picker, the planner note */
.co-empty p{margin:0 0 var(--sp-sm)}
.co-bgrp{display:inline-flex;align-items:center;gap:4px}
.co-bgrp select{font-size:var(--fs-xs);max-width:160px}
.cp.cp-page{margin:4px 0 8px;padding:0;border:0;background:none}
.tr-pdonerow{margin-top:var(--sp-sm);align-items:center;position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--rule);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}   /* "done" stays in view however long the list */
.ms-modal:has(.tr-pdonerow),.ms-modal-box:has(.tr-pdonerow),.ms-modal:has(.tr-pdonerow) .tr-plist{scroll-padding-bottom:calc(156px + env(safe-area-inset-bottom,0px))}   /* and Tab scrolls each card clear of it */
.db-insp-ro{margin:4px 0 8px}
.how-gloss{margin:0}
.how-gloss dt{font-family:var(--mono);font-weight:700;margin-top:var(--sp-sm)}
.how-gloss dd{margin:2px 0 0}
.wc-collnote{margin:6px 0}
/* a selection's bar is fixed at the bottom: whatever Tab reaches scrolls clear of it */
html:has(.db-bulk){scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
@media (width < 720px){.db-bulk>*{flex:none}.db-bulk b{white-space:nowrap}}   /* one row that scrolls sideways, never a count squeezed onto four lines */
.db-bulk button:disabled{opacity:.5;cursor:default}
@media (hover:hover){.db-bulk button:disabled:hover{background:var(--veil)}}

/* ---- binder pages and completion goals (binders.js): nine pockets a page, two pages side by side on a wide screen.
   A card you have is its whole picture; a card you don't is an empty pocket, outlined, with its name written in it */
.bp-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 4px}
.bp-say{margin:4px 0 10px}
.bp-book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-lg) var(--sp-xl);margin:6px 0 12px;max-width:1080px}
@media (width < 720px){.bp-book{grid-template-columns:minmax(0,1fr)}}
.bp-page{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:10px 12px 12px;box-shadow:var(--shadow-1, none)}
.bp-pn{margin:0 0 8px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:none}
.bp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
.bp-pk{display:flex;flex-direction:column;gap:4px;min-width:0;border-radius:var(--r-lg)}
.bp-pk.picked{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}
.bp-pk.is-foil .co-img{box-shadow:0 0 0 2px var(--foil-a),0 0 0 4px var(--foil-b)}
button.bp-pk{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:grab}
button.bp-pk:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bp-picked .co-img,.bp-over .co-img{outline:3px solid var(--accent);outline-offset:2px}
.bp-over .co-img{outline-style:dashed}
.bp-dragging{opacity:.55}
.bp-cap{display:block;min-height:1.3em;font-size:var(--fs-xs);line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.bp-out{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;background:transparent !important;border:2px dashed var(--rule) !important;color:var(--ink);overflow:hidden}
.bp-oname{font-weight:700;font-size:var(--fs-sm);line-height:1.25;overflow-wrap:anywhere}
.bp-oset{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.bp-blank{display:block;background:transparent !important;border:1px solid var(--rule)}
.bp-end{cursor:pointer}
.bp-end .bp-blank{border-style:dashed}
.bp-goals{margin:0 0 var(--sp-lg)}
.bp-gh{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.bp-gh h2{margin:0}
.bp-gicon{display:inline-block;width:18px;height:18px;border:2px dashed var(--muted);border-radius:4px}
.bp-sum{margin:10px 0}
.bp-big{margin:0 0 8px;font-size:var(--fs-lg)}
.bp-cost{color:var(--muted);font-size:var(--fs-md)}
.bp-rar{max-width:560px}
.bp-pinrow{margin:6px 0}
.bp-modes{margin:10px 0}
.bp-kind{display:flex;flex-wrap:wrap;gap:6px 16px;border:0;padding:0;margin:0 0 10px}
.bp-kind legend{padding:0;margin-bottom:4px;font-weight:700}
.bp-gsets{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;max-height:280px;overflow:auto}
.bp-gsetb{display:block;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.bp-gsetb[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.bp-mtable td,.bp-mtable th{vertical-align:middle}
.bp-sortsel{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.bp-sortsel select{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;min-height:var(--tap)}
@media (pointer:coarse){.bp-gsetb{min-height:44px}button.bp-pk{cursor:pointer}}
@media (width < 720px){.bp-grid{gap:8px 6px}.bp-page{padding:8px}.bp-cap{font-size:var(--fs-sm)}.bp-oname{font-size:var(--fs-sm)}.bp-oset{font-size:var(--fs-sm)}}
/* ---- the price panel on Collection, and hide values (app.js, src/values.js) */
.co-ppanel{margin:0 0 var(--sp-lg)}
.co-ppanel h2{margin:0 0 8px;font-size:var(--fs-lg)}
.co-pfacts{margin:0;display:grid;gap:8px}
.co-pfacts div{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:4px 12px}
.co-pfacts dt{font-family:var(--mono);font-weight:700;font-size:var(--fs-sm)}
.co-pfacts dd{margin:0}
@media (width < 720px){.co-pfacts div{grid-template-columns:minmax(0,1fr)}}
.co-hvrow{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}
.co-hv{display:inline-flex;align-items:center;gap:8px;font-weight:700;min-height:var(--tap)}
.co-hvrow p{margin:4px 0 0}
.hv-note{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 10px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);font-size:var(--fs-md)}
.hv-panel{margin-top:12px}
/* ---- sealed product (sealed.js): a line per product, its count, what was paid, open one; the pack history */
.sl-noprice{margin:0 0 12px;max-width:80ch}
.sl-list{list-style:none;margin:0 0 var(--sp-lg);padding:0;display:grid;gap:8px}
.sl-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 16px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.sl-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sl-main b{overflow-wrap:anywhere}
.sl-meta .ss{margin-right:2px}
.sl-q{margin:0}
.sl-q button{width:var(--tap);min-width:32px;height:max(var(--tap),32px)}
.sl-paid{min-width:9rem}
.sl-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.sl-links{display:inline-flex;gap:10px;flex-wrap:wrap}
.sl-row{display:flex;flex-wrap:wrap;gap:8px 16px}
.sl-row .ms-lbl{flex:1 1 9rem}
.sl-chk{display:flex;gap:8px;align-items:flex-start;margin:8px 0;min-height:var(--tap)}
.sl-more{margin:8px 0}
.sl-hist{margin-top:var(--sp-lg)}
.sl-hist h3 span{color:var(--muted);font-weight:400}
.sl-hlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sl-h{padding-bottom:10px;border-bottom:1px solid var(--rule)}
.sl-h:last-child{border-bottom:0;padding-bottom:0}
.sl-h p{margin:4px 0}
.sl-hh time{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.sl-clist{list-style:none;margin:6px 0 0;padding:0;columns:2 14rem;font-size:var(--fs-sm)}
.sl-note{color:var(--muted)}
@media (width < 720px){.sl-item{grid-template-columns:minmax(0,1fr) auto}.sl-paid{grid-column:1/-1;min-width:0}.sl-acts{grid-column:1/-1;justify-content:flex-start}}
/* ---- the year recap (recap.js): My Stuff's "your year" and the page it opens */
.ry-sec .me-sec-h{flex-wrap:wrap}
.ry-big{display:flex;flex-wrap:wrap;gap:8px 20px;margin:6px 0 8px;padding:0;list-style:none}
.ry-big li{display:flex;flex-direction:column;min-width:7rem}
.ry-big b{font-family:var(--mono);font-size:var(--fs-xl)}
.ry-big span{font-size:var(--fs-sm);color:var(--muted)}
.ry-page{max-width:980px}
.ry-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:0 0 var(--sp-lg)}
.ry-head h1{margin:0}
.ry-years{display:flex;flex-wrap:wrap;gap:6px}
.ry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-lg)}
.ry-grid .wide{grid-column:1/-1}
@media (width < 720px){.ry-grid{grid-template-columns:minmax(0,1fr)}}
.ry-grid h2{margin:0 0 8px;font-size:var(--fs-lg)}
.ry-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:0}
.ry-kv dt{color:var(--muted)}
.ry-kv dd{margin:0;font-family:var(--mono);text-align:right}
.ry-rank{margin:0;padding-left:1.4em;display:grid;gap:4px}
.ry-rank li span{color:var(--muted);font-size:var(--fs-sm)}
.ry-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:end;height:96px;margin:8px 0 2px}
.ry-months i{display:block;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px}
.ry-mlab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;font-size:var(--fs-xs);color:var(--muted);text-align:center}
.ry-foot{margin-top:var(--sp-lg)}
.ry-back,#sl-byname{display:inline-flex;align-items:center;min-height:var(--tap)}
/* notices moved to the top edge (MS.toastLift: the bottom would cover what has focus) leave upward */
.ms-toasts.ms-toasts-top .ms-toast.out{transform:translateY(-8px)}
html.hv .co-price,html.hv .px-chip,html.hv .db-pricechip,html.hv .co-chart,html.hv .ms-qa-price{display:none !important}

/* ---- Market (market.js): the page, and the price and popularity history on card pages. One chart color, checked
   against both surfaces (the accent in light, a step darker than the dark accent in dark, inside the chart lightness band) */
/* Market's chart line: c_money.css (.mk --mk-line) */
.mk{padding-bottom:var(--sp-2xl)}
.mk-head{padding:var(--sp-xl) 0 var(--sp-xs)}
.mk-head h1{margin:0 0 6px}
.mk-lede{margin:0;max-width:66ch;color:var(--muted);font-size:var(--fs-lg)}
.mk-asof{margin:8px 0 0;max-width:90ch;font-size:var(--fs-sm);color:var(--muted)}
.mk-tabs{margin-top:var(--sp-md)}
.mk-count{display:inline-block;margin-left:4px;padding:0 7px;border-radius:var(--r-pill);background:var(--code-bg);color:var(--ink);font-size:var(--fs-xs)}
.mk-ctl{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-md);align-items:flex-end;margin:0 0 var(--sp-md)}
.mk-sel{display:grid;gap:4px;min-width:0}
.mk-sel span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.mk-sel select{font:inherit;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:4px 8px;min-height:var(--ctl-h);max-width:100%}
.mk-sw{display:flex;flex-wrap:wrap;gap:4px var(--sp-md);align-items:center;min-height:var(--ctl-h)}
.mk-chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);cursor:pointer}
.mk-defs{margin:0 0 var(--sp-sm);max-width:90ch;color:var(--muted)}
.mk-seg{display:inline-flex;border:1px solid var(--line-field);border-radius:var(--r-md);overflow:hidden}
.mk-seg button{font:inherit;font-family:var(--mono);font-size:var(--fs-sm);min-height:var(--ctl-h);padding:4px 14px;border:0;background:var(--surface);color:var(--muted);cursor:pointer}
.mk-seg button+button{border-left:1px solid var(--rule)}
.mk-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);font-weight:700}
.mk-h2{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--sp-sm)}
.mk-h3{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;margin:0 0 6px}
:is(.mk-h2,.mk-h3) .cl-muted{font-weight:400;font-size:var(--fs-sm)}
.mk-empty{color:var(--muted);font-size:var(--fs-md);border:1px dashed var(--rule);border-radius:var(--r-lg);padding:var(--sp-lg);margin:0}
.mk-empty p{margin:0 0 6px}
.mk-empty p:last-child{margin:0}
.mk-mvhead{margin:0 0 var(--sp-md);max-width:90ch;color:var(--muted)}
/* the watchlist: a table (ARIA roles, so the phone layout keeps its meaning) */
.mk-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-sm);align-items:center;margin:0 0 var(--sp-md)}
.mk-addbox{position:relative;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line-field);border-radius:var(--r-lg)}
.mk-addbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.mk-addbox input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-lg);padding:10px 12px;outline:none}
.mk-addbtns{display:flex;flex-wrap:wrap;gap:6px}
/* the watchlist's notice: in the page under the add box, never floating over the rows; timed out, a quiet line of the same height */
.mk-note{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-height:44px;margin:0 0 var(--sp-md);padding:6px var(--sp-lg);border:1px solid var(--ink);border-radius:var(--r-md);background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:var(--fs-sm);transition:background-color .3s,color .3s,border-color .3s}
.mk-note:empty{display:none}
.mk-note:focus{outline:none}
.mk-note:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mk-note-act{background:none;border:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px;padding:0 4px}
.mk-note.old{background:transparent;border-color:var(--rule);color:var(--muted)}
.mk-note.old .mk-note-act{visibility:hidden}
.mk-ghost .mk-c{grid-column:1/-1;padding:6px 0 6px var(--sp-lg);color:var(--muted);font-size:var(--fs-sm)}
.mk-ghost .mk-undo{font-size:var(--fs-sm)}
@media (pointer:coarse){.mk-note-act,.mk-ghost .mk-undo{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}}
.mk-wctl{display:none}
.mk-tbl{--mk-nw:4;display:grid;border-top:1px solid var(--rule)}
.mk-r{display:grid;grid-template-columns:minmax(10em,1fr) 7.5em repeat(var(--mk-nw),minmax(5.5em,6.5em)) 96px var(--ctl-h);gap:0 6px;align-items:center;border-bottom:1px solid var(--rule)}
.mk-c{min-width:0;padding:8px 0}
.mk-hr .mk-c{align-self:end;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.mk-hr small{display:block}
.mk-name a{color:var(--ink);font-weight:500;text-decoration:none}
@media (hover:hover){.mk-name a:hover{color:var(--accent)}}
.mk-name small,.mk-now small,.mk-w small{display:block;font-size:var(--fs-xs);color:var(--faint)}
.mk-now,.mk-w{text-align:right;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mk-now b{font-size:var(--fs-md);font-weight:700}
.mk-hr .mk-now,.mk-hr .mk-w{text-align:right}
.mk-grp{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.mk-grp .mk-name a,.mk-grp .mk-name b{font-weight:700}
.mk-mem .mk-name{padding-left:var(--sp-lg)}
.mk-more .mk-c,.mk-big .mk-c{grid-column:1/-1}
.mk-more .mk-c{padding:4px 0 8px var(--sp-lg)}
.mk-big .mk-c{padding:4px 0 var(--sp-lg)}
.mk-spb{display:block;border:0;background:none;padding:2px;border-radius:var(--r-sm);cursor:pointer;color:inherit}
@media (hover:hover){.mk-spb:hover{background:var(--code-bg)}}
.mk-spb[aria-expanded="true"]{background:var(--accent-soft)}
.mk-spark{display:block}
.mk-spark-none{display:block;width:88px;height:28px}
.mk-xb{font:inherit;font-size:1.125rem;line-height:1;width:var(--ctl-h);height:var(--ctl-h);border:0;border-radius:var(--r-md);background:transparent;color:var(--faint);cursor:pointer}
@media (hover:hover){.mk-xb:hover{background:var(--code-bg);color:var(--ink)}}
.mk-watch[aria-pressed="true"]{color:var(--accent);font-weight:700}
:is(.mk-spb,.mk-xb):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mk-src{margin:var(--sp-md) 0 0;max-width:90ch}
.mk-since{margin:0 0 var(--sp-md);padding:12px 14px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg)}
.mk-since-q{border-color:var(--rule);background:var(--surface);color:var(--muted)}
.mk-slist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mk-slist a{color:var(--ink);font-weight:500}
.mk-slist small{color:var(--faint)}
.mk-snum{font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mk-mh{margin:0 0 4px;font-family:var(--mono);font-size:var(--fs-xl)}
.mk-dlist{list-style:none;margin:var(--sp-md) 0 0;padding:0;display:grid;gap:4px;max-height:60vh;max-height:60dvh;overflow:auto}
.mk-dpick{display:block;width:100%;min-height:44px;padding:8px 12px;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);cursor:pointer}
@media (hover:hover){.mk-dpick:hover{border-color:var(--accent)}}
.mk-dpick[disabled]{opacity:.6;cursor:default}
.mk-dpick b{display:block;font-weight:500}
.mk-dpick small{display:block;font-size:var(--fs-xs);color:var(--faint)}
/* charts: one line, hairline grid, the crosshair and its readout */
.mk-chart{position:relative;min-width:0}
.mk-chartwrap{position:relative;outline:none;touch-action:pan-y}
.mk-chartwrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.mk-svg{display:block;max-width:100%;height:auto}
.mk-grid{stroke:var(--rule);stroke-width:1}
.mk-tick{fill:var(--faint);font-family:var(--mono);font-size:var(--fs-xs)}
.mk-area{fill:var(--mk-line);opacity:.1}
.mk-line{fill:none;stroke:var(--mk-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mk-dot,.mk-xd{fill:var(--mk-line);stroke:var(--surface);stroke-width:2}
.mk-xh{stroke:var(--muted);stroke-width:1}
.mk-tip{position:absolute;z-index:2;display:grid;gap:2px;padding:6px 10px;white-space:nowrap;pointer-events:none;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.mk-tip b{font-family:var(--mono);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.mk-tip span{font-size:var(--fs-xs);color:var(--muted)}
.mk-nochart{margin:0}
/* movers */
.mk-mvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-xl)}
.mk-mvl{min-width:0}
.mk-mvs{list-style:none;margin:0;padding:0}
.mk-mv{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto var(--ctl-h);gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule)}
.mk-rk{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);text-align:right}
.mk-mvn{min-width:0}
.mk-mvn a{color:var(--ink);font-weight:500;text-decoration:none}
@media (hover:hover){.mk-mvn a:hover{color:var(--accent)}}
.mk-mvn small{display:block;font-size:var(--fs-xs);color:var(--faint)}
.mk-mvv{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.mk-mvv b{font-size:var(--fs-md);font-weight:700}
.mk-mvv span{font-size:var(--fs-sm);color:var(--muted)}
.mk-mvv small{display:block;font-size:var(--fs-xs);color:var(--faint)}
.mk-rank{margin-top:var(--sp-2xl)}
.mk-rank .mk-mv{grid-template-columns:1.6em minmax(0,1fr) auto}
/* indexes */
.mk-idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-md)}
.mk-ix{min-width:0;padding:12px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg)}
.mk-ixnow{margin:0 0 6px}
.mk-ixnow b{display:block;font-family:var(--mono);font-size:var(--fs-num);font-weight:700}
.mk-ixnow small{color:var(--muted)}
.mk-wins{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px}
.mk-wins div{min-width:0}
.mk-wins dt{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.mk-wins dd{margin:0;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mk-wins dd small{color:var(--muted)}
.mk-tbld{margin-top:var(--sp-lg)}
.mk-tbld summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent)}
.mk-tbld .mk-sel{margin-top:var(--sp-sm)}
.mk-tscroll{max-height:420px;overflow:auto;margin-top:8px;border:1px solid var(--rule);border-radius:var(--r-md)}
.mk-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mk-table th,.mk-table td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
.mk-table th[scope=row],.mk-table thead th:first-child{text-align:left;font-weight:400}
.mk-table thead th{position:sticky;top:0;background:var(--surface);font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
/* reprints and the legality changelog */
.mk-rset,.mk-lday{margin:0 0 var(--sp-lg)}
.mk-rlist,.mk-llist{list-style:none;margin:0;padding:0}
.mk-rlist li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule)}
.mk-rlist a,.mk-l a{color:var(--ink);font-weight:500}
.mk-rlist small{color:var(--faint)}
.mk-rnum{margin-left:auto;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mk-rseen{flex-basis:100%;font-size:var(--fs-xs)}
.mk-l{margin:0 0 6px;padding:4px 0 4px 12px;border-left:3px solid var(--accent);font-size:var(--fs-md)}
.mk-l-sets{border-left-color:var(--rule)}
.mk-l small{display:block;color:var(--muted);font-size:var(--fs-sm)}
/* the card page's history section */
.mk-hsec{margin:0 0 var(--sp-lg)}
.mk-hnow{margin:0 0 6px}
.mk-hnow b{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700}
.mk-hacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--sp-sm) 0}
@media (width < 720px){
  .mk-add{grid-template-columns:1fr}
  .mk-tabs{flex-wrap:wrap;overflow-x:visible}
  .mk-tabs button{padding-inline:10px}
  .mk-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-ctl .mk-sel select{width:100%}
  .mk-ctl>:only-child,.mk-ctl>.mk-sel:has(#mk-src),.mk-ctl>.mk-sel:has(#mk-win),.mk-ctl>.mk-sw{grid-column:1/-1}
  .mk-mvgrid{grid-template-columns:1fr}
  .mk-rnum{margin-left:0}
  .mk-tick{font-size:13px}
}
/* the watchlist on phones and tablets: two lines a row, one window at a time (the "change over" choice) */
@media (width < 1024px){
  .mk-wctl{display:block;margin:0 0 var(--sp-sm)}
  .mk-wctl .mk-sel{max-width:24em}
  .mk-r{grid-template-columns:minmax(0,1fr) auto 92px var(--ctl-h);grid-template-areas:"name name name x" "now w sp sp";gap:0 8px}
  .mk-name{grid-area:name;padding-bottom:0}
  .mk-x{grid-area:x;align-self:start}
  .mk-now{grid-area:now;text-align:left}
  .mk-w{grid-area:w}
  .mk-sp{grid-area:sp}
  .mk-hr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mk-tbl:is([data-wsel="1d"]) .mk-w:not([data-w="1d"]),.mk-tbl:is([data-wsel="7d"]) .mk-w:not([data-w="7d"]),.mk-tbl:is([data-wsel="30d"]) .mk-w:not([data-w="30d"]),.mk-tbl:is([data-wsel="90d"]) .mk-w:not([data-w="90d"]),.mk-tbl:is([data-wsel="365d"]) .mk-w:not([data-w="365d"]){display:none}
}
@media (pointer:coarse){
  .mk-more .linkish,.mk-defs .linkish{display:inline-flex;align-items:center;min-height:44px}
  .mk-chk{min-height:44px}
  .mk-mvn a{position:relative;z-index:1;display:inline-block;min-width:44px;padding:12px 0;margin:-12px 0}
}
@media print{.mk-add,.mk-ctl,.mk-tabs,.mk-xb,.mk-hacts{display:none!important}}

/* ---------------------------------------------------------------- display (My Stuff, "display", and the palette)
   Set on html before the first paint (the page head reads 'ms-pref:display'), so nothing moves when a page opens.
   - text size, data-text "l" or "xl": the root size, 112.5% or 125% of the browser's own. Every type token and control
     height is in rem, so the browser's own text size setting counts as well.
   - density, data-density "compact": tighter rows in lists and tables and tighter card grids. On a touch screen every
     row and control keeps its 44 px target (the pointer:coarse rules set min-heights, which padding never shrinks).
   - card pictures, data-pics "s" or "l": grids of card pictures, narrower or wider columns (--pic) on wider screens,
     one more or one fewer across (--pc2, --pc3) on phones.
   The browser's reduced motion setting is honored above (prefers-reduced-motion), and its "more contrast" here. */
:root[data-text="l"]{font-size:112.5%}
:root[data-text="xl"]{font-size:125%}
:root[data-pics="s"]{--pic:.8;--pc2:3;--pc3:4}
:root[data-pics="l"]{--pic:1.4;--pc2:1;--pc3:2}
:root[data-density="compact"] :is(.db-row,.db-swaplist li,.co-hist li,.me-list li,.cb-col li,.di-list li,.db-versions li){padding-top:2px;padding-bottom:2px}
:root[data-density="compact"] .db-lgroup{margin-bottom:var(--sp-sm)}
:root[data-density="compact"] :is(.cl-grid,.db-gridview,.co-grid,.ds-pack,.ds-grid,.cap-grid,.cc-twins,.cc-toks,.mt-pgrid,.db-hand){gap:6px}
:root[data-density="compact"] .db-stacks{gap:var(--sp-md) 6px}
:root[data-density="compact"] :is(.lib-grid,.db-decks){gap:8px}
@media (width >= 720px){
  :root[data-density="compact"] :is(.cl-table,.fr-t,.rec-t,.mu-t,.sl-t,.cap-table,.mk-table,.odds,.db-ctable)>:is(thead,tbody,tfoot)>tr>:is(td,th){padding-top:3px;padding-bottom:3px}
}
@media (prefers-contrast:more){
  :root{--muted:#343B48;--faint:#343B48;--rule:#8C93A3;--line-field:#4A5263}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--muted:#D3D7DF;--faint:#D3D7DF;--rule:#5B6376;--line-field:#9AA1B1}
}
@media (prefers-contrast:more){
  :root[data-theme="dark"]{--muted:#D3D7DF;--faint:#D3D7DF;--rule:#5B6376;--line-field:#9AA1B1}
}
/* the display settings themselves, in My Stuff */
.me-disp{display:grid;gap:var(--sp-sm);margin:0}
.me-disp>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.me-disp dt{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);min-width:8.5rem}
.me-disp dd{margin:0}

/* ---------- the deck page's compare tab (compare.js) ---------- */
.cmp{display:grid;gap:var(--sp-md);min-width:0}
.cmp-views{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;width:fit-content;max-width:100%}
.cmp-views button{flex:1 1 auto;font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--muted);border:0;border-right:1px solid var(--rule);padding:8px 14px;cursor:pointer;min-height:40px}
.cmp-views button:last-child{border-right:0}
.cmp-views button[aria-selected="true"]{background:var(--accent-soft);color:var(--ink);font-weight:700}
.cmp-views button[aria-disabled="true"]{color:var(--faint);cursor:not-allowed}
.cmp-panel{display:grid;gap:var(--sp-md);min-width:0}
.cmp-panel:focus{outline:none}
.cmp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cmp-ctl label{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.cmp-sel{font:inherit;font-size:var(--fs-md);padding:6px 8px;border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink);max-width:100%;min-width:0}
.cmp-ls{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-sm)}
.cmp-li{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);padding:10px 12px;display:grid;gap:6px;min-width:0}
.cmp-lh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cmp-pct{font-family:var(--mono);font-size:1.125rem;font-variant-numeric:tabular-nums}
.cmp-what{font-size:var(--fs-sm);color:var(--muted)}
.cmp-arch{font-weight:700;margin-left:auto;overflow-wrap:anywhere}
.cmp-num{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--rule);border-radius:4px;padding:0 5px;color:var(--muted)}
.cmp-ev{margin:0;font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.cmp-tog{justify-self:start}
.cmp-diff{display:grid;gap:6px;border-top:1px solid var(--rule);padding-top:8px}
.cmp-h3{font-size:1rem;margin:0}
.cmp-h4{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:4px 0 0}
.cmp-dcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:4px 18px}
.cmp-dcols h4{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--faint);margin:2px 0}
.cmp-dl{list-style:none;margin:0;padding:0}
.cmp-dl li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:4px 0;border-bottom:1px solid var(--rule)}
.cmp-dn{flex:1 1 9rem;min-width:0;overflow-wrap:anywhere}
.cmp-dq{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-add{padding:4px 10px}
.cmp-add[aria-disabled="true"]{opacity:.65;cursor:default}
.cmp-tw{overflow-x:auto;max-width:100%}
.cmp-t{border-collapse:collapse;font-size:var(--fs-md);width:100%}
.cmp-t caption{text-align:left;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);padding:4px 0 6px}
.cmp-t th,.cmp-t td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:middle;font-variant-numeric:tabular-nums}
.cmp-t thead th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--faint);white-space:nowrap}
.cmp-t tbody th{font-weight:400;overflow-wrap:anywhere}
.cmp-t td{white-space:nowrap}
.cmp-t th:first-child{padding-left:0}
.cmp-det summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);padding:8px 0}
.cmp-pick{border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px 8px;margin:0;display:grid;gap:2px;min-width:0}
.cmp-pick legend{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);padding:0 4px}
.cmp-pick label{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:4px 0;cursor:pointer}
.cmp-pick input{width:18px;height:18px;margin:0}
.cmp-pick small{font-size:var(--fs-xs);color:var(--muted)}
.cmp-more{justify-self:start}
.cmp-how{margin:0;max-width:75ch}
@media (pointer:coarse){.cmp-views button,.cmp-tog,.cmp-add,.cmp-more,.cmp-sel{min-height:44px}.cmp-pick label{min-height:44px}.cmp-det summary{min-height:44px;display:flex;align-items:center}.cmp-t a[data-peek],.cmp-dl a[data-peek]{display:inline-flex;align-items:center;min-height:44px}.cmp-sel{font-size:16px}}
@media (width < 720px){.cmp-t th,.cmp-t td{padding:6px 5px}.cmp-arch{margin-left:0;flex-basis:100%}}
/* Meta Lens's archetype view: "compare with a saved deck" opens this list inline */
.mt-cmpbox{margin-top:8px}
.mt-cmplist{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
@media (pointer:coarse){.mt-cmplist a{display:inline-flex;align-items:center;min-height:44px}}

/* October 15, 2026: small labels were set in capitals; now they read as written, sentence case */
.avp-gh::first-letter,
.lib-nav h2::first-letter,.lib-nav h4::first-letter,
.cont-k::first-letter,
.qf-l::first-letter,
.brew-l::first-letter,
.qv-facts dt::first-letter,
.qv-ctxh::first-letter,
.qv-rel h3::first-letter,
.mt-seg button.off small::first-letter,
.mt-h::first-letter,
.mt-h3::first-letter,
.mt-fk::first-letter,
.wc-h::first-letter,
.wc-stepn::first-letter,
.how-sec h3::first-letter,
.gf-h::first-letter,
.or-line h3::first-letter,
.db-captier>span:first-child::first-letter{text-transform:uppercase}
/* every heading, summary and term starts with a capital, whatever case a tool wrote it in */
:is(h1,h2,h3,h4,h5,h6,summary,legend,dt,caption,.label):not([contenteditable])::first-letter{text-transform:uppercase}

/* ================================================================ v1.0: the frame (October 15, 2026)
   The side menu, the phone's top bar and drawer, every tool's page header and the footer. Written after styles.css, so
   where both say something about the same thing, this file wins.

   The menu is open on the Overview and folded on the tools by design; the person's own choice for each is kept
   (ms-pref:menu) and set on html (data-menu) by the page head before the first paint, so nothing moves. Without
   script it stays open. Widths: 1024 and wider, the menu pushes the page (264 open, 68 folded); 720 to 1023 it stays
   folded and opens over the page; under 720 it is a drawer behind the top bar's menu button. */
:root{--side-open:264px;--side-fold:68px;--side-w:var(--side-open);--gut:clamp(16px,4vw,32px);--ph-ic:36px}
:root[data-menu="folded"]{--side-w:var(--side-fold)}
@media (width < 1024px){:root,:root[data-menu]{--side-w:var(--side-fold)}}
@media (width < 720px){:root,:root[data-menu]{--side-w:0px;--ph-ic:24px}}

body{background:var(--ground);padding-inline:var(--gut);padding-left:calc(var(--side-w) + var(--gut));line-height:1.55;font-size:var(--fs-lg);-webkit-font-smoothing:auto;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
:focus-visible{outline-color:var(--ink)}
.vh{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:-1px;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0!important}
/* the clear button in every search box (A10 #3, A9 #17): the browser draws a small blue x; this is the house one, a
   faint x that darkens under the pointer, 44 px to tap on a touch screen. It is still the browser's own button, so
   clicking it clears the box and fires input and search as before. Firefox draws none */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0 -4px 0 6px;border-radius:var(--r-sm);background:var(--faint);-webkit-mask:var(--clear-x) center/11px 11px no-repeat;mask:var(--clear-x) center/11px 11px no-repeat;cursor:pointer}
@media (hover:hover){input[type=search]::-webkit-search-cancel-button:hover{background:var(--ink)}}
@media (pointer:coarse){input[type=search]::-webkit-search-cancel-button{width:44px;height:44px;margin-block:-14px;margin-inline:0 -12px;-webkit-mask-size:14px 14px;mask-size:14px 14px}}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}

/* the wordmark: "mtg" bold and "stuff" regular, in the mono, and the orange cursor */
.wm{display:inline-flex;align-items:center;font-family:var(--code);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.wm .s{font-weight:400}
.wm::after{content:"";display:inline-block;flex:none;width:.55em;height:.95em;margin-left:.14em;background:var(--spark)}
.wm-m{display:none}
@media (hover:hover){.wm:hover{text-decoration:none}}

/* pixel icons: the ink part takes the text color, the accent part is gray, and orange on the page you are on */
.px .px-ink,.px-ink{fill:currentColor}
.px-acc{fill:var(--icon-acc)}
.ph .px-acc,.side-a[aria-current="page"] .px-acc{fill:var(--spark)}

/* ---------------------------------------------------------------- the side menu */
.side{position:fixed;z-index:60;inset:0 auto 0 0;width:var(--side-w);display:flex;flex-direction:column;gap:12px;padding:16px 12px 12px;background:var(--stone);border-right:1px solid var(--rule);overflow:hidden}
.side > *{flex-shrink:0}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding-left:8px}
.side-fold{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink);cursor:pointer}
.side-fold svg{width:18px;height:18px;transition:transform .2s}
@media (hover:hover){.side-fold:hover{background:var(--hover)}}
.side-find{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 8px 0 12px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--muted);font:inherit;font-size:var(--fs-md);text-align:left;cursor:pointer}
.side-find svg{flex:none;width:17px;height:17px}
.side-find .side-l{flex:1}
.side-find kbd{font-family:var(--code);font-size:var(--fs-xs);color:var(--muted);background:var(--fill);border:1px solid var(--rule);border-radius:var(--r-sm);padding:0 6px;line-height:20px}
@media (hover:hover){.side-find:hover{border-color:var(--ink);color:var(--ink)}}
/* only the list of tools scrolls; the mark, search and your account stay put */
/* positioned, so the folded rail's visually hidden labels stay inside the list that scrolls them, not past the menu */
.side .side-list{position:relative;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule2) transparent;display:flex;flex-direction:column;gap:2px;margin-inline:-12px;padding-inline:12px}
.side-g{display:flex;flex-direction:column;gap:1px;margin-top:12px}
.side-h{margin:0 0 4px;padding:0 10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;line-height:1.4;color:var(--faint)}
.side-a{position:relative;flex:none;display:flex;align-items:center;gap:12px;min-height:34px;padding:0 10px;border-radius:var(--r-md);color:var(--muted);font-size:var(--fs-md);line-height:1.25;text-decoration:none}
@media (hover:hover){.side-a:hover{background:var(--hover);color:var(--ink);text-decoration:none}}
.side-a[aria-current="page"]{background:var(--sel);color:var(--ink);font-weight:700}
.side-ic{flex:none;width:24px;height:24px;color:var(--ink)}
.side-a:not([aria-current="page"]) .side-ic{color:var(--muted)}
@media (hover:hover){.side-a:hover .side-ic{color:var(--ink)}}
.side-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--rule)}
.side-data{margin:0;padding:0 10px;display:flex;flex-direction:column;gap:1px;font-family:var(--code);font-size:13px;line-height:1.5;color:var(--faint)}
.side-acct{display:flex;align-items:center;gap:6px}
.sa-me{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r-md);color:var(--ink);text-decoration:none}
.sa-me[aria-current="page"]{background:var(--hover);text-decoration:none}@media (hover:hover){.sa-me:hover{background:var(--hover);text-decoration:none}}
.sa-av{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fill);border:1px solid var(--rule);overflow:hidden;color:var(--ink)}
.sa-av .px{width:24px;height:24px}
.sa-av .av{width:100%;height:100%;border-radius:0}
.sa-av .av svg,.sa-av .av img{width:100%;height:100%;display:block}
.sa-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sa-txt b{font-size:var(--fs-md);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-txt small{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-in{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-md);background:var(--ink);color:var(--ground);font-size:var(--fs-sm);font-weight:700;text-decoration:none}
@media (hover:hover){.sa-in:hover{text-decoration:none;opacity:.9}}
.side-scrim{position:fixed;z-index:55;inset:0;background:var(--scrim)}
.side-tip{position:fixed;z-index:70;pointer-events:none;padding:5px 9px;border-radius:var(--r-md);background:var(--ink);color:var(--ground);font-size:var(--fs-sm);font-weight:700;line-height:1.3;white-space:nowrap;box-shadow:var(--shadow-2)}

/* folded: the mark, the caret, a search button and the icons, each named in a tooltip (app.js) and to screen readers */
:root[data-menu="folded"] .side,.side.is-rail{padding-inline:10px}
@media (width >= 720px){
  :root[data-menu="folded"]:not([data-side-pop]) .side{align-items:stretch}
  :root[data-menu="folded"]:not([data-side-pop]) .side-top{flex-direction:column;gap:10px;padding-left:0}
  :root[data-menu="folded"]:not([data-side-pop]) .wm-t{display:none}
  :root[data-menu="folded"]:not([data-side-pop]) .wm-m{display:inline}
  :root[data-menu="folded"]:not([data-side-pop]) .side-fold svg{transform:rotate(180deg)}
  :root[data-menu="folded"]:not([data-side-pop]) :is(.side-l,.side-find kbd,.side-h,.sa-txt,.side-data,.sa-in){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  :root[data-menu="folded"]:not([data-side-pop]) .side-find{justify-content:center;padding:0;height:44px}
  :root[data-menu="folded"]:not([data-side-pop]) .side-a{justify-content:center;padding:0;min-height:40px}
  :root[data-menu="folded"]:not([data-side-pop]) .side-g{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
  :root[data-menu="folded"]:not([data-side-pop]) .sa-me{justify-content:center;padding:4px 0}
}
/* 720 to 1023: always the rail; the caret opens the whole menu over the page, until a choice, Escape or a tap outside */
@media (720px <= width < 1024px){
  :root:not([data-side-pop]) .side{align-items:stretch}
  :root:not([data-side-pop]) .side-top{flex-direction:column;gap:10px;padding-left:0}
  :root:not([data-side-pop]) .wm-t{display:none}
  :root:not([data-side-pop]) .wm-m{display:inline}
  :root:not([data-side-pop]) .side-fold svg{transform:rotate(180deg)}
  :root:not([data-side-pop]) :is(.side-l,.side-find kbd,.side-h,.sa-txt,.side-data,.sa-in){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  :root:not([data-side-pop]) .side-find{justify-content:center;padding:0;height:44px}
  :root:not([data-side-pop]) .side-a{justify-content:center;padding:0;min-height:44px}
  :root:not([data-side-pop]) .side-g{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
  :root:not([data-side-pop]) .sa-me{justify-content:center;padding:4px 0}
  :root[data-side-pop] .side{width:var(--side-open);box-shadow:var(--shadow-3)}
}
/* under 720: a drawer */
.top{display:none}
@media (width < 720px){
  .side{width:min(var(--side-open),86vw);transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  :root[data-side-pop] .side{transform:none;visibility:visible;transition:transform .22s ease;box-shadow:var(--shadow-3)}
  .side-a{min-height:44px}
  .top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:4px;margin-inline:calc(-1 * var(--gut));padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px 6px;background:var(--stone);border-bottom:1px solid var(--rule)}
  .top .wm{font-size:20px;margin-left:2px}
  .top-menu,.top-find{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-md);background:none;color:var(--ink);cursor:pointer}
  .top-menu svg{width:22px;height:22px}
  .top-find{margin-left:auto}
  .top-find svg{width:20px;height:20px}
  .top-me{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;text-decoration:none}
  .top-me .sa-av{width:32px;height:32px}
  .top-me .sa-av .px{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){.side,.side-fold svg{transition:none!important}}
/* the folded rail (A10 #2): a shadow at the list's top or foot while tools are scrolled out of view there (the cover
   layers scroll with the list and hide the shadows at either end; pure CSS). On a mouse the rail's rows are 36 px, so
   more of the 23 show at once; touch keeps its 44 px rows. app.js (builder D1) scrolls the current tool into view */
.side .side-list{background:linear-gradient(var(--stone) 30%,transparent) top/100% 32px no-repeat local,linear-gradient(transparent,var(--stone) 70%) bottom/100% 32px no-repeat local,linear-gradient(var(--edge-shade),transparent) top/100% 12px no-repeat scroll,linear-gradient(transparent,var(--edge-shade)) bottom/100% 12px no-repeat scroll;background-color:var(--stone)}
@media (width >= 1024px) and (pointer:fine){
  :root[data-menu="folded"]:not([data-side-pop]) .side-list{gap:0}
  :root[data-menu="folded"]:not([data-side-pop]) .side-g{gap:0;margin-top:6px;padding-top:6px}
  :root[data-menu="folded"]:not([data-side-pop]) .side-a{min-height:36px}
}


/* ---------------------------------------------------------------- the page: content beside the menu */
.wrap{max-width:var(--wrap);margin-inline:auto}
body.app .wrap{max-width:1280px}
main{display:block}
:root{--top-h:0px}
@media (width < 720px){:root{--top-h:57px}}
/* anything scrolled into view (a focused control, an anchor, a bar a tool brings up) stops under the phone's sticky top
   bar, not beneath it; tools with their own sticky bars keep their own, larger padding (styles.css html:has(...)) */
html{scroll-padding-top:calc(var(--top-h) + var(--sp-md))}
.skip-link{z-index:80}

/* every tool's page header: its icon, its name (the menu's words) and what it does in one line. A view inside a tool
   (one deck, one card) turns it into a link back up (ph-sub) and draws its own h1 */
.ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:28px 0 22px}
.ph-ic{grid-row:1 / span 2;display:inline-grid;place-items:center;width:var(--ph-ic);height:var(--ph-ic)}
.ph-ic .px{width:var(--ph-ic);height:var(--ph-ic);color:var(--ink)}
.ph-h{grid-column:2;margin:0;font-size:var(--fs-title);font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.ph-d{grid-column:2;margin:0;max-width:72ch;font-size:var(--fs-lg);line-height:1.45;color:var(--muted)}
.ph-x{grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ph-x:empty{display:none}
.ph.ph-sub{padding:18px 0 4px;grid-template-columns:auto minmax(0,1fr)}
.ph.ph-sub .ph-ic{grid-row:auto;width:24px;height:24px}
.ph.ph-sub .ph-ic .px{width:24px;height:24px}
.ph.ph-sub .ph-h{font-size:var(--fs-md);font-weight:700;letter-spacing:0}
.ph.ph-sub .ph-h a{color:var(--muted);text-decoration:none}
@media (hover:hover){.ph.ph-sub .ph-h a:hover{color:var(--ink);text-decoration:underline}}
.ph.ph-sub .ph-d{display:none}
@media (width < 720px){
  .ph{padding:18px 0 14px;gap:2px 12px}
  .ph-ic{grid-row:1}
  .ph-d{grid-column:1 / -1;font-size:var(--fs-md)}
  .ph-x{grid-column:1 / -1;grid-row:auto;justify-content:flex-start}
}
/* the app shell's loading lines sit under the page header, so they need no title of their own */
.shell{padding-top:var(--sp-md)}

/* ---------------------------------------------------------------- the footer */
.foot{margin-top:var(--sp-4xl);padding-block:var(--sp-xl) var(--sp-2xl);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:baseline;font-family:var(--sans);font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
.foot p{margin:0;max-width:80ch}
.foot-by{color:var(--ink)}
.foot-by a,.foot-links a{color:var(--muted)}
@media (hover:hover){.foot-by a:hover,.foot-links a:hover{color:var(--ink)}}
.foot-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.foot-v{font-family:var(--code);font-size:var(--fs-xs);color:var(--faint)}
.foot-legal{grid-column:1 / -1;font-size:var(--fs-xs);color:var(--faint)}
@media (width < 720px){.foot{grid-template-columns:1fr}}
@media (pointer:coarse){.foot-links a,.foot-by a{display:inline-flex;align-items:center;min-height:var(--tap)}}

@media print{.side,.top,.side-scrim,.side-tip{display:none!important}body{padding-left:0!important}}

/* layers over the menu: the palette, Life Log while playing, its panels */
.palette{z-index:75}
body.lf-playing #lf-app{z-index:65}
.lf-panel{z-index:66}

/* ---------------------------------------------------------------- shared parts of the new system */
/* a section's header: its name over a 1.5 px ink rule, a quiet link at the right */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.sec-h{margin:0;font-size:var(--fs-xl);font-weight:700;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.sec-head .sec-h{border:0;padding:0}
h2.sec-h:not(.sec-head .sec-h){padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.sec-link,.sec-aside{font-size:var(--fs-sm);color:var(--muted)}
.sec-link{text-decoration:underline;text-decoration-color:var(--rule2)}
@media (hover:hover){.sec-link:hover{color:var(--ink);text-decoration-color:currentColor}}
/* buttons: ink for the one main action, a hairline for the rest */
.btn-ink,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-md);font:inherit;font-size:var(--fs-lg);font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--ground);border:1px solid var(--ink)}
@media (hover:hover){.btn-ink:hover{text-decoration:none;opacity:.9}}
.btn-line{background:var(--ground);color:var(--ink);border:1px solid var(--rule2)}
@media (hover:hover){.btn-line:hover{text-decoration:none;border-color:var(--ink)}}
/* the small mono tags: a format, a set code */
.tag-fmt,.tag-set{display:inline-flex;align-items:center;height:22px;padding:0 6px;border:1px solid var(--rule2);border-radius:4px;font-family:var(--code);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.tag-set{border-color:transparent;background:var(--fill)}
.up{color:var(--up)}
.down{color:var(--down)}

/* ---------------------------------------------------------------- home: the landing, then the Overview */
.ov{display:none}
:root[data-home="ov"] .wel{display:none}
:root[data-home="ov"] .ov{display:grid}
.wel{display:flex;flex-direction:column;gap:56px;padding:56px 0 8px;max-width:980px}
.land-hero{display:flex;flex-direction:column;gap:18px}
.land-h{margin:0;font-size:var(--fs-hero);font-weight:700;line-height:1.08;letter-spacing:-.025em}
.land-p{margin:0;max-width:56ch;font-size:var(--fs-xl);line-height:1.5;color:var(--muted)}
.land-q{display:flex;align-items:center;gap:10px;max-width:720px;margin-top:6px;padding:6px 6px 6px 16px;border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--ground)}
.land-gt{font-family:var(--code);font-weight:700;font-size:var(--fs-xl);color:var(--spark)}
.land-q input{flex:1;min-width:0;height:44px;border:0;outline:0;background:none;color:var(--ink);font-family:var(--code);font-size:var(--fs-xl)}
.land-q input::placeholder{color:var(--faint);font-family:var(--sans)}
.land-q:focus-within{box-shadow:0 0 0 3px var(--sel)}
.land-note{margin:0;font-size:var(--fs-md);color:var(--muted)}
.land-sec{display:flex;flex-direction:column;gap:18px}
.keeps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.keep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;align-content:start}
.keep .px{width:24px;height:24px}
.keep h3{margin:0;font-size:var(--fs-lg);font-weight:700}
.keep p{grid-column:1 / -1;margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.lt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.lt-row{display:flex;align-items:flex-start;gap:14px;padding:14px 8px;margin-inline:-8px;border-bottom:1px solid var(--rule);border-radius:var(--r-md);color:var(--ink);text-decoration:none}
@media (hover:hover){.lt-row:hover{background:var(--fill);text-decoration:none}}
.lt-row .px{flex:none;width:36px;height:36px}
.lt-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lt-t b{font-size:var(--fs-lg)}
.lt-t span{font-size:var(--fs-md);line-height:1.45;color:var(--muted)}
/* the site keeps four breakpoints (480, 720, 1024, 1100): what it keeps stacks under 1024, the tools list under 720 */
@media (width < 1024px){.keeps{grid-template-columns:1fr;gap:18px}}
@media (width < 720px){.lt{grid-template-columns:1fr}.wel{gap:40px;padding-top:28px}.land-q{padding-left:12px}.land-q .btn-ink{padding:0 14px}}

.ov{grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);column-gap:40px;align-items:start}
.ov > .ph{grid-column:1 / -1}
.ov-body{display:contents}
/* "Three things worth knowing": once, on screens with a mouse, until Got it */
.ov-tip{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 10px 10px 18px;margin-bottom:24px;color:var(--muted);font-size:var(--fs-md);line-height:1.5}
.ov-tip p{margin:0}
.ov-tip b{color:var(--ink)}
.ov-tip .btn-line{min-height:36px;font-size:var(--fs-md);padding:0 14px;flex-shrink:0}
.ov-ledger{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-bottom:36px}
.ov-cell{display:flex;flex-direction:column;gap:2px;padding:16px 18px 14px;color:var(--ink);text-decoration:none;min-width:0}
.ov-cell + .ov-cell{border-left:1px solid var(--rule)}
@media (hover:hover){.ov-cell:hover{background:var(--fill);text-decoration:none}}
.ov-l{font-size:var(--fs-sm);color:var(--muted)}
.ov-v{font-size:var(--fs-num);font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-s{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the collection value's line: top right of its cell on wide screens, under the words on phones */
.ov-cell{position:relative}
.ov-spark{position:absolute;top:18px;right:18px;width:min(72px,30%);height:22px;overflow:visible}
.ov-spark polyline{stroke:var(--faint);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
@media (hover:hover){.ov-cell:hover .ov-spark polyline{stroke:var(--muted)}}
.ov-s.up{color:var(--up);font-weight:700}
.ov-s.down{color:var(--down);font-weight:700}
.ov-main{grid-column:1;display:flex;flex-direction:column;gap:36px;min-width:0}
.ov-tipped .ov-side{grid-row:4 / span 2}
.ov-side{grid-column:2;grid-row:3 / span 2;display:flex;flex-direction:column;gap:28px;min-width:0}
.ov-rows{display:flex;flex-direction:column}
.ov-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 18px;padding:12px 6px;margin-inline:-6px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
@media (hover:hover){.ov-row:hover{background:var(--fill);text-decoration:none}}
.ov-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.ov-name b{font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:var(--fs-sm);color:var(--muted)}
.ov-num{font-size:var(--fs-md);text-align:right;white-space:nowrap}
.ov-when{min-width:96px;font-size:var(--fs-sm);color:var(--muted);text-align:right;white-space:nowrap}
.ov-chg{min-width:64px;font-size:var(--fs-md);font-weight:700;text-align:right}
.ov-empty,.ov-foot{margin:12px 0 0;font-size:var(--fs-md);color:var(--muted)}
.ov-foot{font-size:var(--fs-sm)}
.ov-rows-x{margin-top:0}
.ov-pick{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--stone)}
.ov-pick h2{margin:0;font-size:var(--fs-xl);font-weight:700}
.ov-pick p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.ov-pick .btn-ink{align-self:flex-start}
.ov-up ul{list-style:none;margin:0;padding:0}
.ov-up li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ov-up time{font-family:var(--code);font-size:var(--fs-sm);font-weight:700;color:var(--ink);padding-top:2px}
.ov-up li > span{display:flex;flex-direction:column;gap:2px}
.ov-up b{font-size:var(--fs-md)}
.ov-up li > span > span{font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
@media (width < 1100px){
  .ov{grid-template-columns:minmax(0,1fr)}
  .ov-side,.ov-tipped .ov-side{grid-column:1;grid-row:auto;margin-top:36px}
}
@media (width < 720px){
  .ov-ledger{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px}
  .ov-cell:nth-child(3){border-left:0}
  .ov-cell:nth-child(n+3){border-top:1px solid var(--rule)}
  .ov-row{grid-template-columns:minmax(0,1fr) auto}
  .ov-when{display:none}
  .ov-mv .ov-chg{grid-column:2;min-width:0}
  .ov-s{white-space:normal}
  .ov-spark{position:static;width:100%;height:20px;margin-top:8px}
  .ov-cell{padding:14px 14px 12px}
}

/* a tool's section label: was "# label" in the mono; now a plain heading over the ink rule */
.label{margin:0 0 12px;padding-bottom:6px;border-bottom:1.5px solid var(--ink);font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.label::before{content:none}
summary .label,summary > h2,summary > h3{display:inline;margin:0;padding:0;border:0}

/* panels (Deckbuilder, Collection, My Stuff and others): a hairline box, its heading in the reading face */
.db-panel{border-radius:var(--r-lg);padding:16px 18px}
.db-panel h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3;margin:0 0 12px;color:var(--ink)}

/* ---------------------------------------------------------------- shared controls (after the five tool passes) */
:root{accent-color:var(--ink)}
.btn-sm{border-color:var(--rule2)}
@media (hover:hover){.btn-sm:hover{border-color:var(--ink)}}
.btn-sm.primary,.btn-block.primary,.cl-go{font-weight:700}
@media (hover:hover){.btn-sm.primary:hover,.btn-block.primary:hover,.cl-go:hover{background:var(--ink);border-color:var(--ink);opacity:.9}}
/* joined toggles everywhere: hairline segments, the chosen one ink */
.mt-seg button{font-family:var(--sans);font-size:var(--fs-sm);background:var(--ground);color:var(--muted);border-color:var(--rule2)}
@media (hover:hover){.mt-seg button:hover{color:var(--ink)}}
.mt-seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
/* a dialog's field captions read as words, and a checkbox or radio sits beside its words */
.ms-modal label,.ms-lbl{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.ms-modal label:has(> input:is([type="checkbox"],[type="radio"])){display:flex;align-items:center;gap:8px;font-weight:400;font-size:var(--fs-md)}
/* bulk bars sit centered in the content, clear of the menu */
.db-bulk,.lib-bulk{left:calc(50% + var(--side-w) / 2)}
/* toasts: the reading face */
.ms-toast{font-family:var(--sans);font-size:var(--fs-md)}
/* the pasted decklist offer: words, the action, a close; the buttons keep a touch-size target */
.ms-paste{display:flex;align-items:center;gap:4px;padding-block:4px;padding-right:4px}
.ms-paste > span{padding-block:6px}
.ms-paste .ms-toast-act{margin-left:10px;min-height:36px;padding:0 8px;border-radius:var(--r-sm)}
.ms-toast-x{background:none;border:0;color:var(--ground);font:inherit;font-size:1.25em;line-height:1;min-width:36px;min-height:36px;border-radius:var(--r-sm);cursor:pointer;opacity:.8}
@media (hover:hover){.ms-toast-x:hover{opacity:1}}
.ms-paste :is(button):focus-visible{outline:2px solid var(--ground);outline-offset:1px}
.ms-toasts{left:calc(50% + var(--side-w) / 2)}

/* the folds at the foot of every tool: "How the numbers are made" and "About <tool>", one quiet style */
.how,.cl-vocab.cl-about{margin:0;border:0;border-top:1px solid var(--rule);border-radius:0;padding:0;background:none}
.how{margin-top:var(--sp-3xl)}
.how + .cl-about,.cl-about + .how{margin-top:0}
.cl-about:last-child,.how:last-child{border-bottom:1px solid var(--rule)}
:is(.how,.cl-vocab.cl-about) > summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 0;list-style:none;cursor:pointer;font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
:is(.how,.cl-vocab.cl-about) > summary::-webkit-details-marker{display:none}
:is(.how,.cl-vocab.cl-about) > summary::before{content:"";flex:none;width:8px;height:8px;margin:0 4px 0 3px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
:is(.how,.cl-vocab.cl-about)[open] > summary::before{transform:translateY(-2px) rotate(45deg)}
:is(.how,.cl-vocab.cl-about)[open] > summary{margin-bottom:4px}
@media (hover:hover){:is(.how,.cl-vocab.cl-about) > summary:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
.how-body,.cl-about > .split,.cl-about > .block,.cl-about > ul,.cl-about > h2{margin-left:23px}
.cl-about[open]{padding-bottom:18px}
.how[open]{padding-bottom:12px}
.how-sec h3{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:14px 0 6px}
.how-gloss dt{font-family:var(--sans)}
.how-f code{font-family:var(--code)}
@media (width < 720px){.how-body,.cl-about > .split,.cl-about > .block,.cl-about > ul,.cl-about > h2{margin-left:0}}
@media (prefers-reduced-motion:reduce){:is(.how,.cl-vocab.cl-about) > summary::before{transition:none}}
/* about a tool: what it does, why, changelog */
.cl-about .dash li::before{content:"";top:.7em;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.cl-about .log time{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}

/* bigger reading text: the menu grows with it, so no name is cut short */
:root[data-text="l"]{--side-open:288px}
:root[data-text="xl"]{--side-open:320px}

/* the card quick view (stuff.js): the same legality rows and fact chips as the card page */
.qv-legal{display:block;columns:3 150px;column-gap:22px;margin:4px 0 0;border-top:1px solid var(--rule)}
.qv-legal li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font-size:var(--fs-sm)}
.qv-legal li,.qv-legal .lg-legal,.qv-legal .lg-banned,.qv-legal .lg-restricted{background:none}
.qv-legal li b{font-weight:400;color:var(--muted);text-align:right}
.qv-legal .lg-legal b{color:var(--ok);font-weight:700}
.qv-legal .lg-banned b{color:var(--bad);font-weight:700}
.qv-legal .lg-restricted b{color:var(--ink);font-weight:700}
.qv .dna{font-family:var(--sans);font-size:var(--fs-sm);line-height:1.3;padding:3px 10px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);color:var(--ink)}
@media (hover:hover){.qv a.dna:hover{background:var(--hover);border-color:var(--ink)}}
.qv-flag{font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);color:var(--ink)}
.qv-flag.gc,.qv-flag.new{border-color:var(--rule2);background:var(--fill);color:var(--ink)}
.qv-full{font-family:var(--sans)}
/* a heading that takes focus when its view opens (tabindex -1) shows no ring: the ring is for keyboard targets */
[tabindex="-1"]:focus:not(:focus-visible),h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:none}

/* the command palette */
.pal-box{max-width:600px;background:var(--ground);border-color:var(--rule2);border-radius:12px}
#pal-input{font-family:var(--sans);font-size:var(--fs-xl)}
.pal-h{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--muted);padding:10px 10px 4px}
.pal-kind{display:inline-block;font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint)}
.pal-kind::first-letter{text-transform:uppercase}
.pal-foot,.pal-none{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.pal-foot kbd{font-family:var(--code);font-size:13px;color:var(--ink);background:var(--fill);border:1px solid var(--rule);border-radius:4px;padding:0 5px}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:95;margin:0;font-family:var(--sans);font-size:var(--fs-md)}
.house{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--stone);color:var(--ink);text-decoration:none}
@media (hover:hover){.house:hover{border-color:var(--ink);text-decoration:none}}
.house .px{flex:none;width:36px;height:36px}
.house-t{display:flex;flex-direction:column;gap:2px}
.house-k{font-size:var(--fs-sm);color:var(--muted)}
.house-t b{font-size:var(--fs-xl)}
.house-t > span:last-child{font-size:var(--fs-md);line-height:1.5;color:var(--muted)}

/* ---------------------------------------------------------------- accounts: the sign-in page, the menu, My Stuff */
:root[data-signed] [data-acct-in],:root:not([data-signed]) [data-acct-on]{display:none}
.signin{display:flex;justify-content:center;padding:48px 0 16px}
.si-card{width:100%;max-width:440px;padding:36px 36px 30px;border:1px solid var(--rule);border-radius:12px;background:var(--ground);display:flex;flex-direction:column;gap:16px}
.si-h{margin:0;font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.015em}
.si-p{margin:0;font-size:var(--fs-lg);color:var(--muted)}
.si-p b{color:var(--ink)}
.si-step{display:flex;flex-direction:column;gap:12px}
.si-step[hidden]{display:none}
.si-prov{display:flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--rule2);border-radius:8px;background:var(--ground);color:var(--ink);font:inherit;font-size:var(--fs-lg);font-weight:700;cursor:pointer}
@media (hover:hover){.si-prov:hover{border-color:var(--ink)}}
.si-or{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);color:var(--faint)}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:var(--rule)}
.si-form{display:flex;flex-direction:column;gap:8px}
.si-l{font-size:var(--fs-md);font-weight:700}
.si-in{height:48px;padding:0 14px;border:1.5px solid var(--rule2);border-radius:8px;background:var(--ground);color:var(--ink);font:inherit;font-size:var(--fs-xl)}
.si-in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sel)}
.si-code{font-family:var(--code);font-size:var(--fs-xl);letter-spacing:.3em}
.si-go{width:100%;height:48px;margin-top:4px}
.si-note,.si-fine{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.si-fine a{color:var(--muted)}
.si-keep{margin:0;padding:14px 16px;border-radius:8px;background:var(--fill);font-size:var(--fs-sm);color:var(--muted)}
.si-err{margin:0;color:var(--bad);font-weight:700;font-size:var(--fs-md)}
.si-err:empty{display:none}
.si-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;font-size:var(--fs-md)}
.si-links .linkish{color:var(--muted)}
.si-links .linkish:disabled{text-decoration:none;cursor:default;color:var(--faint)}
@media (width < 720px){.signin{padding-top:20px}.si-card{padding:24px 20px;border:0;padding-inline:0}}
.me-acct{margin:0 0 16px}
.me-acct h2{margin:0 0 8px;font-size:var(--fs-xl);font-weight:700}
.me-acct p{margin:0 0 12px;color:var(--muted);max-width:68ch}
.me-acct-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0 0 14px;font-size:var(--fs-md)}
.me-acct-dl dt{color:var(--muted)}
.me-acct-dl dd{margin:0;overflow-wrap:anywhere}
.me-acct-bad{margin:0 0 14px}
.me-acct-bad p{color:var(--ink)}
.me-acct-bad ul{margin:0 0 12px;padding-left:20px;font-size:var(--fs-sm);overflow-wrap:anywhere}
.me-danger{color:var(--bad)}
@media (hover:hover){.me-danger:hover{border-color:var(--bad)}}
.me-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 14px;font-size:var(--fs-md);color:var(--ink);font-weight:400}
.me-check input{margin-top:3px}
.missing-q{max-width:560px;margin:8px 0 16px}
.me-acct .me-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.me-acct .me-actions .btn-sm{min-height:36px}

/* the keyboard sheet (?) */
.keysheet-box{background:var(--ground);border-color:var(--rule2);border-radius:12px}
.keysheet h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.keysheet dd{color:var(--ink)}
.keysheet dd::first-letter{text-transform:uppercase}
.keysheet kbd,kbd{font-family:var(--code);font-size:13px;color:var(--ink);background:var(--fill);border:1px solid var(--rule2);border-bottom-width:2px;border-radius:var(--r-sm);padding:0 6px}

/* moving between pages, the menu and the phone's top bar stay put while the page itself cross-fades */
.side{view-transition-name:side}
@media (width < 720px){.top{view-transition-name:topbar}.side{view-transition-name:none}}
.keysheet dt::first-letter{text-transform:none}
.ov-q{font-family:var(--code);font-size:var(--fs-md);color:var(--ink);background:none;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* touch screens: the header's link back up, the pick review's card names and the 404 page's links are links that stand
   on their own, so they take the full 44 px target (an inline link ignores min-height, hence inline-flex) */
@media (pointer:coarse){
  .ph.ph-sub .ph-h a,.ds .ds-rv .fr-card.linkish,.missing a,.mb-cat-cards a{display:inline-flex;align-items:center;min-height:var(--tap)}
  label:has(> input[type=file]){min-height:var(--tap)!important}
}

/* ================================================================ v1.0, group A: the card tools (October 15, 2026)
   Super Search (/search/) and every card page (/card/<slug>), both drawn by cardlab.js; the Interaction Oracle
   (oracle.js); and the card page's parts: community tags (tags.js), combos (combos.js), the synergy reader's findings
   (synergy.js, shown by the Oracle) and photo to list (photo.js). Loads after styles.css and shell.css: where a rule
   here says the same thing as an older one, this one wins. Tokens only, so dark mode follows. */

/* ---------------------------------------------------------------- Super Search: the box and its buttons */
/* the count of cards sits in the page header's right slot (searchShell moves it there) */
.ph-x .cl-stat{font-size:var(--fs-sm);line-height:1.4;color:var(--muted);white-space:nowrap}
.cl-titlebar{margin-bottom:12px}
.cl-titlebar .cl-stat{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cl-hero{padding-top:0}
.cl-form{gap:8px}
.cl-inputwrap{border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--ground);min-height:52px}
.cl-inputwrap:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--sel)}
:root .cl-inputwrap:focus-within{box-shadow:0 0 0 3px var(--sel)}
.cl-prompt{font-family:var(--code);font-size:var(--fs-xl);font-weight:700;color:var(--spark);padding-left:16px}
#cl-q{font-family:var(--code);font-size:var(--fs-xl);padding:13px 12px}
#cl-q::placeholder{font-family:var(--sans);color:var(--faint);opacity:1}
.cl-go,.cl-mode{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;min-height:52px;padding:0 20px;border-radius:var(--r-md)}
.cl-go{background:var(--ink);border:1px solid var(--ink);color:var(--ground)}
@media (hover:hover){.cl-go:hover{background:var(--ink);border-color:var(--ink);opacity:.9}}
.cl-mode{background:var(--ground);border:1px solid var(--rule2);color:var(--ink)}
@media (hover:hover){.cl-mode:hover{border-color:var(--ink)}}
.cl-mode[aria-expanded="true"]{background:var(--sel);border:1.5px solid var(--ink)}
#cl-filters b{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 6px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;line-height:1}
.cl-lock{min-height:52px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding:0 8px 0 16px}
@media (hover:hover){.cl-lock:hover{border-color:var(--ink)}}
.cl-lock select{font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink)}
.cl-lock.on{border:1.5px solid var(--ink);background:var(--sel);color:var(--ink)}
.cl-lock.on select{color:var(--ink);font-weight:700}
.cl-lock:focus-within{border-color:var(--ink)}
.cl-lock.fromq select{font-weight:700}
/* the name suggestions under the box */
.cl-ac{border:1px solid var(--rule2);border-radius:var(--r-lg);padding:6px;background:var(--ground)}
.cl-ac li a{grid-template-columns:minmax(0,1fr) auto;padding:8px 10px}
.cl-ac li a b{font-weight:700}
.cl-ac li a small{color:var(--muted);font-size:var(--fs-sm)}
.cl-ac li[aria-selected="true"] a{background:var(--hover)}@media (hover:hover){.cl-ac li a:hover{background:var(--hover)}}
.cl-ac-foot{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding:8px 10px 4px;border-top:1px solid var(--rule);margin-top:4px}
.cl-ac-foot[aria-selected="true"]{background:var(--hover);color:var(--ink)}

/* ---------------------------------------------------------------- quick filters: one row of labeled chip groups */
.qf{gap:10px 20px;margin:14px 0 4px;font-size:var(--fs-sm)}
.qf-g{gap:6px}
.qf-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);margin-right:4px}
.qf-chip,.qf-c{min-height:32px;border:1px solid var(--rule2);background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;line-height:1.2}
.qf-chip{padding:4px 12px;border-radius:var(--r-pill)}
.qf-c{display:inline-grid;place-items:center;min-width:32px;padding:0 5px;border-radius:var(--r-pill)}
@media (hover:hover){.qf-chip:hover,.qf-c:hover{border-color:var(--ink);background:var(--ground)}}
.qf-chip.on,.qf-c.on{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink);font-weight:400}
.qf-chip.on{padding:3.5px 11.5px}
.qf-more{color:var(--ink)}
.qf-sep{height:20px;background:var(--rule2)}
/* "Clear these" and "All filters": two quiet text buttons with room between them, at the end of the last row */
.qf-end{gap:20px;margin-left:auto}
.qf-all,.qf-clear{font-family:var(--sans);font-size:var(--fs-sm);padding:4px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.qf-all{color:var(--ink);text-decoration-color:var(--rule2)}
.qf-clear{color:var(--muted);text-decoration-color:var(--rule2)}
@media (hover:hover){.qf-all:hover,.qf-clear:hover{color:var(--ink);text-decoration-color:currentColor;text-decoration-thickness:2px}}

/* ---------------------------------------------------------------- what the search reads as: the words and the active filters */
.cl-explain{margin-top:12px}
.cl-from{font-size:var(--fs-lg);line-height:1.5;margin:0 0 10px;color:var(--ink)}
.cl-from code,.cl-alt code{font-family:var(--code);font-size:var(--fs-sm);background:var(--fill);border-radius:var(--r-sm);padding:1px 6px;color:var(--ink)}
.cl-alt{color:var(--ink)}
.cl-parts{gap:8px}
.cl-parts li{gap:2px;min-height:32px;padding:0 4px 0 12px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--fill);color:var(--ink);font-family:var(--sans);font-size:var(--fs-sm);line-height:1.3}
.cl-parts button{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border-radius:50%;color:var(--muted);font-family:var(--sans);font-size:18px;line-height:1}
@media (hover:hover){.cl-parts button:hover{background:var(--hover);color:var(--ink)}}
.cl-parts li.cl-part-lock{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink)}
.cl-parts li.cl-part-lock button{color:var(--ink)}
.cl-part-lock small{font-size:var(--fs-xs);color:var(--muted);opacity:1;margin-left:6px}
.cl-errors{font-size:var(--fs-lg);color:var(--ink)}
.cl-errors li{padding-left:12px;border-left:3px solid var(--ink);margin-bottom:4px}

/* ---------------------------------------------------------------- the results bar: count, sort, view */
.cl-bar{gap:12px 16px;padding:16px 0 14px;margin-top:16px;border-bottom:1px solid var(--rule)}
.cl-count{font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink)}
.cl-count .cl-muted{font-size:var(--fs-sm)}
.cl-controls{gap:8px;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cl-controls label{display:inline-flex;align-items:center;gap:8px}
.cl-controls select{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md);padding:0 8px;min-height:36px}
@media (hover:hover){.cl-controls select:hover{border-color:var(--ink)}}
.cl-dir,.cl-facet-toggle{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md);min-height:36px;padding:0 12px}
@media (hover:hover){.cl-dir:hover,.cl-facet-toggle:hover{border-color:var(--ink)}}
.cl-dir[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);padding:0 11.5px}
.cl-views button{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);min-height:36px;padding:0 12px}
@media (hover:hover){.cl-views button:hover{background:var(--hover)}}
.cl-views button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* ---------------------------------------------------------------- the DNA sidebar: a count bar behind each choice */
.cl-layout{grid-template-columns:240px minmax(0,1fr);gap:32px;padding-top:20px}
.cl-facet-note{font-family:var(--sans);font-size:var(--fs-sm);line-height:1.45;color:var(--muted);margin:0 0 16px}
.cl-facets section{margin-bottom:20px}
.cl-facets h3{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.cl-facets ul{display:flex;flex-direction:column;gap:2px}
.cl-facets button{align-items:center;min-height:var(--ctl-h-sm);padding:4px 8px;border-radius:var(--r-sm);font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);line-height:1.3}
@media (hover:hover){.cl-facets button:hover{background:transparent}}
@media (hover:hover){.cl-facets button:hover .fl{text-decoration:underline;text-underline-offset:3px}}
.cl-facets .fc{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
/* .fb is also the filter menu's class: here it is only the bar */
.cl-facets .fb{margin:0;padding:0;border:0;max-height:none;overflow:visible;position:absolute;left:0;top:2px;bottom:2px;background:var(--fill);opacity:1;border-radius:var(--r-sm)}
@media (hover:hover){.cl-facets button:hover .fb{background:var(--sel)}}

/* ---------------------------------------------------------------- results: grid, list, text */
.cl-grid{gap:16px}
.cl-table{font-size:var(--fs-lg)}
.cl-table th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--rule2)}
.cl-table td{padding:10px 10px}
.cl-table td a{font-weight:700;color:var(--ink)}
@media (hover:hover){.cl-table td a:hover{color:var(--ink);text-decoration:underline}}
.cl-table td a.dna{font-weight:400}
.cl-table td.cl-muted{font-size:var(--fs-sm)}
.cl-table .num{font-family:var(--sans)}
.cl-text{padding:20px 0}
.cl-text header{gap:10px}
.cl-text header a{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.cl-tl{font-size:var(--fs-sm);margin:4px 0 8px}
.cl-oracle{font-size:var(--fs-lg);line-height:1.55;max-width:72ch}
/* a card's fact chips (roles, what it does): quiet pills that are links to the search for them */
.cl .dna,.oracle .dna{font-family:var(--sans);font-size:var(--fs-sm);line-height:1.3;padding:3px 10px;margin:0 6px 6px 0;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);color:var(--ink)}
@media (hover:hover){.cl a.dna:hover,.oracle a.dna:hover{background:var(--hover);border-color:var(--ink);color:var(--ink)}}
.cl .dna-quiet{background:var(--fill);border-color:var(--fill);color:var(--muted)}
.cl-table .dna{margin:2px 4px 2px 0}
.cl-more{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;min-height:40px;padding:0 20px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
@media (hover:hover){.cl-more:hover{border-color:var(--ink);color:var(--ink)}}
.cl-inline{color:var(--ink)}

/* ---------------------------------------------------------------- no results, a search that didn't read */
.cl-none{padding:28px 0;font-size:var(--fs-lg)}
.cl-none p{margin:0 0 10px;max-width:72ch}
.cl-none.cl-bad h2{font-size:var(--fs-xl);font-weight:700;margin:0 0 8px}

/* ---------------------------------------------------------------- the empty page: examples, say it, how to search */
.cl-home{gap:48px;padding-top:28px}
.cl-home .label,.cl-guide > .label{font-size:var(--fs-xl);padding-bottom:8px;margin-bottom:8px}
.cl-examples{gap:0}
.cl-examples li{border-bottom:1px solid var(--rule)}
.cl-examples a{gap:2px;padding:12px 8px;margin-inline:-8px;border:0;border-radius:var(--r-md);color:var(--ink)}
@media (hover:hover){.cl-examples a:hover{background:var(--fill);border:0;text-decoration:none}}
.cl-examples code{font-family:var(--code);font-size:var(--fs-md);color:var(--ink)}
@media (hover:hover){.cl-examples a:hover code{text-decoration:underline;text-underline-offset:3px}}
.cl-examples span{font-size:var(--fs-sm);color:var(--muted)}
.cl-home .cl-muted{font-size:var(--fs-lg);line-height:1.55;margin:8px 0 0}
.cl-say{gap:8px;margin-top:14px}
.cl-say button{min-height:32px;padding:4px 14px;font-family:var(--sans);font-size:var(--fs-sm);border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);color:var(--ink)}
@media (hover:hover){.cl-say button:hover{border-color:var(--ink);color:var(--ink)}}
.cl-home .label[style]{margin-top:36px!important}
.cl-links{gap:20px;margin-top:14px;font-family:var(--sans);font-size:var(--fs-sm)}
.cl-links a{color:var(--ink);text-decoration-color:var(--rule2)}
@media (hover:hover){.cl-links a:hover{text-decoration-color:currentColor}}
.cl-guide{margin-top:56px;padding-top:0;border-top:0}
.cl-guide > .cl-muted{font-size:var(--fs-lg);line-height:1.55;max-width:80ch;margin:8px 0 0}
.cl-guide-grid{gap:40px;margin-top:8px}
.cl-guide h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:24px 0 8px}
.cl-guide table{font-size:var(--fs-md)}
.cl-guide td{padding:9px 12px 9px 0;line-height:1.45}
.cl-guide code,.cl-vocab code,.cl-guide > p code{font-family:var(--code);font-size:var(--fs-sm);color:var(--ink);background:var(--fill);padding:1px 6px;border-radius:var(--r-sm)}
/* the four word lists: one collapsible style, the same as the card page's sections */
.cl-guide .cl-vocab{margin:0;padding:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none}
.cl-guide .cl-vocab:first-of-type{margin-top:28px;border-top:1px solid var(--rule)}
.cl-guide .cl-vocab > summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 0;font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);list-style:none;cursor:pointer}
.cl-guide .cl-vocab p{line-height:2.2;margin:0 0 16px}
.cl-guide > .cl-small{margin-top:14px;font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- one chevron for every fold in these tools */
:is(.cl-guide .cl-vocab,.cc-fold,.fb-sec,.cc-capd,.tg-sec,.or-ev,.cx-fold) > summary::-webkit-details-marker{display:none}
:is(.cl-guide .cl-vocab,.cc-fold,.fb-sec) > summary::before{content:"";flex:none;width:8px;height:8px;margin:0 6px 0 4px;border:solid var(--ink);border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(-45deg);transition:transform .15s}
:is(.cl-guide .cl-vocab,.cc-fold,.fb-sec)[open] > summary::before{content:"";transform:translateY(-2px) rotate(45deg)}
@media (prefers-reduced-motion:reduce){:is(.cl-guide .cl-vocab,.cc-fold,.fb-sec) > summary::before{transition:none}}

/* ---------------------------------------------------------------- the full filter menu */
.fb{margin:14px 0 4px;padding:0 20px 16px;border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--ground)}
.fb-head{top:0;padding:16px 0 14px;background:var(--ground);border-bottom:1px solid var(--rule)}
.fb-head > div:first-child{gap:4px}
.fb-head b{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.fb-head .cl-small{font-size:var(--fs-sm)}
.fb-live{font-size:var(--fs-sm);color:var(--muted)}
.fb-live b{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.fb-head-r{gap:8px}
.fb-head-r [data-fbclose]{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:700}
@media (hover:hover){.fb-head-r [data-fbclose]:hover{opacity:.9}}
.fb-jump{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0;border-bottom:1px solid var(--rule)}
.fb-jump button{min-height:32px;padding:4px 12px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-sm);cursor:pointer}
@media (hover:hover){.fb-jump button:hover{border-color:var(--ink)}}
.fb-jump button b{margin-left:4px;font-weight:700}
.fb-sec > summary{min-height:48px;padding:12px 0;gap:10px;font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.fb-active{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-size:var(--fs-xs);font-weight:700}
.fb-sec-b{gap:18px;padding:2px 0 20px 26px}
.fb-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.fb-l small{font-size:var(--fs-xs);color:var(--faint)}
.fb-l a{color:var(--ink)}
.fb-chip{min-height:32px;padding:4px 12px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-sm)}
.fb-chip small{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
@media (hover:hover){.fb-chip:hover{border-color:var(--ink)}}
.fb-chip.inc{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink);padding:3.5px 11.5px}
.fb-chip.inc small{color:var(--muted)}
/* left out (alt or shift click): struck through, with "Not" before it, in ink, not a warning color */
.fb-chip.exc{background:var(--fill);border:1.5px dashed var(--ink);color:var(--ink);padding:3.5px 11.5px}
.fb-chip.exc::before{content:"Not";font-family:var(--sans);font-size:var(--fs-xs);font-weight:700}
.fb-color{display:inline-grid;place-items:center;min-width:36px;min-height:36px;padding:0 6px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground)}
@media (hover:hover){.fb-color:hover{border-color:var(--ink)}}
.fb-color.on{background:var(--sel);border:1.5px solid var(--ink);box-shadow:none}
.fb-row select,.fb-sel select{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
.fb-anyall{border:1px solid var(--rule2);border-radius:var(--r-md)}
.fb-anyall button{font-family:var(--sans);font-size:var(--fs-xs);color:var(--ink);padding:2px 10px;min-height:26px}
.fb-anyall button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.fb-num{font-size:var(--fs-sm)}
.fb-num span,.fb-text span,.fb-sel span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.fb-num input,.fb-text input{font-family:var(--sans);font-size:var(--fs-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
.fb-num i{font-size:var(--fs-sm);color:var(--muted)}
.fb-find{font-family:var(--sans);font-size:var(--fs-sm);min-height:32px;border:1px solid var(--rule2)}
.fb input:focus,.fb select:focus{border-color:var(--ink)}
.fb-subs > summary{font-size:var(--fs-sm);color:var(--ink);cursor:pointer;padding:4px 0}

/* ---------------------------------------------------------------- the set picker */
.sp-box{border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--ground)}
.sp-head b{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700}
.sp-find{font-family:var(--sans);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
.sp-find:focus{border-color:var(--ink);outline:none}
/* the kinds of set are tabs: underlined, not filled */
.sp-kinds{display:flex;flex-wrap:wrap;gap:0 20px;padding:0 16px;border-bottom:1px solid var(--rule)}
.sp-kinds button{min-height:40px;padding:0;margin:0;border:0;border-radius:0;background:none;color:var(--muted);font-family:var(--sans);font-size:var(--fs-md);cursor:pointer;box-shadow:none}
@media (hover:hover){.sp-kinds button:hover{color:var(--ink)}}
.sp-kinds button[aria-selected="true"]{background:none;color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.sp-y h3{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.sp-set b{font-family:var(--sans);font-weight:700}
.sp-set small{font-family:var(--code);font-size:var(--fs-xs);color:var(--muted)}
@media (hover:hover){.sp-set:hover{background:var(--hover)}}
.sp-set.on{background:var(--sel);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------------------------------------------------------------- Super Search on a phone */
@media (width < 1024px){
  .cl-layout{grid-template-columns:minmax(0,1fr)}
  .cl-facets.open{border:1px solid var(--rule2);border-radius:var(--r-lg);padding:16px;background:var(--ground)}
  .cl-facets.open > section{break-inside:avoid}
  .cl-facet-toggle{display:inline-flex;align-items:center}
}
@media (width < 720px){
  .cl-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cl-inputwrap{grid-column:1 / -1}
  .cl-lock{grid-column:1 / -1}
  .cl-go,.cl-mode{min-height:48px}
  /* the quick filters scroll sideways: a soft edge says there is more */
  .qf{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent)}
  .qf-end{padding-right:24px}
  .cl-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .cl-controls{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent)}
  .cl-controls > :last-child{margin-right:24px}
  .cl-table .cl-roles,.cl-table td.cl-muted,.cl-table .cl-tycol{display:none}
  .cl-table td,.cl-table th{padding-inline:6px}
  .cl-home{gap:40px;padding-top:20px}
  .cl-guide-grid{gap:8px}
  .cl-guide td:first-child{width:46%}
  .fb{padding:0 14px 12px}
  .fb-sec-b{padding-left:0}
}

/* ================================================================ the card page */
.cc{gap:48px;padding-top:20px}
.cc-head{gap:12px 16px}
.cc-head h1{font-family:var(--sans);font-size:var(--fs-title);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.cc-head .mana{font-size:var(--fs-xl)}
.cc-type{font-size:var(--fs-lg);color:var(--muted);margin:8px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.cc-oracle{font-size:var(--fs-xl);line-height:1.6;max-width:62ch}
.cc-stats{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.cc-face{border-bottom:1px solid var(--rule);padding-bottom:14px}
.cc-face-name b{font-family:var(--sans);font-weight:700;font-size:var(--fs-xl)}
.cc-face-type{font-size:var(--fs-sm)}
.cc-fresh{border-left:3px solid var(--ink);background:var(--fill);font-size:var(--fs-md);padding:10px 14px;margin:0 0 14px}
.cc-actions{gap:8px;margin:24px 0 28px}
.cc-actions .btn-sm{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-color:var(--rule2)}
@media (hover:hover){.cc-actions .btn-sm:hover{border-color:var(--ink)}}
.cc-actions .btn-sm.primary{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:700}
/* the picture's column: the picture, the printing shown, the facts as a ledger of rows */
.cc-imgwrap{box-shadow:none;background:var(--fill)}
.cc-showing{font-size:var(--fs-sm)}
.cc-foiltag{font-family:var(--sans)}
#cc-flip{margin-top:12px}
.cc-facts{margin-top:20px;border-top:1px solid var(--rule)}
.cc-facts div{padding:10px 0;font-size:var(--fs-lg);align-items:baseline}
.cc-facts dt{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);flex:none}
.cc-facts dd{font-variant-numeric:tabular-nums}
.cc-facts dd .cl-muted{font-size:var(--fs-sm)}
.cc-buylink{margin-top:2px}
/* legality: one list of rows in columns, each format and its status, hairlines between; legal and banned are the facts
   that pass or fail, so they carry the green and the red */
.cc-legal{display:block;columns:4 170px;column-gap:28px;margin:0;padding:0;border-top:1px solid var(--rule)}
.cc-legal li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font-size:var(--fs-sm)}
.cc-legal a{color:var(--ink)}
@media (hover:hover){.cc-legal a:hover{text-decoration:underline}}
.cc-legal span{flex:none;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);text-align:right}
.cc-legal .lg-legal,.cc-legal .lg-banned,.cc-legal .lg-restricted{background:none}
.cc-legal .lg-legal span{color:var(--ok);font-weight:700}
.cc-legal .lg-banned span{color:var(--bad);font-weight:700}
.cc-legal .lg-restricted span{color:var(--ink);font-weight:700}
.cc-legal .lg-no a{color:var(--muted)}
.cc-legal .cc-lgname{color:var(--muted)}
.cc-bo1{margin:10px 0 0;font-size:var(--fs-sm)}
/* the formats added since October 18, 2026 (Pauper Commander to Tiny Leaders, and the three read by a rule from Vintage
   and Premodern) in their own fold under the list, a size down */
.cc-legal-more{border-bottom:1px solid var(--rule)}
.cc-legal-more > summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:4px 0;font-size:var(--fs-sm);cursor:pointer}
.cc-legal-more > summary::-webkit-details-marker{display:none}
.cc-legal-more > summary::before{content:"";flex:none;width:6px;height:6px;margin:0 2px 0 3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s}
.cc-legal-more[open] > summary::before{transform:translateY(-1px) rotate(45deg)}
@media (hover:hover){.cc-legal-more > summary:hover{color:var(--ink);text-decoration:underline}}
.cc-legal-more .cc-legal{border-top:0;columns:2 300px}
.cc-legal-more .cc-legal li:last-child{border-bottom:0}
.cc-legal-more > p{margin:6px 0 10px}
/* under a format row (formats wave): the date and source of a ban or a restriction, a ban as commander or in Arena's
   Best-of-One, legality still ahead, points. The line is drawn with the row (blank until the formats file is in), so
   nothing moves when it fills */
.cc-legal li{flex-wrap:wrap;row-gap:0}
/* the name takes the room left beside the status and wraps inside it, so the status stays on the name's line */
.cc-legal li > a,.cc-legal li > .cc-lgname{flex:1 1 0%;min-width:0}
/* the status ("Banned as commander", "Not out yet") wraps inside its cell rather than running past a phone's edge, text
   spacing overrides (WCAG 1.4.12) included */
.cc-legal li > span{flex:0 1 auto;min-width:0;max-width:62%;overflow-wrap:anywhere}
.cc-legal li > .cc-lgsrc{flex:1 0 100%;min-width:0;margin-top:-3px;font-family:var(--sans);font-size:var(--fs-xs);line-height:1.45;color:var(--muted);text-align:left;overflow-wrap:anywhere}
.cc-legal li > .cc-lgsrc a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.cc-legal li > .cc-lgsrc a:hover{color:var(--ink)}}
.cc-legal li > .cc-lgsrc b{color:var(--ink);font-weight:700}
.cc-legal li > .cc-lgsrc span{flex:initial;font:inherit;color:inherit;text-align:inherit}
.cc-legal .lg-reading span{color:var(--faint);font-weight:400}
.cc-lgmo{margin:8px 0 0;font-size:var(--fs-sm)}
.cc-lgnote{margin:10px 0 0;color:var(--muted)}
/* why it is or isn't Pauper legal, and whether it can lead a Pauper Commander deck: folds like the one above */
.cc-whyf{border-bottom:1px solid var(--rule)}
.cc-whyf > summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:4px 0;font-size:var(--fs-sm);cursor:pointer}
.cc-whyf > summary::-webkit-details-marker{display:none}
.cc-whyf > summary::before{content:"";flex:none;width:6px;height:6px;margin:0 2px 0 3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s}
.cc-whyf[open] > summary::before{transform:translateY(-1px) rotate(45deg)}
@media (hover:hover){.cc-whyf > summary:hover{color:var(--ink);text-decoration:underline}}
.cc-whyb{padding:0 0 12px;font-size:var(--fs-sm);line-height:1.5;overflow-wrap:anywhere}
.cc-whyb p{margin:6px 0}
.cc-whyb code{white-space:nowrap}
.cc-whyh{margin:12px 0 2px!important;font-weight:700}
.cc-whyl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cc-whyl li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:4px 0;border-bottom:1px solid var(--rule)}
.cc-whyl li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cc-whyl .cc-whys1{color:var(--ink)}
.cc-whyl i{font-style:normal;color:var(--muted)}
.cc-whymore{margin-top:6px}
@media (pointer:coarse){
  .cc-whymore{min-height:var(--tap)}
}
/* In constructed (cardmore.js): the weekly line, the archetypes and the formats with no lists */
.cm-trend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:var(--sp-sm) 0 0}
.cm-trend p{margin:0;flex:1 1 220px;min-width:0}
.cm-spark{flex:none;color:var(--ink);overflow:visible}
.cm-spark polyline{stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.cm-spark circle{fill:currentColor}
.cm-spark-base{stroke:var(--rule2);stroke-width:1}
.cm-arch{list-style:none;margin:0 0 var(--sp-sm);padding:0;display:grid;gap:2px;font-size:var(--fs-sm)}
.cm-arch li{min-width:0;overflow-wrap:anywhere}
.cm-arch a{display:inline-flex;align-items:center;min-height:28px;color:var(--ink)}
/* Super Search: what was left out of a search (the site's files can't answer it), and which printing a result is */
.cl-notes{margin:8px 0 0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--ink);max-width:90ch}
.cl-notes li{padding:6px 10px;margin-bottom:4px;border-left:3px solid var(--warn-line);background:var(--warn-bg);border-radius:0 var(--r-md) var(--r-md) 0;line-height:1.5}
.cl-none.cl-gap p{max-width:70ch}
.cl-pcap{display:block;min-width:0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.cl-tw > .cl-pcap{grid-column:1;grid-row:2}
.cl-pcap-v{font-family:var(--sans);color:var(--faint)}
.cl-text header .cl-pcap{display:inline;margin-left:8px}
/* eBay's sold listings: a plain link out under the prices, and one per printing picked */
.cc-ebay{margin:var(--sp-sm) 0 0;font-size:var(--fs-sm);max-width:90ch;line-height:1.5}
.cc-ebay-a{color:var(--ink);font-weight:500}
@media (pointer:coarse){ .cc-ebay-a{display:inline-flex;align-items:center;min-height:44px} }
.cm-of{color:var(--muted);font-size:var(--fs-sm);font-weight:400}
@media (width < 480px){ .cm-con .cm-of{display:block} }
.cm-none{margin:0;padding-top:var(--sp-sm);border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--muted)}
.cm-none a{color:var(--ink)}
@media (pointer:coarse){ .cm-arch a,.cm-con > p.cl-small a{display:inline-flex;align-items:center;min-height:44px} }
/* Captain, inside the main column: a fold like the sections below, a size down */
.cc-cap{margin:20px 0 0;padding:0;border:0;border-radius:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cc-capd > summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-height:48px;padding:12px 0;list-style:none;cursor:pointer}
.cc-capd > summary::before{content:"";align-self:center;flex:none;width:7px;height:7px;margin:0 4px 0 3px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
.cc-capd[open] > summary::before{transform:translateY(-2px) rotate(45deg)}
.cc-cap .label{font-size:var(--fs-lg);margin:0}
.cc-capline{font-size:var(--fs-md);color:var(--muted)}
.cc-capd > :not(summary){margin-left:20px}
.cc-capd[open]{padding-bottom:14px}
.cc-capfacts{font-size:var(--fs-md);padding-left:18px}
/* the sections below: an 18 px heading over the ink rule; the folding ones a chevron, the heading and a hairline */
.cl[data-page="card"] .block{padding-block:36px 32px}
.cl[data-page="card"] .block > .label{font-size:var(--fs-xl);padding-bottom:8px;margin-bottom:16px}
:is(.cl,.oracle) .label .cl-muted,.cc-fold > summary .label .cl-muted{font-size:var(--fs-sm);font-weight:400;color:var(--muted);margin-left:6px}
.cl[data-page="card"] .block.cc-fold,.block.cc-fold{padding-block:0}
.cc-fold > summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:18px 0;margin:0;list-style:none;cursor:pointer}
.cc-fold > summary .label{font-size:var(--fs-xl);font-weight:700;line-height:1.3}
@media (hover:hover){.cc-fold > summary:hover .label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}
.cc-fold[open] > summary{margin-bottom:0;padding-bottom:14px}
.cc-fold[open]{padding-bottom:32px}
.cc-fold > summary::before{width:9px;height:9px;margin:0 4px 0 2px}
.cc-fold > summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
/* the readout: a row per kind of fact */
.ro{grid-template-columns:140px minmax(0,1fr);gap:16px;padding:12px 0;align-items:baseline}
.ro dt{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding-top:0}
.ro dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0}
.ro-x{font-size:var(--fs-sm);margin:0 16px 6px 0}
.ro-x a{color:var(--muted)}
/* the tools above a section's list: a format menu, two checkboxes */
.cc-tools{gap:16px;margin:0 0 16px;font-size:var(--fs-md);color:var(--ink)}
.cc-tools select{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.cc-tools input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink)}
#twins .cl-small,#answers .cl-small{font-size:var(--fs-sm);line-height:1.5;margin:0 0 14px;max-width:90ch}
.cc-twins{gap:20px 16px}
.cc-twin img,.cc-twin .cl-fallback{background:var(--fill)}
.cc-twin-meta{gap:2px;margin-top:2px}
.cc-twin-meta b{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.cc-twin-meta small{font-size:var(--fs-sm);color:var(--muted)}
@media (hover:hover){.cc-twin:hover b{text-decoration:underline}}
/* what answers it: the methods are tabs */
.cc-tabs{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 6px;border-bottom:1px solid var(--rule)}
.cc-tabs button{min-height:40px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-family:var(--sans);font-size:var(--fs-md);cursor:pointer}
.cc-tabs button span{color:var(--faint);margin-left:4px;font-size:var(--fs-sm)}
@media (hover:hover){.cc-tabs button:hover{color:var(--ink)}}
.cc-tabs button[aria-pressed="true"]{background:none;color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.cc-tabs button[aria-pressed="true"] span{color:var(--muted);opacity:1}
.cc-ans{column-gap:40px}
.cc-ans li{gap:6px 10px;padding:10px 0;font-size:var(--fs-lg)}
.cc-ans li > a{font-weight:700;color:var(--ink)}
@media (hover:hover){.cc-ans li > a:hover{color:var(--ink);text-decoration:underline}}
.cc-ans li > a.cc-why{font-weight:400}
.cc-m{font-family:var(--sans);font-size:var(--fs-xs);line-height:1.4;color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-pill);padding:1px 8px}
.cc-cond{font-size:var(--fs-sm);color:var(--ink);border:1px dashed var(--rule2);border-radius:var(--r-pill);padding:0 8px}
.cc-why{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule2)}
@media (hover:hover){.cc-why:hover{color:var(--ink);text-decoration-color:currentColor}}
.cc-ans .cl-muted{font-family:var(--sans);font-size:var(--fs-sm)}
.cc-sub{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:28px 0 6px}
/* rulings: the date, then the ruling */
.cc-rulings{gap:0;max-width:86ch;border-top:1px solid var(--rule)}
.cc-rulings li{grid-template-columns:150px minmax(0,1fr);padding:12px 0}
.cc-rulings time{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding-top:2px}
.cc-rulings p{font-size:var(--fs-lg)}
/* printings */
.cc-ptools{margin:0 0 16px}
.cc-pview{display:inline-flex}
.cc-pview button{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 12px;border:1px solid var(--rule2);background:var(--ground);color:var(--ink);border-radius:0;margin-left:-1px;cursor:pointer}
.cc-pview button:first-child{border-radius:var(--r-md) 0 0 var(--r-md);margin-left:0}
.cc-pview button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.cc-pview button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.cc-pgrid{gap:18px 14px}
.cc-pt{padding:6px;border:1.5px solid transparent;border-radius:var(--r-lg)}
.cc-pt.on{border-color:var(--ink);background:var(--sel)}
.cc-pt-set{font-family:var(--code);font-size:var(--fs-xs)}
.cc-pt-v{font-size:var(--fs-xs)}
.cc-fin{font-family:var(--sans);font-size:var(--fs-xs);min-height:26px;border:1px solid var(--rule2);background:var(--ground)}
@media (hover:hover){.cc-fin:hover{border-color:var(--ink)}}
.cc-fin.on{border:1.5px solid var(--ink);color:var(--ink);font-weight:700}
.cc-prints td .cc-print{color:var(--ink);font-weight:700}
@media (hover:hover){.cc-prints td .cc-print:hover{text-decoration:underline}}
.cc-prints tr.on td{background:var(--sel)}
#prints > div > .cl-small{margin-top:14px;font-size:var(--fs-sm)}
/* tokens and extras */
.cc-tok img,.cc-tok .cl-fallback{box-shadow:none;background:var(--fill)}
.cc-tok figcaption{font-size:var(--fs-sm)}
.cc-tok figcaption a{color:var(--ink);font-weight:700}
.cc-tok figcaption .cl-muted{font-size:var(--fs-sm)}
/* the fine print under it all */
.cc-stamp{font-family:var(--sans);font-size:var(--fs-xs);line-height:1.6;color:var(--muted);margin-top:32px}
.cl-missing{padding:28px 0}
.cl-missing h1{font-family:var(--sans);font-size:var(--fs-title);font-weight:700;letter-spacing:-.015em}
.cl-missing p{font-size:var(--fs-lg)}
/* community tags (tags.js): two small headings, the tags as pills, each with its own hide button */
.tg-h.label{font-size:var(--fs-lg);border-bottom:0;padding-bottom:0;margin:18px 0 10px}
.tg-h.label:first-child{margin-top:0}
.tg-chip{border:1px solid var(--rule2);background:var(--ground)}
.tg-chip a{font-family:var(--code);font-size:var(--fs-xs);color:var(--ink)}
.tg-hide{border-left:1px solid var(--rule);color:var(--muted);font-size:var(--fs-sm)}
@media (hover:hover){.tg-hide:hover{color:var(--ink);background:var(--hover)}}
.tg-acts{gap:8px}
#cc-tags code{font-family:var(--code);font-size:var(--fs-xs);background:var(--fill);padding:1px 6px;border-radius:var(--r-sm)}
/* the jump menu, on a phone */
@media (width < 1024px){
  .cc{gap:28px}
  .cc-art{max-width:336px}
}
@media (width < 720px){
  .cc{padding-top:8px;row-gap:12px}
  .cc-head h1{font-size:var(--fs-title)}
  .cc-art{max-width:min(100%,260px)}
  .cc-type{margin-bottom:6px}
  .cc-oracle{font-size:var(--fs-lg)}
  .cc-legal{columns:2 140px;column-gap:20px}
  /* the fold's rows carry lines (points, sources, the two Pauper Commander rows): one column on a phone */
  .cc-legal-more .cc-legal{columns:1}
  .cc-jump{gap:6px;margin:16px 0 0}
  .cc-jump a{font-family:var(--sans);font-size:var(--fs-sm);border:1px solid var(--rule2);background:var(--ground);min-height:36px}
  .ro{grid-template-columns:minmax(0,1fr);gap:6px}
  .cc-rulings li{grid-template-columns:minmax(0,1fr);gap:2px}
  .cc-fold > summary{min-height:56px;padding:14px 0}
  .cl[data-page="card"] .block{padding-block:28px 24px}
  .cc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .cc-tabs::-webkit-scrollbar{display:none}
  .cc-tabs > *{flex:none}
}

/* ================================================================ combos (combos.js): card pages, the Oracle, Deckbuilder */
.cx-lead{font-size:var(--fs-lg)}
.cx-sel label{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cx-sel select,.cx-sel input{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;border:1px solid var(--rule2);background:var(--ground)}
.cx-count{font-family:var(--sans);font-size:var(--fs-sm)}
.cx-list{gap:14px}
.cx-combo{border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--ground);padding:16px 18px}
.cx-combo.open{border-color:var(--ink);box-shadow:none}
.cx-pic{box-shadow:none;background:var(--fill)}
.cx-pic.cx-any,.cx-pic.cx-noimg{font-family:var(--sans)}
.cx-pic.cx-missing{outline:2px dashed var(--ink)}
.cx-plus{font-family:var(--sans);color:var(--muted)}
.cx-title{font-size:var(--fs-lg)}
.cx-win{font-family:var(--sans);font-size:var(--fs-xs);background:var(--ground);color:var(--ink);border:1.5px solid var(--ink);padding:1px 8px}
.cx-with{font-size:var(--fs-md)}
.cx-with a{font-weight:700;color:var(--ink)}
.cx-need-one{color:var(--ink)}
.cx-b{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--rule2);padding:2px 9px}
.cx-br i{color:var(--muted)}
.cx-brx{color:var(--ink);border-color:var(--ink)}
.cx-body{border-top-color:var(--rule)}
.cx-cols h4{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.cx-need li::before,.cx-pre li::before{background:var(--ink)}
.cx-hard::before{background:var(--ink)!important}
.cx-flag{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;color:var(--ink);border:1px solid var(--ink);background:var(--ground);border-radius:var(--r-pill);padding:0 7px}
.cx-steps li::before{font-family:var(--sans)}
.cx-steps li.cx-repeat{color:var(--ink)}
.cx-steps li.cx-repeat::before{background:var(--sel);color:var(--ink)}
.cx-along span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cx-gloss{color:var(--muted)}
.cx-foot{border-top:1px solid var(--rule)}
.cx-face{font-family:var(--sans);font-size:var(--fs-sm)}
.cx-toggle{font-family:var(--sans)}

/* ================================================================ the Interaction Oracle */
.oracle{padding-top:0}
/* the two boxes, the swap between them */
.or-pickers{gap:12px;align-items:end}
.or-pick label{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}
.or-pick input{font-family:var(--sans);font-size:var(--fs-lg);min-height:52px;padding:12px 16px;border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--ground)}
.or-pick input::placeholder{color:var(--faint);opacity:1}
.or-pick input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--sel);outline:none}
.or-swap{min-height:52px;font-family:var(--sans);font-size:var(--fs-sm);padding:0 16px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
@media (hover:hover){.or-swap:hover{border-color:var(--ink)}}
.or-note{font-size:var(--fs-sm)}
/* nothing picked yet: the two lists of pairs worth a look */
.or-empty{padding:28px 0 0}
.or-lead{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);max-width:72ch;margin:0 0 28px}
.or-empty .label{font-size:var(--fs-xl);padding-bottom:8px;margin:0 0 14px}
.or-empty .label + .or-ex{margin-bottom:36px}
.or-ex{gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.or-ex a{gap:2px;padding:14px 16px;border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--ground);line-height:1.35}
.or-ex a:focus-visible{border-color:var(--ink);text-decoration:none}@media (hover:hover){.or-ex a:hover{border-color:var(--ink);text-decoration:none}}
@media (hover:hover){.or-ex a:hover b{text-decoration:underline}}
.or-ex b{font-size:var(--fs-lg)}
.or-ex .cl-muted{font-size:var(--fs-sm)}
.or-ex small{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);margin-top:6px}
/* the two cards, side by side */
.or-pair{gap:24px;padding:28px 0 8px}
.or-vs{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.or-card{grid-template-columns:110px minmax(0,1fr);gap:16px}
.or-img{background:var(--fill)}
.or-role{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.or-card h2{font-family:var(--sans);font-size:var(--fs-xl);letter-spacing:0;margin:2px 0 4px}
@media (hover:hover){.or-card h2 a:hover{color:var(--ink);text-decoration:underline}}
.or-card p{font-size:var(--fs-sm)}
.or-def{font-family:var(--sans);font-size:var(--fs-xs);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-pill);padding:1px 8px}
/* each way they meet is a section: its heading over the ink rule, no boxes */
.or-tog,.or-clash,.or-apart{margin:36px 0 0;padding:0;border:0;border-radius:0;background:none}
.or-h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin:0 0 14px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.or-clash .or-h{color:var(--ink)}
.or-clash{background:none;border:0}
.or-clash .or-f{border-top-color:var(--rule)}
.or-verdict{font-size:var(--fs-lg);line-height:1.5;margin:0 0 14px}
.or-v{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;margin-right:8px;color:var(--ink)}
.or-good .or-v,.or-strong .or-v,.or-minor .or-v{color:var(--ink)}
.or-none .or-v{color:var(--muted)}
/* the line: the order to play them, numbered */
.or-line{margin:0 0 16px;padding:14px 18px;border-radius:var(--r-lg);background:var(--fill)}
.or-line h3{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin:0 0 8px}
.or-line li{font-size:var(--fs-lg)}
.or-finds{margin:0}
.or-f{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--rule)}
.or-f p{font-size:var(--fs-lg)}
.or-f .cl-small{font-size:var(--fs-sm)}
.or-badge{justify-self:start;font-family:var(--sans);font-size:var(--fs-xs);line-height:1.4;padding:2px 9px;border:1px solid var(--rule2);border-radius:var(--r-pill);color:var(--ink);background:var(--ground)}
.or-f3 .or-badge,.or-f2 .or-badge{color:var(--ink);border-color:var(--rule2)}
.or-bad .or-badge{color:var(--ink);border-color:var(--ink)}
.or-ev{margin-top:6px}
.or-ev > summary{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px}
.or-ev > summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s}
.or-ev[open] > summary::before{transform:translateY(-1px) rotate(45deg)}
@media (hover:hover){.or-ev > summary:hover{color:var(--ink)}}
.or-ev p{font-size:var(--fs-md)!important}
.or-ev code,.or-f code{font-family:var(--code);font-size:var(--fs-xs);background:var(--fill);padding:1px 5px;border-radius:var(--r-sm)}
/* on opposite sides: a column each way, a thick rule on top in the verdict's color (green yes, red no) */
.or-apart > .cl-small{font-size:var(--fs-sm);margin:0 0 4px}
.or-sides{gap:28px;margin:16px 0 8px}
.or-side{padding:16px 0 4px;border:0;border-top:3px solid var(--rule2);border-radius:0;background:none}
.or-side.or-yes{border-top-color:var(--ok)}
.or-side.or-maybe{border-top-color:var(--ink)}
.or-side.or-no{border-top-color:var(--bad)}
.or-side.or-none{border-top-color:var(--rule2)}
.or-side h3{font-family:var(--sans);font-size:var(--fs-lg);color:var(--muted);margin:0 0 10px}
.or-yes .or-v{color:var(--ok)}
.or-no .or-v{color:var(--bad)}
.or-maybe .or-v{color:var(--ink)}
.or-row{gap:4px 10px;padding:12px 0}
.or-m{font-family:var(--sans);font-size:var(--fs-xs);line-height:1.4;color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-pill);padding:1px 8px}
.or-st{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.or-works .or-st{color:var(--ok)}
.or-blocked .or-st{color:var(--bad)}
.or-maybe .or-st{color:var(--ink)}
.or-why p{font-size:var(--fs-md)}
.or-notes{font-size:var(--fs-sm)!important}
/* the rulings, both cards side by side */
#or-rulings{margin-top:40px}
#or-rulings > .label{font-size:var(--fs-xl);padding-bottom:8px;margin-bottom:16px}
.or-ruls{gap:40px}
.or-rul h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:0 0 10px}
.or-rul h3 a{color:var(--ink)}
.or-rul h3 .cl-muted{font-size:var(--fs-sm);font-weight:400}
.or-rul .cc-rulings li{gap:2px}
.or-foot{font-size:var(--fs-sm);margin-top:28px}
/* one card: its partners */
.or-pair.or-solo{max-width:640px}
.or-pfilters{gap:12px 20px;margin:16px 0 20px}
.or-pfilters label{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.or-pfilters select{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border:1px solid var(--rule2);background:var(--ground)}
.or-feednote{font-size:var(--fs-sm);line-height:1.5;max-width:90ch;margin:0 0 4px}
.or-feedsec .or-h{font-size:var(--fs-lg)}
.or-flist a,.or-ulist a{color:var(--ink)}
.or-plist{gap:12px}
.or-p{gap:14px;padding:14px;border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--ground)}
.or-pimg{background:var(--fill)}
.or-pname{font-size:var(--fs-lg)}
@media (hover:hover){.or-pname > a:hover{color:var(--ink);text-decoration:underline}}
.or-pwhy{font-size:var(--fs-md)}
.or-see{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);text-decoration-color:var(--rule2)}
@media (hover:hover){.or-see:hover{text-decoration-color:currentColor}}
@media (width < 720px){
  .or-pickers{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .or-pickers > .or-pick:first-child{grid-column:1}
  .or-swap{grid-column:2;grid-row:1;align-self:end;min-height:52px}
  .or-pickers > .or-pick:last-child{grid-column:1 / -1}
  .or-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
  .or-pair .or-vs{display:none}
  .or-pair.or-solo{grid-template-columns:minmax(0,1fr)}
  .or-card{grid-template-columns:minmax(0,1fr);gap:8px}
  .or-pair:not(.or-solo) .or-img{max-width:120px}
  .or-pair.or-solo .or-card{grid-template-columns:84px minmax(0,1fr)}
  .or-card h2{font-size:var(--fs-lg)}
  .or-f{grid-template-columns:minmax(0,1fr);gap:6px}
  .or-sides{gap:20px}
  .or-ruls{gap:24px}
}
@media (width < 720px){
  /* a section's aside goes under its heading on a phone */
  .cl[data-page="card"] .block > .label .cl-muted,.cc-fold > summary .label .cl-muted,.oracle .block > .label .cl-muted{display:block;margin:2px 0 0}
}
.cc-pcode{font-family:var(--code);font-size:var(--fs-xs)}

/* ---------------------------------------------------------------- brewing a deck from Super Search: the add button and
   the count sit under each picture, never on it */
.cl-tw{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px}
.cl-tw > .cl-tile{grid-column:1 / -1}
.cl-tw > .cl-fallback{grid-column:1 / -1}
.cl-tw > .cl-inbrew{position:static;grid-row:2;grid-column:2;box-shadow:none;background:var(--sel);color:var(--ink);font-family:var(--sans);border-radius:var(--r-pill)}
/* relative, not static: on touch screens its 44 px target (styles.css, pointer:coarse) is drawn around the button itself, never over the card */
.cl-tw > .cl-add{position:relative;grid-row:2;grid-column:3;width:32px;height:32px;font-size:var(--fs-xl);box-shadow:none;opacity:1}
.cl-add{background:var(--ink);color:var(--ground)}
@media (hover:hover){.cl-add:hover{transform:none;opacity:.88}}
.cl-add.pulse{transform:scale(1.12)}
.cl-table .cl-inbrew,.cl-text .cl-inbrew{background:var(--sel);color:var(--ink);font-family:var(--sans)}
/* small folds inside a section (Captain's quotes): a small chevron, as the Oracle's "Read from" */
.cc-capwhy > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted)}
.cc-capwhy > summary::-webkit-details-marker{display:none}
.cc-capwhy > summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s}
.cc-capwhy[open] > summary::before{transform:translateY(-1px) rotate(45deg)}
@media (hover:hover){.cc-capwhy > summary:hover{color:var(--ink)}}
.cl-guide .cl-vocab p{display:flex;flex-wrap:wrap;gap:6px;line-height:1.4}
/* the vocabulary chips stay whole; the "more keys" fold (a cl-vocab too) holds tables whose long examples must wrap, or
   a 320 px phone scrolled sideways */
.cl-guide .cl-vocab p code{white-space:nowrap}
/* on a touch screen each format's name is a 44 px target: the row centers on it */
@media (pointer:coarse){
  .cc-legal li{align-items:center;padding:0}
  .cc-legal li > a{display:inline-flex;align-items:center}
  .cc-legal li > .cc-lgsrc{margin:-6px 0 6px}
}
/* the card's printings on Magic Online only, with their tix (prices.js moTix): a fold above the paper table */
#cc-buy .px-mo{margin:12px 0 4px;border-block:1px solid var(--rule)}
#cc-buy .px-mo > summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:4px 0;font-size:var(--fs-sm);cursor:pointer}
#cc-buy .px-mo > summary::-webkit-details-marker{display:none}
#cc-buy .px-mo > summary::before{content:"";flex:none;width:6px;height:6px;margin:0 2px 0 3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s}
#cc-buy .px-mo[open] > summary::before{transform:translateY(-1px) rotate(45deg)}
@media (hover:hover){#cc-buy .px-mo > summary:hover{text-decoration:underline}}
#cc-buy .px-mo > summary b{font-variant-numeric:tabular-nums}
.px-mol{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.px-mol li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:5px 0;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.px-mol .px-motix{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
/* its own facts line, not .px-facts: the table's facts line is the one that dates the prices (t_price_snapshot reads it) */
#cc-buy .px-mo .px-mofacts{margin:6px 0 10px;font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
/* In constructed (cardmore.js) before the section is reached: a notice, not a loading bar (nothing loads until then), the
   height of the loading line it becomes so nothing moves */
.cm-pending{margin:1em 0;font-family:var(--mono);font-size:var(--fs-md);padding:var(--sp-3xl) 0 calc(var(--sp-3xl) + 17px)}
.cl-outside{margin:16px 0 0;max-width:72ch}

/* ================================================================ v1.0, group B: decks (October 15, 2026)
   Decks (Deckbuilder: the library, one deck and its tabs, its dialogs, the phone's slim bar), the compare and tokens
   tabs, the share image and deck box label dialogs, where your copies live, Manabase+ and King Goldfish. Loads after
   styles.css and shell.css: where they say the same thing at the same specificity, this file wins.
   The system: ink on white, hairline rules, the reading face for everything but typed lists and search syntax, sentence
   case, underline tabs, pill chips (selected: --sel with an ink border), green and red only for facts that pass or fail. */

/* ---------------------------------------------------------------- shared inside the deck tools */
.db,.mbp,.gf{font-family:var(--sans)}
.db-panel{background:var(--ground);border:1px solid var(--rule)}
.db-panel h3{letter-spacing:0}
.db-sub{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);letter-spacing:0}
.db-lbl{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.db-lbl input,.db-lbl textarea,.db-lbl select{border-color:var(--rule2)}
.db-lbl small{font-size:var(--fs-xs)}
.db kbd,.lib-foot kbd,.db-keys kbd,.gf kbd{font-family:var(--code);font-size:var(--fs-xs);background:var(--fill);border:1px solid var(--rule);border-bottom-width:1px;border-radius:var(--r-sm);padding:0 6px;color:var(--ink)}
.db-tablewrap:focus-visible{outline-color:var(--ink)}
/* typed lists are set in the mono, where every line reads as typed */
.db-imptext,#db-itext,.mb-in textarea,.gf .db-imptext,.db-exports textarea{font-family:var(--code);font-size:var(--fs-md);line-height:1.55}
.db-imptext::placeholder,.mb-in textarea::placeholder{font-family:var(--code);color:var(--faint)}

/* ---------------------------------------------------------------- the library and the start view */
.db-home{padding-top:4px}
.db-emptyhome{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--stone);padding:var(--sp-xl) var(--sp-xl) var(--sp-xl);text-align:left;margin-top:var(--sp-sm);max-width:72ch}
.db-emptyh{margin:0 0 8px;font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.db-emptyhome p{margin:0;font-size:var(--fs-lg);line-height:1.55}
.db-emptyhome .db-home-actions{margin-top:var(--sp-lg);flex-wrap:wrap}
.lib{padding-top:4px;gap:var(--sp-2xl)}
.lib-nav{gap:2px;padding-top:0}
.lib-nav :is(h2,h4){font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:0;color:var(--muted);margin:var(--sp-lg) 0 4px 10px}
.lib-nav-i{font-family:var(--sans);font-size:var(--fs-md);min-height:36px;padding:6px 10px;color:var(--muted)}
.lib-nav-i>span{color:var(--ink)}
.lib-nav-i.dim>span{color:var(--muted)}
.lib-nav-i b{font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;color:var(--faint)}
@media (hover:hover){.lib-nav-i:hover{background:var(--hover)}}
.lib-nav-i[aria-pressed="true"]{background:var(--sel);color:var(--ink);font-weight:700}
.lib-nav-i[aria-pressed="true"] b{color:var(--ink)}
.lib-star{color:var(--ink)}
/* where you play it: a letter on a quiet square (the platform is named beside it), never a brand color */
.lib-plat,.lib-plat.paper,.lib-plat.arena,.lib-plat.mtgo{background:var(--fill);color:var(--ink);border:1px solid var(--rule2);font-family:var(--sans);font-size:var(--fs-xs);width:20px;height:20px;line-height:1}
/* the stage: a ring that fills as the deck gets nearer the table, in ink */
.lib-stage{color:var(--ink)}
.lib-stage.idea{color:var(--muted);border-style:dashed}
.lib-stage.brewing{color:var(--ink)}
.lib-stage.ready{color:var(--ink);background:currentColor}
.lib-stage.retired{color:var(--faint)}
.lib-stagechip,.lib-stagechip.idea,.lib-stagechip.brewing,.lib-stagechip.ready,.lib-stagechip.retired{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:0;line-height:1.4;padding:1px 8px;border-radius:var(--r-pill);background:var(--ground);color:var(--ink);border:1px solid var(--rule2)}
.lib-badges .lib-plat{border-color:transparent;background:var(--ground)}
.lib-tag{font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);color:var(--ink)}
.lib-tag b{color:var(--muted);font-weight:400}
@media (hover:hover){.lib-tag:hover{border-color:var(--ink)}}
.lib-tag[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink)}
.lib-top{margin-bottom:var(--sp-lg);row-gap:12px}
.lib-top h2,.lib-top h1{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.005em;line-height:1.3}
.lib-top h2 span,.lib-top h1 span{font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;color:var(--muted);margin-left:6px}
.lib-tools{gap:10px 16px;margin-bottom:var(--sp-lg)}
.lib-tools label{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.lib-tools select,.db-home-filters select{font-family:var(--sans);font-size:var(--fs-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);min-height:40px}
.lib-search{border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);min-height:44px}
.lib-search:focus-within{border-color:var(--ink)}
.lib-search .cl-prompt{font-family:var(--code);color:var(--muted);font-weight:700;padding-left:4px}
.lib-search input{font-family:var(--code);font-size:var(--fs-md)}
.lib-search input::placeholder{font-family:var(--sans);color:var(--faint)}
:root .lib-search:focus-within{box-shadow:none}
.lib-views button{font-family:var(--sans);font-size:var(--fs-sm)}
.lib-group{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:8px;margin:var(--sp-xl) 0 12px}
.lib-group span{color:var(--muted);font-weight:400}
.lib-grid{gap:var(--sp-lg)}
.lib-card{background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg)}
@media (hover:hover){.lib-card:hover{border-color:var(--rule2);box-shadow:var(--shadow-2)}}
.lib-card.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.lib-card.focus{outline:2px solid var(--ink);outline-offset:2px}
.lib-art{background:var(--fill)}
.lib-credit,.lib-rowcredit{font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint)}
.lib-body{gap:4px;padding:10px 14px 14px}
.lib-title{font-size:var(--fs-lg);font-weight:700}
.lib-meta{font-size:var(--fs-sm);color:var(--muted)}
.lib-cmdr{font-size:var(--fs-sm)}
.lib-stats{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.lib-tagrow span,.lib-c-tags span,.lib-tagrow .lib-folder{font-family:var(--sans);font-size:var(--fs-xs);color:var(--ink);background:var(--fill);border:1px solid var(--rule);padding:0 8px}
.lib-when,.lib-c-when{font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint)}
.lib-check input,.lib-c-sel input{accent-color:var(--ink)}
.lib-pin{color:var(--on-media)}
.lib-pin.on{color:var(--on-media);background:var(--shade-strong)}
.lib-table th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
.lib-table td{font-size:var(--fs-md)}
.lib-table .num{font-family:var(--sans);font-size:var(--fs-md)}
.lib-table tr.sel td{background:var(--sel)}
.lib-table tr.focus td{box-shadow:inset 0 1px 0 var(--ink),inset 0 -1px 0 var(--ink)}
@media (hover:hover){.lib-table tr:hover td{background:var(--fill)}}
.lib-table .lib-pin{color:var(--rule2)}
.lib-table .lib-pin.on{color:var(--ink)}
@media (hover:hover){.lib-c-name a:hover b{color:var(--ink);text-decoration:underline}}
.lib-c-name small{font-size:var(--fs-sm)}
.lib-pricenote{font-size:var(--fs-sm)}
.lib-foot{font-size:var(--fs-sm)}
/* the bar for picked decks stays in the middle of the page, never over the menu */
@media (width >= 720px){.lib-bulk,.db-bulk{left:calc(50% + var(--side-w) / 2)}}
/* a phone: the library's bar spans the screen in one row that scrolls sideways, like the deck's */
@media (width < 720px){.lib-bulk{left:8px;right:8px;transform:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.lib-bulk>*{flex:none}}
.lib-bulk b,.db-bulk,.db-bulk button{font-family:var(--sans)}
.lib-bulk .btn-sm.danger{color:var(--ground);border-color:color-mix(in srgb,var(--ground) 30%,transparent);text-decoration:underline;text-underline-offset:3px}
/* organize: the chips */
.lib-org legend{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.lib-orgchip{border:1px solid var(--rule2);border-radius:var(--r-pill);padding:8px 14px}
.lib-orgchip:has(input:checked){border:1.5px solid var(--ink);background:var(--sel);padding:7.5px 13.5px}
.lib-orgchip input{accent-color:var(--ink)}
@media (width < 1024px){
  .lib-nav{border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground);padding:6px}
}

/* ---------------------------------------------------------------- one deck: the banner (dark, with its art) */
.db-banner{margin-top:6px;border:1px solid transparent}
.db-banner.noart{border-color:var(--rule);background:var(--stone)}
.db-title{font-family:var(--sans);font-size:var(--fs-title);letter-spacing:-.015em}
.db-meta{font-family:var(--sans);font-size:var(--fs-sm);gap:8px 14px}
.db-pill,.db-pill-select,.db-legal,.db-pricechip,.db-bracket-chip,.db-combo-chip{font-family:var(--sans);font-size:var(--fs-sm)}
.db-legal{font-weight:700}
/* the chips on the dark ground: a veil and a hairline, the legal state keeps its pass or fail fill */
.db-banner:not(.noart) :is(.db-combo-chip,.db-bracket-chip){background:var(--veil);color:var(--on-media);border:1px solid var(--veil-line)}
@media (hover:hover){.db-banner:not(.noart) :is(.db-combo-chip,.db-bracket-chip):hover{border-color:var(--on-media)}}
.db-banner.noart .db-combo-chip{background:var(--ground);color:var(--ink);border-color:var(--rule2)}
.db-bracket-chip.b3,.db-bracket-chip.b4{font-weight:700}
.db-orgline{font-family:var(--sans);font-size:var(--fs-sm);gap:6px 8px;padding:4px 12px;border-radius:var(--r-pill);min-height:32px;background:var(--veil-faint);border:1px solid var(--veil-line)}
@media (hover:hover){.db-orgline:hover{background:var(--veil)}}
.db-banner.noart .db-orgline{background:var(--ground);border-color:var(--rule2)}
.db-orgline .dim{opacity:.82}
.db-orgline .lib-plat{background:var(--veil);color:var(--on-media);border-color:var(--veil-line)}
.db-banner.noart .db-orgline .lib-plat{background:var(--fill);color:var(--ink);border-color:var(--rule2)}
.db-orgline .lib-stagechip{background:transparent;color:inherit;border-color:currentColor;padding:0 8px}
.db-orgedit{text-decoration:underline;text-underline-offset:3px}
.db-actions .btn-sm,.db-actmore{font-family:var(--sans)}
.db-credit{font-family:var(--sans);font-size:var(--fs-xs)}
.db-banner .skip-link{font-family:var(--sans)}
/* a phone: the small picture sits at the top right, so the title row leaves it room */
@media (width < 720px){
  .db-banner.hasart .db-title-row{padding-right:56px}
  /* the format, counts and chips scroll sideways in one line: the edge fades to say there is more */
  .db-meta{-webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);padding-right:28px}
  .db-addopts{row-gap:0}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .db-banner:not(.noart){border-color:var(--rule)}}
:root[data-theme="dark"] .db-banner:not(.noart){border-color:var(--rule)}

/* ---------------------------------------------------------------- the deck's tabs: underline tabs */
.db-tabs{gap:4px 24px;margin:var(--sp-xl) 0 var(--sp-xl);border-bottom:1px solid var(--rule);scrollbar-width:none}
.db-tabs::-webkit-scrollbar{display:none}
.db-tabs button{font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;color:var(--muted);background:none;border:0;border-radius:0;padding:10px 0 12px;margin:0;box-shadow:none;min-height:44px}
@media (hover:hover){.db-tabs button:hover{color:var(--ink)}}
.db-tabs button[aria-selected="true"]{color:var(--ink);border:0;box-shadow:inset 0 -2px 0 var(--ink)}
.db-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- the deck tab */
.db-layout{gap:var(--sp-2xl)}
.db-addbox{border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);min-height:48px;min-width:0;max-width:100%}
.db-addbox input{min-width:0;flex:1 1 auto}   /* at the largest text the box shrinks to the page, never past it */
.db-addbox:focus-within{border-color:var(--ink)}
:root .db-addbox:focus-within{box-shadow:0 0 0 1px var(--ink)}
.db-addbox .cl-prompt{font-family:var(--code);color:var(--muted)}
#db-add{font-family:var(--code);font-size:var(--fs-md)}
#db-add::placeholder{font-family:var(--sans);color:var(--faint)}
.db-addrow select,.db-controls select{font-family:var(--sans);font-size:var(--fs-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);min-height:40px;padding:6px 8px}
.db-addopts{font-size:var(--fs-sm);color:var(--ink);gap:6px 18px;margin-top:10px}
.db-addopts input,.db-controls input{accent-color:var(--ink)}
.db-addopts .cl-muted{flex-basis:100%}
.db-fit{font-weight:400}
.db-controls{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);gap:10px 16px;padding:12px 0;margin-bottom:var(--sp-lg)}
.db-controls label{color:var(--muted)}
.db-main>.db-controls:first-child{border-top:0;padding-top:0}
.db-ctl-l{font-size:var(--fs-sm);color:var(--muted)}
.db-seg button{font-family:var(--sans);font-size:var(--fs-sm);background:var(--ground);border-color:var(--rule2);color:var(--ink)}
@media (hover:hover){.db-seg button:hover{background:var(--hover)}}
.db-seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.db-dotkey{font-size:var(--fs-sm);gap:4px 16px}
.db-dotkey ~ .db-board:first-of-type,.db-dotkey + .db-cats{margin-top:var(--sp-xl)}
.db-dotkey .db-ctl-l{color:var(--muted);font-weight:700}
.db-dotkey>span{color:var(--ink)}
/* each board: a section heading over the ink rule, its count beside it */
.db-board{margin-bottom:var(--sp-2xl)}
.db-board-h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3;letter-spacing:-.005em;margin:0 0 var(--sp-lg);padding-bottom:8px;border-bottom:1.5px solid var(--ink);flex-wrap:wrap;row-gap:2px}
.db-board-h b{color:var(--muted);font-weight:400;font-size:var(--fs-lg)}
.db-board-h .cl-muted{font-size:var(--fs-sm);font-weight:400}
/* a group's heading (Creatures 11): a chevron that folds it, its name, its count */
.db-stack h3,.db-lgroup h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0 0 10px;letter-spacing:0}
.db-gh{align-items:center;gap:8px}
.db-gh span{color:var(--muted);font-weight:400}
.db-gh::before,.shut .db-gh::before{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);margin:0 2px 0 1px}
.shut .db-gh::before{transform:rotate(-45deg)}
@media (hover:hover){.db-gh:hover::before{border-color:var(--ink)}}
.db-q{font-family:var(--sans)}
.db-mark,.db-own{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;line-height:1;padding:4px 7px}
/* marks are facts about a copy, set in the one glass chip on a picture; rotating and proxy are words, not colors */
.db-mark.rot,.db-mark.proxy{background:var(--glass);color:var(--on-media);border:0}
.db-row .db-mark,.db-row .db-mark.rot,.db-row .db-mark.proxy{background:var(--fill);color:var(--ink);border:1px solid var(--rule2);padding:3px 7px}
.db-row .db-mark.foil{border:0}
/* what you own: every copy (pass) green, none (fail) red, some of them a quiet gray */
.db-own.part{background:var(--draw-fill)}
.db-q.part{box-shadow:0 0 0 2.5px var(--muted),var(--shadow-1)}
.db-row{font-size:var(--fs-lg)}
@media (hover:hover){.db-row:hover{background:var(--fill)}}
.db-rq{font-family:var(--sans);font-size:var(--fs-md)}
@media (hover:hover){.db-rname:hover{color:var(--ink);text-decoration:underline}}
.db-rprice{font-family:var(--sans);font-size:var(--fs-sm)}
.db-textview{font-family:var(--code);font-size:var(--fs-md);background:var(--fill);border-color:var(--rule)}
.db-fb{font-family:var(--sans)}
.db-empty{border:1px dashed var(--rule2);border-radius:var(--r-lg);font-size:var(--fs-lg)}
.db-card:focus-visible img,.db-cbtn:focus-visible :is(img,.db-fb){box-shadow:0 0 0 3px var(--ink)}
/* the side: the curve, the price, what to fix, rotation, keys */
.db-side .db-panel{margin-bottom:var(--sp-lg)}
.db-kv{font-size:var(--fs-md)}
.db-kv b{font-family:var(--sans)}
.db-curve-x,.db-bar span,.db-bar2 span{font-family:var(--sans)}
.db-issues ul{font-size:var(--fs-md)}
.db-issues li{margin-bottom:6px}
.db-issues a{color:var(--ink)}
.db-rot p{font-size:var(--fs-md)}
.db-rot li,:root .db-rot li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:baseline;padding:2px 0}
.db-keys p{line-height:1.9}
/* your own groups */
.db-cats{background:var(--ground);border-radius:var(--r-lg);padding:12px 14px}
.db-cats-h b{font-size:var(--fs-lg)}
.db-catlist li{border:1px solid var(--rule2);border-radius:var(--r-pill);padding:4px 6px 4px 12px;font-size:var(--fs-sm)}
.db-catlist li.drop,.db-stack.drop,.db-lgroup.drop{border-color:var(--ink);background:var(--sel)}
.db-catn{font-family:var(--sans)}
.db-catnew input{border-color:var(--rule2)}
/* the card inspector and its printings */
.db-insp-facts dt{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.db-stepper{border-color:var(--rule2)}
.db-stepper button{background:var(--fill)}
.db-stepper b{font-family:var(--sans)}
.db-print span,.db-print small{font-family:var(--sans)}
.db-print.on{border-color:var(--ink);background:var(--sel)}
.db-artpick.on .db-artpick-img,.db-artpick:focus-visible .db-artpick-img,.dimg-edit-frame:focus-visible{box-shadow:0 0 0 3px var(--ink)}
.dimg-credit{font-family:var(--sans)}
.db-aerr{color:var(--bad)}
/* the castability pop over a card */
.db-pop{border-radius:var(--r-lg)}
.db-pop h4,.db-pop-big b,.db-pop-t td{font-family:var(--sans)}
.db-pop-t th{font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
/* what to fix, above the tabs */
.db-fix{border-color:var(--bad-line);border-radius:var(--r-lg);background:var(--ground)}
.db-fix-top h2{font-size:var(--fs-xl)}

/* ---------------------------------------------------------------- stats and castability */
.db-stats,:root .db-stats{gap:var(--sp-lg);grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
/* the tables here are read across: every column stays, at the body size (the search page's phone rule hides muted cells) */
:is(.db,.mbp,.gf) .cl-table td.cl-muted{font-size:inherit}
@media (width < 720px){
  :is(.db,.mbp,.gf) .cl-table td.cl-muted{display:table-cell}
  :is(.db,.mbp,.gf) .cl-table :is(span,small).cl-muted{display:inline}
}
.db-ctable{font-size:var(--fs-md)}
.db-dna li{font-size:var(--fs-md);padding:6px 0}
.db-dna li b{font-family:var(--sans);font-weight:700}
.db-dna a{text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px}
@media (hover:hover){.db-dna a:hover{color:var(--ink);text-decoration-color:currentColor}}
.db-top span,.db-bracket b{font-family:var(--sans)}
.db-key.c{background:var(--ink)}
.db-oldcast summary{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.db-combolist a.db-miss{color:var(--ink)}
.db-capok,.db-captier>span:first-child{font-family:var(--sans)}
/* the Commander bracket panel: brackets are facts about the list, not warnings, so its tags are ink */
.br-tag{font-size:var(--fs-xs);font-weight:700;letter-spacing:0;border-radius:var(--r-pill);padding:1px 8px;border-color:var(--rule2);color:var(--ink);background:var(--ground)}
.br-tag.b3,.br-tag.b4{border-color:var(--rule2);background:var(--fill);color:var(--ink)}
.br-tag.b4{border-color:var(--ink)}
.br-push{border-left-color:var(--ink);background:var(--fill)}
.br-receipts summary{color:var(--ink);font-weight:700}
.db-bracket-chip.b3,.db-bracket-chip.b4{border-color:var(--rule2);background:var(--ground);color:var(--ink)}

/* ---------------------------------------------------------------- Manabase+ (its own page and the stats tab) */
.mbp .mb-page-h{padding-top:0}
.mb-in label{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mb-in select{border:1px solid var(--rule2);background:var(--ground);min-height:40px}
.mb-in textarea{border:1px solid var(--rule2);border-radius:var(--r-md)}
.mb-in textarea:focus,.mb-in select:focus{border-color:var(--ink)}
/* the three headline numbers: one ledger, split by hairlines */
.mb-head{gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.mb-big{border:0;border-radius:0;background:var(--ground);gap:6px;padding:14px 16px}
.mb-big b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700}
.mb-big span{font-size:var(--fs-sm)}
.mb-big.warn b{color:var(--bad)}
.mb-rules{background:var(--fill);border-left:3px solid var(--ink);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:10px 16px}
.mb-keeps{border-radius:var(--r-lg);background:var(--ground);padding:10px 14px}
.mb-h{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink);margin:var(--sp-xl) 0 10px}
.mb-th1 :is(th,td){font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink);letter-spacing:0}
.mb-gain{font-family:var(--sans)}
.mb-gain.neg{color:var(--bad)!important}
.mb-cats b,.mb-turns span{font-family:var(--sans)}
.mb-cat-bar i{background:var(--ink)}
.mb-table small,.mb-odds small{font-size:var(--fs-xs)}
/* card names in the report read as names, not headlines (the search page's table sets its links bold) */
:is(.db,.mbp) .mb-table td a{font-weight:400}
@media (width < 720px){
  .mbp .db-panel,.db-stats .db-panel{padding:14px 12px}
}
.mb-swipe{font-size:var(--fs-sm)}
.mr-controls label{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mr-controls select{border:1px solid var(--rule2);background:var(--ground);min-height:40px}
.mr-list li{background:var(--ground);border-radius:var(--r-lg)}
.mr-list li.mr-down{border-left-color:var(--bad)}
.mr-nums,.mr-pd{font-family:var(--sans)}
.mr-plan{border:1px solid var(--rule2);background:var(--fill);border-radius:var(--r-lg)}
.mr-catch{color:var(--bad)}

/* ---------------------------------------------------------------- plans and results, primer, versions */
.db-plan{background:var(--ground);border-radius:var(--r-lg)}
.db-pvs{font-family:var(--sans)}
.db-rec,.db-bal{font-family:var(--sans);font-size:var(--fs-sm)}
.db-pside h4{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.db-pside li span{font-family:var(--sans)}
.db-pside li.in span,.db-pside li.out span{color:var(--ink)}
.db-pnote,.db-logform input,.db-logform select,.db-vsave input{border-color:var(--rule2)}
.db-rstats div{background:var(--fill)}
.db-rstats b{font-family:var(--sans)}
.db-res{font-family:var(--sans);font-weight:700}
.db-logbox{border-radius:var(--r-lg);background:var(--ground)}
.db-primer-bar{gap:10px 14px}
#db-primer-text{font-family:var(--sans);font-size:var(--fs-lg);border-color:var(--rule2);border-radius:var(--r-lg);background:var(--ground)}
.db-primer-view{background:var(--ground);border-radius:var(--r-lg)}
.db-primer-view h2,.db-primer-view h3,.db-primer-view h4{font-family:var(--sans)}
.db-primer-view blockquote{border-left-color:var(--ink)}
.db-versions li{font-size:var(--fs-md)}
.db-versions time{font-family:var(--sans);font-size:var(--fs-sm)}
.db-cmp select{font-family:var(--sans);font-size:var(--fs-md);border-color:var(--rule2);min-height:40px}
.db-difflist span{font-family:var(--sans)}
.db-difflist .in span,.db-difflist .out span{color:var(--ink)}
.db-receipt code{font-family:var(--code)}
.db-hl-follow,.db-hl-list li{border-color:var(--rule)}

/* ---------------------------------------------------------------- the phone's slim bar: under the top bar, never behind it */
@media (width < 720px){
  .db-slim{top:var(--top-h);z-index:49;background:var(--ground);box-shadow:var(--shadow-1);padding-top:6px}
  html:has(.db-slim){scroll-padding-top:calc(var(--top-h) + 64px)}
  .db-slim-t{font-family:var(--sans);font-size:var(--fs-md)}
  .db-slim-n{font-family:var(--sans)}
}

/* ---------------------------------------------------------------- compare (compare.js) */
.cmp-views{border-color:var(--rule2)}
.cmp-views button{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border-right-color:var(--rule2)}
@media (hover:hover){.cmp-views button:hover{background:var(--hover)}}
.cmp-views button[aria-selected="true"]{background:var(--ink);color:var(--ground);font-weight:400}
.cmp-views button[aria-disabled="true"]{color:var(--faint);background:var(--ground)}
.cmp-ctl label{font-family:var(--sans);font-size:var(--fs-sm)}
.cmp-sel{border-color:var(--rule2);background:var(--ground)}
.cmp-li{background:var(--ground);border-radius:var(--r-lg);padding:12px 14px}
.cmp-pct{font-family:var(--sans);font-weight:700}
.cmp-num,.cmp-dq{font-family:var(--sans)}
.cmp-h3{font-size:var(--fs-lg)}
.cmp-h4,.cmp-dcols h4{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.cmp-t caption{font-family:var(--sans)}
.cmp-t thead th{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cmp-det summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
.cmp-pick{border-radius:var(--r-lg)}
.cmp-pick legend{font-family:var(--sans)}
.cmp-pick input{accent-color:var(--ink)}

/* ---------------------------------------------------------------- tokens and extras (tokens.js) */
.tk-h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;padding-bottom:8px;border-bottom:1.5px solid var(--ink);margin:0 0 var(--sp-md)}
.tk-h .cl-muted,.tk-h span{font-weight:400;color:var(--muted)}
.tk-item{background:var(--ground);border-radius:var(--r-lg)}
.tk-item figcaption{display:block;font-size:var(--fs-md)}
.tk-item figcaption>*{display:block;margin-top:4px}
.tk-item figcaption>.tk-name{display:inline;margin:0}
.tk-item figcaption>.tk-name+.cl-muted{display:inline;margin:0}
.tk-name{font-size:var(--fs-lg)}
.tk-ctrs>li{font-size:var(--fs-md)}
.tk-ctrs>li:first-child{border-top:0;padding-top:0}

/* ---------------------------------------------------------------- where your copies live (copies.js) */
.cp{background:var(--ground);border-radius:var(--r-lg)}
.cp-h,.cp-deckp h2{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.cp-where b,.cp-w b,.cp-k{font-family:var(--sans)}
.cp-k{font-size:var(--fs-sm)}
.cp-tag{font-family:var(--sans);font-size:var(--fs-xs);background:var(--fill);color:var(--ink);border:1px solid var(--rule)}
.cp-here .cp-tag:first-of-type{background:var(--sel);color:var(--ink);border-color:var(--ink)}
.cp-proxy{font-family:var(--sans);background:var(--fill);color:var(--ink);border:1px solid var(--rule2)}

/* ---------------------------------------------------------------- King Goldfish */
.gf-top{margin:0 0 var(--sp-lg)}
.gf-lbl{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.gf-lbl select,.gf-lbl input{font-family:var(--sans);font-size:var(--fs-md);border-color:var(--rule2);background:var(--ground);min-height:40px}
.gf-lbl input{font-family:var(--code)}
/* the game's line stays in sight while you play, under the phone's top bar */
.gf-status{top:calc(var(--top-h) + env(safe-area-inset-top,0px));background:var(--ground);border-radius:var(--r-lg);font-size:var(--fs-md);gap:8px 20px}
.gf-status b,.gf-turn{font-family:var(--sans)}
html:has(.gf-status){scroll-padding-top:calc(var(--top-h) + 88px)}
.gf-mull{border:1px solid var(--rule2);background:var(--fill);border-radius:var(--r-lg);padding:12px 16px}
.gf-mull p{font-size:var(--fs-lg)}
.gf-h{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);letter-spacing:0;align-items:center}
.gf-h span{font-weight:400;color:var(--muted)}
.gf-bf{border-color:var(--rule2);border-radius:var(--r-lg)}
.gf-side .gf-zone,.gf-report,.gf-them{background:var(--ground);border-radius:var(--r-lg)}
/* a land in play or in hand carries the class "land", which the home page's landing (shell.css .land) also uses: keep
   the card a card */
:root .gf .gf-card.land{display:block;flex-direction:initial;gap:0;padding:0;max-width:none}
.gf-card.sel,.gf-card:focus-visible{outline-color:var(--ink)}
.gf-card.picked{outline:3px dashed var(--ink)}
.gf-card.picked::after{font-family:var(--sans)}
.gf-odds{font-family:var(--sans);font-weight:700}
.gf-mana,.gf-mana button,.gf-rally,.gf-mot{font-family:var(--sans)}
.gf-mana button{border-color:var(--rule2);background:var(--ground)}
.gf-log{border-radius:var(--r-lg);background:var(--ground)}
.gf-log summary,.gf-vshow summary{font-family:var(--sans);font-size:var(--fs-md)}
.gf-log ol{font-size:var(--fs-md)}
.gf-pile{font-size:var(--fs-md)}
.gf-quick[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink)}
.gf-menu{border-radius:var(--r-lg);font-size:var(--fs-md)}
.gf-menu b{font-size:var(--fs-md)}
.gf-menu button:focus-visible{background:var(--hover)}@media (hover:hover){.gf-menu button:hover,.gf-menu a:hover{background:var(--hover)}}
.gf-nav{border-color:var(--ink)}
.gf-vsrep .gf-h3{font-family:var(--sans);font-size:var(--fs-lg)}
.gf-jt th{font-family:var(--sans)}
.gf-jt tbody th{font-size:var(--fs-md);font-weight:400;color:var(--ink);min-width:8.5rem;text-align:left}
@media (width < 720px){
  .gf-status{padding:6px 10px;gap:2px 14px;font-size:var(--fs-md);box-shadow:var(--shadow-1)}
  .gf-status .gf-life b{font-size:var(--fs-lg)}
}
.gf-jt tr.gf-diff th{font-weight:700}

/* ---------------------------------------------------------------- the deck dialogs (inside the shared .ms-modal)
   The modal sets every label as a small caption stacked over its field; a checkbox or radio here sits beside its words */
.ms-modal .lib-orgchip{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
.ms-modal :is(.db-exports li>label:not([for]),.lbl-checks label,label.db-sharerec){display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
.ms-modal label.db-sharerec{display:flex;align-items:flex-start;line-height:1.45}
.ms-modal :is(.lib-org,.db-exports,.lbl-form,.db-sharerec,.db-receipt,.db-insp-grid) input:is([type=checkbox],[type=radio]),.db input:is([type=checkbox],[type=radio]),.gf input:is([type=checkbox],[type=radio]){accent-color:var(--ink)}
.db-exports li{font-size:var(--fs-md)}
.lbl-dens b{font-family:var(--sans)}
.lbl-d1 b{color:var(--ink)}
.lbl-link,.lbl-prev{border-radius:var(--r-lg)}
.sh-note{font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- a rulebreaker commander's panel (deckbuilder.js rbPanel) */
.db-rb .db-rb-rule{margin:0 0 8px;line-height:1.45}
.db-rb .db-rb-warn{color:var(--ink);background:var(--warn-bg);border-left:3px solid var(--warn-line);padding:6px 8px;border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- the library's next page of decks (deckbuilder.js resultsHTML) */
.lib-morew{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:var(--sp-md) 0 0}
@media (pointer:coarse){.lib-morew .btn-sm{min-height:44px}}

/* ================================================================ v1.0, group C: collection and money (October 15, 2026)
   Collection (collection.js, binders.js, sealed.js), Market (market.js, and the price history on card pages), the Trade
   Calculator (trade.js), the Wildcard Planner (wildcards.js, arenaplan.js), prices and where to buy (prices.js) and the
   hide values switch (values.js). Loads after styles.css and shell.css: where they say something about the same thing at
   the same specificity, this file wins. Every rule is scoped to these tools' own classes. */

/* ---------------------------------------------------------------- shared by these tools: underline tabs
   a row on a hairline; each tab plain text, the selected one ink with a 2 px ink underline */
:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs){display:flex;flex-wrap:nowrap;gap:0 4px;margin:20px 0;padding:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;overflow-x:auto;scrollbar-width:none}
:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs)::-webkit-scrollbar{display:none}
:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs) > button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:8px 12px;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;line-height:1.3;color:var(--muted);white-space:nowrap;cursor:pointer}
@media (hover:hover){:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs) > button:hover{color:var(--ink);background:none}}
:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs) > button:is([aria-selected="true"],[aria-pressed="true"]){color:var(--ink);background:none;border:0;box-shadow:inset 0 -2px 0 var(--ink)}
:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs) > button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:var(--r-sm)}
:is(.co-tabs,.mk-tabs,.wc-tabs,.tr-ltabs,.wc-otabs) > button > span{margin:0;padding:0;background:none;border-radius:0;font-size:var(--fs-sm);color:var(--faint)}

/* ================================================================ Collection */
.co{padding-bottom:var(--sp-3xl)}
/* the head: the ledger (value, cards, entries, proxies, wishlists, sealed), the price stamp under it. Its actions sit in
   the page header's right slot */
.co-head{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:4px 0 0}
.co-kpis{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.co-kpis > div{flex:1 1 150px;display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 18px 14px;background:var(--ground);border:0;border-radius:0}
.co-kpis > div > span{order:-1;font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.co-kpis > div > b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-title{margin:0}
.co-refresh{display:block;margin:0;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.ph-x .co-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.co-head .co-actions{display:flex;flex-wrap:wrap;gap:8px}
.co-ppanel{margin:16px 0 0}
.co-ppanel h2{margin:0 0 10px;font-size:var(--fs-xl);font-weight:700}
.co-tabs{margin:24px 0 20px}

/* the add bar: a hairline box; the name box takes set and number syntax, so it is in the code face */
.co-add{margin:0 0 16px;padding:12px;background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-lg)}
.co-addbox{border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
.co-addbox:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.co-addbox .cl-prompt{font-family:var(--code);color:var(--ink)}
#co-add{font-family:var(--code);font-size:var(--fs-lg);padding:11px 12px}
#co-add::placeholder,.co-filter input::placeholder{font-family:var(--sans);color:var(--faint)}
.co-addopts{gap:8px 14px;margin-top:12px;font-size:var(--fs-md)}
.co-addnote{flex:1 1 260px;font-size:var(--fs-sm)}
:is(.co-addrow,.co-addopts,.co-controls,.co-dfilter) select{min-height:40px;padding:6px 10px;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md)}
.co-addrow select{min-height:46px}
:is(.co-addopts,.co-controls) label{font-size:var(--fs-md);color:var(--ink)}
.co .db-seg button{min-height:40px;font-family:var(--sans);font-size:var(--fs-md);border-color:var(--rule2);color:var(--ink)}
.co .db-seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* filter, sort, group, view, select */
.co-controls{gap:8px 12px;margin:0 0 8px;font-family:var(--sans);font-size:var(--fs-md);color:var(--muted)}
.co-controls > label{color:var(--muted)}
.co-filter input{min-height:40px;font-family:var(--code);font-size:var(--fs-md);border:1px solid var(--rule2);background:var(--ground)}
.co-filter input:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
.co-capchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 8px}
.co-capchips > span{font-size:var(--fs-sm);color:var(--muted)}
.co-capchips > span a,.co-capchips > a{font-size:var(--fs-sm);color:var(--muted)}
@media (hover:hover){.co-capchips > span a:hover,.co-capchips > a:hover{color:var(--ink)}}
.co .fb-chip{border:1px solid var(--rule2);background:var(--ground);color:var(--ink);font-size:var(--fs-sm)}
@media (hover:hover){.co .fb-chip:hover{border-color:var(--ink)}}
.co .fb-chip[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink)}
.co-count{margin:4px 0 14px;font-size:var(--fs-md);color:var(--muted)}
.co-count b{font-family:var(--sans);color:var(--ink)}

/* a binder's, a set's or a tab's own heading */
.co-crumb{gap:6px 14px;margin:0 0 14px}
.co-crumb h2{margin:0;font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3;color:var(--ink)}
.co-crumb a[data-back]{font-family:var(--sans);font-size:var(--fs-md);color:var(--muted);text-decoration:none}
@media (hover:hover){.co-crumb a[data-back]:hover{color:var(--ink);text-decoration:underline}}
.co-crumb > .cl-muted{font-size:var(--fs-md)}
.co-crumb > label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-md)}
.co-gh{margin:24px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.co-gh span{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}

/* the grid: the picture whole, the count and its steppers under it, then badges and the price */
.co-tile.picked{box-shadow:0 0 0 2px var(--ink);background:var(--sel)}
.co-step button{border:1px solid var(--rule2);background:var(--ground);font-family:var(--sans)}
@media (hover:hover){.co-step button:hover{border-color:var(--ink);color:var(--ink)}}
.co-q{font-family:var(--sans);font-size:var(--fs-md)}
.co-price{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.co-b{font-family:var(--sans);font-size:var(--fs-xs);line-height:1.2;padding:3px 7px;background:var(--fill);color:var(--ink);border:1px solid var(--rule)}
.co-b.trade{background:var(--sel);color:var(--ink)}
.co-miss{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.co-tile.faded .co-img{outline:1.5px dashed var(--rule2)}

/* the list */
@media (hover:hover){.co-table th[data-csort]:hover{color:var(--ink);text-decoration:underline}}
@media (hover:hover){.co-table tr[data-entry]:hover td{background:var(--fill)}}
.co-table tr.picked td{background:var(--sel)}

/* binders and wishlists */
.co-binders{gap:16px}
.co-binder.db-deck{border-radius:var(--r-lg);background:var(--ground)}
@media (hover:hover){.co-binder.db-deck:hover{border-color:var(--ink)}}
.co-binder .db-deck-body b{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700}
.co-newb{border:1.5px dashed var(--rule2);border-radius:var(--r-lg);font-family:var(--sans);font-size:var(--fs-lg);color:var(--muted)}
@media (hover:hover){.co-newb:hover{border-color:var(--ink);color:var(--ink)}}
.co-plat{font-family:var(--sans);color:var(--ink);background:var(--fill);border:1px solid var(--rule)}

/* decks: what you can build */
.co-dfilter{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 10px}
.co-dfilter input{flex:1 1 260px;min-width:0;min-height:40px;padding:6px 10px;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md)}
.co-decks{gap:0;border-top:1px solid var(--rule)}
.co-deckrow{padding:14px 0;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0}
.co-dk-main a{font-family:var(--sans);font-size:var(--fs-lg)}
@media (hover:hover){.co-dk-main a:hover{text-decoration:underline}}
.co-dk-stat{font-size:var(--fs-sm)}
.co-dk-main > .cl-muted{text-transform:capitalize}   /* the deck's format, a name: Standard, Commander */
.co-bar{height:6px;background:var(--fill)}
.co-bar i{background:var(--ink)}

/* sets and goals */
.co-sets{gap:8px 16px}
.co-set{padding:12px 14px;background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg)}
@media (hover:hover){.co-set:hover{border-color:var(--ink)}}
.co-set-name b{font-size:var(--fs-lg);font-weight:700}
.co-set-name span{font-family:var(--sans);font-size:var(--fs-sm)}
.co-set-n{font-family:var(--sans);font-size:var(--fs-md)}

/* stats */
.co .db-stats{gap:16px}
.co .db-panel{background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg)}
.co .db-ctable td{padding:8px 4px;font-size:var(--fs-md)}
.co .db-ctable td.num{font-family:var(--sans)}
.co .db-ctable td:nth-child(3){width:32%}
.co .db-hbar{display:block;height:8px;max-width:100%;min-width:2px;background:var(--ink);border-radius:var(--r-sm)}
.co-chart{display:block;width:100%;height:160px;color:var(--ink);background:none;border-bottom:1px solid var(--rule);border-radius:0}
.co-chart polyline{vector-effect:non-scaling-stroke}
.co-top li > span:first-child .cl-muted{font-family:var(--code);font-size:var(--fs-xs)}
.co-hist li{font-size:var(--fs-md)}
.co-hist time{font-family:var(--sans);font-size:var(--fs-sm)}

/* the bar of bulk actions while cards are picked: centered in the content, never over the side menu */
#co-bulk.db-bulk{left:calc(var(--side-w) + (100vw - var(--side-w)) / 2);max-width:calc(100vw - var(--side-w) - 32px);font-family:var(--sans)}
#co-bulk.db-bulk button,#co-bulk.db-bulk select{font-family:var(--sans);font-size:var(--fs-sm)}

@media (width < 720px){
  .co-kpis > div{flex-basis:40%;padding:12px 14px 10px}
  .co-kpis > div > b{font-size:var(--fs-num)}
  .co-tabs{margin:20px 0 16px}
  .co-addnote{flex-basis:100%}
  #co-bulk.db-bulk{left:8px;right:8px;max-width:none}
  .ph-x .co-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .co-table td:nth-child(3) .co-name{white-space:normal;overflow-wrap:anywhere;text-align:left}
}

/* the printing picker under the add bar */
.co-pick{border-top-color:var(--rule)}
.co-pick-head b{font-size:var(--fs-lg)}
.co-pp{border-radius:var(--r-lg)}
.co-pp span{font-family:var(--code);font-size:var(--fs-xs)}
.co-pp small{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.co-pp em{font-size:var(--fs-xs);color:var(--muted)}
.co-pp.on{border-color:var(--ink);background:var(--sel)}@media (hover:hover){.co-pp:hover{border-color:var(--ink);background:var(--sel)}}

/* one copy, in the card view (MS.quickView) or its dialog: each field's name over its control */
#co-ed .db-insp-grid{gap:10px 14px;margin:0 0 10px}
#co-ed .db-insp-grid > label:not(.db-check){display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
#co-ed .db-insp-grid > label:not(.db-check) :is(select,input){width:100%;min-height:40px;padding:6px 10px;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md)}
#co-ed .db-insp-grid > label.db-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--ink)}
#co-ed .db-insp-row select{min-height:40px;font-family:var(--sans);font-size:var(--fs-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
#co-ed .db-insp-facts dt{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
#co-ed .db-insp-facts dd{font-size:var(--fs-md)}
#co-ed .db-sub{margin:16px 0 8px;font-size:var(--fs-lg);font-weight:700}
#co-ed .db-print span{font-family:var(--code)}

/* import: the pasted list is typed text, in the code face */
#co-itext{font-family:var(--code);font-size:var(--fs-md)}
#co-itext::placeholder{font-family:var(--sans)}

/* binder pages, goals and the about prices panel (binders.js) */
.co .bp-page{background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg);box-shadow:none}
.co .bp-pn{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.co .bp-cap{font-size:var(--fs-sm)}
.co .bp-cap::first-letter{text-transform:uppercase}
.co .bp-oset{font-family:var(--code)}
.co .bp-pk.picked{box-shadow:0 0 0 2px var(--ink);background:var(--sel)}
.co :is(.bp-picked,.bp-over) .co-img{outline-color:var(--ink)}
.co button.bp-pk:focus-visible{outline-color:var(--ink)}
.co .bp-out{border-color:var(--rule2) !important}
.co .bp-gh h2{font-size:var(--fs-xl);font-weight:700}
.co .bp-gicon{border-color:var(--muted)}
.co .bp-big{font-size:var(--fs-lg)}
.co .bp-big b{font-family:var(--sans)}
.co .bp-rar tbody th{font-family:var(--sans);font-size:var(--fs-md);font-weight:400;color:var(--ink)}
.co .bp-rar td.num{font-family:var(--sans)}
.co .bp-sortsel select{font-family:var(--sans);font-size:var(--fs-md);border-color:var(--rule2);background:var(--ground)}
.co .bp-modes .db-seg button{min-height:40px}
.ms-modal .bp-kind{gap:8px 18px}
.ms-modal .bp-kind legend{font-size:var(--fs-md);font-weight:700}
.ms-modal .bp-kind label{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-size:var(--fs-md);color:var(--ink)}
.ms-modal .bp-gsetb{border-color:var(--rule2);background:var(--ground)}
@media (hover:hover){.ms-modal .bp-gsetb:hover{border-color:var(--ink)}}
.ms-modal .bp-gsetb[aria-pressed="true"]{border:1.5px solid var(--ink);background:var(--sel)}
#bp-gtext,#sl-cards{font-family:var(--code);font-size:var(--fs-md)}
.co-pfacts{gap:10px}
.co-pfacts dt{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.co-pfacts dd{font-size:var(--fs-md);line-height:1.5}
.co-hv{font-size:var(--fs-lg)}

/* sealed product (sealed.js): scoped to Collection, so Set Lab's rules for its own sl- names stay out */
.co .sl-noprice{font-size:var(--fs-sm);color:var(--muted)}
.co .sl-list{gap:0;border-top:1px solid var(--rule)}
.co .sl-item{padding:12px 0;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0}
.co .sl-main b{font-size:var(--fs-lg)}
.co .sl-meta{font-size:var(--fs-sm)}
.co .sl-paid{font-size:var(--fs-md)}
.co .sl-q{overflow-wrap:normal}
.co .sl-links{margin:0;font-size:var(--fs-sm)}
.co .sl-hh time{font-family:var(--sans)}
.co .sl-hist h3 span{font-weight:400}

/* ================================================================ Market (market.js) and the price history on card pages */
/* one chart color, ink, in both themes (the dark theme's blue line is gone) */
.mk,.mk-hist{--mk-line:var(--ink)}
:root[data-theme="dark"] :is(.mk,.mk-hist){--mk-line:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.mk,.mk-hist){--mk-line:var(--ink)}}
.mk{padding-bottom:var(--sp-2xl)}
.mk>.mk-head,.mk-head{padding:0}
.mk-asof{margin:0;max-width:90ch;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.mk-asof b{font-weight:700;color:var(--ink)}
.mk-tabs{margin:20px 0}
.mk-count{margin-left:2px;font-size:var(--fs-sm)}
/* controls: each one's name over it, sentence case, in the reading face */
.mk-ctl{gap:10px 14px;margin:0 0 14px}
.mk-sel{gap:4px}
.mk-sel span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mk-sel select{min-height:40px;padding:6px 10px;font-family:var(--sans);font-size:var(--fs-md);background:var(--ground);border-color:var(--rule2)}
.mk-sw{min-height:40px}
.mk-chk{font-size:var(--fs-md)}
.mk-defs{font-size:var(--fs-sm)}
.mk-seg{border-color:var(--rule2)}
.mk-seg button{min-height:40px;font-family:var(--sans);font-size:var(--fs-md);background:var(--ground);color:var(--ink)}
.mk-seg button+button{border-left-color:var(--rule2)}
.mk-seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground);font-weight:400}
/* headings: a section over the ink rule, a block's name in bold */
.mk-h2{margin:0 0 10px;padding-bottom:8px;border-bottom:1.5px solid var(--ink);font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.mk-h3{margin:0 0 8px;font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3}
:is(.mk-h2,.mk-h3) .cl-muted{font-size:var(--fs-sm);font-weight:400}
.mk-empty{border:1px dashed var(--rule2);border-radius:var(--r-lg);font-size:var(--fs-md)}
.mk-mvhead{font-size:var(--fs-sm)}
/* the watchlist */
.mk-addbox{border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
.mk-addbox:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.mk-addbox input{font-family:var(--code);font-size:var(--fs-lg)}
.mk-addbox input::placeholder{font-family:var(--sans);color:var(--faint)}
.mk-note{font-family:var(--sans);font-size:var(--fs-md);border-radius:var(--r-md)}
.mk-tbl{border-top:1px solid var(--rule)}
.mk-hr .mk-c{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mk-name a{font-weight:700}
@media (hover:hover){.mk-name a:hover{color:var(--ink);text-decoration:underline}}
.mk-name small,.mk-now small,.mk-w small{font-size:var(--fs-xs);color:var(--muted)}
.mk-now,.mk-w{font-family:var(--sans);font-size:var(--fs-md)}
.mk-now b{font-size:var(--fs-lg)}
.mk-grp{background:var(--fill)}
@media (hover:hover){.mk-spb:hover{background:var(--fill)}}
.mk-spb[aria-expanded="true"]{background:var(--sel)}
.mk-xb{color:var(--muted)}
@media (hover:hover){.mk-xb:hover{background:var(--fill);color:var(--ink)}}
.mk-watch[aria-pressed="true"]{color:var(--ink)}
:is(.mk-spb,.mk-xb):focus-visible,.mk-chartwrap:focus-visible{outline-color:var(--ink)}
.mk-src{font-size:var(--fs-sm)}
.mk-since{padding:14px 16px;border:1px solid var(--rule);background:var(--fill);border-radius:var(--r-lg)}
.mk-since .mk-h2{border-bottom:0;padding-bottom:0}
.mk-since-q{background:var(--ground)}
.mk-slist a{font-weight:700}
.mk-snum{font-family:var(--sans)}
.mk-mh{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.mk-dpick{border-color:var(--rule2);background:var(--ground)}
@media (hover:hover){.mk-dpick:hover{border-color:var(--ink)}}
.mk-dpick b{font-weight:700}
.mk-dpick small{font-size:var(--fs-sm);color:var(--muted)}
/* charts */
.mk-tick{font-family:var(--sans);font-size:13px;fill:var(--muted)}
.mk-dot,.mk-xd{stroke:var(--ground)}
.mk-tip{background:var(--ground);border-color:var(--rule2)}
.mk-tip b{font-family:var(--sans)}
.mk-tip span{font-size:var(--fs-sm)}
/* movers */
.mk-mvgrid{gap:32px}
.mk-mv{padding:10px 0}
.mk-rk{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mk-mvn a{font-weight:700}
@media (hover:hover){.mk-mvn a:hover{color:var(--ink);text-decoration:underline}}
.mk-mvn small{font-size:var(--fs-sm);color:var(--muted)}
.mk-mvv{font-family:var(--sans)}
.mk-mvv b{font-size:var(--fs-lg)}
.mk-mvv span{font-size:var(--fs-md)}
.mk-mvv small{font-size:var(--fs-sm);color:var(--muted)}
#mk-up + .mk-mvs .mk-mvv b{color:var(--up)}
#mk-down + .mk-mvs .mk-mvv b{color:var(--down)}
.mk-rank{margin-top:40px}
/* indexes */
.mk-idx{gap:16px}
.mk-ix{padding:16px 18px;background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg)}
.mk-ixnow b{font-family:var(--sans);font-size:var(--fs-num);line-height:1.2}
.mk-ixnow small{font-size:var(--fs-sm)}
.mk-wins dt{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mk-wins dd{font-family:var(--sans);font-size:var(--fs-md)}
.mk-tbld summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);min-height:44px;display:flex;align-items:center}
.mk-tscroll{border-color:var(--rule);border-radius:var(--r-md)}
.mk-table{font-size:var(--fs-md)}
.mk-table thead th{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);background:var(--ground)}
/* reprints and legality */
.mk-rlist li{padding:8px 0}
.mk-rlist a{font-weight:700;text-decoration:none}
@media (hover:hover){.mk-rlist a:hover{text-decoration:underline}}
.mk-l a{font-weight:400}
.mk-rset{margin:0 0 24px}
.mk-rlist small{color:var(--muted)}
.mk-rnum{font-family:var(--sans);font-size:var(--fs-md)}
.mk-rseen{font-size:var(--fs-sm)}
.mk-l{border-left-color:var(--ink)}
.mk-l-sets{border-left-color:var(--rule2)}
/* the card page's history section */
.mk-hnow b{font-family:var(--sans);font-size:var(--fs-num)}

/* ================================================================ Trade Calculator (trade.js) */
.tr{--tr-give:var(--ink);--tr-get:var(--muted)}
/* the trade's name: the page header names the tool, so the name is a heading under it, still a field you can edit */
.tr-head{padding:0 0 16px;align-items:flex-end}
.tr-title-l,.tr-saved{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.tr-title{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.005em;padding:4px 8px;margin-left:-9px}
@media (hover:hover){.tr-title:hover{border-color:var(--rule2)}}
.tr-title:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tr-actions{gap:8px}
/* the totals: a ledger strip, one row split by hairlines */
.tr-sum{padding:0 0 16px;border-bottom:0}
.tr-tots{gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.tr-tot{gap:2px;padding:16px 18px 14px;background:var(--ground);border:0;border-radius:0;box-shadow:none}
.tr-tot + .tr-tot{border-left:1px solid var(--rule)}
.tr-tot-give,.tr-tot-get{box-shadow:none}
.tr-tot-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.tr-tot b{font-family:var(--sans);font-size:var(--fs-num);letter-spacing:-.01em}
.tr-tot-s{font-size:var(--fs-sm)}
.tr-bar{height:8px;margin:14px 0 6px;background:var(--fill)}
.tr-bar-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.tr-basis{font-size:var(--fs-sm)}
.tr-banner{border-color:var(--rule2);background:var(--fill);border-radius:var(--r-lg);font-size:var(--fs-md)}
.tr-banner-q{background:var(--ground)}
/* the two sides */
.tr-sides{gap:32px;margin-top:8px}
.tr-side-h{padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
[data-sidebox="get"] .tr-side-h{border-color:var(--ink)}
.tr-side-h h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.tr-side-t{font-family:var(--sans);font-size:var(--fs-md)}
.tr-addbox{border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
.tr-addbox:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tr-addbox input{font-family:var(--code);font-size:var(--fs-lg)}
.tr-addbox input::placeholder{font-family:var(--sans);color:var(--faint)}
.tr-lname{font-size:var(--fs-lg)}
.tr-lname a{font-weight:700}
@media (hover:hover){.tr-lname a:hover{color:var(--ink);text-decoration:underline}}
.tr-bad{font-size:var(--fs-sm);color:var(--bad)}
.tr-sel select{min-height:36px;font-family:var(--sans);font-size:var(--fs-md);background:var(--ground);border-color:var(--rule2)}
.tr-lqty{border-color:var(--rule2);background:var(--ground)}
.tr-step{font-family:var(--sans)}
@media (hover:hover){.tr-step:hover{background:var(--fill)}}
.tr-lqty input{font-family:var(--sans)}
.tr-lprice b{font-family:var(--sans);font-size:var(--fs-lg)}
.tr-lprice small{font-size:var(--fs-sm);color:var(--muted)}
.tr-noprice{color:var(--muted);font-weight:400}
.tr-lx{color:var(--muted)}
@media (hover:hover){.tr-lx:hover{background:var(--fill)}}
.tr-step:focus-visible,.tr-lx:focus-visible,.tr-pick:focus-visible,.tr-sadd:focus-visible{outline-color:var(--ink)}
.tr-empty{border:1px dashed var(--rule2);border-radius:var(--r-lg);font-size:var(--fs-md)}
.tr-facts{font-size:var(--fs-sm)}
.tr-lnote{border-left-color:var(--rule2);background:var(--fill);font-size:var(--fs-sm)}
/* dialogs: pick from my cards, saved trades, conditions, apply */
.tr-ptext{font-family:var(--code);font-size:var(--fs-md)}
.tr-pfilter input,.tr-shurl{font-family:var(--code);border-color:var(--rule2);background:var(--ground)}
.tr-pick{border-color:var(--rule2);background:var(--ground)}
@media (hover:hover){.tr-pick:hover{border-color:var(--ink)}}
.tr-pick-n b{font-weight:700}
.tr-pick-n small{font-size:var(--fs-sm);color:var(--muted)}
.tr-pick-q{font-family:var(--sans);font-size:var(--fs-sm)}
.tr-pick-add{font-family:var(--sans);color:var(--ink)}
.tr-fs{border-color:var(--rule);border-radius:var(--r-lg)}
.tr-fs legend{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.tr-cin-f{font-family:var(--sans)}
.tr-cin input{font-family:var(--sans);border-color:var(--rule2);background:var(--ground)}
.tr-saved-list a{border-color:var(--rule2);background:var(--ground)}
@media (hover:hover){.tr-saved-list a:hover{border-color:var(--ink)}}
.tr-saved-list small{font-size:var(--fs-sm);color:var(--muted)}
.tr-apph{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
/* a shared trade binder or wishlist (?l=) */
.tr-lhead{padding:0 0 8px}
.tr-lhead h1{margin:0 0 8px;font-family:var(--sans);font-size:var(--fs-title);font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.tr-lhead p{font-size:var(--fs-md)}
.tr-lctl input{font-family:var(--code);border-color:var(--rule2);background:var(--ground)}
.tr-lctl input::placeholder{font-family:var(--sans)}
.tr .fb-chip{border:1px solid var(--rule2);background:var(--ground);color:var(--ink)}
.tr .fb-chip[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink)}
.tr-ltot{font-family:var(--sans);font-size:var(--fs-md)}
.tr-sname{font-size:var(--fs-lg);font-weight:700}
@media (hover:hover){a.tr-sname:hover{color:var(--ink);text-decoration:underline}}
.tr-sdet{font-size:var(--fs-sm)}
.tr-smatch{font-family:var(--sans);font-size:var(--fs-sm);background:var(--sel)}
.tr-sq,.tr-sp{font-family:var(--sans)}
.tr-sq small,.tr-sp small{font-size:var(--fs-sm)}
.tr-sadd{font-family:var(--sans);border-color:var(--rule2);color:var(--ink);background:var(--ground)}
@media (hover:hover){.tr-sadd:hover{background:var(--fill);border-color:var(--ink)}}
.tr-sin{font-family:var(--sans);font-size:var(--fs-sm)}
.tr-sdock p{font-family:var(--sans);font-size:var(--fs-md)}
@media (width < 720px){
  .tr-head{padding-top:0}
  .tr-title{font-size:var(--fs-xl)}
  .tr-tots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr-tot{padding:12px 14px 10px}
  .tr-tot-diff{grid-column:1/-1;border-left:0 !important;border-top:1px solid var(--rule)}
  .tr-dock{font-family:var(--sans);font-size:var(--fs-md);background:var(--ground)}
  .tr-dk-l{font-size:var(--fs-sm);color:var(--muted)}
}

/* ================================================================ Wildcard Planner (wildcards.js, arenaplan.js) */
.wc-hero,.wc>.wc-hero{margin:0;padding:0}
.wc-cite{max-width:90ch;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.wc-tabs{margin:20px 0}
.wc-otabs{margin:4px 0 12px;gap:0 4px}
/* sections: hairline panels, each named in a heading */
.wc-wallet,.wc-coll,.wc-sec{padding:18px 20px;background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg)}
.wc-sec{margin:0 0 20px}
.wc-top{gap:20px;margin:0 0 20px}
.wc-h{margin:0 0 12px;font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3;color:var(--ink)}
.wc-sechead{margin:0 0 14px}
.wc .btn-xs{min-height:32px;padding:4px 10px;font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);background:var(--ground)}
@media (hover:hover){.wc .btn-xs:hover:not([disabled]){border-color:var(--ink)}}
.wc-wci{border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.wc-wci span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.wc-wci input{font-family:var(--sans);border-color:var(--rule2);background:var(--ground)}
.wc-rc{font-family:var(--sans);font-size:var(--fs-md)}
.wc-t{border-color:var(--rule);border-radius:var(--r-lg)}
.wc-tn{font-family:var(--sans);font-size:var(--fs-sm);background:var(--sel);color:var(--ink)}
.wc-tt b{font-size:var(--fs-lg)}
.wc-toggle{font-size:var(--fs-md)}
.wc-prog i{background:var(--ink)}
.wc-prog{background:var(--fill)}
.wc-tacts select{min-height:32px;font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);background:var(--ground)}
.wc-ok{font-size:var(--fs-md)}
.wc-b{border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.wc-bl{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.wc-b b{font-family:var(--sans)}
.wc-step-h h3{font-size:var(--fs-lg);font-weight:700}
.wc-stepn{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.wc-flag{font-family:var(--sans);font-size:var(--fs-xs);padding:2px 7px;background:var(--fill);color:var(--ink);border:1px solid var(--rule)}
.wc-flag.rot{background:var(--fill);color:var(--ink)}
.wc-flag.bad{color:var(--bad)}
.wc-note summary{font-family:var(--sans);font-size:var(--fs-sm)}
.wc-user{font-family:var(--sans);font-size:var(--fs-xs);background:var(--sel);color:var(--ink)}
.wc-step{font-family:var(--sans)}
.wc-step button{font-family:var(--sans);border-color:var(--rule2);background:var(--ground)}
.wc-table td.num small{font-family:var(--sans);font-size:var(--fs-sm)}
.wc-receipts summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);min-height:44px;display:flex;align-items:center}
.wc-later{border-style:solid}
.wc-otabs button{font-family:var(--sans)}
.wc-copytext,#wc-ptext,#wc-otext{font-family:var(--code);font-size:var(--fs-md)}
.wc-dlist label{font-size:var(--fs-md)}
/* packs and sets (arenaplan.js) */
.ap-sec .fr-t th{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.ap-sec .fr-t tbody th{font-family:var(--sans);font-size:var(--fs-md);font-weight:400;color:var(--ink)}
.ap-sets th[scope=row] .btn-xs{font-size:var(--fs-sm)}
.ap-sets tr.ap-on th[scope=row] .btn-xs{border:1.5px solid var(--ink);background:var(--sel)}
.ap-miss{font-size:var(--fs-sm)}
.ap-warn{border-left-color:var(--rule2)}
.ap-ins input{border-color:var(--rule2)}
.ap-total th,.ap-total td{font-weight:700}
.ap-how summary{font-size:var(--fs-md)}
.wc .lf-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 8px}
.wc .lf-row select{min-height:40px;padding:6px 10px;font-family:var(--sans);font-size:var(--fs-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
@media (width < 720px){
  .wc-table td[data-l]::before{margin-right:6px;font-family:var(--sans);font-size:var(--fs-sm);text-transform:capitalize}
  .wc-wallet,.wc-coll,.wc-sec{padding:14px}
}

/* dialogs: a box or a radio beside its words (the dialog's own label rule stacks a field over its words) */
.ms-modal :is(.wc-omode,.bp-kind) label{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;min-height:32px;font-size:var(--fs-md);color:var(--ink)}
.ms-modal :is(.wc-omode,.bp-kind) input{width:auto;margin:0;flex:none}
.ms-modal .wc-omode legend{font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.ms-modal .bp-kind{flex-direction:row}

@media (width < 720px){
  /* a mover: its name on its own line, the change under it */
  .mk-mv{grid-template-columns:1.6em minmax(0,1fr) var(--ctl-h);grid-template-areas:"rk n x" "rk v x";row-gap:2px}
  .mk-rank .mk-mv{grid-template-columns:1.6em minmax(0,1fr);grid-template-areas:"rk n" "rk v"}
  .mk-rk{grid-area:rk;align-self:start;padding-top:2px}
  .mk-mvn{grid-area:n}
  .mk-mvv{grid-area:v;text-align:left}
  .mk-mv > .mk-xb{grid-area:x}
}
.mk .hv-panel{margin:0;padding:0;border:0;background:none}

/* ================================================================ prices and where to buy (prices.js): card pages, Deckbuilder's price tab, the card view */
.px-kpi{background:var(--ground);border-color:var(--rule);border-radius:var(--r-lg)}
.px-kpi-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.px-kpi b{font-family:var(--sans);font-size:var(--fs-num);letter-spacing:-.01em}
.px-kpi-need{border-color:var(--ink);box-shadow:none}
.px-kpi-need b{color:var(--ink)}
.px-pick-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.px-buyline b{font-family:var(--sans)}
.px-cn{font-family:var(--code)}
.px-table .px-sort{font-family:var(--sans)}
@media (width < 720px){
  /* the labels a phone puts over each value, in sentence case (the attribute keeps the word the page and its tests read) */
  .px-table td[data-l]::before{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
  .px-table td[data-l]::first-letter{text-transform:uppercase}
}
#sl-find,#bp-gset{font-family:var(--code)}
#sl-find::placeholder,#bp-gset::placeholder{font-family:var(--sans)}
@media (width < 720px){
  /* Market's five tabs all stay on a phone's screen: tighter, and onto a second line if they must */
  .mk-tabs{flex-wrap:wrap;overflow-x:visible;gap:0}
  .mk-tabs > button{padding:8px 7px;font-size:var(--fs-md)}
}
/* the stepper fits the narrowest tile (three across on a phone, largest text): the two 44 px buttons keep their size, the
   count between them gives way */
.co-step{min-width:0;max-width:100%}
.co-step button{flex:none}
.co-step .co-q{flex:1 1 auto;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis}

/* ================================================================ v1.0, group D: Limited and cube (October 15, 2026)
   Draft Sim (draft.js, daily.js), Set Lab (setlab.js), Card Eval (eval.js) and Cube Generator (cube.js). Loaded after
   styles.css and shell.css. Every rule starts at its tool's own box (#ds-app .ds, #sl-app .sl, #ev-app .ev, #cb-app .cb)
   or at a class only these tools draw, so nothing here reaches another tool. */

/* ---------------------------------------------------------------- shared by the four tools */
/* underline tabs: plain words on a hairline, the chosen one ink with a 2 px ink line under it */
:is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs){display:flex;flex-wrap:wrap;gap:0 24px;max-width:100%;margin:0 0 20px;padding:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;box-shadow:none}
:is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs) > button{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;line-height:1.3;color:var(--muted);white-space:nowrap;cursor:pointer;position:static}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs) > button:hover{color:var(--ink);background:none}}
:is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs) > button[aria-selected="true"]{color:var(--ink);background:none;border:0;box-shadow:inset 0 -2px 0 var(--ink)}
:is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs) > button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* joined segments for two to four choices: the chosen one ink, its words on the ground color */
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]){display:inline-flex;flex-wrap:wrap;row-gap:6px;max-width:100%}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;margin-left:-1px;border:1px solid var(--rule2);border-radius:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-md);font-weight:400;line-height:1.25;cursor:pointer;position:relative}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button:first-child{margin-left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button:only-child{border-radius:var(--r-md)}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button:hover{z-index:1;border-color:var(--ink)}}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button[aria-pressed="true"]{z-index:2;background:var(--ink);border-color:var(--ink);color:var(--ground)}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button:focus-visible{z-index:3;outline:2px solid var(--ink);outline-offset:2px}
:is(.ds,.sl,.ev,.cb) .mt-seg:not([role="tablist"]) > button[aria-pressed="true"] .ms-sym{box-shadow:0 0 0 1.5px var(--ground);border-radius:50%}
/* on a phone a row of segments may wrap: each becomes its own rounded button, so no half-rounded corners are left */
@media (width < 720px){
  :is(.ds,.sl,.ev,.cb) :is(.mt-seg:not([role="tablist"]),.cl-views,.sl-seg){gap:6px}
  :is(.ds,.sl,.ev,.cb) :is(.mt-seg:not([role="tablist"]),.cl-views,.sl-seg) > button,:is(.ds,.sl,.ev,.cb) :is(.mt-seg:not([role="tablist"]),.cl-views,.sl-seg) > button:is(:first-child,:last-child){margin-left:0;border-radius:var(--r-md)}
  .ds .ds-tapmode .mf-chips{gap:6px}
  .ds .ds-tapmode .mf-chips label,.ds .ds-tapmode .mf-chips label:is(:first-of-type,:last-of-type){margin-left:0;border-radius:var(--r-md)}
  :is(.ds,.sl,.ev,.cb) .lf-card{padding:16px}
}

/* the same look for the other joined toggles these tools draw */
:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg){display:inline-flex;flex-wrap:wrap;row-gap:6px;max-width:100%}
:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg) > button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;margin-left:-1px;border:1px solid var(--rule2);border-radius:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-md);font-weight:400;line-height:1.25;cursor:pointer;position:relative}
:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg) > button:first-child{margin-left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg) > button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg) > button:hover{z-index:1;border-color:var(--ink)}}
:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg) > button[aria-pressed="true"]{z-index:2;background:var(--ink);border-color:var(--ink);color:var(--ground)}
:is(.ds,.sl,.ev,.cb) :is(.cl-views,.sl-seg) > button:focus-visible{z-index:3;outline:2px solid var(--ink);outline-offset:2px}

/* chips: a pill outline; a chosen chip sits on the selection fill with an ink edge */
:is(.ds,.sl,.ev,.cb) .fb-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-sm);font-weight:400}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) .fb-chip:hover{border-color:var(--ink)}}
:is(.ds,.sl,.ev,.cb) .fb-chip.inc{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink);padding:0 13.5px}
:is(.ds,.sl,.ev,.cb) .fb-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* forms: a label column in small muted words, fields at reading size with a control border */
:is(.ds,.sl,.ev,.cb) .lf-l{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);line-height:1.35}
:is(.ds,.sl,.ev,.cb) :is(select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),textarea){font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md)}
:is(.ds,.sl,.ev,.cb) :is(select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])){min-height:40px;padding:0 10px}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) :is(select,input,textarea):hover{border-color:var(--line-field)}}
:is(.ds,.sl,.ev,.cb) :is(select,input,textarea):focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
:is(.ds,.sl,.ev,.cb) input[type="search"]{font-family:var(--code)}
:is(.ds,.sl,.ev,.cb) input[type="search"]::placeholder{font-family:var(--sans);color:var(--faint)}
:is(.ds,.sl,.ev,.cb) .lf-check{font-size:var(--fs-md);color:var(--ink);gap:8px}
:is(.ds,.sl,.ev,.cb) .lf-check input{width:18px;height:18px;margin:0;accent-color:var(--ink)}

/* a panel: a hairline box, its heading in the reading face */
:is(.ds,.sl,.ev,.cb) .lf-card{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px;gap:14px}
:is(.ds,.sl,.ev,.cb) .lf-card > p{margin:0}
:is(.ds,.sl,.ev,.cb) .gf-h{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3;letter-spacing:0;color:var(--ink);margin:0 0 10px;align-items:baseline;gap:4px 10px}
:is(.ds,.sl,.ev,.cb) .gf-h span{font-weight:400;color:var(--muted);font-size:var(--fs-md)}
/* a section's heading: 18 px over the ink rule */
:is(.ds,.sl,.ev,.cb) .ds-sech{font-size:var(--fs-xl);margin:28px 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}

/* the notes: small, muted, and never wider than a reading line */
:is(.ds,.sl,.ev,.cb) .cl-small{font-size:var(--fs-sm);line-height:1.5}
:is(.ds,.sl,.ev,.cb) .ds-note{max-width:72ch}
:is(.ds,.sl,.ev,.cb) .ds-warn{color:var(--bad)}

/* disclosure lines ("How it works", "Advanced"): the reading face, the browser's own marker */
:is(.ds,.sl,.ev,.cb) :is(.ds-how,.ds-adv,.cb-how) > summary{display:list-item;min-height:0;padding:10px 0;font-size:var(--fs-md);color:var(--ink);cursor:pointer}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) :is(.ds-how,.ds-adv,.cb-how) > summary:hover{text-decoration:underline;text-underline-offset:3px}}
:is(.ds,.sl,.ev,.cb) :is(.ds-how,.ds-adv,.cb-how)[open] > summary{margin-bottom:6px}

/* tables: 16 px rows on hairlines, small muted headers in sentence case */
:is(.ds,.sl,.ev,.cb) .fr-t{font-size:var(--fs-lg)}
:is(.ds,.sl,.ev,.cb) .fr-t th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--rule2);vertical-align:bottom;white-space:normal;line-height:1.35}
:is(.ds,.sl,.ev,.cb) .fr-t td{padding:10px 12px;border-bottom:1px solid var(--rule)}
:is(.ds,.sl,.ev,.cb) .fr-t :is(th,td):first-child{padding-left:0}
:is(.ds,.sl,.ev,.cb) .fr-t :is(th,td):last-child{padding-right:0}

/* a card's name as a chip (a list of names) or as a link (inside a sentence) */
:is(.ds,.sl,.ev,.cb) .fr-card:not(.linkish){border-color:var(--rule2);font-family:var(--sans);font-size:var(--fs-sm);line-height:1.3;padding:5px 12px;background:var(--ground)}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) .fr-card:not(.linkish):hover{border-color:var(--ink)}}
:is(.ds,.sl,.ev,.cb) .fr-card.linkish{font-weight:700;color:var(--ink);text-decoration-color:var(--rule2);text-decoration-thickness:1px}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) .fr-card.linkish:hover{text-decoration-color:currentColor}}

/* a ledger: the counts in one bordered row split by hairlines */
/* (the hairlines between cells are shadows clipped at the box's edge, so a short last row leaves no gray hole) */
:is(.ds,.sl,.ev,.cb) .db-rstats.fr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:0 0 4px;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--ground)}
:is(.ds,.sl,.ev,.cb) .db-rstats.fr-stats > div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;border-radius:0;background:var(--ground);box-shadow:-1px 0 0 var(--rule),0 -1px 0 var(--rule)}
:is(.ds,.sl,.ev,.cb) .db-rstats.fr-stats b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700;line-height:1.2;color:var(--ink)}
:is(.ds,.sl,.ev,.cb) .db-rstats.fr-stats span{font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
@media (width < 720px){:is(.ds,.sl,.ev,.cb) .db-rstats.fr-stats{grid-template-columns:minmax(0,1fr)}}

/* buttons that are plain lines (the main action stays ink) */
:is(.ds,.sl,.ev,.cb) :is(.btn-sm,.btn-xs){font-family:var(--sans);border-color:var(--rule2)}
@media (hover:hover){:is(.ds,.sl,.ev,.cb) :is(.btn-sm,.btn-xs):not(.primary):hover:not([disabled]){border-color:var(--ink)}}
:is(.ds,.sl,.ev,.cb) .btn-sm{font-size:var(--fs-md);min-height:36px}
:is(.ds,.sl,.ev,.cb) .btn-sm.primary{font-weight:700}
:is(.ds,.sl,.ev,.cb) .btn-sm[disabled]{opacity:.45;cursor:default}

/* ================================================================ Draft Sim */
.ds{gap:18px;margin-top:4px}
.ds > *{min-width:0}
.ds > #ds-confirm:empty{display:none}

/* the setup */
.ds .ds-setup{gap:20px;max-width:820px}
.ds .ds-setup .lf-card{gap:16px}
.ds .ds-setup .lf-row{gap:8px 16px}
.ds .ds-setup .lf-l{min-width:10.5rem}
.ds .ds-setup .lf-row > select{min-width:min(22rem,100%)}
.ds .ds-plan{padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--fill);font-size:var(--fs-sm)}
.ds .ds-cubeopt .lf-l{min-width:0}
.ds .ds-gorow{margin-top:4px;padding-top:16px;border-top:1px solid var(--rule)}
.ds .ds-setup .ms-row:has(#ds-go){background:var(--ground)}
.ds #ds-go{min-height:44px;padding:0 28px;font-size:var(--fs-lg)}
.ds .ds-how p.ds-note + p.ds-note{margin-top:8px}
.ds .ds-adv .lf-row{margin-top:4px}
.ds .ds-setup input#ds-seed{font-family:var(--code);font-size:var(--fs-md);min-height:40px;border-color:var(--rule2);width:16rem}
.ds .lf-past{gap:0}
.ds .lf-past li{padding:12px 0;font-size:var(--fs-md);gap:8px 16px}
.ds .lf-past li:last-child{border-bottom:0}
@media (width < 720px){
  .ds .ds-setup .lf-card{padding:16px 16px 0}
  .ds .ds-setup .lf-row{flex-direction:column;align-items:stretch;gap:6px}
  .ds .ds-setup .lf-l{min-width:0}
  .ds .ds-setup .lf-row > select{min-width:0;width:100%}
  .ds .ds-setup .lf-card > :last-child{margin-bottom:16px}
  .ds .ds-setup .ms-row:has(#ds-go){margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-radius:0 0 var(--r-lg) var(--r-lg)}
  .ds .ds-setup .ms-row:has(#ds-go) + details{margin-top:4px}
  .ds .ds-cuberow{flex-direction:row!important;flex-wrap:wrap;align-items:end!important}
}

/* a draft's head: the set, the event and its choices, then two quiet actions */
.ds .ds-head{padding:0 0 14px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font-size:var(--fs-sm);align-items:flex-start;gap:10px 20px}
.ds .ds-head > div:first-child{flex:1 1 30rem;min-width:0;color:var(--muted);line-height:1.5}
.ds .ds-head > div:first-child > b{display:block;font-size:var(--fs-xl);line-height:1.3;color:var(--ink)}
.ds .ds-head > div:first-child > .cl-muted{font-size:var(--fs-sm)}
.ds .ds-head .ms-row{margin:0;flex:none}
.ds .ds-head .btn-xs{font-size:var(--fs-sm);min-height:36px;padding:0 12px;border-radius:var(--r-md)}
.ds .ds-ppturn{margin:8px 0 0;font-size:var(--fs-md);color:var(--ink)}
.ds .fr-confirm{border-color:var(--rule2);background:var(--fill);border-radius:var(--r-lg);padding:14px 16px;font-size:var(--fs-md)}

/* where you are: the pack and pick, its facts, the clock at the right */
.ds .ds-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.ds .ds-where h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0}
.ds .ds-where > .cl-muted{font-size:var(--fs-md)}
.ds .ds-where .ds-timer{margin-left:auto;align-self:center}
.ds .ds-timer{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;min-width:4.4em;padding:4px 14px;border:1.5px solid var(--rule2);background:var(--ground);line-height:1.3}
.ds .ds-timer.ds-low{border-color:var(--bad);color:var(--bad)}
.ds .ds-opts{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;margin-top:-6px}
.ds .ds-opts .lf-check{font-size:var(--fs-md)}
.ds .ds-away{border-color:var(--rule2);background:var(--fill);border-radius:var(--r-md);padding:10px 14px}
/* on a phone the pick's line and its clock stay in view under the top bar while the pack scrolls */
@media (width < 720px){
  .ds .ds-wpick:has(.ds-timer){position:sticky;top:var(--top-h);z-index:6;margin-inline:calc(-1 * var(--gut));padding:10px var(--gut);background:var(--ground);border-bottom:1px solid var(--rule)}
  .ds .ds-wpick:has(.ds-timer){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .ds .ds-wpick:has(.ds-timer) > h2{grid-column:1}
  .ds .ds-wpick:has(.ds-timer) > .cl-muted{grid-column:1}
  .ds .ds-wpick .ds-timer{grid-column:2;grid-row:1 / span 2;margin:0}
  .ds .ds-where h2{font-size:var(--fs-xl)}
  .ds .ds-where > .cl-muted{font-size:var(--fs-sm)}
  .ds .ds-head{gap:10px}
  .ds .ds-head > div:first-child{flex-basis:100%}
}

/* the pack: the pictures as they are, each with its own pick button under it */
.ds .ds-pack{gap:16px 14px}
.ds .ds-card:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 3px var(--ink),var(--shadow-2)}@media (hover:hover){.ds .ds-card:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--ink),var(--shadow-2)}}
.ds .ds-basic{outline-color:var(--rule2)}
.ds .ds-card .cl-fallback{font-size:var(--fs-sm);line-height:1.35;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border:1px solid var(--rule);background:var(--fill);color:var(--ink)}
.ds .ds-card .cl-fallback b{font-size:var(--fs-md)}
.ds .ds-card .cl-fallback .cl-fb-type{font-style:normal;color:var(--muted)}
.ds .ds-pickbtn.primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin-top:8px;background:var(--ground);border:1px solid var(--rule2);color:var(--ink);font-size:var(--fs-md);font-weight:700}
@media (hover:hover){.ds .ds-pickbtn.primary:hover{background:var(--fill);border-color:var(--ink)}}
.ds .ds-pickbtn.primary:active{background:var(--ink);border-color:var(--ink);color:var(--ground)}
/* a card's pick chance, under the picture rather than over its frame */
.ds .ds-val{position:static;transform:none;display:block;width:max-content;margin:6px auto 0;padding:1px 10px;border-radius:var(--r-pill);background:var(--fill);color:var(--ink);box-shadow:none;font-family:var(--sans);font-size:var(--fs-sm);font-weight:700}
.ds .ds-pairnote{margin:-4px 0 0;font-size:var(--fs-sm)}
.ds .ds-tapmode{margin:0}
.ds .ds-tapmode legend{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}
.ds .ds-tapmode .mf-chips{gap:0}
.ds .ds-tapmode .mf-chips label{min-height:40px;padding:0 14px;margin-left:-1px;border:1px solid var(--rule2);border-radius:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-md)}
.ds .ds-tapmode .mf-chips label:first-of-type{margin-left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
.ds .ds-tapmode .mf-chips label:last-of-type{border-radius:0 var(--r-md) var(--r-md) 0}
.ds .ds-tapmode .mf-chips input:checked + label{background:var(--ink);border-color:var(--ink);color:var(--ground);position:relative;z-index:1}
.ds .ds-tapmode .mf-chips input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px;position:relative;z-index:2}
@media (width < 720px){.ds .ds-pack{gap:14px 10px}}

/* your picks: a section under its rule, not a box */
.ds .ds-pool{gap:12px;padding:0;border:0;border-radius:0;background:none}
.ds .ds-pool > .gf-h{font-size:var(--fs-xl);margin:8px 0 0;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.ds .ds-pool > .gf-h span{font-size:var(--fs-lg)}
.ds .ds-colors{gap:6px 16px}
.ds .ds-cc{font-family:var(--sans);font-size:var(--fs-md);gap:5px}
.ds .ds-cc.cl-small{font-size:var(--fs-md);color:var(--muted)}
.ds .ds-cc.cl-small b{color:var(--ink)}
.ds .ds-picks{gap:8px}
.ds .ds-pool:has(.ds-picks:empty) .ds-curve{display:none}
.ds .ds-curve{height:96px;max-width:380px;gap:8px}
.ds .ds-curve span{font-family:var(--sans)}
.ds .ds-curve i{background:var(--muted);border-radius:var(--r-sm) var(--r-sm) 0 0}
.ds .ds-curve b{font-size:var(--fs-sm);font-weight:700;margin-top:4px}
.ds .ds-curve small{font-size:var(--fs-xs)}

/* the review period and the signals check: a hairline panel */
.ds .ds-drill{gap:14px;padding:20px 22px;border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--ground);max-width:880px}
.ds .ds-drill h2{font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.ds .ds-drill .ms-row{margin-top:2px}
.ds .ds-drillpick{gap:8px}
.ds .ds-dc{min-height:40px;padding:0 16px 0 12px;gap:8px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--ground);font-family:var(--sans);font-size:var(--fs-md)}
@media (hover:hover){.ds .ds-dc:hover:not([disabled]){border-color:var(--ink)}}
.ds .ds-dc[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);box-shadow:none}
.ds .ds-dc[disabled]{cursor:default;opacity:.7}
.ds .ds-drillres{gap:14px}
.ds .ds-drillres .fr-t td:not(:first-child),.ds .ds-drillres .fr-t th:not(:first-child){text-align:right}
.ds .ds-open td{background:var(--sel);font-weight:700}
.ds .ds-rev{border-color:var(--rule2)}
.ds .ds-hand{padding:40px 20px;gap:14px;justify-items:center}
.ds .ds-hand h2{font-size:var(--fs-xl)}
.ds .ds-hand .btn-sm{min-height:44px;padding:0 22px;font-size:var(--fs-lg)}

/* after the draft: the deck */
.ds .ds-body{gap:14px}
.ds .ds-body > p,.ds .ds-body > .ds-drillres > p{margin:0}
.ds .ds-deckhead{gap:12px}
.ds .ds-deckhead > p:first-child{font-size:var(--fs-lg);line-height:1.5}
.ds .ds-deckhead > p:first-child > b{font-size:var(--fs-xl)}
.ds .ds-deckhead .ms-row{margin-top:2px}
.ds .ds-basics{gap:10px 22px;padding:10px 0;border-block:1px solid var(--rule)}
.ds .ds-bas{font-family:var(--sans);gap:6px;font-size:var(--fs-lg)}
.ds .ds-bas .btn-xs{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;font-size:var(--fs-lg);line-height:1;border-radius:var(--r-md)}
.ds .ds-bas b{min-width:1.8em;font-weight:700}
.ds .ds-grid{gap:14px 10px}
.ds .ds-mv{min-height:34px;margin-top:6px;font-size:var(--fs-sm);border-radius:var(--r-md)}
.ds .ds-capwhat a,.ds .ds-ppnote a{color:var(--ink)}
.ds .ds-buildclock{font-size:var(--fs-md)}
.ds .ds-capseat{padding:14px 16px;border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.ds .ds-curve + .ds-grid{margin-top:8px}
.ds .ds-body > .ds-sech:first-of-type{margin-top:20px}

/* after the draft: the pick review, one row each on a hairline */
.ds .ds-review{gap:0;border-top:1px solid var(--rule)}
.ds .ds-rv{grid-template-columns:4rem minmax(0,1fr) auto;gap:4px 14px;padding:12px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font-size:var(--fs-md);line-height:1.55}
.ds .ds-rv small{font-size:var(--fs-sm);color:var(--muted)}
.ds .ds-rvn{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink);padding-top:1px}
.ds .ds-g{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding-top:1px}
.ds .ds-handed .ds-g{color:var(--faint)}
@media (width < 720px){.ds .ds-rv{grid-template-columns:3rem minmax(0,1fr)}.ds .ds-g{grid-column:2}}

/* after the draft: the table */
.ds .ds-seats td.ds-seat{font-weight:700;white-space:nowrap}
.ds .ds-seats td.fr-cards{display:table-cell;line-height:1.3}
.ds .ds-seats .fr-cards .fr-card{display:inline-flex;margin:0 6px 6px 0}
.ds .ds-seats td[data-l="Colors"]{white-space:nowrap}
@media (width < 720px){
  .ds .ds-seats td[data-l]::before{font-size:var(--fs-xs);color:var(--muted);text-transform:none}
  .ds .ds-seats td{padding-left:0}
}

/* the cube formats: the face-up logs, Rotisserie's columns, Winston's piles, the grid */
.ds .ds-cmlog .gf-h{margin-bottom:6px}
.ds .ds-cmtook{font-size:var(--fs-md);gap:4px;padding-left:1.8rem}
.ds .ds-cmtook .fr-card.linkish{font-weight:400}
.ds .ds-cmwho{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);min-width:5rem}
.ds .ds-cmphase{font-family:var(--sans);font-size:var(--fs-md);margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.ds .ds-rotbar{gap:10px 14px}
.ds .ds-rotbar input{font-family:var(--code);font-size:var(--fs-md);min-height:40px;border-color:var(--rule2)}
.ds .ds-rotcol .gf-h{padding-bottom:6px;border-bottom:1.5px solid var(--ink)}
.ds .ds-wpiles{gap:10px}
.ds .ds-wpile{padding:12px 14px;border:1px dashed var(--rule2);border-radius:var(--r-lg);background:var(--ground);font-size:var(--fs-md)}
.ds .ds-wpile b{font-size:var(--fs-lg)}
.ds .ds-won{border:1.5px solid var(--ink);box-shadow:none;background:var(--fill)}
.ds .ds-gempty{border-color:var(--rule2)}
.ds .ds-gcell.ds-gon .ds-card,.ds .ds-gcell.ds-gon.ds-gempty{outline-color:var(--ink)}
.ds .ds-glines{gap:8px}
/* Winston's and Grid's own buttons are the pick: full height */
.ds :is(.ds-cmacts .btn-sm,.ds-gline){min-height:44px;padding:0 16px}

/* the Captain chooser (a dialog of the site's own) */
.ds-capbox h2{font-size:var(--fs-xl);margin:0 0 10px}
.ds-capbox .gf-h{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:18px 0 8px}
.ds-capbox .gf-h span{font-weight:400;color:var(--muted)}
.ds-capbox .ds-capcands{gap:0;border-top:1px solid var(--rule)}
.ds-capbox .ds-capcands li{padding:10px 0;border-bottom:1px solid var(--rule);gap:6px 12px}
.ds-capbox .btn-sm{font-family:var(--sans);font-size:var(--fs-md)}
.ds-capbox .btn-sm:not(.primary){border-color:var(--rule2)}
.ds-capbox .fr-card{font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);padding:5px 12px}
.ds-capbox .ds-picks{display:flex;flex-wrap:wrap;gap:8px}
.ds-capbox .ds-warn{color:var(--bad)}

/* the daily pick */
.ds .dd{display:grid;gap:14px}
.ds .dd > .gf-h{font-size:var(--fs-xl);margin:0;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.ds .dd > .gf-h:focus{outline:none}
.ds .dd > .gf-h:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ds .dd > p{margin:0;max-width:80ch}
.ds .dd > p.cl-small:first-of-type{font-size:var(--fs-lg);color:var(--ink)}
.ds .dd > h3.gf-h{font-size:var(--fs-lg);margin:10px 0 0;padding:0;border:0}
.ds .dd .ms-row{margin-top:0}
.ds .dd-me td{background:var(--sel)}
.ds .dd-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-left:4px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-size:var(--fs-xs);font-weight:700;vertical-align:1px}
.ds .dd-t td:not(:nth-child(2)),.ds .dd-t th:not(:nth-child(2)){text-align:right;white-space:nowrap}
.ds .dd-t td:first-child,.ds .dd-t th:first-child{text-align:left}
.ds .dd-hist .lf-past li{display:block}
.ds .ds-daily{display:grid;gap:18px}
@media (width < 720px){
  .ds .dd-t thead{display:none}
  .ds .dd-t,.ds .dd-t tbody{display:block}
  .ds .dd-t tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .ds .dd-t td{border:0;padding:2px 0!important;text-align:left!important;white-space:normal!important}
  .ds .dd-t td[data-l="Card"]{grid-column:1 / -1;order:-1}
  .ds .dd-t td[data-l]::before{content:attr(data-l);display:block;font-size:var(--fs-xs);color:var(--muted)}
  .ds .dd-t td[data-l="Card"]::before{content:none}
}

/* ================================================================ Card Eval */
.ev{margin-top:4px}
/* the sets */
.ev .ev-sets{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:4px 0 14px}
.ev .ev-set{gap:6px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground);transition:border-color .12s}
@media (hover:hover){.ev .ev-set:hover{border-color:var(--ink);transform:none;text-decoration:none}}
.ev .ev-set:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ev .ev-set-code{display:inline-flex;align-items:center;gap:8px;font-family:var(--code);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--ink)}
.ev .ev-set-code .ss{background:var(--ink);width:1.5em;height:1.5em;margin:0}
.ev .ev-set b{font-size:var(--fs-xl);line-height:1.3}
.ev .ev-set-meta,.ev .ev-set-prog{font-size:var(--fs-sm);color:var(--muted)}
.ev .ev-bar{height:4px;background:var(--fill);border-radius:var(--r-pill)}
.ev .ev-bar i{background:var(--ink)}
.ev .ev-setsnote{margin:0;max-width:80ch}

/* one set: its name is this view's title; the three views; the progress */
.ev .ev-top{margin:0 0 4px}
.ev .ev-top-row{margin:4px 0 12px;gap:12px 20px}
.ev .ev-top h1{font-size:var(--fs-title);font-weight:700;line-height:1.2;letter-spacing:-.015em;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.ev .ev-top h1 .tag-set{margin:0;font-family:var(--code);font-size:13px;color:var(--ink)}
.ev .ev-prog{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);gap:14px;max-width:560px}
.ev .ev-prog b{color:var(--ink)}
.ev .ev-filters{gap:10px 14px;margin:0 0 20px;padding:14px 0;border-color:var(--rule)}
.ev .ev-fchips{gap:6px}
.ev .ev-fchips .fb-chip .ms-sym{width:1.15em;height:1.15em}
.ev .ev-filters :is(select,input){min-height:40px;padding:0 10px;border:1px solid var(--rule2);border-radius:var(--r-md);font-size:var(--fs-md)}
.ev .ev-filters input{font-family:var(--code)}
.ev .ev-filters > .cl-small{font-size:var(--fs-sm)}

/* grading one card */
.ev .ev-focus{gap:32px}
.ev .ev-img{box-shadow:none;border-radius:var(--r-card)}
.ev .ev-text{border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground);padding:14px 16px;font-size:var(--fs-md)}
.ev .ev-card:not(.noimg) .ev-text{font-size:var(--fs-sm)}
.ev .ev-text-t span{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.ev .ev-text-pt{font-family:var(--sans)}
.ev .ev-side{gap:16px}
.ev .ev-pos{font-family:var(--sans);font-size:var(--fs-md);color:var(--muted);gap:8px 10px}
.ev .ev-pos span{min-width:5.5em;text-align:center;color:var(--ink)}
.ev .ev-pos .btn-sm{min-height:var(--ctl-h);padding:0 14px}
.ev .ev-grades{gap:6px}
.ev .ev-grades button{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;min-height:48px;padding:0;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground)}
@media (hover:hover){.ev .ev-grades button:hover{border-color:var(--ink)}}
.ev .ev-grades button.sug{border:1.5px dashed var(--ink)}
.ev .ev-grades button.on{background:var(--ink);border:1px solid var(--ink);color:var(--ground)}
.ev .ev-grades button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ev .ev-scale{font-size:var(--fs-lg)}
.ev .ev-machine{border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground);padding:4px 18px 16px}
.ev .ev-machine summary{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);padding:12px 0}
.ev .ev-machine summary b{color:var(--ink)}
.ev .ev-mrow{gap:6px;margin:12px 0}
.ev .ev-mrow > span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.ev .ev-mrow > div{gap:6px 18px}
.ev .ev-machine label{font-size:var(--fs-md);display:inline-flex;align-items:center;gap:8px}
.ev .ev-mcheck{display:flex!important;margin:10px 0}
.ev .ev-machine input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.ev .ev-machine small{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.ev .ev-mfoot{font-size:var(--fs-sm);margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.ev .ev-note span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.ev :is(.ev-note,.ev-check-in,.ev-misses) textarea{border:1px solid var(--rule2);border-radius:var(--r-md);font-size:var(--fs-lg);padding:10px 12px}
.ev .ev-keys{font-size:var(--fs-sm);line-height:1.9}
.ev .ev-keys kbd{font-family:var(--code);font-size:13px;border-color:var(--rule2);background:var(--fill);padding:1px 5px}

/* the whole sheet */
.ev .ev-table{font-size:var(--fs-md)}
.ev .ev-table th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.ev .ev-table :is(select,input){min-height:36px;padding:0 8px;font-size:var(--fs-md);border:1px solid var(--rule2)}
.ev .ev-table .db-rname{font-weight:700;text-align:left}

/* check yourself */
.ev .ev-check-in{border-color:var(--rule);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:10px}
.ev .ev-check-in h3{margin:0}
.ev .ev-builtin{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--rule);border-radius:var(--r-lg)}
.ev .ev-builtin p{flex:1 1 24rem;margin:0}
.ev .ev-check-in p{margin:0;max-width:80ch}
.ev .ev-check-in .ms-row{margin-top:2px}
.ev .ev-metric{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
.ev .ev-metric select{min-height:40px;padding:0 10px;border:1px solid var(--rule2)}
.ev .ev-score{gap:14px 24px;margin:4px 0 8px}
.ev .ev-score .mb-big{border-color:var(--rule);border-radius:var(--r-lg);padding:16px 18px;background:var(--ground)}
.ev .ev-score .mb-big b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700}
.ev .mb-h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin:28px 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink);text-transform:none;letter-spacing:0}
.ev .ev-tiers{gap:10px}
.ev .ev-tier b{font-family:var(--sans)}
.ev .ev-tbar{height:8px;background:var(--fill)}
.ev .ev-tbar i{background:var(--ink)}
.ev .ev-tval{font-family:var(--sans);font-size:var(--fs-md);font-weight:700}
.ev .ev-clusters ul{font-size:var(--fs-md);gap:0}
.ev .ev-clusters li{padding:8px 0;border-bottom:1px solid var(--rule)}
.ev .ev-clusters small{font-family:var(--sans);color:var(--muted)}
.ev .ev-clusters b{font-size:var(--fs-lg)}
.ev :is(.ev-hi,.ev-lo){color:var(--ink);font-weight:700}
.ev .ev-misses ol{gap:14px}
.ev .ev-miss-h{font-size:var(--fs-lg)}
.ev .ev-miss-h span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.ev .ev-miss-d{color:var(--muted)!important}
@media (width < 720px){
  .ev .ev-grades{left:0;right:0;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));background:var(--ground);box-shadow:none;border-top:1px solid var(--rule2)}
  .ev .ev-grades button{min-height:44px}
}

/* ================================================================ Set Lab */
.sl{margin-top:4px}
/* what the page counts: one hairline panel of choices */
.sl .sl-bar{gap:12px 24px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.sl .sl-bar:has(.sl-opts){padding:16px 18px 14px}
.sl .sl-cl{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.sl .sl-sel{font-family:var(--sans);font-size:var(--fs-lg);min-height:40px;padding:0 10px;border:1px solid var(--rule2)}
.sl .sl-seg{border:0;border-radius:0;overflow:visible;background:none}
.sl .sl-seg > button{border-right:1px solid var(--rule2)}
.sl .sl-seg > button[aria-pressed="true"]{font-weight:400;border-right-color:var(--ink)}
.sl .sl-check{font-size:var(--fs-md)}
.sl .sl-check input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.sl .sl-key{font-size:var(--fs-sm);gap:6px 10px}
.sl .sl-platnote{font-size:var(--fs-sm)}
.sl .sl-opts > summary{font-size:var(--fs-md)}
/* what each number is: a plain count, read from the text, or an estimate (dashed: it is worked out, not counted) */
.sl .sl-k{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;color:var(--ink);white-space:nowrap;vertical-align:3px;letter-spacing:0}
.sl .sl-k-n{background:var(--fill);border:1px solid var(--fill)}
.sl .sl-k-r{background:var(--ground);border:1px solid var(--rule2)}
.sl .sl-k-e{background:var(--ground);border:1px dashed var(--muted)}
.sl .sl-k-g{background:var(--ground);border:1px solid var(--ink)}
/* real games (17Lands' public game data, October 18, 2026) */
.sl .sl-gctl{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0 8px}
.sl .sl-gr{font-weight:700}
.sl .sl-gcards td small,.sl .sl-gpairs td small{white-space:nowrap}
/* on a phone the two tables scroll sideways: whole words in the headers, and the caption stays on screen */
.sl .sl-gcards th,.sl .sl-gpairs th{overflow-wrap:normal;word-break:normal}
.sl .sl-gcards thead th,.sl .sl-gpairs thead th{min-width:4.5em}
.sl .sl-gcards .sl-cap,.sl .sl-gpairs .sl-cap{max-width:calc(100vw - 32px);text-align:left}
/* the set */
.sl .sl-head{padding:22px 0 0;gap:4px 16px}
.sl .sl-title{font-size:var(--fs-xl);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 4px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.sl .sl-title .ss{background:var(--ink);width:1.1em;height:1.1em;vertical-align:0}
.sl .sl-title .cl-muted{font-family:var(--code);font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
.sl .sl-head p{font-size:var(--fs-sm)}
.sl .sl-head a,.sl .sl-links a{color:var(--ink)}
.sl .sl-toc ul{font-family:var(--sans);font-size:var(--fs-md);gap:6px 20px;margin:16px 0 0;padding:12px 0;border-block:1px solid var(--rule)}
.sl .sl-toc a{color:var(--ink);text-decoration-color:var(--rule2)}
@media (hover:hover){.sl .sl-toc a:hover{text-decoration-color:currentColor}}
/* each section: its name over the ink rule */
.sl .sl-sec{margin:44px 0 0;padding-top:0;border-top:0}
.sl .sl-sec > h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:var(--fs-xl);font-weight:700;line-height:1.3;margin:0 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.sl .sl-sec > h2 .sl-tags{margin-left:auto}
.sl .sl-sec h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);text-transform:none;margin:28px 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.sl .sl-lead{font-size:var(--fs-md);line-height:1.55;color:var(--muted);max-width:75ch}
.sl .sl-sec.sl-glance{margin-top:32px}
.sl .sl-sec.sl-glance > h2{margin-bottom:0}
.sl .sl-find{gap:0}
.sl .sl-find li{flex-direction:column;align-items:flex-start;padding:12px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font-size:var(--fs-md);line-height:1.5;gap:6px}
.sl .sl-find .sl-tags{flex:none}
@media (width >= 1024px){
  .sl .sl-glance .sl-find{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:0}
  .sl .sl-glance .sl-find li{font-size:var(--fs-md);padding:12px 0;line-height:1.5}
}
/* the tables */
.sl .sl-tw{margin:8px 0 12px}
.sl .sl-t{font-size:var(--fs-md)}
.sl .sl-t th,.sl .sl-t td{padding:9px 12px}
.sl .sl-t :is(th,td):first-child{padding-left:0}
.sl .sl-t thead th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);vertical-align:bottom;border-bottom-color:var(--rule2);line-height:1.35}
.sl .sl-cap{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding:0 0 8px}
.sl .sl-t tr.sl-me :is(th,td){background:var(--sel)}
.sl .sl-t tr.sl-th th{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;background:var(--fill);padding-left:10px}
.sl .sl-n{color:var(--ink);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--muted);text-underline-offset:3px}
@media (hover:hover){.sl .sl-n:hover{text-decoration-style:solid;text-decoration-color:var(--ink)}}
.sl .sl-n:focus-visible{outline-color:var(--ink)}
.sl .sl-cp{font-size:var(--fs-sm)}
/* the pairs: closed blocks on hairlines */
.sl .sl-pair{border-color:var(--rule);border-radius:var(--r-lg);background:var(--ground);margin:10px 0}
.sl .sl-pair > summary{padding:14px 16px;font-size:var(--fs-lg);gap:6px 10px;align-items:center}
.sl .sl-pair > summary .cl-small{font-size:var(--fs-sm)}
.sl .sl-pair > summary:focus-visible{outline-color:var(--ink)}
.sl .sl-pair[open] > summary{border-bottom-color:var(--rule)}
.sl .sl-pairb{padding:8px 16px 16px}
.sl :is(.sl-txt,.sl-rules,.sl-av) > summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);padding:8px 0}
@media (hover:hover){.sl :is(.sl-txt,.sl-rules,.sl-av) > summary:hover{text-decoration:underline;text-underline-offset:3px}}
.sl .sl-how > summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);padding:8px 0}
.sl .sl-wants{font-size:var(--fs-md)}
.sl .sl-limits{font-size:var(--fs-md);line-height:1.6}
.sl .sl-limits li + li{margin-top:8px}
@media (width < 720px){
  .sl .sl-bar{padding:14px}
  .sl .sl-t{font-size:var(--fs-sm)}
  .sl .sl-t :is(th,td){padding:6px 4px}
  .sl .sl-t :is(th,td):first-child{padding-left:0}
  .sl .sl-t thead th{font-size:var(--fs-xs);overflow-wrap:anywhere}
  .sl .sl-stack td[data-l]::before{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
  .sl .sl-stack tr{padding:10px 0}
  .sl .sl-stack :is(th,td){padding:2px 14px 2px 0}
  .sl .sl-stack th{padding-bottom:4px}
  .sl .sl-sec > h2 .sl-tags{margin-left:0}
}
/* a list of cards behind a number (a dialog of the site's own) */
.sl-mh{font-size:var(--fs-xl)}
.sl-lt thead th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
.sl-lt :is(th,td){padding:8px 10px}
.sl-lt a{color:var(--ink)}

/* ================================================================ Cube Generator */
.cb{gap:20px;margin-top:4px}
.cb > *{min-width:0}
.cb .cb-home{gap:20px}
.cb .cb-kind{margin:0}
.cb .lf-l{min-width:9.5rem}
/* the night first: a filled block inside the builder */
.cb .cb-night{padding:14px 16px;border:0;border-radius:var(--r-md);background:var(--fill);margin:0}
.cb .cb-night .cl-small{font-size:var(--fs-md)}
.cb :is(.cb-night,.cb-popt) label,.cb .cb-popt > span:not(.cb-step){font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cb .cb-popt{font-family:var(--sans);font-size:var(--fs-sm);gap:6px}
.cb .cb-prow{gap:12px 20px}
.cb .cb-need{font-family:var(--sans);font-weight:700}
.cb p.cb-need{font-weight:400;font-size:var(--fs-md);line-height:1.55;margin:4px 0 0;max-width:80ch}
.cb .cb-need.cb-short{border-left:3px solid var(--bad);padding-left:12px}
.cb .cb-inline input{width:6rem}
.cb .cb-home input#cb-seed{font-family:var(--code);font-size:var(--fs-md)}
.cb .cb-home input#cb-budget{width:8rem}
.cb #cb-go{min-height:44px;padding:0 28px;font-size:var(--fs-lg)}
.cb .cb-build .ms-row:has(#cb-go){margin-top:4px;padding:12px 0;background:var(--ground)}
.cb .cb-how > summary{display:list-item}
.cb .cb-funnel{display:grid;gap:10px;margin-top:4px}
.cb .cb-fun{font-size:var(--fs-md);gap:4px}
.cb .cb-fun b{font-family:var(--sans)}
/* the rules and the thresholds: closed panels on hairlines */
.cb :is(.cb-rules,.cb-thrs){border-color:var(--rule);border-radius:var(--r-lg);padding:4px 16px;background:var(--ground)}
.cb :is(.cb-rules,.cb-thrs)[open]{padding-bottom:16px}
.cb :is(.cb-rules,.cb-thrs,.cb-rulesx,.cb-ndeck) > summary{display:list-item;min-height:0;padding:10px 0;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
@media (hover:hover){.cb :is(.cb-rules,.cb-thrs,.cb-rulesx) > summary:hover{text-decoration:underline;text-underline-offset:3px}}
.cb .cb-fs{gap:4px 18px}
.cb .cb-fs legend{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);padding-bottom:6px}
.cb .cb-chk{font-size:var(--fs-md)}
.cb .cb-per{font-size:var(--fs-md);gap:6px 16px}
.cb .cb-per input{width:4.5rem;margin-left:6px}
.cb .cb-thrgrid{gap:10px 28px;margin:10px 0 14px}
.cb .cb-thr{font-size:var(--fs-md)}
.cb .cb-thr input{width:5.5rem}
/* chosen sets: a list of buttons, a chosen one on the selection fill with an ink edge */
.cb .cb-setlist{gap:8px;padding:8px;border-color:var(--rule);border-radius:var(--r-lg);background:var(--fill)}
.cb .cb-set{gap:2px;padding:10px 12px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);font-size:var(--fs-md)}
.cb .cb-set span{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.cb .cb-set:focus-visible{border-color:var(--ink)}@media (hover:hover){.cb .cb-set:hover{border-color:var(--ink)}}
.cb .cb-set[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);box-shadow:none;padding:9.5px 11.5px}
.cb .cb-unset{font-family:var(--sans);border-color:var(--rule2)}
.cb .cb-unset:focus-visible{color:var(--ink);border-color:var(--ink)}@media (hover:hover){.cb .cb-unset:hover{color:var(--ink);border-color:var(--ink)}}
.cb .cb-chosen .fr-t{font-size:var(--fs-md)}
.cb .cb-sett td[data-l="Released"]{white-space:nowrap}
.cb .cb-sizelist{font-size:var(--fs-md);gap:8px}
.cb .cb-sizelist a,.cb .cb-capline a,.cb .cb-holds a{color:var(--ink)}
/* lists you type or paste, and the lists to copy: the mono face */
.cb :is(#cb-paste,.cb-export textarea){font-family:var(--code);font-size:var(--fs-sm);line-height:1.5;padding:10px 12px}
/* a Captain cube */
.cb .cb-arith{font-size:var(--fs-md);gap:6px;padding-left:1.4rem}
.cb .cb-capt{margin:4px 0}
.cb .cb-holds{padding:12px 14px;border-color:var(--rule);border-radius:var(--r-lg);background:var(--fill)}
.cb .cb-gc{font-family:var(--code);font-size:13px;border-color:var(--rule2);color:var(--ink)}

/* one cube: its name is the view's title (an editable field), its facts, its actions */
.cb .cb-top{padding:0 0 16px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;align-items:flex-start;gap:12px 24px}
.cb .cb-title{gap:4px}
#cb-app .cb-title input,#cb-app .cb-title input:is(:hover,:focus){font-family:var(--sans)!important;font-size:var(--fs-title)!important;font-weight:700;letter-spacing:-.015em;line-height:1.2;padding:2px 8px;margin-left:-9px;min-height:0;width:100%;border:1px solid transparent;border-radius:var(--r-md);background:none}
@media (hover:hover){#cb-app .cb-title input:hover{border-color:var(--rule2)}}
#cb-app .cb-title input:focus-visible{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.cb .cb-title .cl-small{font-size:var(--fs-sm)}
.cb .cb-top .ms-row{margin:0;justify-content:flex-end;flex:1 1 20rem}
.cb .cb-drafthint,.cb .cb-pphint{margin:0;text-align:right}
.cb .cb-body{gap:16px}
/* the list: each color a column under its rule, a hairline between cards */
.cb .cb-add{gap:8px 12px}
.cb .cb-add input{width:20rem;min-height:40px;border:1px solid var(--rule2);font-size:var(--fs-lg)}
.cb .cb-cols{gap:24px 28px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cb .cb-col,.ds .cb-col{padding:0;border:0;border-radius:0;background:none}
:is(.cb,.ds) .cb-col .gf-h{margin:0;padding-bottom:6px;border-bottom:1.5px solid var(--ink);display:flex;align-items:center;gap:6px}
:is(.cb,.ds) .cb-col li{font-size:var(--fs-md);padding:5px 0;border-bottom:1px solid var(--rule)}
:is(.cb,.ds) .cb-col li:last-child{border-bottom:1px solid var(--rule)}
:is(.cb,.ds) .cb-card{font-size:var(--fs-md)}
:is(.cb,.ds) .cb-card:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}@media (hover:hover){:is(.cb,.ds) .cb-card:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}}
.cb .cb-x{color:var(--muted)}
.cb .cb-x:focus-visible{color:var(--ink);background:var(--hover)}@media (hover:hover){.cb .cb-x:hover{color:var(--ink);background:var(--hover)}}
.cb .cb-x2{font-family:var(--sans);font-size:var(--fs-sm)}
.cb .cb-tot{font-weight:400;color:var(--muted)}
/* the planner */
.cb .cb-plan{gap:16px}
.cb .cb-step .btn-sm{min-width:var(--ctl-h);min-height:var(--ctl-h);padding:0 12px}
.cb .cb-step output{font-family:var(--sans);font-size:var(--fs-xl)}
.cb .cb-captain > .gf-h{margin-top:8px}
/* balance */
.cb .cb-nightline{font-size:var(--fs-md);line-height:1.55}
.cb :is(.cb-flags,.cb-ok){border-color:var(--rule);background:var(--fill);border-radius:var(--r-lg);font-size:var(--fs-md)}
.cb .cb-flags{gap:6px;padding:14px 16px 14px 34px}
.cb .cb-body > .gf-h{font-size:var(--fs-xl);margin:16px 0 0;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
/* export, cube night */
.cb .cb-export{gap:32px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.cb .cb-export section{gap:10px;align-content:start}
.cb .cb-body > .db-rstats.fr-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (width >= 1100px){.cb .cb-body > .db-rstats.fr-stats{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (width < 720px){.cb .cb-body > .db-rstats.fr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cb .cb-export .gf-h{margin:0;padding-bottom:6px;border-bottom:1.5px solid var(--ink)}
.cb .cb-nightbox{display:grid;gap:12px}
.cb .cb-nightbox p{margin:0}
@media (width < 720px){
  .cb .lf-l{min-width:0}
  .cb .cb-top .ms-row{justify-content:flex-start}
  .cb .cb-drafthint,.cb .cb-pphint{text-align:left}
  .cb .cb-add input{width:100%}
  :is(.cb,.ds) :is(.cb-bt,.cb-sett) td[data-l]::before{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
}
/* a match for the night (a dialog of the site's own) */
.cb-ndeck > summary{font-size:var(--fs-md)}
/* touch targets on a phone: Set Lab's toggles and the real games and built-in check buttons reach 44 px (40 and 36 px
   were too small to tap reliably) */
@media (width < 720px){
  .sl .sl-seg > button{min-height:44px}
  .sl #sl-games .btn-sm,.ev .ev-builtin .btn-sm{min-height:44px}
  .sl .sl-how > summary{padding:11px 0}
}

/* ---------------------------------------------------------------- Film Room's event desk: this week on Arena and the road to an
   invitation (October 18, 2026). The desk's other rules live with Film Room's (h_table.css); these classes are new */
.fr .fr-desk .fr-h4{margin:6px 0 0;font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.fr .fr-cal{list-style:none;margin:0;padding:0;display:grid;max-width:900px}
.fr .fr-calrow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--rule)}
.fr .fr-calrow:first-child{border-top:1px solid var(--rule)}
.fr .fr-calwhat{flex:1 1 16rem;min-width:0;line-height:1.45;overflow-wrap:anywhere}
.fr .fr-callinks{display:flex;flex-wrap:wrap;gap:6px}
.fr .fr-callinks .btn-xs{display:inline-flex;align-items:center;min-height:32px}
.fr .fr-calall>summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-size:var(--fs-md);color:var(--ink)}
.fr .fr-calall[open]>summary{margin-bottom:6px}
.fr .fr-calold{color:var(--ink);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);padding:8px 12px;margin:0}
.fr .fr-road{max-width:900px}
.fr .fr-road caption{text-align:left}
.fr .fr-road tbody th{font-weight:700;color:var(--ink);font-size:var(--fs-sm);min-width:9rem;vertical-align:top}
.fr .fr-road td{vertical-align:top}
.fr .fr-road td:nth-child(3),.fr .fr-road td:nth-child(4){min-width:9.5rem}
.fr .fr-roadk{grid-column:1 / -1}
.fr .fr-roadk select{max-width:36rem}
#fr-road-ptsl[hidden]{display:none}
@media (width < 720px){
  .fr .fr-callinks .btn-xs{min-height:44px}
  .fr .fr-calall>summary{min-height:44px}
}
@media (width < 720px){
  .fr .fr-road,.fr .fr-road tbody,.fr .fr-road tr,.fr .fr-road th,.fr .fr-road td{display:block;width:auto}
  .fr .fr-road thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fr .fr-road caption{display:block;text-align:left;padding:0 0 6px}
  .fr .fr-road tr{padding:8px 0;border-bottom:1px solid var(--rule)}
  .fr .fr-road tbody th{padding:0 0 4px;border:0;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .fr .fr-road td{padding:2px 0;border:0;display:grid;grid-template-columns:minmax(8rem,45%) 1fr;gap:8px;font-size:var(--fs-md)}
  .fr .fr-road td::before{content:attr(data-l);color:var(--muted);font-size:var(--fs-sm)}
  /* the chance of each final result: at 320 to 390 px the "Also" words ran past the box (a 20% chance of a second
     pack, mythic packs); tighter cells leave them room */
  .fr .fr-evd th,.fr .fr-evd td{padding-left:6px;padding-right:6px}
  .fr .fr-evd td:first-child{min-width:0}
}

/* ---------------------------------------------------------------- Set Lab's real games: the event switch, week by week and
   the decks of a color pair (October 18, 2026) */
.sl .sl-h3{margin:28px 0 6px;font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.sl .sl-h4{margin:18px 0 4px;font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.sl #sl-games>.sl-ctl:first-of-type{margin:4px 0 10px}
.sl .sl-gwpairs td,.sl .sl-gwpairs th{white-space:nowrap}
.sl .sl-gdeck td{font-variant-numeric:tabular-nums}
.sl .sl-gdeck th:not(:first-child),.sl .sl-gdeck td{text-align:right}
.sl .sl-gdeck td{white-space:nowrap}
.sl .sl-gdeck th small{display:block;font-weight:400}

/* ---------------------------------------------------------------- Draft Sim: a draft in a link for review (October 18, 2026) */
.ds .ds-rdbox{display:grid;gap:8px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);max-width:860px}
.ds .ds-rdbox .gf-h{margin:0}
.ds .ds-rdbox p{margin:0}
.ds .ds-rdl{font-size:var(--fs-sm);color:var(--muted)}
.ds .ds-rdta{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md);padding:6px 10px;min-height:44px;resize:vertical}
.ds .ds-rdta[hidden]{display:none}
.ds .ds-rdurl{display:block;width:100%;box-sizing:border-box;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md);padding:6px 10px;min-height:40px}
.ds #ds-rd-out{display:grid;gap:8px}
.ds .ds-rdnw{display:grid;gap:6px;margin-top:6px;justify-items:start}
.ds .ds-rdnw .btn-xs{min-height:32px}
.ds .ds-rdnw .ds-rdta{max-width:36rem}
.ds .ds-rdn{display:block;margin-top:6px;padding:6px 10px;border-left:3px solid var(--rule2);background:var(--fill);color:var(--ink);font-size:var(--fs-sm);overflow-wrap:anywhere}
.ds .ds-shared{display:grid;gap:10px;min-width:0}
.ds .ds-shared>p{margin:0}
.ds .ds-shared code{font-family:var(--mono);overflow-wrap:anywhere}
.ds .ds-rdall{margin:0;padding:10px 14px;border-left:3px solid var(--ink);background:var(--fill);color:var(--ink);overflow-wrap:anywhere;max-width:860px}
.ds .ds-shdeck{list-style:none;margin:0;padding:0;columns:2 14rem;column-gap:24px;font-size:var(--fs-md)}
.ds .ds-shdeck li{break-inside:avoid;padding:2px 0}
@media (width < 720px){
  .ds .ds-rdnw .btn-xs,.ds #ds-sh-seed{min-height:44px}
}
/* ---------------------------------------------------------------- Wildcard Planner, packs and sets: packs or a draft. On a
   phone the eight columns ran to 680 px and the entry words wrapped one to a line; each event stacks, every number
   under its column's name (October 18, 2026, round two) */
@media (width < 720px){
  .ap-sec .ap-dr,.ap-sec .ap-dr tbody,.ap-sec .ap-dr tr,.ap-sec .ap-dr th,.ap-sec .ap-dr td{display:block;width:auto}
  .ap-sec .ap-dr thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ap-sec .ap-dr tr{padding:8px 0;border-bottom:1px solid var(--rule)}
  .ap-sec .ap-dr tbody th{padding:0 0 4px;border:0;min-width:0;white-space:normal;overflow-wrap:anywhere;font-weight:700}
  .ap-sec .ap-dr td{padding:2px 0;border:0;display:grid;grid-template-columns:minmax(8rem,50%) 1fr;gap:8px;min-width:0;text-align:left}
  .ap-sec .ap-dr td::before{content:attr(data-l);color:var(--muted);font-size:var(--fs-sm)}
}
.sl .sl-pvf{max-width:9rem}
.sl #sl-pv-h:focus{outline:none}
.sl #sl-pv-h:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (width < 720px){
  .sl #sl-pv-go{min-height:44px}
}
/* the real-games pickers (a week's card, a color pair's decks, compare my deck) sit in the section the touch check reads:
   44 px tall on phones and touch screens, as every control on a phone (October 21, 2026) */
@media (max-width:720px),(pointer:coarse){#sl-games .sl-sel{min-height:44px}}
/* a shared draft's card names stand alone in lists, so on a touch screen each gets a full 44 px target */
@media (pointer:coarse){.ds .ds-shared .fr-card.linkish{display:inline-flex;align-items:center;min-height:44px}}
/* ---------------------------------------------------------------- Wildcard Planner and Cube Generator, October 21, 2026:
   where a card leaving Standard stays legal on Arena, the Alchemy notice, and the note on a cube's card pool */
#wc-app .wc-flag.stay{background:var(--fill);color:var(--ink);border:1px solid var(--rule)}
#wc-app .wc-alch{margin:0;padding:10px 14px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-md);line-height:1.5;max-width:90ch}
#wc-app .wc-alch a{color:inherit}
#cb-app .cb-lvnote{margin:4px 0 0;max-width:80ch}

/* ================================================================ v1.0, group E: compete, at the table, and you
   Meta Lens, Matchup Lab, Film Room, Life Log, Captain, My Stuff (the hub, the game diary, display, backup) and the
   year in review. Loads after styles.css and shell.css, so where these say something about the same thing, this wins.
   Every rule is scoped to these tools' own boxes, so the shared class names (mt-seg, btn-sm, db-panel) keep their old
   look on the other tools' pages. */

/* ---------------------------------------------------------------- shared inside these tools */
:is(#mt-app,.mt-drawer,#mu-app,#fr-app,#lf-app,#me-app,#cap-app,.lf-panel,#pd-app) input:is([type=checkbox],[type=radio],[type=range]){accent-color:var(--ink)}
/* segmented toggles (two to five choices): joined hairline segments, the chosen one ink */
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg{display:inline-flex;flex-wrap:nowrap}
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;line-height:1.25;min-height:36px;padding:0 12px;margin-left:-1px;background:var(--ground);color:var(--ink);border:1px solid var(--rule2);border-radius:0;cursor:pointer;white-space:nowrap}
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button:first-child{margin-left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button:only-child{border-radius:var(--r-md)}
@media (hover:hover){:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button:hover{background:var(--hover);position:relative;z-index:1}}
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button:is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"]){background:var(--ink);border-color:var(--ink);color:var(--ground);position:relative;z-index:2}
:is(#mt-app,.mt-drawer,#fr-app,#lf-app,#me-app,#pd-app) .mt-seg button:focus-visible{position:relative;z-index:3}

/* the loading placeholder's line repeats the page header's, so it stays hidden here */
:is(#mt-app,#mu-app,#fr-app,#lf-app,#me-app,#pd-app) .shell-lede{display:none}

/* ---------------------------------------------------------------- Meta Lens */
/* the count of lists on file, in the page header's right slot */
.ph-x .mt-stat{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);text-align:right;max-width:min(24rem,100%);min-width:0;white-space:normal;overflow-wrap:anywhere}
p.mt-stat{margin:0 0 12px;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
@media (width < 720px){.ph-x .mt-stat{text-align:left}}
/* the bar: the formats as underline tabs, then the window, source and event controls */
.mt .mt-bar{margin:0 0 28px;padding:0 0 14px;gap:14px;border-bottom:1px solid var(--rule)}
.mt .mt-tabs{gap:24px;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.mt .mt-tabs::-webkit-scrollbar{display:none}
.mt .mt-tabs button{font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;min-height:44px;padding:0 2px;margin:0;border:0;border-radius:0;background:none;color:var(--muted);box-shadow:none;cursor:pointer;white-space:nowrap}
@media (hover:hover){.mt .mt-tabs button:hover{color:var(--ink)}}
.mt .mt-tabs button[aria-selected="true"]{color:var(--ink);background:none;box-shadow:inset 0 -2px 0 var(--ink)}
.mt .mt-ctrls{gap:10px 20px;font-size:var(--fs-sm);color:var(--ink)}
#mt-app .mt-seg button.off{color:var(--muted);border-style:dashed;cursor:help}
#mt-app .mt-seg button.off small{font-size:var(--fs-sm)}
.mt .mt-sel{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.mt .mt-sel select,.mt-fctrl .mt-sel select{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.mt .mt-kinds{gap:6px 18px;color:var(--ink)}
.mt .mt-kinds label{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer}
.mt .mt-kinds input{margin:0;width:16px;height:16px}
.mt .mt-feednote{border-color:var(--rule);background:var(--fill);color:var(--ink);font-size:var(--fs-sm)}
/* the six counts: one ledger strip, split by hairlines */
.mt .mt-kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin:0 0 32px}
.mt .mt-kpi{background:var(--ground);border:0;border-radius:0;padding:14px 16px 12px;gap:2px;min-width:0}
.mt .mt-kpi b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.mt .mt-kpi span{font-size:var(--fs-sm);line-height:1.35;color:var(--muted)}
@media (width < 1100px){.mt .mt-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width < 720px){.mt .mt-kpis{gap:1px;margin-bottom:24px}.mt .mt-kpi{padding:10px 10px 8px}.mt .mt-kpi b{font-size:var(--fs-xl)}.mt .mt-kpi span{font-size:var(--fs-xs)}}
/* the archetypes */
.mt .mt-layout{gap:32px}
.mt .mt-table th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);padding:8px 8px 10px;border-bottom:1px solid var(--rule2);white-space:nowrap}
.mt .mt-table th button{font-weight:400;color:inherit}
.mt .mt-table th[aria-sort]{color:var(--ink)}
.mt .mt-table th[aria-sort] button{font-weight:700}
.mt .mt-table td{padding:10px 8px;border-bottom:1px solid var(--rule)}
@media (hover:hover){.mt .mt-table tbody tr:hover{background:var(--fill)}}
.mt .mt-table tbody tr:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.mt .mt-table .num{font-family:var(--sans)}
.mt .mt-table td small{font-size:var(--fs-xs);color:var(--muted)}
@media (hover:hover){.mt .mt-alink:hover,.mt-drawer .mt-alink:hover{color:var(--ink)}}
.mt .mt-n{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mt .mt-tag{display:inline-block;font-family:var(--sans);font-size:var(--fs-xs);line-height:18px;color:var(--muted);border:1px solid var(--rule2);border-radius:var(--r-sm);padding:0 6px;margin-left:6px;vertical-align:1px}
/* the share bar sits left of its number and never runs under it */
.mt .mt-sharec{min-width:9.5rem}
.mt .mt-bar-i{left:8px;height:6px;margin-top:-3px;background:var(--rule2);transform-origin:left center;transform:scaleX(.5)}
.mt .mt-trend{color:var(--ink)}
.mt .mt-legend{margin-top:16px}
.mt .mt-main > .cl-small{font-size:var(--fs-sm);line-height:1.55;max-width:90ch}
/* panels: the most played cards beside the table */
.mt .mt-card{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 18px;margin:0 0 24px}
.mt .mt-h,.mt-drawer .mt-h{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3;color:var(--ink);margin:0 0 12px}
.mt .mt-h3,.mt-drawer .mt-h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3;color:var(--ink);margin:24px 0 8px}
.mt .mt-side .mt-seg{margin-bottom:6px}
.mt .mt-clist{gap:0;margin-top:8px}
.mt .mt-clist li{padding:8px 0;border-bottom:1px solid var(--rule);gap:2px;font-size:var(--fs-lg)}
.mt .mt-clist li:last-child{border-bottom:0}
.mt .mt-clist a{font-weight:400}
.mt .mt-cmeta{font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
.mt .mt-cmeta.mt-up{color:var(--up)}
/* the full-width sections under the table: a heading over the ink rule, no box */
.mt #mt-body > .mt-card:not(:has(> .mt-events)){border:0;border-radius:0;padding:0;margin:48px 0 0;background:none}
.mt #mt-body > .mt-card:not(:has(> .mt-events)) > .mt-h{font-size:var(--fs-xl);padding-bottom:8px;border-bottom:1.5px solid var(--ink);margin:0 0 16px}
.mt .mt-design > .cl-small{font-size:var(--fs-md);max-width:80ch;margin:0 0 8px}
.mt .mt-design .mt-dgrid{gap:0 40px}
.mt .mt-dline{gap:2px 10px;padding:12px 0}
.mt .mt-dl{font-size:var(--fs-lg)}
.mt .mt-dline b{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.mt .mt-dx{font-size:var(--fs-sm);color:var(--muted)}
.mt .mt-dtop{font-size:var(--fs-md);line-height:1.5}
.mt .mt-meth{font-size:var(--fs-sm);gap:4px 14px;margin:0 0 10px}
.mt .mt-meth b{color:var(--ink)}
.mt .mt-tough{padding:12px 0}
.mt .mt-tough p{font-size:var(--fs-md)}
.mt .mt-tgrid{gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;margin-top:8px}
.mt .mt-tgrid span{background:var(--ground);border-radius:0;padding:6px 0}
.mt .mt-tgrid i{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.mt .mt-tgrid b{font-family:var(--sans);font-size:var(--fs-md);font-weight:700}
/* the field: the matchup grid and its models. Above 50% is tinted green, below red (the site's up and down) */
.mt{--fx-0:var(--fill);--fx-p1:color-mix(in srgb,var(--up) 14%,var(--ground));--fx-p2:color-mix(in srgb,var(--up) 28%,var(--ground));--fx-p3:color-mix(in srgb,var(--up) 44%,var(--ground));--fx-m1:color-mix(in srgb,var(--down) 13%,var(--ground));--fx-m2:color-mix(in srgb,var(--down) 26%,var(--ground));--fx-m3:color-mix(in srgb,var(--down) 42%,var(--ground))}
:root[data-theme="dark"] .mt{--fx-0:var(--fill);--fx-p1:color-mix(in srgb,var(--up) 18%,var(--ground));--fx-p2:color-mix(in srgb,var(--up) 32%,var(--ground));--fx-p3:color-mix(in srgb,var(--up) 48%,var(--ground));--fx-m1:color-mix(in srgb,var(--down) 18%,var(--ground));--fx-m2:color-mix(in srgb,var(--down) 32%,var(--ground));--fx-m3:color-mix(in srgb,var(--down) 48%,var(--ground))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mt{--fx-0:var(--fill);--fx-p1:color-mix(in srgb,var(--up) 18%,var(--ground));--fx-p2:color-mix(in srgb,var(--up) 32%,var(--ground));--fx-p3:color-mix(in srgb,var(--up) 48%,var(--ground));--fx-m1:color-mix(in srgb,var(--down) 18%,var(--ground));--fx-m2:color-mix(in srgb,var(--down) 32%,var(--ground));--fx-m3:color-mix(in srgb,var(--down) 48%,var(--ground))}}
.mt .mt-flede,.mt .mt-fscope,.mt .mt-fprior{font-size:var(--fs-md);line-height:1.55;color:var(--muted);max-width:80ch}
.mt .mt-fscope,.mt .mt-fprior{color:var(--ink)}
.mt .mt-fctrl{gap:10px 20px;margin:4px 0 14px}
.mt .mt-fnote{border:1px solid var(--rule);background:var(--fill);color:var(--ink);font-size:var(--fs-md)}
.mt .mt-field .cl-small{font-size:var(--fs-md);line-height:1.55;max-width:80ch}
.mt .mt-fx td b{font-family:var(--sans);font-size:var(--fs-sm)}
.mt .mt-fx td small{font-family:var(--sans);font-size:var(--fs-xs)}
.mt .mt-fx thead th span[aria-hidden]{font-family:var(--sans);font-size:var(--fs-xs)}
.mt .mt-fx thead th.mt-fxc,.mt .mt-fx tbody th{background:var(--ground)}
.mt .mt-fx td button:focus-visible{outline:2px solid var(--ink)}
.mt .mt-fk{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.mt .mt-fleg{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);gap:6px 12px}
.mt .mt-ftab th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule2)}
.mt .mt-ftab th button{font-weight:400}
.mt .mt-ftab th[aria-sort]{color:var(--ink)}
.mt .mt-ftab th[aria-sort] button{font-weight:700}
.mt .mt-ftab .num{font-family:var(--sans)}
.mt .mt-ftab td small{font-size:var(--fs-xs);color:var(--muted)}
.mt .mt-fcap{font-size:var(--fs-sm);color:var(--muted);padding:0 0 6px}
/* the closed sections at the foot (the events, the receipts) look like the page's other disclosures */
.mt #mt-body > .mt-card:has(> .mt-events),.mt .mt-receipts{margin:48px 0 0;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground)}
.mt .mt-receipts{margin:10px 0 0}
.mt .mt-events summary{list-style:revert;cursor:pointer;font-size:var(--fs-sm)}
.mt .mt-events summary h2.mt-h{display:inline;margin:0;font-size:var(--fs-sm);font-weight:400}
.mt .mt-receipts summary{color:var(--ink);font-weight:400;font-size:var(--fs-sm)}
.mt .mt-elist{font-size:var(--fs-md);gap:0}
.mt .mt-elist li{padding:6px 0;border-bottom:1px solid var(--rule)}
.mt .mt-edate{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);min-width:4rem}
.mt .mt-rc{margin-top:10px}
.mt .mt-empty{color:var(--muted)}
/* one archetype, up close (the drawer over the page) */
.mt-drawer .mt-dbox{background:var(--ground)}
.mt-drawer .mt-dh h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0 0 6px}
.mt-drawer .mt-dsum{font-size:var(--fs-lg)}
.mt-drawer .mt-dacts{margin-top:12px}
.mt-drawer .mt-dcols{margin-top:16px;gap:40px}
.mt-drawer .mt-dcols .cl-small{font-size:var(--fs-sm)}
.mt-drawer .mt-avg{gap:0}
.mt-drawer .mt-avg li{padding:4px 0;font-size:var(--fs-lg)}
.mt-drawer .mt-avg b{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700}
.mt-drawer .mt-avg a{display:flex;align-items:center;min-width:0}
.mt-drawer .mt-cp{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mt-drawer .mt-inc{background:var(--fill)}
.mt-drawer .mt-inc i{background:var(--ink)}
.mt-drawer .mt-mu li{font-size:var(--fs-md);padding:4px 0;border-bottom:1px solid var(--rule)}
.mt-drawer .mt-mu b{font-family:var(--sans)}
.mt-drawer .mt-mu small{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mt-drawer .mt-lists li{font-size:var(--fs-md);padding:10px 0}
.mt-drawer .mt-fin{font-family:var(--sans)}
.mt-drawer .mt-lview{margin:4px 0 12px}
.mt-drawer .mt-lcols{font-size:var(--fs-md);gap:24px 40px}
.mt-drawer .mt-lcols > div > b,.mt-drawer .mt-pics > b{display:block;font-size:var(--fs-md);font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--rule2)}
.mt-drawer .mt-lcols li{display:flex;align-items:baseline;gap:10px;min-height:0;padding:4px 0;border-bottom:1px solid var(--rule)}
.mt-drawer .mt-lcols li span{flex:none;width:1.5rem;text-align:right;font-family:var(--sans);color:var(--muted)}
.mt-drawer .mt-cmplist{margin:6px 0 0;padding-left:1.1rem;font-size:var(--fs-md)}
@media (width < 720px){
  .mt .mt-tabs{gap:20px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .mt .mt-name{min-width:12.5rem}
  .mt .mt-sharec{min-width:0}
  .mt .mt-bar-i{display:none}
  .mt-drawer .mt-dh h2{font-size:var(--fs-xl);padding-right:40px}
}

/* ---------------------------------------------------------------- Meta Lens: the three views, the list search, event pages */
/* the formats and the view on one line where there's room; the line under the tabs runs under both */
.mt .mt-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;border-bottom:1px solid var(--rule);min-width:0}
.mt .mt-top .mt-tabs{border-bottom:0;flex:0 1 auto;min-width:0;max-width:100%}
.mt .mt-views{padding:0 0 6px}
.mt .mt-fresh{margin:-12px 0 24px;padding:10px 14px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5;color:var(--ink);max-width:90ch}
.mt .mt-fresh a{color:var(--ink)}
.mt .mt-q .mt-qlede{font-size:var(--fs-md);line-height:1.5;color:var(--muted);max-width:80ch;margin:0 0 14px}
.mt .mt-qcards{border:0;margin:0 0 14px;padding:0;min-width:0}
.mt .mt-qcards legend{font-size:var(--fs-sm);font-weight:700;color:var(--ink);padding:0;margin:0 0 6px}
.mt .mt-qrow{display:grid;grid-template-columns:9.5rem minmax(10rem,1fr) 8.5rem 13rem auto;gap:6px 8px;align-items:center;margin:0 0 8px}
.mt .mt-qrow .mt-qmsg{grid-column:1/-1;margin:0;color:var(--ink)}
.mt .mt-qrow .mt-qmsg[hidden]{display:none}
.mt :is(.mt-qrow,.mt-qf) :is(select,input){font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.mt :is(.mt-qrow,.mt-qf) :is(select,input):disabled{color:var(--faint);background:var(--fill)}
.mt .mt-qmore{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:10px 14px;margin:0 0 12px}
.mt .mt-qf{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--muted);min-width:0}
.mt .mt-qbtns{display:flex;gap:8px;flex-wrap:wrap}
.mt .mt-qsum{font-size:var(--fs-md);margin:16px 0 8px;min-height:1.5em}
.mt .mt-qhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:24px 0 8px}
.mt .mt-qhead .mt-h3{margin:0}
.mt .mt-qt th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);padding:8px 8px 10px;border-bottom:1px solid var(--rule2);white-space:nowrap;text-align:left}
.mt .mt-qt td{padding:8px;border-bottom:1px solid var(--rule);vertical-align:middle;font-size:var(--fs-sm)}
.mt .mt-qt td.mt-qd{white-space:nowrap;color:var(--muted)}
.mt .mt-qt td.mt-qe{min-width:12rem}
.mt .mt-qt td.mt-qp{overflow-wrap:anywhere;max-width:12rem}
.mt .mt-qt .mt-lacts{display:flex;flex-wrap:nowrap;gap:6px}
.mt .mt-qt .mt-lacts .btn-sm{white-space:nowrap}
@media (width >= 720px){.mt .mt-qt td:has(> .mt-cols){white-space:nowrap}}
.mt .mt-qt tr.mt-llrow td{background:var(--fill);padding:12px}
.mt .mt-qt tr.mt-llrow[hidden]{display:none}
.mt .mt-evk{display:block;font-size:var(--fs-xs);color:var(--muted)}
.mt .mt-out{font-size:var(--fs-xs);font-weight:400;color:var(--muted);white-space:nowrap;display:inline-block;min-height:24px;line-height:24px}   /* a 24 px target beside a name in a table row (WCAG 2.5.8) */
/* the search and event views have no controls under the tabs, so the bar ends at the tabs' own line */
.mt .mt-bar:not(:has(.mt-ctrls)){padding-bottom:0;border-bottom:0}
@media (hover:hover){.mt .mt-out:hover{color:var(--ink)}}
.mt :is(.mt-qt,.mt-elist,.mt-lists) .mt-alink,.mt-drawer .mt-ev .mt-alink{font:inherit;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px}
@media (hover:hover){.mt :is(.mt-qt,.mt-elist,.mt-lists) .mt-alink:hover,.mt-drawer .mt-ev .mt-alink:hover{text-decoration-color:currentColor}}
.mt .mt-ename{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.mt .mt-qcmp{margin:16px 0 0}
.mt .mt-qct td small,.mt .mt-qct th small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.mt .mt-qct th[scope=row]{font-weight:700;color:var(--ink)}
/* on a phone the two rows stack, each cell under its own label, so the record column isn't hidden in a sideways scroll */
@media (width < 480px){
  .mt .mt-qct thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mt .mt-qct,.mt .mt-qct tbody{display:block;width:100%}
  .mt .mt-qct tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--rule)}
  .mt .mt-qct tbody th[scope=row]{grid-column:1/-1;padding:0;border:0;text-align:left}
  .mt .mt-qct tbody td{display:block;padding:0;border:0;text-align:left;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .mt .mt-qct tbody td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-xs);color:var(--muted);margin:0 0 2px}
}
.mt .mt-qcmp > p{max-width:90ch;line-height:1.5}
/* the list opened in a row reads like the drawer's */
.mt .mt-llrow .mt-lview{margin:0 0 10px}
.mt .mt-llrow .mt-lcols{font-size:var(--fs-sm);gap:16px 32px}
.mt .mt-llrow .mt-lcols > div > b{display:block;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--rule2)}
.mt .mt-llrow .mt-lcols li{display:flex;align-items:baseline;gap:10px;padding:3px 0;border-bottom:1px solid var(--rule)}
.mt .mt-llrow .mt-lcols li span{flex:none;width:1.5rem;text-align:right;font-family:var(--sans);color:var(--muted)}
/* an event's page */
.mt .mt-evnav{margin:0 0 12px}
.mt .mt-evp > .mt-h{font-size:var(--fs-xl);outline-offset:4px}
.mt .mt-evfacts{font-size:var(--fs-md);line-height:1.5;margin:0 0 16px;max-width:90ch}
.mt .mt-evkpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:24px}
.mt .mt-evkpis .mt-kpi b{font-size:var(--fs-lg);overflow-wrap:anywhere}
.mt .mt-brk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13rem,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.mt .mt-brr{min-width:0}
.mt .mt-brh{font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:0 0 6px}
.mt .mt-brr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;height:calc(100% - 28px);align-content:space-around}
.mt .mt-brm{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);overflow:hidden}
.mt .mt-brp{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:6px;align-items:center;padding:6px 8px;font-size:var(--fs-sm);color:var(--muted)}
.mt .mt-brp + .mt-brp{border-top:1px solid var(--rule)}
.mt .mt-brp.won{color:var(--ink);font-weight:700}
.mt .mt-brp small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}
.mt .mt-brs{font-size:var(--fs-xs);color:var(--muted);text-align:right;font-weight:400}
.mt .mt-brn{min-width:0;overflow-wrap:anywhere}
@media (width < 1100px){.mt .mt-qrow{grid-template-columns:9rem minmax(8rem,1fr) 8rem 11rem auto}}
@media (width < 720px){
  .mt .mt-qrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 0 10px;border-bottom:1px solid var(--rule)}
  .mt .mt-qrow [data-qf="n"]{grid-column:1/-1;order:-1}
  .mt .mt-qrow [data-qx]{justify-self:start}
  .mt .mt-evkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt .mt-top .mt-tabs{flex:1 1 100%;max-width:none}
  .mt .mt-views{width:100%}
  .mt .mt-views .mt-seg{display:flex;width:100%}
  .mt .mt-views .mt-seg button{flex:1 1 auto;padding:0 8px;white-space:normal}
  /* the tables become stacked rows: each list on its own lines, its buttons under it */
  .mt .mt-qwrap{overflow-x:visible}
  .mt .mt-qt:not(.mt-eva) td[data-label]::before{content:attr(data-label) " ";color:var(--muted)}
  .mt .mt-qt:not(.mt-eva) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mt .mt-qt:not(.mt-eva),.mt .mt-qt:not(.mt-eva) tbody{display:block;width:100%}
  .mt .mt-qt:not(.mt-eva) tbody tr{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
  .mt .mt-qt:not(.mt-eva) tbody td{display:inline;padding:0;border:0;min-width:0;max-width:none}
  .mt .mt-qt:not(.mt-eva) td.mt-qe{flex:1 1 100%;min-width:0;order:-1;font-size:var(--fs-md)}
  .mt .mt-qt:not(.mt-eva) td.mt-qa{flex:1 1 100%;margin-top:6px}
  .mt .mt-qt .mt-lacts{flex-wrap:wrap}
  .mt .mt-qt tr.mt-llrow{padding:0;border:0}
  .mt .mt-qt tr.mt-llrow td{display:block;flex:1 1 100%;padding:12px}
}

/* ---------------------------------------------------------------- Matchup Lab */
/* you and them: ink and a gray, told apart by a solid and a dashed line too (no blue, no orange) */
.mu,:root[data-theme="dark"] .mu{--mu-you:var(--ink);--mu-them:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mu{--mu-you:var(--ink);--mu-them:var(--muted)}}
.mu .mu-pick{gap:16px}
.mu .mu-slot{padding:12px 16px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.mu #mu-slot-a,.mu #mu-slot-b{border-top:1px solid var(--rule)}
.mu .mu-slot legend{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);padding:0 6px;margin-left:-6px}
.mu .mu-seg{border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);margin:0 10px 10px 0}
.mu .mu-seg button{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--ink);border-right:1px solid var(--rule2);padding:0 12px;min-height:36px}
@media (hover:hover){.mu .mu-seg button:hover{background:var(--hover)}}
.mu .mu-seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground);font-weight:400}
.mu .mu-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;box-shadow:inset 0 0 0 3px var(--ground)}
.mu .mu-sel{font-family:var(--sans);font-size:var(--fs-md);border-color:var(--rule2);background:var(--ground)}
.mu .mu-paste{font-family:var(--code);font-size:var(--fs-sm);border-color:var(--rule2);background:var(--ground)}
.mu .mu-slotinfo{font-size:var(--fs-sm);color:var(--muted)}
.mu .mu-warn{color:var(--bad)}
.mu .mu-swap{min-height:40px}
.mu .mu-bar{gap:0 4px;margin:24px 0 0;padding:12px 0 4px;border-bottom:1px solid var(--rule)}
.mu .mu-key{font-size:var(--fs-sm);color:var(--muted);gap:6px 10px}
.mu .mu-k{display:inline-block;font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;line-height:18px;padding:0 6px;border-radius:var(--r-sm);border:1px solid var(--rule2);background:var(--ground);color:var(--muted);vertical-align:2px}
.mu .mu-k-m{background:var(--fill);border-color:var(--fill);color:var(--ink)}
.mu .mu-k-r{background:var(--ground);border-color:var(--rule2);color:var(--muted)}
.mu .mu-k-c{background:var(--ground);border-color:var(--ink);color:var(--ink)}
/* the two decks, side by side */
.mu .mu-head{padding:24px 0 4px}
.mu .mu-deck{gap:2px;padding:12px 16px;border:1px solid var(--rule);border-left:3px solid var(--mu-you);border-radius:var(--r-lg);background:var(--ground)}
.mu .mu-them.mu-deck{border-left:3px dashed var(--mu-them)}
.mu .mu-deck b{font-size:var(--fs-xl);font-weight:700}
.mu .mu-who{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mu .mu-v{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.mu .mu-note{font-size:var(--fs-md);color:var(--muted)}
.mu .mu-warnbox{padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--fill);color:var(--ink);font-size:var(--fs-md)}
.mu .mu-prog{background:var(--fill)}
.mu .mu-prog span{background:var(--ink)}
/* the report's sections: a heading over the ink rule, the kind of fact beside it */
.mu .mu-sec{margin:48px 0 0;padding-top:0;border-top:0}
.mu .mu-sec > h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3;color:var(--ink);margin:0 0 14px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.mu .mu-glance{margin-top:32px}
.mu .mu-sec h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:28px 0 8px;text-transform:none;letter-spacing:0}
.mu .mu-sec h4{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:0 0 6px}
.mu .mu-lead{color:var(--muted);font-size:var(--fs-md);line-height:1.55}
.mu .mu-find{gap:0;margin:0 0 12px}
.mu .mu-find li{padding:12px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font-size:var(--fs-lg);line-height:1.5}
.mu .mu-find li:first-child{padding-top:4px}
/* charts: you solid with filled dots, them dashed with open dots */
.mu .mu-ax{fill:var(--muted);font-family:var(--sans);font-size:var(--fs-xs)}
.mu .mu-line.mu-them{stroke-dasharray:6 4}
.mu .mu-dot{stroke:var(--ground)}
.mu .mu-dot.mu-them{fill:var(--ground);stroke:var(--mu-them);stroke-width:2}
.mu .mu-legend{font-size:var(--fs-sm);color:var(--muted)}
.mu .mu-sw{height:3px;width:18px}
.mu .mu-sw.mu-them{background:repeating-linear-gradient(90deg,var(--mu-them) 0 5px,transparent 5px 8px)}
/* tables */
.mu .mu-t{font-size:var(--fs-md)}
.mu .mu-t thead th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule2)}
.mu .mu-row-none{background:var(--fill)}
.mu .mu-det{margin:8px 0 12px}
.mu .mu-det summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);padding:6px 0}
@media (hover:hover){.mu .mu-det summary:hover{text-decoration:underline;text-underline-offset:3px}}
.mu .mu-gcorner{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.mu .mu-g[tabindex]:focus-visible{outline:2px solid var(--ink)}
.mu .mu-g-maybe .mu-gd{border-color:var(--muted)}
.mu .mu-list li{font-size:var(--fs-md);padding:8px 0}
.mu .mu-sb-on{background:var(--sel)}
.mu .mu-step{border-color:var(--rule2);background:var(--ground)}
.mu .mu-stb{font-family:var(--sans)}
.mu .mu-stb:focus-visible{outline:2px solid var(--ink)}
.mu .mu-stv{font-family:var(--sans)}
.mu .mu-stv-on{color:var(--ink)}
.mu .mu-tally{font-size:var(--fs-md)}
.mu .mu-limits ul{font-size:var(--fs-md);line-height:1.55}
@media (width < 720px){
  .mu .mu-cov td[data-l]::before,.mu .mu-sb td[data-l]::before{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
  .mu .mu-cov td[data-l]::first-letter,.mu .mu-sb td[data-l]::first-letter{text-transform:uppercase}
  .mu .mu-sec > h2{font-size:var(--fs-xl)}
}

/* ---------------------------------------------------------------- Film Room */
.fr{gap:20px}
.fr .fr-empty{gap:16px}
.fr .fr-drop{border:1.5px dashed var(--rule2);border-radius:var(--r-lg);background:var(--ground);padding:28px 24px;gap:8px}
.fr.fr-dragging .fr-drop,.fr.fr-dragging .fr-top{background:var(--fill);border-color:var(--ink)}
.fr .fr-drop .cl-small{font-size:var(--fs-md)}
.fr .fr-prog{background:var(--fill)}
.fr .fr-prog span{background:var(--ink)}
.fr .fr-paper{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fr .fr-how,.fr .fr-rpimp{border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 14px;background:var(--ground)}
.fr .fr-how summary,.fr .fr-rpimp summary{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.fr .fr-how ol{font-size:var(--fs-lg);line-height:1.55}
.fr .fr-path{font-family:var(--code);font-size:var(--fs-sm);background:var(--fill)}
/* the note that the example is showing, the confirm boxes and a problem with a file: plain filled boxes */
.fr .fr-sample,.fr .fr-confirm,.fr .fr-dropnote{border:1px solid var(--rule);background:var(--fill);border-radius:var(--r-md);color:var(--ink)}
.fr .fr-sample{padding:10px 12px 10px 16px}
/* filters and actions: no box, a row of their own */
.fr .fr-top{padding:0;border:0;border-radius:0;background:none;gap:12px 24px;align-items:flex-end}
.fr .fr-top .ms-row{margin:0}
.fr .fr-filters{gap:10px 18px}
.fr .fr-filters label,.fr .fr-lpick{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);gap:8px}
.fr .fr-filters select,.fr .fr-lpick select,.fr .fr-confirm select{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.fr .lf-check{font-size:var(--fs-sm);color:var(--ink)}
/* the counts: one ledger strip, split by hairlines */
.fr .fr-stats{display:flex;flex-wrap:wrap;gap:1px;margin:0;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.fr .fr-stats > div{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--ground);border-radius:0;padding:14px 16px 12px}
.fr .fr-stats b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700;line-height:1.2}
.fr .fr-stats span{font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.fr .fr-stats + .cl-small{margin:-8px 0 0;font-size:var(--fs-sm)}
/* the views: underline tabs */
.fr .fr-tabs{display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule);margin-top:8px}
.fr .fr-tabs::-webkit-scrollbar{display:none}
.fr .fr-tabs button{flex:none;font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;min-height:44px;padding:0 2px;margin:0;border:0;border-radius:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
@media (hover:hover){.fr .fr-tabs button:hover{color:var(--ink)}}
.fr .fr-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.fr .fr-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* matches: rows split by hairlines */
.fr .fr-list{gap:0;border-top:1px solid var(--rule)}
.fr .fr-m{border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;overflow:visible}
.fr .fr-m.open{border-color:var(--rule)}
.fr .fr-mhead{padding:12px 8px;font-size:var(--fs-lg);border-radius:var(--r-md)}
@media (hover:hover){.fr .fr-mhead:hover{background:var(--fill)}}
.fr .fr-mhead:focus-visible{background:var(--fill);outline:2px solid var(--ink);outline-offset:-2px}
.fr .fr-when{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.fr .fr-ev{font-size:var(--fs-sm)}
.fr .fr-has{font-weight:700;color:var(--ink)}
.fr .fr-res{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;padding:1px 9px;line-height:18px}
.fr .fr-g{font-family:var(--sans);font-size:var(--fs-xs)}
.fr .fr-g sub{font-weight:400}
.fr .fr-detail{border-top:0;padding:4px 8px 18px;gap:12px;background:none}
.fr .fr-detail > .cl-small{font-size:var(--fs-sm)}
.fr .fr-game{gap:8px;padding:12px 14px;background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md)}
.fr .fr-game b{font-family:var(--sans);font-size:var(--fs-md);margin-right:6px}
.fr .fr-seen,.fr .fr-side,.fr .fr-cards{font-size:var(--fs-md)}
.fr .fr-card{font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);background:var(--ground)}
.fr .fr-card small{font-family:var(--sans);font-size:var(--fs-xs)}
.fr button.fr-card:focus-visible{border-color:var(--ink);color:var(--ink)}@media (hover:hover){.fr button.fr-card:hover{border-color:var(--ink);color:var(--ink)}}
.fr .fr-note textarea{font-size:var(--fs-md);border-color:var(--rule2);background:var(--ground)}
.fr .fr-tag{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border:1px solid var(--rule2)}
@media (hover:hover){.fr .fr-tag:hover{border-color:var(--ink)}}
.fr .fr-tag[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);color:var(--ink)}
/* tables in the views */
.fr .fr-t{font-size:var(--fs-md)}
.fr .fr-t th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule2)}
.fr .fr-t caption{font-size:var(--fs-sm)}
.fr .fr-h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:28px 0 8px}
.fr .fr-lhead{margin-top:4px}
.fr .fr-lctl{gap:10px 20px;margin:12px 0}
#fr-app .fr-lseg{flex-wrap:wrap;row-gap:4px}
.fr .fr-lshape summary{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.fr .fr-ok{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.fr .fr-off{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.fr .fr-bar,.fr .fr-key-bar{background:var(--ink)}
.fr .fr-exp,.fr .fr-key-exp{background:var(--muted)}
.fr .fr-danger{color:var(--bad);border-color:var(--bad-line)}
/* the replay timeline: you ink and solid, them gray and dashed */
.fr .fr-rp{--you:var(--ink);--them:var(--muted);gap:16px}
.fr .fr-rptitle h1{margin:4px 0 0;font-family:var(--sans);font-size:var(--fs-title);font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.fr .fr-rptitle h1 .cl-muted{font-weight:400}
.fr .fr-rptitle .cl-small{font-size:var(--fs-md)}
.fr .fr-rpchart{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.fr .fr-rpchart:focus-visible{outline:2px solid var(--ink)}
.fr .fr-rpticks span,.fr .fr-rphi,.fr .fr-rplo{font-family:var(--sans);font-size:var(--fs-xs)}
.fr .fr-rpdot{border-color:var(--ground)}
.fr .fr-dthem{background:var(--ground);box-shadow:inset 0 0 0 2px var(--them)}
.fr .fr-rpflag,.fr .fr-kflag{background:var(--ground);border:2px solid var(--ink)}
.fr .fr-rpnow b{font-family:var(--sans);font-size:var(--fs-lg)}
.fr .fr-rplives{font-family:var(--sans);font-size:var(--fs-sm)}
.fr .fr-rplist{gap:6px}
.fr .fr-rpe{background:var(--ground);border-color:var(--rule);border-left:3px solid var(--rule2)}
.fr .fr-rpe.fr-s0{border-left:3px solid var(--you)}
.fr .fr-rpe.fr-s1{border-left:3px dashed var(--them)}
.fr .fr-rpe.fr-rpmark{background:var(--sel)}
.fr .fr-who{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.fr .fr-rpx:focus-visible{color:var(--ink);background:var(--hover)}@media (hover:hover){.fr .fr-rpx:hover{color:var(--ink);background:var(--hover)}}
.fr .fr-rped{gap:12px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--ground)}
.fr .fr-rped .fr-h3{margin:0}
.fr .fr-rpfield input,.fr .fr-rplf input{font-family:var(--sans);border-color:var(--rule2);background:var(--ground)}
.fr .fr-rplf input{font-family:var(--sans)}
.fr .fr-rplfn{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.fr .fr-lf0 .fr-rplfn,.fr .fr-lf1 .fr-rplfn,.fr .fr-lv0,.fr .fr-lv1{color:var(--ink)}
.fr .fr-rpimp textarea{font-family:var(--code);border-color:var(--rule2)}
@media (width < 720px){
  .fr .fr-tabs{gap:20px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .fr .fr-stats > div{flex-basis:150px;padding:10px 12px 8px}
  .fr .fr-stats b{font-size:var(--fs-xl)}
  .fr .fr-stats span{font-size:var(--fs-xs)}
  .fr .fr-mhead{padding:12px 4px}
  .fr .fr-detail{padding:4px 0 16px}
  .fr .fr-rpnav{top:var(--top-h);background:var(--ground);margin:0 calc(-1 * var(--gut));padding:6px var(--gut);box-shadow:none}
  .fr .fr-lens td[data-l]:not([data-l=""])::before{font-family:var(--sans);font-size:var(--fs-xs)}
  .fr .fr-lens td[data-l]:not([data-l=""])::first-letter{text-transform:uppercase}
}

/* ---------------------------------------------------------------- Life Log */
.lf .lf-setup{gap:20px;margin-top:0}
.lf .lf-card{border-radius:var(--r-lg);padding:18px 20px;gap:14px;background:var(--ground)}
.lf .lf-card h2{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.lf .lf-card h2 span{font-weight:400;color:var(--muted)}
.lf .lf-l{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.lf .lf-row select,.lf .lf-row input[type=number],.lf .lf-row input:not([type]),.lf .lf-names input{font-family:var(--sans);border-color:var(--rule2);min-height:40px}
.lf .lf-resume{border:1px solid var(--rule2);background:var(--fill);border-radius:var(--r-lg)}
.lf .lf-past li{font-size:var(--fs-md);padding:10px 0}
.lf .lf-setup .ms-row:has(#lf-go){background:var(--ground);margin:0 -20px;padding-inline:20px}
/* playing: the table over the whole screen, the menu and the top bar under it (shell.css raises it over both) */
.lf .lf-name{font-family:var(--sans)}
.lf .lf-tap{font-family:var(--sans)}
.lf .lf-num b,.lf .lf-num em{font-family:var(--sans)}
.lf .lf-chip{font-family:var(--sans)}
.lf .lf-chip.hot{background:var(--bad-soft);border-color:var(--bad-line);color:var(--ink)}
.lf .lf-bar{background:var(--ground);gap:6px 8px}
.lf .lf-where{font-family:var(--sans);font-size:var(--fs-sm)}
.lf .lf-logbox{background:var(--ground)}
.lf .lf-loghead b{font-size:var(--fs-lg)}
.lf-pbox{background:var(--ground)}
.lf-pbox h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700}
.lf-step{font-size:var(--fs-lg)}
.lf-step b{font-family:var(--sans)}
.lf-roll{font-family:var(--sans)}
.lf-t{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.lf-e em{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.lf-k-turn{background:var(--fill)}
.lf-copy{font-family:var(--code)}
@media (width < 720px){
  .lf .lf-card{padding:16px}
  .lf .lf-setup .ms-row:has(#lf-go){margin:0 -16px;padding-inline:16px}
  /* the layout's three long choices stack instead of running off the card */
  #lf-app .mt-seg[aria-label="Layout"]{display:flex;flex-direction:column;align-items:stretch;width:100%}
  #lf-app .mt-seg[aria-label="Layout"] button{margin:-1px 0 0;min-height:44px;text-align:left;justify-content:flex-start;border-radius:0}
  #lf-app .mt-seg[aria-label="Layout"] button:first-child{margin-top:0;border-radius:var(--r-md) var(--r-md) 0 0}
  #lf-app .mt-seg[aria-label="Layout"] button:last-child{border-radius:0 0 var(--r-md) var(--r-md)}
}

/* ---------------------------------------------------------------- Captain */
/* the head: the page header names it; the credit line, then the hub */
.cap .cap-head{padding:0 0 8px}
.cap .cap-kicker{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);gap:10px;margin:0}
.cap .tag{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700}
.cap .tag-house{background:var(--fill);color:var(--ink);border:1px solid var(--rule2)}
/* the hub: underline tabs, each with its one line; the cube is a link out, after them */
.cap .cap-hub{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px;margin:16px 0 0;border-bottom:1px solid var(--rule)}
.cap .cap-hubt{justify-content:flex-start;gap:4px;padding:12px 2px 14px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink)}
.cap .cap-hubt b{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3;color:var(--muted)}
.cap .cap-hubt span{font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
@media (hover:hover){.cap .cap-hubt:hover{border:0;background:none}}
@media (hover:hover){.cap .cap-hubt:hover b{color:var(--ink)}}
.cap .cap-hubt[aria-selected="true"]{border:0;background:none;box-shadow:inset 0 -2px 0 var(--ink)}
.cap .cap-hubt[aria-selected="true"] b{color:var(--ink)}
.cap .cap-hubt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cap .cap-hubout{border:0}
.cap .cap-hubout b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px}
@media (hover:hover){.cap .cap-hubout:hover b{text-decoration-color:currentColor}}
@media (width < 1024px){.cap .cap-hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width < 720px){
  .cap .cap-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:12px}
  .cap .cap-hubt{padding:10px 2px 12px;border-bottom:1px solid var(--rule)}
  .cap .cap-hubt:first-child{grid-column:auto}
  .cap .cap-hubout{grid-column:1 / -1;border-bottom:0}
  .cap .cap-hubt b{font-size:var(--fs-md)}
  .cap .cap-hubt span{font-size:var(--fs-xs)}
}
/* sections: a heading over the ink rule, no hairline between them */
.cap .block{border-bottom:0;padding-block:40px 0}
.cap .cap-h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;letter-spacing:0;line-height:1.3;color:var(--ink);margin:0 0 16px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.cap .cap-h3x{font-family:var(--sans);font-size:var(--fs-lg)}
.cap .cap-h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:24px 0 8px}
.cap .cap-canon h3,.cap .cap-canon h4,.cap .cap-canon h5{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.cap .cap-class h4{font-family:var(--sans);font-size:var(--fs-md)}
.cap .cap-canon blockquote,.cap .cap-q{border-left:3px solid var(--ink);background:var(--fill)}
.cap .cap-q footer{font-family:var(--sans);font-size:var(--fs-sm)}
.cap .cap-small{font-size:var(--fs-sm);color:var(--muted)}
.cap .cap-warn{color:var(--ink)}
.cap .cap-totool{font-size:var(--fs-md)}
/* the rules up top: the numbers as one ledger, the jump menu */
.cap .cap-rulestop{padding-top:40px}
.cap .cap-facts{display:flex;flex-wrap:wrap;gap:1px;margin:18px 0 0;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.cap .cap-facts li{flex:1 1 150px;background:var(--ground);border-radius:0;padding:12px 14px}
.cap .cap-facts b{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.2}
.cap .cap-facts span{font-size:var(--fs-sm);line-height:1.4}
.cap .cap-toc a{font-family:var(--sans);font-size:var(--fs-md)}
@media (hover:hover){.cap .cap-toc a:hover{text-decoration:underline;text-underline-offset:3px}}
/* the lists: underline tabs over their panels */
.cap .cap-tabs{display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule);margin:8px 0 16px}
.cap .cap-tabs::-webkit-scrollbar{display:none}
.cap .cap-tab{flex:none;font-family:var(--sans);font-size:var(--fs-lg);min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--muted);white-space:nowrap}
@media (hover:hover){.cap .cap-tab:hover{color:var(--ink)}}
.cap .cap-tab[aria-selected="true"]{background:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.cap .cap-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cap .cap-n{font-weight:700}
/* tables, fields, chips and badges */
.cap .cap-table thead th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule2)}
.cap .cap-next{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;color:var(--ink)}
.cap .cap-ladder tr.is-next{background:var(--fill)}
.cap .cap-field input,.cap .cap-field select,.cap .cap-field textarea{border-color:var(--rule2);background:var(--ground)}
.cap .cap-wide textarea,.cap .cap-cvpaste textarea{font-family:var(--code)}
.cap .cap-count{font-family:var(--sans);font-size:var(--fs-sm)}
.cap .cap-col{border-color:var(--rule2);background:var(--ground)}
.cap .cap-col[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--ink);box-shadow:none}
.cap .cap-b{font-family:var(--sans);font-size:var(--fs-xs)}
.cap .cap-st{font-family:var(--sans);font-size:var(--fs-xs)}
.cap .cap-lib b{font-family:var(--sans)}
.cap .cap-rule>summary h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:400}
.cap .cap-files a{font-family:var(--sans)}
.cap .cap-receipt h3{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.cap .cap-ck-steps>summary,.cap .cap-cvpaste>summary,.cap .cap-cvout>summary,.cap .cap-kitprev>summary,.cap .cap-notes summary{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
.cap .cap-cvstep{border-color:var(--rule);border-radius:var(--r-lg)}
.cap .cap-cvstep>legend{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700}
.cap .cap-cvn b{font-family:var(--sans)}
.cap .cap-cvn.is-warn b{color:var(--bad)}
.cap .cap-cvbasic output{font-family:var(--sans)}
.cap .cap-cvrk{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
@media (width < 720px){.cap .cap-tabs{flex-wrap:wrap;gap:0 20px;overflow:visible}}   /* on a phone every list stays in sight */

/* ---------------------------------------------------------------- My Stuff: the hub, the game diary, the year */
#me-app .me-head{padding:4px 0 24px;gap:16px 24px;align-items:center}
#me-app .me-head p{font-size:var(--fs-md);line-height:1.5}
#me-app .me-avbtn{font:400 var(--fs-xs) var(--sans);color:var(--muted)}
#me-app .me-avbtn:focus-visible span{color:var(--ink);text-decoration:underline}@media (hover:hover){#me-app .me-avbtn:hover span{color:var(--ink);text-decoration:underline}}
#me-app .me-prog{color:var(--muted)}
#me-app .me-grid{gap:16px}
#me-app .db-panel{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:0}
#me-app .me-sec-h{gap:8px;margin-bottom:14px}
#me-app .me-sec-h h2,#me-app .me-danger h2{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.3;color:var(--ink)}
#me-app .me-sec-h h2 span{font-weight:400;color:var(--muted);margin-left:6px}
#me-app .me-big{gap:2px}
#me-app .me-big b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700;line-height:1.2}
#me-app .me-big span{font-size:var(--fs-sm)}
#me-app .me-list li{font-size:var(--fs-md);padding:8px 0}
@media (hover:hover){#me-app .me-list li a:hover{color:var(--ink);text-decoration:underline}}
#me-app .me-searches code{font-family:var(--code);color:var(--ink);background:var(--fill)}
#me-app .me-searches button{color:var(--muted)}
@media (hover:hover){#me-app .me-searches button:hover{color:var(--ink)}}
#me-app .me-chips a{font-family:var(--sans);font-size:var(--fs-sm);border-color:var(--rule2);background:var(--ground)}
#me-app .me-chips a b{color:var(--muted);font-weight:700}
@media (hover:hover){#me-app .me-chips a:hover{border-color:var(--ink);color:var(--ink)}}
#me-app .me-danger{margin-top:16px}
/* display: each setting a row, its choices joined segments */
#me-app .me-disp{display:grid;gap:12px;margin:0 0 12px}
#me-app .me-disp > div{display:grid;gap:6px}
#me-app .me-disp dt{font-size:var(--fs-sm);color:var(--muted)}
#me-app .me-disp dd{margin:0}
#me-app .db-seg button{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);border-color:var(--rule2);background:var(--ground);min-height:36px;padding:0 12px}
@media (hover:hover){#me-app .db-seg button:hover{background:var(--hover)}}
#me-app .db-seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
/* the diary: rows split by hairlines */
#me-app .di-row{padding:10px 0;gap:4px 12px}
#me-app .di-day{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
#me-app .di-month-sec h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:24px 0 4px}
#me-app .di-month-sec h3 .cl-muted{font-weight:400;font-size:var(--fs-sm)}
#me-app .di-filters{gap:10px 20px;margin:0 0 24px}
#me-app .di-filters select{font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:0 8px;border-color:var(--rule2);background:var(--ground)}
#me-app .db-res{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700}
#me-app .rec-src{font-family:var(--sans);font-size:var(--fs-xs);border-color:var(--rule2)}
#me-app .rec-src.film{border-color:var(--ink);color:var(--ink)}
#me-app .rec-head{gap:12px 40px;margin:0 0 8px}
#me-app .rec-big b{font-family:var(--sans);font-weight:700}
#me-app .rec-range b{font-family:var(--sans)}
#me-app .rec-range span{font-size:var(--fs-sm)}
#me-app h2.rec-h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin:40px 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
#me-app .rec-t th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);border-bottom-color:var(--rule2)}
/* your year: the counts as one ledger strip */
#me-app .ry-big{display:flex;flex-wrap:wrap;gap:1px;margin:4px 0 12px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
#me-app .ry-big li{flex:1 1 130px;min-width:0;background:var(--ground);padding:12px 14px 10px;gap:2px}
#me-app .ry-big b{font-family:var(--sans);font-size:var(--fs-num);font-weight:700;line-height:1.2}
#me-app .ry-big span{font-size:var(--fs-sm);line-height:1.35}
/* the year in review: its own h1, the years as underline tabs */
#me-app .ry-head{margin:8px 0 12px}
#me-app .ry-head h1{font-family:var(--sans);font-size:var(--fs-title);font-weight:700;line-height:1.2;letter-spacing:-.015em}
#me-app #ry-h:focus{outline:none}
#me-app .ry-years{gap:24px;margin:0 0 14px;border-bottom:1px solid var(--rule);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#me-app .ry-years a.btn-sm{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--muted);font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;text-decoration:none}
@media (hover:hover){#me-app .ry-years a.btn-sm:hover{color:var(--ink)}}
#me-app .ry-years a.btn-sm[aria-current="page"]{color:var(--ink);background:none;box-shadow:inset 0 -2px 0 var(--ink)}
#me-app .ry-grid{gap:16px;margin-top:4px}
#me-app .ry-grid h2{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:0 0 12px}
#me-app .ry-grid .db-sub{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:16px 0 6px}
#me-app .ry-kv{gap:0}
#me-app .ry-kv dt,#me-app .ry-kv dd{padding:6px 0;border-bottom:1px solid var(--rule)}
#me-app .ry-kv dd{font-family:var(--sans);font-weight:700;padding-left:12px}
#me-app .ry-rank li{font-size:var(--fs-md)}
#me-app .ry-months i{background:var(--ink)}
#me-app .ry-foot{margin-top:24px}
@media (width < 720px){
  #me-app .ry-years{gap:20px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  #me-app .ry-big li{flex-basis:100px;padding:10px 10px 8px}
  #me-app .ry-big b{font-size:var(--fs-xl)}
}
@media (width < 720px){
  #me-app .me-head{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:18px}
  #me-app .me-head .me-id{flex:none;align-items:flex-start}
  #me-app .me-actions > *{flex:1 1 auto;justify-content:center;text-align:center}
}
/* the diary's tabs (matches, events, season), underlined like Meta Lens's formats */
#me-app .di-tabs{display:flex;gap:24px;margin:0 0 20px;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
#me-app .di-tabs button{flex:none;font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
@media (hover:hover){#me-app .di-tabs button:hover{color:var(--ink)}}
#me-app .di-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
#me-app .di-tabs button .cl-muted{font-size:var(--fs-sm);margin-left:4px}
#me-app .di-ev{font-family:var(--sans);font-size:var(--fs-xs);color:var(--ink);border:1px solid var(--rule2);border-radius:var(--r-sm);padding:1px 6px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* events, each a panel: the name and the record on one line, the facts, the rounds in order */
#me-app .tev-head{margin:0 0 16px}
#me-app .tev-head p{max-width:80ch;margin:0}
#me-app .tev-card{margin:0 0 16px}
#me-app .tev-ch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
#me-app .tev-ch h3{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3;margin:0;min-width:0;overflow-wrap:anywhere}
#me-app .tev-big{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700}
#me-app .tev-facts{color:var(--muted);margin:4px 0 8px;line-height:1.5}
#me-app .tev-facts a{color:var(--ink)}
#me-app .tev-out{font-size:var(--fs-md);margin:0 0 8px;overflow-wrap:anywhere}
#me-app .tev-card > p{margin:0 0 8px}
#me-app .tev-tag{display:inline-block;width:fit-content;align-self:flex-start;border:1px solid var(--ink);border-radius:var(--r-sm);padding:1px 8px;margin:0 0 8px;color:var(--ink)}
#me-app .tev-rounds{list-style:none;margin:8px 0;padding:0}
#me-app .tev-rounds li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 0;border-top:1px solid var(--rule);font-size:var(--fs-md)}
#me-app .tev-rounds li.tev-po .tev-rn{color:var(--ink);font-weight:700}
#me-app .tev-rn{flex:0 0 7.5rem;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
#me-app .tev-rv{min-width:0;overflow-wrap:anywhere}
#me-app .tev-rs{font-size:var(--fs-sm)}
#me-app .tev-rnote{flex:1 1 100%;padding-left:calc(7.5rem + 10px);font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
#me-app .tev-note{color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
#me-app .tev-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* the season: one panel per RCQ round */
#me-app .tev-shead{max-width:80ch;margin:0 0 16px}
#me-app .tev-season{margin:0 0 16px}
#me-app .tev-season h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:0 0 6px}
#me-app .tev-season > p{max-width:90ch;line-height:1.5}
#me-app .tev-season a{color:var(--ink)}
#me-app .tev-skpis{margin:12px 0}
#me-app .tev-skpis .rec-big b{font-size:var(--fs-num)}
#me-app .tev-slist{list-style:none;margin:8px 0 0;padding:0}
#me-app .tev-slist li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:6px 0;border-top:1px solid var(--rule);font-size:var(--fs-md)}
#me-app .tev-sday{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);min-width:3rem}
#me-app ul.tev-facts{list-style:disc;padding-left:1.2rem;color:var(--ink);margin:6px 0 10px}
#me-app ul.tev-facts li{margin:0 0 6px;line-height:1.5}
/* the report a link opens */
#me-app .tev-report{max-width:60rem}
#me-app .tev-report h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.2;margin:0 0 6px;overflow-wrap:anywhere}
#me-app .tev-report h2:focus{outline:none}
#me-app .tev-report .rec-big b{font-size:var(--fs-num);overflow-wrap:anywhere}
#me-app .tev-list{margin:8px 0 0;font-size:var(--fs-md)}
#me-app .tev-list > div > b{display:block;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--rule2)}
#me-app .tev-list li{display:flex;align-items:baseline;gap:10px;padding:3px 0;border-bottom:1px solid var(--rule)}
#me-app .tev-list li span{flex:none;width:1.5rem;text-align:right;font-family:var(--sans);color:var(--muted)}
#me-app .tev-list a{color:var(--ink)}
/* the event form (a dialog) */
.tev-form .tev-fs{border:0;border-top:1px solid var(--rule);margin:0 0 6px;padding:12px 0 4px;min-width:0}
.tev-form .tev-fs legend{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink);padding:0 8px 0 0}
.tev-form .tev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:10px 14px}
.tev-form .mf-f{display:grid;gap:4px;min-width:0}
.tev-form .mf-f > span{font-size:var(--fs-sm);color:var(--muted)}
.tev-form :is(input:not([type=checkbox]),select,textarea){width:100%;box-sizing:border-box;min-width:0;font-family:var(--sans);font-size:var(--fs-sm);min-height:36px;padding:4px 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.tev-form :is(input,select):disabled{color:var(--faint);background:var(--fill)}
.tev-form .tev-rlist{list-style:none;margin:0 0 8px;padding:0}
.tev-form .tev-redit{display:grid;grid-template-columns:1.5rem minmax(9rem,2fr) minmax(8rem,1.2fr) minmax(7rem,1fr) minmax(8rem,1.5fr) auto auto;gap:6px 8px;align-items:end;padding:8px 0;border-bottom:1px solid var(--rule)}
.tev-form .tev-redit.linked{grid-template-columns:1.5rem minmax(0,1fr) auto auto;align-items:center}
.tev-form .tev-rnum{font-family:var(--sans);font-weight:700;color:var(--muted);align-self:center}
.tev-form .tev-rsum{min-width:0;overflow-wrap:anywhere;font-size:var(--fs-sm)}
.tev-form .tev-chk{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.tev-form .tev-chk input{margin:0;width:16px;height:16px;accent-color:var(--ink)}
.tev-form .tev-rbtns{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.tev-form .tev-pick{border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 12px;margin:0 0 8px;background:var(--fill)}
.tev-form .tev-plist{list-style:none;margin:6px 0 8px;padding:0}
.tev-form .tev-plist li{padding:2px 0}
@media (width < 720px){
  /* a round on a phone: the number down the left, their deck, then the result and the seat side by side, the note,
     then the playoff box and remove */
  .tev-form .tev-redit{grid-template-columns:1.5rem minmax(0,1fr) minmax(0,1fr)}
  .tev-form .tev-redit > *{grid-column:2/-1}
  .tev-form .tev-redit > .tev-rnum{grid-column:1;grid-row:1/span 4;align-self:start;padding-top:24px}
  .tev-form .tev-redit > .mf-f:has([data-r="games"]),.tev-form .tev-redit > .tev-top{grid-column:2}
  .tev-form .tev-redit > .mf-f:has([data-r="side"]),.tev-form .tev-redit > [data-rx]{grid-column:3}
  .tev-form .tev-redit > [data-rx]{justify-self:start}
  .tev-form .tev-redit.linked{grid-template-columns:1.5rem minmax(0,1fr) minmax(0,1fr)}
  .tev-form .tev-redit.linked > .tev-rnum{grid-row:1/span 2;padding-top:0}
  #me-app .tev-rn{flex-basis:100%}
  #me-app .tev-rnote{padding-left:0}
}

/* the picture or icon picker (a dialog over My Stuff) */
.avp-th small{font:400 var(--fs-xs) var(--sans)}
.avp-gh{font:700 var(--fs-sm) var(--sans);color:var(--ink);margin:14px 0 8px}
.avp-l{font:400 var(--fs-sm) var(--sans);color:var(--muted)}
.avp-i{background:var(--ground);border-color:var(--rule2)}
.avp-i[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.avp-i:focus-visible,.avp-s:focus-visible,.avp-stage:focus-visible{outline-color:var(--ink)}
.avp-s[aria-checked="true"]{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink)}
.avp-drop{border-color:var(--rule2)}
.avp-drop.on{border-color:var(--ink);background:var(--fill)}
.avp-groups{border-radius:var(--r-lg)}

/* ---------------------------------------------------------------- Prep (October 18, 2026) */
.pd{--fx-0:var(--fill);--fx-p1:color-mix(in srgb,var(--up) 14%,var(--ground));--fx-p2:color-mix(in srgb,var(--up) 28%,var(--ground));--fx-p3:color-mix(in srgb,var(--up) 44%,var(--ground));--fx-m1:color-mix(in srgb,var(--down) 13%,var(--ground));--fx-m2:color-mix(in srgb,var(--down) 26%,var(--ground));--fx-m3:color-mix(in srgb,var(--down) 42%,var(--ground))}
:root[data-theme="dark"] .pd{--fx-p1:color-mix(in srgb,var(--up) 18%,var(--ground));--fx-p2:color-mix(in srgb,var(--up) 32%,var(--ground));--fx-p3:color-mix(in srgb,var(--up) 48%,var(--ground));--fx-m1:color-mix(in srgb,var(--down) 18%,var(--ground));--fx-m2:color-mix(in srgb,var(--down) 32%,var(--ground));--fx-m3:color-mix(in srgb,var(--down) 48%,var(--ground))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pd{--fx-p1:color-mix(in srgb,var(--up) 18%,var(--ground));--fx-p2:color-mix(in srgb,var(--up) 32%,var(--ground));--fx-p3:color-mix(in srgb,var(--up) 48%,var(--ground));--fx-m1:color-mix(in srgb,var(--down) 18%,var(--ground));--fx-m2:color-mix(in srgb,var(--down) 32%,var(--ground));--fx-m3:color-mix(in srgb,var(--down) 48%,var(--ground))}}
.pd-tabs{display:flex;gap:24px;margin:0 0 var(--sp-xl);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tabs button{flex:none;font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;min-height:44px;padding:0 2px;margin:0;border:0;border-radius:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
@media (hover:hover){.pd-tabs button:hover{color:var(--ink)}}
.pd-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.pd-ctls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 22px;margin:0 0 var(--sp-lg)}
.pd-ctl{display:inline-flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.pd-lab{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.pd-ctl select,.pd-f select{font-family:var(--sans);font-size:var(--fs-sm);min-height:44px;max-width:100%;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
#pd-app .mt-seg{flex-wrap:wrap}
#pd-app .mt-seg button{min-height:44px}
.pd-sec{margin:0 0 var(--sp-2xl,40px);padding:var(--sp-lg) 0 0;border-top:1px solid var(--rule)}
.pd-h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;line-height:1.3;margin:0 0 var(--sp-md);color:var(--ink)}
.pd-h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:var(--sp-lg) 0 var(--sp-sm)}
.pd-note{font-size:var(--fs-sm);line-height:1.55;color:var(--muted);max-width:90ch;margin:0 0 var(--sp-md)}
.pd-fact{font-size:var(--fs-md);line-height:1.55;max-width:90ch;margin:0 0 var(--sp-sm)}
.pd-muted{color:var(--muted)}
.pd-ex{font-size:var(--fs-sm);line-height:1.5;margin:0 0 var(--sp-md);padding:10px 14px;border:1px solid var(--warn-line,var(--rule2));border-radius:var(--r-md);background:var(--warn-bg);color:var(--ink);max-width:90ch}
.pd-ex .btn-sm{margin-left:8px}
.pd-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 var(--sp-md)}
.pd-wrap{align-items:flex-end;gap:12px 18px}
.pd-scroll{position:relative;overflow-x:auto;margin:0 0 var(--sp-md);max-width:100%}   /* positioned, so a visually hidden header inside stays in the scroll box */
.pd-table{border-collapse:collapse;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.pd-table th,.pd-table td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle}
.pd-table thead th{font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule2);white-space:nowrap}
.pd-table tbody th{font-weight:500}
.pd-table .num{text-align:right;white-space:nowrap}
.pd-table small{font-size:var(--fs-xs);color:var(--muted)}
.pd-table input{font:inherit;min-height:40px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--ground);color:var(--ink)}
.pd-share{width:5.5em;text-align:right;margin-right:4px}
.pd-ftab td .btn-sm,.pd-tbt .btn-sm{min-height:40px}
.pd-cands{list-style:none;margin:0 0 var(--sp-md);padding:0;display:grid;gap:0}
.pd-cand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 0;border-bottom:1px solid var(--rule)}
.pd-cn{font-weight:700}
.pd-cm{font-size:var(--fs-sm);color:var(--muted);flex:1 1 14rem;min-width:0}
.pd-mx{min-width:100%}
.pd-mx thead th.pd-colh{vertical-align:bottom;white-space:normal;min-width:6.5rem;max-width:9rem}
.pd-colh span{display:block;color:var(--ink);font-weight:500;line-height:1.25}
.pd-mx tbody th{white-space:normal;min-width:8rem;max-width:12rem}
.pd-cell{padding:2px!important;background:var(--fx-0)}
.pd-cell.pd-p1{background:var(--fx-p1)}.pd-cell.pd-p2{background:var(--fx-p2)}.pd-cell.pd-p3{background:var(--fx-p3)}
.pd-cell.pd-m1{background:var(--fx-m1)}.pd-cell.pd-m2{background:var(--fx-m2)}.pd-cell.pd-m3{background:var(--fx-m3)}
.pd-cell button{display:grid;gap:1px;width:100%;min-height:64px;padding:6px 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.pd-cell button:hover{box-shadow:inset 0 0 0 1px var(--ink)}}
.pd-cell b{font-size:var(--fs-lg)}
.pd-cell small,.pd-rec{font-size:var(--fs-xs);color:var(--ink);white-space:nowrap}   /* full ink: at .75 opacity the range read 4.1 to 1 on the darkest tint (axe, Oct 18) */
.pd-unm ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pd-map{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 14px 6px 0}
.pd-map select{min-height:40px;max-width:100%;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--ground);color:var(--ink)}
.pd-bar{position:relative;display:block;width:100%;min-width:90px;max-width:220px;height:8px;border-radius:var(--r-sm);background:var(--ground);border:1px solid var(--rule);margin-top:4px}
.pd-bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--faint)}
.pd-ci{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-radius:var(--r-sm)}
.pd-p{position:absolute;top:-2px;width:3px;height:10px;margin-left:-1px;background:var(--accent);border-radius:var(--r-sm)}
.pd-rng{white-space:nowrap}
/* figures in one strip split by hairlines; a short last row stretches, so no empty cell shows */
.pd-kpis{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin:0 0 var(--sp-md)}
.pd-kpis > div{flex:1 1 9.5rem;display:grid;align-content:start;gap:2px;background:var(--ground);padding:12px 14px}
.pd-kpis b{font-size:var(--fs-num);font-weight:700;line-height:1.2}
.pd-kpis span{font-size:var(--fs-sm);color:var(--muted);line-height:1.35}
.pd-f{display:grid;gap:6px;margin:0 0 var(--sp-md);max-width:40rem}
.pd-f > span{font-size:var(--fs-sm);color:var(--muted)}
.pd-f input,.pd-f textarea{font:inherit;min-height:44px;padding:8px 10px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink);max-width:100%;box-sizing:border-box}
.pd-f textarea{width:100%;min-height:6rem;font-family:var(--mono,monospace);font-size:var(--fs-sm)}
.pd-fs{margin:0}
.pd-fs input{width:8.5rem}
.pd-pin{display:inline-flex;align-items:center;gap:4px}
.pd-pin input{width:6rem;text-align:right}
.pd-bo3in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:4px 18px;margin:0 0 var(--sp-md)}
.pd-bo3in output{font-size:var(--fs-lg);font-weight:700;min-height:44px;display:flex;align-items:center;gap:6px}
.pd-bo3in output small{font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.pd-big{margin:0 0 var(--sp-md);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.pd-big b{font-size:var(--fs-num);line-height:1.1}
.pd-big span{color:var(--muted);font-size:var(--fs-sm)}
.pd-list{margin:0 0 var(--sp-md);padding-left:1.1em;display:grid;gap:6px;max-width:90ch;line-height:1.5}
.pd-chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.pd-chk input{width:18px;height:18px;margin:0}
.pd-inl{display:inline-flex;align-items:center;gap:4px}
.pd-inl input{width:4rem;min-height:36px;font:inherit;padding:0 6px;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);text-align:right}
.pd-table select{min-height:40px;max-width:14rem;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--ground);color:var(--ink)}
.pd-table tr.pd-me th{box-shadow:inset 3px 0 0 var(--spark)}
.pd-tbt input:not([type=checkbox]){width:6.5rem}
.pd-tbt input[type=checkbox]{width:20px;height:20px}
/* the bye box sits in a label as big as a fingertip, so a tap beside the box still lands on it */
.pd-tbt .pd-tbchk{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.pd-day{margin:0 0 var(--sp-md);padding-left:1.4em;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.pd-prints{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pd-prints li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 0;border-bottom:1px solid var(--rule)}
.pd-prints li span{flex:1 1 20rem;min-width:0;max-width:70ch;line-height:1.5}
.pd-team{list-style:none;margin:0 0 var(--sp-md);padding:0}
.pd-team li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 0;border-bottom:1px solid var(--rule)}
.pd-how{margin:var(--sp-xl) 0 0;border-top:1px solid var(--rule);padding-top:var(--sp-md)}
.pd-how summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.pd-howb p{font-size:var(--fs-sm);line-height:1.6;max-width:90ch;color:var(--ink)}
@media (width < 720px){
  .pd-ctls{gap:12px}
  .pd-ctl{width:100%}
  .pd-ctl select{width:100%}
  .pd-table th,.pd-table td{padding:6px 8px}
  .pd-fs{flex:1 1 9rem}
  .pd-fs input{width:100%}
  .pd-tbt input:not([type=checkbox]){width:4.6rem}
  /* row names keep a readable width; the table scrolls in its own box instead of breaking them word by word */
  .pd-ptab tbody th{min-width:12rem}
  .pd-rtab tbody th{min-width:8.5rem}
  .pd-tbt th,.pd-tbt td{padding:6px 4px}
}
/* the pocket card on the page, and the season's tables */
.pd-pocket{margin:var(--sp-md) 0 0;border-top:1px solid var(--rule);padding-top:var(--sp-sm)}
.pd-pocket summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.pd-pocket .pd-pkq{max-width:28rem;margin-top:var(--sp-sm)}
.pd-pocket .pd-list li{color:var(--ink)}
.pd-stab tbody th{min-width:9rem}
.pd-stab td small,.pd-src{font-size:var(--fs-xs);color:var(--muted)}
.pd-src a,.pd-sec .pd-note a{color:var(--ink)}
/* five tabs on a phone: they wrap to a second line rather than hide one off the edge */
@media (width < 720px){.pd-tabs{flex-wrap:wrap;gap:0 20px;overflow:visible}.pd-stab{min-width:34rem}.pd-stab tbody th{min-width:6.5rem}}
/* Meta Lens, formats wave (October 21, 2026): legal today, since a change, prices, shares by week, new from the latest
   release. The stale-list note folds to one line, so the archetype table starts on a phone's first screen. */
.mt details.mt-fresh{margin:-12px 0 20px;padding:0 14px}
.mt details.mt-fresh > summary{cursor:pointer;min-height:44px;box-sizing:border-box;display:block;position:relative;padding:11px 3.5rem 11px 0;list-style:none}
.mt details.mt-fresh > summary::-webkit-details-marker{display:none}
.mt details.mt-fresh > summary::after{content:"Why";position:absolute;right:0;top:11px;font-size:var(--fs-xs);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.mt details.mt-fresh[open] > summary::after{content:"Fold"}
.mt details.mt-fresh > p{margin:0 0 10px}
.mt .mt-ctrls .mt-sel select#mt-since{max-width:16rem}
.mt .mt-legal{margin:0 0 20px;padding:10px 14px;border:1px solid var(--rule2);border-left:3px solid var(--ink);border-radius:var(--r-md);background:var(--fill);font-size:var(--fs-sm);line-height:1.55;max-width:90ch}
.mt .mt-legal p{margin:0}
.mt .mt-legal p + p{margin-top:6px}
.mt .mt-legal a{color:var(--ink)}
.mt .mt-legal .btn-sm{margin-left:6px;vertical-align:baseline}
.mt .mt-legalsrc{color:var(--muted)}
.mt .mt-tag.mt-tagbad,.mt-drawer .mt-tag.mt-tagbad{border-style:dashed;color:var(--ink)}
.mt-drawer .mt-tag{display:inline-block;font-family:var(--sans);font-size:var(--fs-xs);line-height:18px;color:var(--muted);border:1px solid var(--rule2);border-radius:var(--r-sm);padding:0 6px;margin-left:6px;vertical-align:1px}
.mt .mt-pxc{white-space:nowrap;font-weight:700}
.mt .mt-table td.mt-pxc small{display:block;font-weight:400}
.mt .mt-table td.mt-pxc .mt-pxmiss{display:block}
.mt .mt-pxmiss{white-space:normal;max-width:9rem;margin-left:auto}
.mt-drawer .mt-dpx,.mt-drawer .mt-dname,.mt-drawer .mt-dbad{font-size:var(--fs-md);line-height:1.55;margin:8px 0 0;max-width:80ch}
.mt-drawer .mt-dname,.mt-drawer .mt-dpx .cl-muted{color:var(--muted)}
.mt-drawer details.mt-dname > summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding:11px 0;color:var(--ink)}
.mt-drawer details.mt-dname > p{margin:0 0 6px}
.mt-drawer .mt-dname a,.mt-drawer .mt-dpx a{color:var(--ink)}
.mt-drawer .mt-dbad{padding:6px 10px;border-left:3px solid var(--ink);background:var(--fill)}
/* shares by week: one row per archetype, the name on the left, the plot on the right, one shared time axis */
.mt .mt-wk .mt-tlede{font-size:var(--fs-md);line-height:1.55;color:var(--muted);max-width:80ch;margin:0 0 12px}
.mt .mt-wgrid{position:relative;display:grid;gap:0;outline-offset:4px;border-radius:var(--r-md)}
.mt .mt-wgrid:focus-visible{outline:2px solid var(--ink)}
.mt .mt-tr{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);gap:4px 16px;align-items:center;padding:4px 0;border-bottom:1px solid var(--rule)}
.mt .mt-tr.mt-trk{border-bottom:0;padding:0}
.mt .mt-trl{min-width:0;font-size:var(--fs-sm);line-height:1.35}
.mt .mt-trl .mt-alink{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;overflow-wrap:anywhere}
@media (hover:hover){.mt .mt-trl .mt-alink:hover{text-decoration:underline;text-underline-offset:3px}}
.mt .mt-trl small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.mt .mt-trp{position:relative;height:64px;min-width:0;touch-action:pan-y}
.mt .mt-trp svg{display:block;width:100%;height:100%;overflow:visible}
.mt .mt-trb{stroke:var(--rule2);stroke-width:1}
.mt .mt-tra{fill:var(--ink);fill-opacity:.1;stroke:none}
.mt .mt-trline{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mt .mt-chl{stroke:var(--muted);stroke-width:1;stroke-opacity:.75}
.mt .mt-chl.mt-chl-set{stroke:var(--faint);stroke-dasharray:2 3;stroke-opacity:.9}
.mt .mt-trdot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--ground);pointer-events:none}
.mt .mt-tks,.mt .mt-tms{position:relative;height:22px;min-width:0}
.mt .mt-tks{height:40px}
.mt .mt-tk{position:absolute;bottom:0;transform:translateX(-50%);min-width:20px;height:18px;line-height:18px;padding:0 4px;text-align:center;font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;color:var(--ground);background:var(--muted);border-radius:var(--r-sm);cursor:help}
.mt .mt-tk.mt-tk2{bottom:20px}
.mt .mt-tk.mt-tkset{color:var(--ink);background:var(--ground);border:1px dashed var(--faint);line-height:16px}
.mt .mt-tm{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.mt .mt-ttip{position:absolute;top:44px;z-index:5;display:grid;gap:2px;min-width:12rem;max-width:18rem;padding:8px 10px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);box-shadow:var(--shadow-tip);font-size:var(--fs-sm);line-height:1.4;pointer-events:none}
.mt .mt-ttip[hidden]{display:none}
.mt .mt-ttip span{display:flex;justify-content:space-between;gap:12px}
.mt .mt-ttip span.mt-ttc{display:block;color:var(--muted);border-top:1px solid var(--rule);padding-top:4px;margin-top:2px}
.mt .mt-tkey{margin:0 0 12px;padding-left:1.6rem;font-size:var(--fs-sm);line-height:1.55;columns:2 22rem;column-gap:32px}
.mt .mt-tkey li{break-inside:avoid;padding:2px 0}
.mt .mt-tkey a{color:var(--ink)}
.mt .mt-tkd{font-family:var(--sans);color:var(--muted)}
.mt .mt-tdet summary{cursor:pointer;font-size:var(--fs-sm);min-height:44px;display:flex;align-items:center}
.mt .mt-ttab th[scope=row]{white-space:nowrap;font-weight:400;text-align:left}
.mt .mt-ttab td,.mt .mt-ttab th{font-size:var(--fs-sm);padding:4px 8px}
/* new from the latest release */
.mt .mt-new .mt-newlede{font-size:var(--fs-md);line-height:1.5;margin:0 0 4px}
.mt .mt-new > .cl-small{margin:8px 0 0}
.mt .mt-new a{color:var(--ink)}
.mt .mt-lrules{margin:0 0 14px;padding-left:1.4rem;font-size:var(--fs-sm);line-height:1.55;max-width:100ch}
.mt .mt-lrules li{padding:3px 0}
@media (width < 720px){
  .mt details.mt-fresh{margin:-16px 0 12px;padding:0 10px}
  .mt details.mt-fresh > summary{font-size:var(--fs-sm)}
  .mt .mt-kpis{margin-bottom:16px}
  .mt .mt-tr{grid-template-columns:minmax(0,1fr);gap:2px}
  .mt .mt-tr.mt-trk > .mt-trl{display:none}
  .mt .mt-tkey{columns:1;padding-left:1.4rem}
  .mt .mt-ttip{max-width:min(18rem,calc(100vw - 48px))}
  .mt .mt-legal .btn-sm{margin:6px 0 0}
  /* the controls scroll sideways as one row: a group of buttons keeps its own width rather than spilling over the next */
  .mt .mt-ctrls > .mt-seg{max-width:none}
}
@media (pointer: coarse){.mt .mt-legal .btn-sm,.mt .mt-trl .mt-alink{min-height:44px}.mt .mt-tk{min-width:24px}}

/* ================================================================ the shared deck page (/d/, sharedeck.js)
   The frame is the deck as a picture: its own small palette (paper or night, whatever the site's theme), so a
   screenshot reads the same anywhere. Card pictures are whole: counts sit under them, copies are edges behind them. */
.sd{display:block;padding-bottom:var(--sp-2xl)}
.sd-frame{
  --sd-ground:#FFFFFF;--sd-ink:#191816;--sd-muted:#57534D;--sd-faint:#6E6A64;--sd-rule:#E6E3DE;--sd-panel:#F7F6F4;
  --sd-row:#F9F8F6;--sd-row-h:#EFEDE9;--sd-chip:#F1EFEB;--sd-edge:#D5D1CA;--sd-edge-line:#FFFFFF;--sd-bar:#191816;--sd-track:#EEECE8;
  --sd-w:#E2D49E;--sd-u:#7FA9D3;--sd-b:#7C736C;--sd-r:#DB7D5B;--sd-g:#6FA67D;--sd-m:#D1A94A;--sd-c:#B7B0A6;--sd-l:#A88C66;
  --sd-ok:#2B7149;--sd-bad:#AD3D2B;--sd-spark:#E0561C;
  color-scheme:light;
  position:relative;background:var(--sd-ground);color:var(--sd-ink);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(18px,3.4vw,48px);box-shadow:var(--shadow-2);container:sdf / inline-size;overflow-wrap:anywhere
}
.sd-frame[data-theme="night"]{
  --sd-ground:#141312;--sd-ink:#F3F1ED;--sd-muted:#B9B4AC;--sd-faint:#A29D95;--sd-rule:#2E2B28;--sd-panel:#1C1A18;
  --sd-row:#1B1A18;--sd-row-h:#262421;--sd-chip:#24221F;--sd-edge:#3B3733;--sd-edge-line:#141312;--sd-bar:#F3F1ED;--sd-track:#24221F;
  --sd-w:#EADFAF;--sd-u:#8FB8E0;--sd-b:#A0968E;--sd-r:#E89272;--sd-g:#86BD93;--sd-m:#E0B95A;--sd-c:#9C968D;--sd-l:#B89B74;
  --sd-ok:#6CC08F;--sd-bad:#F08C78;
  color-scheme:dark;border-color:var(--sd-rule)
}
.sd-frame :focus-visible{outline:2px solid var(--sd-ink);outline-offset:2px}
.sd-frame :where(button){font:inherit;color:inherit}
/* the deck's colors along the top edge: its signature, in the frame and in every image */
.sd-frame::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--sig,var(--sd-c))}

/* ---------------------------------------------------------------- the controls above the frame */
.sd-own{margin:0 0 var(--sp-md);padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--stone);font-size:var(--fs-sm)}
.sd-warn{margin:0 0 var(--sp-md);padding:10px 14px;border:1px solid var(--warn-line);border-radius:var(--r-md);background:var(--warn-bg);font-size:var(--fs-sm)}
.sd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 var(--sp-lg)}
.sd-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--surface)}
.sd-seg button{min-height:var(--ctl-h-sm);padding:2px 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--muted);font:700 var(--fs-sm)/1 var(--sans);cursor:pointer}
@media (hover:hover){.sd-seg button:hover{color:var(--ink);background:var(--hover)}}
.sd-seg button[aria-checked="true"]{background:var(--ink);color:var(--on-accent)}
.sd-sel{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted)}
.sd-sel select{min-height:var(--ctl-h-sm)}
.sd-tog{display:inline-flex;flex-wrap:wrap;gap:6px}
.sd-chip{min-height:var(--ctl-h-sm);padding:2px 12px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font:400 var(--fs-sm)/1 var(--sans);cursor:pointer}
@media (hover:hover){.sd-chip:hover{color:var(--ink);border-color:var(--line-field)}}
.sd-chip[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);font-weight:700}
.sd-chip[aria-pressed="true"]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--ink);vertical-align:.12em}
.sd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
@media (pointer:coarse){.sd-seg button,.sd-chip,.sd-sel select{min-height:44px}}
@media (width < 720px){.sd-acts{margin-left:0;width:100%}.sd-acts .btn-sm{flex:1 1 auto}.sd-acts .sd-wide{display:none}}

.sd-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-xl);align-items:start}
.sd-stage.with-studio{grid-template-columns:minmax(0,1fr) 340px}
@media (width < 1100px){.sd-stage.with-studio{grid-template-columns:minmax(0,1fr)}.sd-stage.with-studio .sd-studio{order:-1;position:static;max-height:none}}
.sd-framewrap{min-width:0}

/* ---------------------------------------------------------------- the header */
.sd-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 48px;align-items:end;padding-bottom:clamp(18px,2.6cqi,32px);border-bottom:1px solid var(--sd-rule)}
.sd-kick{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0 0 12px;font:700 var(--fs-xs)/1.3 var(--code);color:var(--sd-muted);letter-spacing:.02em}
.sd-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.sd-title{margin:0;font:700 clamp(2rem,6.2cqi,3.75rem)/1.02 var(--sans);letter-spacing:-.025em;text-wrap:balance;color:var(--sd-ink)}
.sd-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;font-size:var(--fs-xl);color:var(--sd-muted)}
.sd-by b{color:var(--sd-ink)}
.sd-ev{display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border:1px solid var(--sd-rule);border-radius:var(--r-pill);background:var(--sd-chip);color:var(--sd-ink);font-size:var(--fs-md);font-weight:700}
.sd-lead{margin:10px 0 0;font-size:var(--fs-lg);color:var(--sd-muted)}
.sd-lead b{color:var(--sd-ink)}
.sd-note{margin:10px 0 0;max-width:62ch;font-size:var(--fs-lg);line-height:1.5;color:var(--sd-muted)}
.sd-hr{display:grid;justify-items:end;gap:14px}
.sd-pips{margin:0;line-height:1}
.sd-pips .sym{width:30px;height:30px;margin-left:4px}
.sd-pips-c{font-size:var(--fs-sm);color:var(--sd-muted)}
.sd-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;margin:0}
.sd-stats div{display:flex;flex-direction:column-reverse;align-items:flex-end}
.sd-stats dt{font-size:var(--fs-xs);color:var(--sd-muted)}
.sd-stats dd{margin:0;font:700 var(--fs-num)/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--sd-ink)}
.sd-curve{display:flex;align-items:flex-end;gap:5px}
.sd-cb{display:flex;flex-direction:column;align-items:center;gap:3px;width:24px;padding:0;border:0;background:none;cursor:pointer}
.sd-cb:disabled{cursor:default}
.sd-cn{min-height:1em;font:700 var(--fs-xs)/1 var(--code);color:var(--sd-muted)}
.sd-cbar{display:flex;align-items:flex-end;width:18px;height:52px;border-radius:var(--r-sm);background:var(--sd-track);overflow:hidden}
.sd-cbar i{display:block;width:100%;background:var(--sd-bar);border-radius:var(--r-sm) var(--r-sm) 0 0}
.sd-cl{font:700 var(--fs-xs)/1 var(--code);color:var(--sd-muted)}
@media (pointer:coarse){.sd-cn,.sd-cl{font-size:13px}}
.sd-cb[aria-pressed="true"] .sd-cbar{outline:2px solid var(--sd-ink);outline-offset:2px}
.sd-legal{grid-column:1 / -1;margin:0;font-size:var(--fs-sm);color:var(--sd-muted)}
.sd-legal::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--sd-ok);vertical-align:.05em}
.sd-legal.bad::before{background:var(--sd-bad)}
.sd-legal.bad{color:var(--sd-ink)}
.sd-legal-d{color:var(--sd-faint)}
@container sdf (width < 760px){
  .sd-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .sd-hr{justify-items:start}
  .sd-stats{justify-content:flex-start}
  .sd-stats div{align-items:flex-start}
  .sd-pips .sym{margin:0 4px 0 0}
}

/* ---------------------------------------------------------------- featured cards: whole, the count and artist under each */
.sd-feat{padding:clamp(18px,2.6cqi,32px) 0;border-bottom:1px solid var(--sd-rule)}
.sd-feat-l{--g:clamp(10px,2.2cqi,28px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);max-width:calc(var(--n) * 256px)}
.sd-fc{min-width:0}
.sd-fpic{display:block;width:100%;padding:0;border:0;background:none;border-radius:var(--r-card);cursor:zoom-in}
.sd-fpic img,.sd-tpic img{display:block;width:100%;height:auto;aspect-ratio:488 / 680;border-radius:var(--r-card);background:var(--sd-panel);box-shadow:var(--shadow-pic)}
.sd-fpic .cl-fallback,.sd-tpic .cl-fallback{aspect-ratio:488 / 680;border-radius:var(--r-card)}
.sd-fcap{display:flex;flex-direction:column;gap:2px;margin:10px 0 0;font-size:var(--fs-sm);line-height:1.3}
.sd-fcap b{color:var(--sd-ink)}
.sd-fcap span{font-size:var(--fs-xs);color:var(--sd-muted)}
/* narrow: rows of three (four cards make two pairs), a short last row centered under the full one */
@container sdf (width < 700px){
  .sd-feat-l{--per:min(var(--n),3);display:flex;flex-wrap:wrap;justify-content:center;max-width:none}
  .sd-feat-l[data-n="4"]{--per:2}
  .sd-feat-l[data-n="1"]{justify-content:flex-start}
  .sd-feat-l .sd-fc{flex:0 0 calc((100% - (var(--per) - 1) * var(--g)) / var(--per));max-width:256px}
}
@container sdf (width < 440px){.sd-feat-l{--g:10px}.sd-fcap{font-size:var(--fs-xs)}.sd-fcap span{font-size:var(--fs-xs)}}

/* ---------------------------------------------------------------- the showcase list: name bars in columns */
.sd-body{padding-top:clamp(18px,2.6cqi,32px)}
.sd-v-showcase{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.6cqi,36px);align-items:start}
.sd-v-showcase.has-side{grid-template-columns:minmax(0,1fr) minmax(220px,290px)}
@container sdf (width < 760px){.sd-v-showcase.has-side{grid-template-columns:minmax(0,1fr)}}
.sd-cols{columns:250px auto;column-gap:clamp(16px,2.4cqi,32px)}
.sd-grp{break-inside:avoid;margin:0 0 20px}
.sd-side{padding:14px;border-radius:var(--r-md);background:var(--sd-panel)}
.sd-side .sd-grp{margin:0}
.sd-gh{margin:0;font-size:var(--fs-sm)}
.sd-ghb{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;min-height:30px;padding:2px 2px 6px;border:0;border-bottom:1px solid var(--sd-rule);background:none;font:700 var(--fs-md)/1.2 var(--sans);text-align:left;cursor:pointer}
.sd-ghb:disabled{cursor:default}
.sd-ghb[aria-pressed="true"]{border-bottom:2px solid var(--sd-ink)}
.sd-gn{font:700 var(--fs-sm)/1 var(--code);color:var(--sd-muted)}
.sd-rows{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.sd-row{position:relative;display:grid;grid-template-columns:minmax(1.7em,auto) minmax(0,1fr) auto auto;align-items:center;gap:8px;width:100%;min-height:34px;padding:4px 8px 4px 14px;border:0;border-radius:var(--r-md);background:var(--sd-row);text-align:left;font:400 var(--fs-md)/1.25 var(--sans);cursor:pointer}
.sd-row::before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:4px;border-radius:var(--r-pill);background:var(--st,var(--sd-c))}
div.sd-row{cursor:default}
@media (hover:hover){.sd-row:hover{background:var(--sd-row-h)}}
.sd-q{font:700 var(--fs-sm)/1 var(--code);color:var(--sd-ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sd-n{min-width:0;color:var(--sd-ink)}
.sd-tag{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--r-pill);background:var(--sd-chip);color:var(--sd-muted);font-size:var(--fs-xs);font-weight:700;vertical-align:.1em}
.sd-px{font:400 var(--fs-xs)/1 var(--sans);color:var(--sd-muted);font-variant-numeric:tabular-nums}
.sd-mc{display:inline-flex;white-space:nowrap}
.sd-mc .sym{width:16px;height:16px;margin-left:1px}
.sd-mc .mana-sep{margin:0 2px;color:var(--sd-muted)}
@media (pointer:coarse){.sd-row,.sd-ghb{min-height:44px}}
.sd-frame[data-hl-on] [data-hl]{transition:opacity .18s ease}
.sd-frame[data-hl-on] .sd-dim{opacity:.22}
.sd-frame[data-hl-on] .sd-row.sd-lit{background:var(--sd-row-h)}
@media (prefers-reduced-motion:reduce){.sd-frame[data-hl-on] [data-hl]{transition:none}}

/* ---------------------------------------------------------------- cards: every card whole, copies as edges behind */
.sd-v-cards{display:flex;flex-direction:column;gap:clamp(20px,3cqi,40px)}
.sd-tiles{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 22px}
@container sdf (width < 520px){.sd-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}}
.sd-tile{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0 8px 0 0}
.sd-tpic{position:relative;display:block;width:100%;padding:0;border:0;background:none;border-radius:var(--r-card);isolation:isolate;cursor:zoom-in}
.sd-tpic::before,.sd-tpic::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-card);background:var(--sd-edge);border:1px solid var(--sd-edge-line);display:none}
.sd-tile[data-copies="2"] .sd-tpic::before,.sd-tile[data-copies="3"] .sd-tpic::before,.sd-tile[data-copies="4"] .sd-tpic::before{display:block;transform:translate(4px,4px)}
.sd-tile[data-copies="3"] .sd-tpic::after,.sd-tile[data-copies="4"] .sd-tpic::after{display:block;transform:translate(8px,8px);opacity:.75}
.sd-tcap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 0 0;font-size:var(--fs-sm)}
.sd-tq{font:700 var(--fs-md)/1 var(--code);color:var(--sd-ink)}
.sd-tpx{font-size:var(--fs-xs);color:var(--sd-muted)}
.sd-tile-x{padding:12px;border:1px dashed var(--sd-rule);border-radius:var(--r-md);aspect-ratio:488 / 680;justify-content:center}
.sd-tx{font-weight:700}
.sd-tx small{display:block;font-weight:400;color:var(--sd-muted)}
.sd-tgrp .sd-ghb{max-width:100%}

/* ---------------------------------------------------------------- list: text, to read aloud, print or copy */
.sd-v-list{columns:230px auto;column-gap:32px}
.sd-lgrp{break-inside:avoid;margin:0 0 18px}
.sd-lgrp h2{margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--sd-rule);font-size:var(--fs-md)}
.sd-lgrp h2 span{font:700 var(--fs-sm)/1 var(--code);color:var(--sd-muted)}
.sd-lgrp ul{list-style:none;margin:0;padding:0}
.sd-lgrp li{padding:3px 0;font-size:var(--fs-md)}
.sd-lgrp a{color:var(--sd-ink)}
.sd-lgrp .sd-q{display:inline-block;min-width:1.6em;text-align:left}

/* ---------------------------------------------------------------- the corner: wordmark, address, QR code */
.sd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(20px,3cqi,40px);padding-top:16px;border-top:1px solid var(--sd-rule)}
.sd-mark{margin:0;font:400 var(--fs-xl)/1 var(--code);letter-spacing:-.01em;color:var(--sd-ink)}
.sd-mark b{font-weight:700}
.sd-mark i{display:inline-block;width:.55em;height:.95em;margin-left:2px;background:var(--sd-spark);vertical-align:-.1em}
.sd-url{margin:0 0 0 auto;font:700 var(--fs-md)/1 var(--code);color:var(--sd-muted)}
.sd-fan{flex:1 1 100%;margin:0;max-width:96ch;font:400 var(--fs-xs)/1.45 var(--sans);color:var(--sd-muted)}
@media (pointer:coarse){.sd-fan{font-size:var(--fs-xs)}}
.sd-qr{display:inline-flex;align-items:center;gap:10px;color:var(--sd-muted);font-size:var(--fs-xs);line-height:1.25;text-decoration:none}
.sd-qr svg{width:76px;height:76px;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--sd-rule)}
@media (pointer:coarse){.sd-qr{min-height:44px}}
@container sdf (width < 440px){.sd-qr svg{width:64px;height:64px}.sd-url{margin-left:0}}

/* ---------------------------------------------------------------- waiting, missing */
.sd-wait{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.sd-wait .cl-wait{grid-column:1 / -1;color:var(--sd-muted)}
.sd-ghost{display:block;height:34px;border-radius:var(--r-md);background:var(--sd-row)}
.sd-missing{max-width:62ch;padding:var(--sp-2xl) 0}
.sd-missing h1{font-size:var(--fs-title);margin:0 0 12px}

/* ---------------------------------------------------------------- the studio */
.sd-studio{position:sticky;top:calc(var(--top-h) + 16px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--top-h) - 32px);max-height:calc(100dvh - var(--top-h) - 32px);overflow:auto;padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.sd-st-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sd-st-top h2{margin:0;font-size:var(--fs-xl)}
.sd-studio p{margin:0}
.sd-f{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-width:0}
.sd-f > span,.sd-f legend{font-size:var(--fs-sm);font-weight:700;padding:0}
.sd-f i{font-style:normal;font-weight:400;color:var(--muted)}
.sd-f input:not([type]),.sd-f input[type="text"],.sd-f select{width:100%}
.sd-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);min-height:32px}
@media (pointer:coarse){.sd-check{min-height:44px}}
.sd-fl{margin:0;padding:0 0 0 1.4em;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.sd-fl li{display:flex;align-items:center;gap:6px}
.sd-fl li span{flex:1;min-width:0}
.sd-seg-s button{padding:2px 10px}

/* ---------------------------------------------------------------- below the frame: guide, primer, record */
.sd-extras{display:grid;gap:var(--sp-xl);margin-top:var(--sp-2xl)}
.sd-extras:empty{display:none}
.sd-panel{min-width:0;padding:clamp(16px,2.4vw,28px);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow-wrap:anywhere}
.sd-panel h2{margin:0 0 14px;font-size:var(--fs-xl)}
.sd-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.sd-plan{padding:14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--stone)}
.sd-plan h3{margin:0 0 10px;font-size:var(--fs-xl)}
.sd-pss{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.sd-ps h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--muted)}
.sd-ps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-md)}
.sd-ps li span{display:inline-block;min-width:2.2em;font:700 var(--fs-sm)/1 var(--code)}
@media (pointer:coarse){.sd-ps ul{gap:0}.sd-ps li{display:flex;align-items:center;min-height:44px}.sd-ps li a{display:flex;align-items:center;min-height:44px;flex:1}}
.sd-ps li.in span{color:var(--ok)}
.sd-ps li.out span{color:var(--bad)}
.sd-pnote{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.sd-md{max-width:72ch;line-height:1.6}
.sd-md h3,.sd-md h4,.sd-md h5{margin:1.2em 0 .4em}
.sd-recn{font-size:var(--fs-xl);margin:0 0 6px}
.sd-vs{border-collapse:collapse;width:100%;max-width:440px;margin:10px 0 8px;font-variant-numeric:tabular-nums}
.sd-vs th,.sd-vs td{text-align:left;padding:5px 10px 5px 0;border-bottom:1px solid var(--rule);font-weight:400}
.sd-vs thead th{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.sd-vs tbody th{font-weight:600;overflow-wrap:anywhere}
.sd-vs td{white-space:nowrap}
.sd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- dialogs: QR, more, the hand */
.sd-qrbig svg{display:block;width:min(340px,78vw);height:auto;margin:6px auto 12px;border-radius:var(--r-md)}
.sd-morel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sd-morel li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.sd-morel li span{font-size:var(--fs-sm);color:var(--muted)}
.sd-morel li .btn-sm{flex:0 0 auto;white-space:nowrap}
.sd-hand{list-style:none;margin:12px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.sd-hand button{display:block;width:100%;padding:0;border:0;background:none;border-radius:var(--r-card);cursor:zoom-in}
.sd-hand img{display:block;width:100%;height:auto;aspect-ratio:488 / 680;border-radius:var(--r-card)}

/* the bigger hover picture of a row, in the sender's printing */
.sd-peek{position:fixed;z-index:70;width:300px;height:auto;aspect-ratio:488 / 680;border-radius:var(--r-card);box-shadow:var(--shadow-3);pointer-events:none;background:var(--fill)}

/* ---------------------------------------------------------------- present: only the frame, for a clean screenshot */
html.sd-presenting{--side-w:0px}
html.sd-presenting body{padding-left:var(--gut)}
html.sd-presenting .side,html.sd-presenting .top,html.sd-presenting #ph,html.sd-presenting .foot,html.sd-presenting .sd-bar,html.sd-presenting .sd-extras,
html.sd-presenting .sd-own,html.sd-presenting .sd-studio,html.sd-presenting .sd-warn,html.sd-presenting .skip-link,html.sd-presenting .ms-toasts{display:none!important}
html.sd-presenting body.app .wrap{max-width:1640px}
html.sd-presenting .sd-stage{display:block;padding-block:clamp(8px,2vw,28px)}
html.sd-presenting .sd-frame{box-shadow:none}
.sd-exit{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:10px;z-index:80;min-height:36px;padding:4px 14px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:700 var(--fs-sm)/1 var(--sans);box-shadow:var(--shadow-2);opacity:.82;cursor:pointer}
.sd-exit:focus-visible{opacity:1}@media (hover:hover){.sd-exit:hover{opacity:1}}
@media (pointer:coarse){.sd-exit{min-height:44px}}

@media print{
  .side,.top,#ph,.foot,.sd-bar,.sd-own,.sd-studio,.sd-warn,.sd-exit,.ms-toasts{display:none!important}
  body{padding:0!important}
  .sd-frame{box-shadow:none;border:0;padding:0}
  .sd-row{background:none}
  .sd-panel{break-inside:avoid}
}

/* ---------------------------------------------------------------- the image maker (shareimg.js) */
.si-opts{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 12px}
.si-opts fieldset{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.si-opts legend{width:100%;margin:0 0 6px;padding:0;font-size:var(--fs-sm);font-weight:700}
.si-size{position:relative;display:inline-flex;cursor:pointer}
.si-size input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.si-size span{display:flex;flex-direction:column;gap:2px;min-height:var(--ctl-h);padding:7px 12px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);line-height:1.25}
.si-size small{color:var(--muted);font-size:var(--fs-xs)}
@media (pointer:coarse){.si-size small{font-size:13px}}
.si-size input:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.si-size input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
@media (pointer:coarse){.si-size span{min-height:44px}}
.si-prev{display:grid;place-items:center;min-height:200px;max-height:62vh;max-height:62dvh;overflow:auto;padding:12px;border-radius:var(--r-md);background:var(--fill)}
.si-prev img{display:block;max-width:100%;max-height:58vh;max-height:58dvh;width:auto;height:auto;box-shadow:var(--shadow-2)}
.si-acts{margin-top:12px}

/* ================================================================ Collection, October 17: Intake, locations, insights, the
   seller tools (intake.js, locations.js, insight.js, sell.js). Card pictures stay whole: counts, flags and undo sit beside
   or under them, never on them. Gold (--star) marks a card worth checking; orange stays for "where you are". */

/* ---------------------------------------------------------------- the copy badges added to the grid and list */
.co-b.slab{border-color:var(--ink);font-weight:700}
.co-b.loc{font-family:var(--code);text-transform:lowercase}
.co-b.st-sell,.co-b.st-listed,.co-b.st-reserved{border-color:var(--ok);color:var(--ok)}
.co-b.st-lent,.co-b.st-lost{border-color:var(--warn);color:var(--warn)}
.co-copymore{margin:var(--sp-md) 0;border:1px solid var(--rule);border-radius:var(--r-md);padding:8px var(--sp-md)}
.co-copymore>summary{cursor:pointer;font-weight:700;font-size:var(--fs-sm);min-height:var(--tap);display:flex;align-items:center}
.co-slab{border:1px solid var(--rule);border-radius:var(--r-md);padding:8px var(--sp-md);margin:var(--sp-sm) 0}
.co-slab legend{font-size:var(--fs-sm);font-weight:700;padding:0 4px}
.co-wide{grid-column:1/-1}
.co-photos{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center;margin:var(--sp-sm) 0}
.co-photo{display:grid;gap:4px;justify-items:start}
.co-photo img{width:96px;height:auto;border-radius:var(--r-sm);border:1px solid var(--rule)}
.co-story ol{margin:4px 0 0;padding-left:var(--sp-lg);font-size:var(--fs-sm)}
.co-story time{font-family:var(--code);color:var(--muted)}
.co-plus{display:none}
@media (width < 720px){
  .co-plus{display:grid;place-items:center;position:fixed;right:var(--sp-lg);bottom:calc(var(--sp-lg) + env(safe-area-inset-bottom,0px));z-index:55;width:60px;height:60px;border-radius:50%;border:0;background:var(--ink);color:var(--on-accent);font:700 var(--fs-title)/1 var(--sans);box-shadow:var(--shadow-2);cursor:pointer}
  .in-on .co-plus{display:none}
}

/* ---------------------------------------------------------------- Intake: a full screen with one job */
.in-on,.in-on body{overflow:hidden}
#in-app{position:fixed;inset:0;z-index:70;background:var(--ground);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  padding:max(var(--sp-md),env(safe-area-inset-top,0px)) max(var(--sp-lg),env(safe-area-inset-right,0px)) max(var(--sp-xl),env(safe-area-inset-bottom,0px)) max(var(--sp-lg),env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:var(--sp-sm);container:in / inline-size}
#in-app[hidden]{display:none}
#in-app>*{flex-shrink:0}
.in-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-sm) var(--sp-lg)}
.in-h{margin:0;font-size:var(--fs-xl)}
.in-sess{margin:0;font-size:var(--fs-md);color:var(--muted);flex:1 1 220px}
.in-sess b{color:var(--ink)}
.in-acts{display:flex;flex-wrap:wrap;gap:6px}
.in-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:0}
.in-recent:empty{display:none}
.in-cl{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}   /* sentence case, as written (B5-25) */
/* the entry line: big, always focused */
.in-line{position:relative}
.in-entrywrap{display:flex;align-items:center;gap:var(--sp-sm);border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--surface);padding:0 var(--sp-md)}
.in-entrywrap:focus-within{box-shadow:0 0 0 3px var(--accent-tint)}
.in-entrywrap .cl-prompt{font:700 var(--fs-xl)/1 var(--code);color:var(--spark)}
#in-entry{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:700 var(--fs-xl)/1.2 var(--code);padding:12px 0;outline:none}
#in-entry::placeholder{color:var(--faint);font-weight:400;font-size:var(--fs-lg)}
.in-preview{margin:6px 2px 0;min-height:1.4em;font-size:var(--fs-md);color:var(--muted)}
.in-sug{position:absolute;left:0;right:0;top:calc(100% - 1.6em);z-index:3;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.in-sug li{padding:8px 10px;border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-md)}
.in-sug li[aria-selected="true"]{background:var(--sel)}@media (hover:hover){.in-sug li:hover{background:var(--sel)}}
/* the context bar: what the next Enter does, shown big */
.in-ctx{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-md);padding:var(--sp-sm) 0;border-block:1px solid var(--rule)}
.in-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.in-c>.db-seg,.in-c>select,.in-c>button{align-self:flex-start}
.in-c-set{flex:1 1 260px}
.in-big{font-size:var(--fs-lg);min-height:var(--ctl-h)}
button.in-big{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);padding:4px 12px;cursor:pointer;text-align:left;max-width:100%}
button.in-big b{font-family:var(--code)}
button.in-big small{color:var(--muted);font-size:var(--fs-xs)}
.in-say{margin:0;min-height:1.5em;font-size:var(--fs-md);font-weight:700}
.in-say.is-ok{color:var(--ok)}
.in-say.is-bad{color:var(--bad)}
.in-say.is-warn{color:var(--warn)}
.in-pickbox{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-lg);padding:var(--sp-sm) var(--sp-md);margin:0}
/* the card just added, big, and the ribbon of the last 20 */
.in-main{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:var(--sp-lg);align-items:start}
.in-last{margin:0;display:grid;gap:6px}
.in-last img{width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg);box-shadow:var(--shadow-card);transition:box-shadow .4s}
.in-last.is-flash img{box-shadow:0 0 0 4px var(--ok)}
.in-last figcaption{display:grid;gap:2px;font-size:var(--fs-sm)}
.in-last figcaption span{color:var(--muted)}
.in-last-empty{border:2px dashed var(--rule2);border-radius:var(--r-lg);aspect-ratio:488/680;display:grid;place-items:center;padding:var(--sp-md);text-align:center;color:var(--muted);font-size:var(--fs-sm)}
.in-ribbon{list-style:none;margin:0;padding:2px 2px var(--sp-sm);display:flex;gap:var(--sp-sm);overflow-x:auto;scroll-snap-type:x proximity;align-items:flex-start}
.in-rb{flex:0 0 132px;display:grid;gap:4px;border:2px solid transparent;border-radius:var(--r-lg);padding:4px;scroll-snap-align:start;font-size:var(--fs-xs)}
.in-rb.is-new{border-color:var(--ok)}
.in-rb.is-guard{border-color:var(--star)}
.in-rb.is-undone{opacity:.55}
.in-rb.is-out .in-rb-t b{color:var(--bad)}
.in-rb-pic img{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.in-rb-t{display:grid;gap:2px;min-width:0}
.in-rb-t b{font-size:var(--fs-sm);line-height:1.2;overflow-wrap:anywhere}
.in-rb-t span{color:var(--muted);overflow-wrap:anywhere}
.in-rb-flag{display:block;color:var(--warn);font-weight:700;font-size:var(--fs-xs)}
.in-rb-undo{justify-self:start;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:700 var(--fs-xs)/1 var(--sans);padding:6px 12px;cursor:pointer}
@media (hover:hover){.in-rb-undo:hover{background:var(--hover)}}
.in-rb-empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--sp-md) 0}
.in-tabs{margin-top:var(--sp-sm)}
.in-panel{min-height:120px}
/* the set checklist: compact tiles in number order, the owned count under each picture */
.in-gridhead{display:flex;flex-wrap:wrap;gap:6px var(--sp-md);align-items:center;margin:var(--sp-sm) 0}
.in-gridhead>b{display:inline-flex;align-items:center;gap:6px}
.in-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.in-tile{display:grid;gap:2px;padding:3px;border:2px solid transparent;border-radius:var(--r-md);background:none;color:var(--ink);cursor:pointer;content-visibility:auto;contain-intrinsic-size:88px 150px;text-align:left}
.in-tile img{width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg);opacity:.45}
.in-tile.is-own img{opacity:1}
.in-tile.is-hit{border-color:var(--ink)}
@media (hover:hover){.in-tile:hover{background:var(--hover)}}
.in-tile-t{display:flex;justify-content:space-between;font:var(--fs-xs)/1.2 var(--code)}
.in-tile-t b{color:var(--ok)}
.in-log{list-style:none;margin:0;padding:0;display:grid}
.in-log li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--sp-md);align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.in-log li.is-undone>span:nth-child(2){text-decoration:line-through;color:var(--muted)}
.in-log time{font-family:var(--code);color:var(--muted);font-size:var(--fs-xs)}
.in-sesshead{display:flex;flex-wrap:wrap;gap:6px var(--sp-md);align-items:baseline;margin:var(--sp-sm) 0}
.in-past{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.in-past li{display:flex;flex-wrap:wrap;gap:6px var(--sp-md);align-items:center;font-size:var(--fs-sm)}
.in-past li>span{flex:1 1 240px}
.in-check{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-sm)}
.in-check li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--sp-md);align-items:start;padding:var(--sp-sm);border:1px solid var(--star);border-radius:var(--r-lg)}
.in-check img{width:72px;height:auto;border-radius:var(--r-card)}
.in-check .ms-row{grid-column:2}
/* How to type: the two tables side by side when each gets room for both its columns, the notes under them */
.in-help{display:grid;gap:var(--sp-lg);grid-template-columns:repeat(auto-fit,minmax(min(540px,100%),1fr));align-items:start}
.in-help>:not(.db-tablewrap){grid-column:1/-1}
.in-help code,.in-help kbd{font-family:var(--code);font-size:var(--fs-sm);white-space:normal}
.in-help :is(td:first-child,th[scope=row]){width:42%}
.in-help caption{text-align:left;font-weight:700;padding:0 0 var(--sp-sm)}
.in-help :is(td,th){vertical-align:top}
.in-rcpt{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.in-rsets{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-sm)}
.in-rflags{font-size:var(--fs-sm);margin:0;padding-left:var(--sp-lg)}
.in-condt{font-size:var(--fs-sm)}
.in-condt caption{text-align:left;font-size:var(--fs-xs);color:var(--muted);padding-bottom:4px}
.in-scale{border:0;padding:0;margin:var(--sp-sm) 0;display:grid;gap:6px}
.in-scale legend{font-weight:700;font-size:var(--fs-sm);margin-bottom:4px}
@container in (width < 720px){
  .in-main{grid-template-columns:minmax(0,1fr)}
  .in-last{grid-template-columns:110px minmax(0,1fr);align-items:start}
  .in-last-empty{aspect-ratio:auto;min-height:72px}
  .in-rb{flex-basis:112px}
  #in-entry{font-size:var(--fs-xl)}
  .in-ctx{gap:var(--sp-sm)}
  .in-c{flex:1 1 140px}
  .in-c-stat{flex-basis:220px}   /* three status buttons on one line */
  .in-c>select,.in-c>.db-seg{max-width:100%}
  .in-log li{grid-template-columns:minmax(0,1fr) auto;gap:4px var(--sp-sm)}
  .in-log time{grid-column:1/-1}
  .in-help code,.in-help kbd{overflow-wrap:anywhere}
}
@media (pointer:coarse){
  .in-rb-undo,.in-sug li,.in-tile{min-height:44px}
  .in-rb-undo{padding:12px 16px}
  #in-entry{font-size:var(--fs-xl)}
}
@media (prefers-reduced-motion:reduce){
  .in-last img{transition:none}
}

/* ---------------------------------------------------------------- the collection's views added October 17 */
.co-b.rot{border-color:var(--warn);color:var(--warn)}
.co-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--sp-lg)}
.co-gfig{margin:0;display:grid;align-content:start;gap:6px;content-visibility:auto;contain-intrinsic-size:auto 460px}   /* a long gallery draws only the pictures near the screen */
.co-gfig .co-img{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-card)}
.co-gfig img{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);background:var(--code-bg)}
.co-gfig figcaption{display:grid;gap:2px;font-size:var(--fs-sm)}
.co-gfig figcaption span{color:var(--muted)}
.co-vchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-sm)}
.co-keeps{display:block;margin-top:2px}
.co-keeps summary{cursor:pointer;font-size:var(--fs-xs);color:var(--muted)}
.co-fixit li{margin:0 0 var(--sp-sm)}
.co-fixrow{display:flex;flex-wrap:wrap;gap:var(--sp-sm);margin-top:4px}
.co-fixrow .co-pp{flex:0 0 96px}
.co-remap,.co-sync,.co-loss{margin:var(--sp-sm) 0}
.co-remap select{max-width:100%}
/* ---------------------------------------------------------------- Storage (locations.js) */
.lc-head .ms-row{margin-top:var(--sp-sm)}
.lc-kpis,.se-kpis{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-xl);margin:var(--sp-md) 0}
.lc-kpis>div,.se-kpis>div{display:grid;gap:2px}
.lc-kpis b,.se-kpis b{font-size:var(--fs-num)}
.lc-kpis span,.se-kpis span{font-size:var(--fs-xs);color:var(--muted)}
.se-kpis .is-zero b{color:var(--faint)}
.lc-tree,.lc-tree ul{list-style:none;margin:0;padding:0}
.lc-tree{container:lct / inline-size}
.lc-tree ul{padding-left:var(--sp-lg);border-left:1px solid var(--rule)}
.lc-node{display:grid;grid-template-columns:minmax(min(10rem,100%),1fr) minmax(120px,200px) auto;gap:var(--sp-sm) var(--sp-md);align-items:center;padding:6px 0;border-bottom:1px solid var(--rule)}
.lc-name code,.co-crumb code,.lc-kids code{font-family:var(--code);font-size:var(--fs-xs);color:var(--muted)}
.lc-fill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.lc-acts{display:flex;flex-wrap:wrap;gap:4px}
.lc-name a{display:inline-flex;align-items:center;min-height:24px}
.se-kpis span a,.lc-kpis span a,.ins-list li>a,.ins-movers li>a{display:inline-flex;align-items:center;min-height:24px}
@media (pointer:coarse){ .lc-name a,.se-kpis span a,.lc-kpis span a,.ins-list li>a,.ins-movers li>a{min-height:44px;min-width:44px} }
.lc-container>.lc-name b,.lc-storage>.lc-name b{font-size:var(--fs-lg)}
.lc-picks ul,.lc-lent ul,.lc-audits ul,.se-aged,.se-rep,.se-orders,.se-cons,.ins-list,.ins-movers,.ins-slabs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lc-picks li,.lc-lent li,.se-rep li,.se-orders li,.se-cons li,.ins-list li,.ins-movers li{display:flex;flex-wrap:wrap;gap:6px var(--sp-md);align-items:center;font-size:var(--fs-sm)}
.lc-picks li>span,.lc-lent li>span,.se-rep li>span,.se-orders li>span,.se-cons li>span,.ins-list li>span,.ins-movers li>span{flex:1 1 220px}
.lc-late{color:var(--bad)}
.lc-kids{list-style:none;margin:var(--sp-sm) 0;padding:0;display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);font-size:var(--fs-sm)}
.lc-guide{margin:0;padding-left:var(--sp-lg);font-size:var(--fs-sm);display:grid;gap:4px}
.lc-pick td{vertical-align:middle}
.la-n{width:6em}
tr.is-miss td{background:var(--warn-bg)}
.ll-list{display:grid;gap:4px;max-height:50vh;max-height:50dvh;overflow-y:auto;padding:4px}
.ll-pick{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--sp-sm)}
/* the tree's own width decides: a node stacks name, fill and actions when the tree is narrow (a phone, or a deep row) */
@container lct (width < 640px){ .lc-node{grid-template-columns:minmax(0,1fr)} }
/* ---------------------------------------------------------------- Sell (sell.js) */
.se-tabs{margin-bottom:var(--sp-md)}
.se-foot{margin-top:var(--sp-xl)}
.se-mults label{min-width:110px}
.se-exits td,.se-exits th{white-space:nowrap}
.se-exits td:nth-child(2){white-space:normal;min-width:200px}
.se-selbar{background:var(--ground);padding:var(--sp-sm) 0;border-top:1px solid var(--rule)}
.se-selbar.is-on{position:sticky;bottom:0;z-index:5}
.se-venues{margin-bottom:var(--sp-sm)}
.se-rule{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--sp-sm) var(--sp-md);margin:0 0 var(--sp-sm)}
.se-rule legend{font-weight:700;font-size:var(--fs-sm)}
.se-oitems{font-size:var(--fs-sm)}
/* ---------------------------------------------------------------- Insights (insight.js) */
.ins-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px var(--sp-lg);font-size:var(--fs-sm)}
.ins-legend li{display:inline-flex;align-items:center;gap:6px}
.ins .db-panel h4{margin:var(--sp-sm) 0 4px;font-size:var(--fs-sm)}
#in-could{width:100%}
/* ---------------------------------------------------------------- the camera (camread.js) */
.cr{position:fixed;inset:0;z-index:76;background:var(--media-ground);color:var(--on-media);overflow-y:auto;padding:max(var(--sp-md),env(safe-area-inset-top,0px)) var(--sp-lg) max(var(--sp-lg),env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--sp-sm)}
.cr>*{flex-shrink:0}
.cr .cl-muted{color:var(--on-media-dim)}
.cr-top{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-md);align-items:center}
.cr-top h2{margin:0;font-size:var(--fs-xl)}
.cr .db-seg button{background:transparent;color:var(--on-media);border-color:var(--veil-line)}   /* on the dark camera screen the chosen mode is the light one */
@media (hover:hover){.cr .db-seg button:hover{background:var(--veil-faint)}}
.cr .db-seg button[aria-pressed="true"]{background:var(--on-media);color:var(--media-ground);border-color:var(--on-media)}
.cr-stage{position:relative;width:100%;max-width:960px;align-self:center;aspect-ratio:16/9;background:var(--shade-strong);border-radius:var(--r-lg);overflow:hidden}
.cr-stage video{width:100%;height:100%;object-fit:cover;display:block}
.cr-guide{position:absolute;top:6%;bottom:6%;left:50%;transform:translateX(-50%);aspect-ratio:63/88;border:3px solid var(--on-media);border-radius:var(--r-card);box-shadow:0 0 0 999px var(--shade)}
.cr-guide i{position:absolute;border:2px dashed var(--on-media-dim)}
.cr-guide .cr-coll{left:3.5%;top:91.5%;width:52%;height:7%}
.cr-guide .cr-name{left:6%;top:4.6%;width:71%;height:5.6%}
.cr-say{margin:0;font-weight:700;font-size:var(--fs-lg)}
.cr-tray{display:grid;gap:var(--sp-sm)}
.cr-item{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:var(--sp-sm);border:1px solid var(--veil-line);border-radius:var(--r-md);background:var(--veil-faint)}
/* forms inside the tabs (not in a dialog): a label over its field, as dialogs have them */
#co-body .ms-qa-row>label{display:grid;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin:0 0 10px;align-content:start}
#co-body .ms-qa-row input:not([type=checkbox]):not([type=radio]),#co-body .ms-qa-row select{width:100%;min-width:0}
#co-body label.db-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.co-src{white-space:nowrap}
/* fields in the views added October 17 (Insights, Storage, Sell, Friends, Intake) that have no style of their own: the
   site's field look, at no specificity, so any field already styled keeps its own */
:where(#co-body,#in-app) :where(textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color])){font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md)}
:where(#co-body,#in-app) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color])){min-height:40px;padding:0 10px}
:where(#co-body,#in-app) :where(textarea){padding:8px 10px;line-height:1.5;max-width:100%}
:where(#co-body,#in-app) :where(input[type=number]){width:7em}
:where(#co-body,#in-app) :where(textarea,input):focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.se-where{border:0;padding:0;margin:var(--sp-sm) 0;display:flex;flex-wrap:wrap;gap:4px var(--sp-lg)}
.se-where legend{font-weight:700;font-size:var(--fs-sm);padding:0;margin-bottom:4px}
.se-set{margin-top:var(--sp-md)}
#co-body .db-stats+.db-panel,#co-body .db-stats+section{margin-top:var(--sp-md)}
.co-sset{display:grid;gap:var(--sp-md)}
.co-sset>div,.co-sbizf>div{display:grid;gap:4px}
.co-sset p{margin:0}
.co-sbizf{border:0;border-top:1px solid var(--rule);padding:var(--sp-md) 0 0;margin:0;display:grid;gap:var(--sp-md);min-width:0}
.co-sbizf[hidden]{display:none}
.co-sbizf legend{font-weight:700;font-size:var(--fs-md);padding:0 6px 0 0}
/* the Sell tab's small tables: words left, money right, a quiet header row */
#se-body .db-ctable :is(th,td){text-align:left;padding:6px 4px;border-bottom:1px solid var(--rule)}
#se-body .db-ctable thead th{font-size:var(--fs-xs);color:var(--muted);font-weight:700}
#se-body .db-ctable tbody th{font-weight:400}
#se-body .db-ctable .num{text-align:right;font-variant-numeric:tabular-nums}
#se-body .db-ctable td:nth-child(3){width:auto}
.tg label.db-check{margin:var(--sp-sm) 0}
.tg #tg-q{width:min(28rem,100%)}
.ph-hold{visibility:hidden}

/* ================================================================ October 17, 2026: table additions (institutional build). Loads after the group files, so where these say something about the same thing, this wins. Every rule is scoped to its own tool's box. */

/* ---------------------------------------------------------------- Life Log: a tournament match (life.js) */
.lf-tmset{display:grid;gap:10px;padding:12px 0 0;border-top:1px solid var(--rule)}
#lf-app .lf-tmset .mt-seg{flex-wrap:wrap;row-gap:4px;max-width:100%}
#lf-app .lf-tmset .mt-seg button{white-space:normal;text-align:left}
.lf-tmset input[type=number]{width:5.5rem}
.lf-tmfact{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.lf-setup .ms-row:has([data-tmgo]){position:sticky;bottom:0;z-index:5;margin:0 calc(-1 * var(--sp-lg));padding:10px var(--sp-lg) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule)}
.lf-setup [data-tmgo]:disabled{opacity:.55;cursor:not-allowed}
/* the strip between the seats and the bar: the round clock, plain and large, and where the match stands */
.lf-tm{display:flex;align-items:center;gap:8px 10px;padding:6px 10px;border-top:1px solid var(--rule);background:var(--surface);min-width:0}
.lf-tmclock{flex:none;font-family:var(--sans);font-size:clamp(22px,7vw,34px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);background:var(--fill);border:1px solid var(--rule);border-radius:var(--r-md);padding:4px 12px;min-height:44px;cursor:pointer}
.lf-tmclock:focus-visible{background:var(--hover)}@media (hover:hover){.lf-tmclock:hover{background:var(--hover)}}
.lf-tmtext{flex:1;min-width:0;margin:0;font-size:var(--fs-sm);line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.lf-tm #lf-tmbtn{flex:none;min-height:44px}
.lf-tm.lf-tmsoon .lf-tmclock{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.lf-tm.lf-tmcalled{background:var(--warn-bg);border-top-color:var(--warn-line)}
.lf-tm.lf-tmcalled .lf-tmclock{color:var(--warn);border-color:var(--warn-line);background:var(--surface)}
.lf-tm.lf-tmcalled .lf-tmtext{color:var(--ink);font-weight:700;font-size:var(--fs-md)}
/* the match panel */
.lf-pbox .lf-tmscore{margin:0;font-size:var(--fs-md)}
.lf-tmgames{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lf-tmgames li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.lf-tmgames li>span{min-width:0;flex:1 1 14rem}
.lf-tmfix select,.lf-pbox .lf-f input,.lf-pbox .lf-f select{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 8px;max-width:100%;min-height:36px}
.lf-pbox h3.lf-tmh{font-size:var(--fs-lg);margin:10px 0 0}
.lf-pbox .lf-tmbig{margin:0;font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums}
.lf-tmclk,.lf-tmform{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));gap:8px 12px}
.lf-tmform{grid-template-columns:minmax(0,1fr)}
.lf-pbox .lf-f{display:grid;gap:4px;min-width:0;font-size:var(--fs-sm);color:var(--muted)}
.lf-pbox .lf-f input,.lf-pbox .lf-f select{width:100%}
.lf-tmsum{margin:0;font-size:var(--fs-md)}
.lf-tmmsg{margin:0;color:var(--bad);font-size:var(--fs-sm)}
.lf-tmmsg:empty{display:none}
@media (pointer:coarse){.lf-tmfix select,.lf-pbox .lf-f input,.lf-pbox .lf-f select{min-height:44px}}
@media (forced-colors:active){.lf-tm.lf-tmcalled{border-top:3px solid CanvasText}}
.lf-tmmin{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lf-pbox .lf-tmsum{margin-bottom:6px}
/* the table's bar fits a 320 px phone (its last button, Game, which holds the match, ran past the edge); on the site's phone breakpoint */
@media (width < 480px){#lf-app .lf-bar{gap:3px;padding-inline:4px}#lf-app .lf-bar .btn-sm{padding-inline:7px}}

/* ---------------------------------------------------------------- the card page's table mode (cardlab.js tableMode): the whole screen, large type, high contrast */
.ms-modal.cc-tmw{padding:0;overflow:hidden;align-items:stretch;background:var(--surface)}
.ms-modal-box.cc-tmbox{width:100%;max-width:none;height:100%;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;flex-direction:column;background:var(--surface);color:var(--ink)}
.cc-tmbox>.ms-x{z-index:2;width:44px;height:44px;background:var(--surface);border-radius:50%}
.cc-tm{flex:1;min-height:0;display:flex;flex-direction:column}
.cc-tm-read{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 16px 24px;font-size:clamp(20px,4.6vw,34px);line-height:1.38;transition:transform .25s ease}
.cc-tm-read:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.cc-tm[data-rot="180"] .cc-tm-read{transform:rotate(180deg)}
.cc-tmbox .cc-tm-name{font-family:var(--sans);font-size:clamp(26px,6.4vw,52px);line-height:1.15;font-weight:700;margin:0 48px 6px 0;overflow-wrap:anywhere}
.cc-tm[data-rot="180"] .cc-tm-read{padding-bottom:60px}   /* turned, the end of the text sits at the top, clear of the close button */
.cc-tm-name .mana,.cc-tm-fname .mana{margin-left:.35em;white-space:nowrap}
.cc-tm-name .ms,.cc-tm-fname .ms{font-size:.5em}
.cc-tm-name .sym,.cc-tm-fname .sym{width:.74em;height:.74em;vertical-align:-.04em}
.cc-tm-face{padding-top:14px;margin-top:14px;border-top:2px solid var(--rule2)}
.cc-tm-faces>.cc-tm-face:first-child{border-top:0;margin-top:0;padding-top:6px}
.cc-tmbox .cc-tm-fname{font-family:var(--sans);font-size:1.15em;line-height:1.2;font-weight:700;margin:0 0 4px;overflow-wrap:anywhere}
.cc-tm-back{font-size:.6em;font-weight:400;color:var(--muted)}
.cc-tm-type{margin:0 0 10px;font-size:.92em;font-weight:700;color:var(--ink)}
.cc-tm-text p{margin:0 0 .55em;overflow-wrap:anywhere}
.cc-tm-text .rem{color:var(--muted)}
.cc-tm-text .sym,.cc-tm-rulings .sym{width:1em;height:1em;vertical-align:-.14em}
.cc-tm-text .ms,.cc-tm-rulings .ms{font-size:.62em}
.cc-tm-text .cc-face-name{font-weight:700;margin-top:.6em}
.cc-tm-pt{margin:6px 0 0;font-size:1.25em;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cc-tm-rul{margin-top:22px;padding-top:12px;border-top:2px solid var(--rule2);font-size:.74em}
.cc-tmbox .cc-tm-rul h3{font-size:1.05em;margin:0 0 8px}
.cc-tm-rulings{margin:0;padding:0 0 0 1.2em;display:grid;gap:12px}
.cc-tm-rulings time{display:block;font-size:var(--fs-sm);color:var(--muted)}
.cc-tm-rulings p{margin:2px 0 0;overflow-wrap:anywhere}
.cc-tm-wait{color:var(--muted);font-size:.8em}
.cc-tm-mtr{margin:22px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
.cc-tm-bar{flex:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);background:var(--surface)}
.cc-tm-bar .btn-sm{min-height:44px;font-size:var(--fs-md);padding-inline:18px}
.cc-tm-bar #cc-tm-turn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.cc-tm-read{transition:none}}
@media (forced-colors:active){.cc-tm-bar #cc-tm-turn[aria-pressed="true"]{outline:3px solid CanvasText}}

/* ---------------------------------------------------------------- Film Room: the Arena event desk (film.js deskView) */
.fr .fr-desk{display:grid;gap:10px;min-width:0}
.fr .fr-desk>p{margin:0}
.fr .fr-h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;margin:12px 0 0}
.fr .fr-deskalone{display:grid;gap:12px}
.fr .fr-desk .fr-h3{margin:20px 0 0}
.fr .fr-evtw{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground)}
.fr .fr-evtw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fr .fr-evt{min-width:62rem;font-size:var(--fs-sm)}
.fr .fr-evt tbody th,.fr .fr-evt thead th:first-child{position:sticky;left:0;z-index:1;background:var(--ground)}   /* the event's name stays in view while the row scrolls */
.fr .fr-evt tbody th{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink);white-space:normal;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--rule);min-width:8rem;max-width:12rem}
.fr .fr-evt td{line-height:1.4}
.fr .fr-evt td:first-child{min-width:0}
.fr .fr-evt td:nth-child(2),.fr .fr-evt td:nth-child(3){min-width:7.5rem}
.fr .fr-evt td:nth-child(4){min-width:12.5rem}
.fr .fr-evt td:nth-child(5){min-width:13rem}
.fr .fr-evt td:nth-child(6){min-width:12rem}
.fr .fr-pay,.fr .fr-srcs{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.fr .fr-pay b{font-weight:700;color:var(--ink)}
.fr .fr-srcs a{color:var(--ink);overflow-wrap:anywhere}
.fr .fr-srcs+span{display:block;margin-top:6px}
.fr .fr-evform{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:10px 18px;align-items:start}
.fr .fr-evf{display:grid;gap:4px;min-width:0;margin:0;font-size:var(--fs-sm);color:var(--muted)}
.fr fieldset.fr-evf{border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 12px 10px;grid-column:1 / -1}
.fr fieldset.fr-evf legend{padding:0 4px;color:var(--ink);font-size:var(--fs-sm)}
.fr .fr-evf>span{color:var(--muted)}
.fr .fr-evf input:not([type=radio]),.fr .fr-evf select{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md);padding:6px 10px;min-height:40px;width:100%;max-width:22rem}
.fr .fr-evf input:disabled{background:var(--fill);color:var(--muted)}
.fr .fr-evradios{display:flex;flex-wrap:wrap;gap:6px 18px}
.fr .fr-evradios .lf-check{font-size:var(--fs-md);color:var(--ink);min-height:36px}
.fr .fr-evp{max-width:22rem}
.fr #fr-ev-film{margin:4px 0 0;color:var(--ink)}
.fr .fr-evnote{grid-column:1 / -1;margin:0}
.fr .fr-evout{display:grid;gap:8px;min-width:0}
.fr .fr-evout>p{margin:0;font-size:var(--fs-md)}
.fr .fr-evout p.fr-evbig{font-size:var(--fs-xl)}
.fr .fr-evout p.cl-small{font-size:var(--fs-sm)}
.fr .fr-evbad{color:var(--bad);font-weight:700}
.fr .fr-evd{max-width:760px}
.fr .fr-evd td:first-child{min-width:3rem}
.fr .fr-evd tfoot th,.fr .fr-evd tfoot td{font-weight:700;color:var(--ink);border-bottom:0;padding:8px 10px;text-align:left}
.fr .fr-evfacts{margin:0;padding-left:1.2em;display:grid;gap:6px;font-size:var(--fs-md);line-height:1.5;max-width:860px}
@media (pointer:coarse){.fr .fr-evf input:not([type=radio]),.fr .fr-evf select{min-height:44px}.fr .fr-evradios .lf-check{min-height:44px}}
.fr .fr-evd caption{text-align:left}
/* the event desk's source links (in their lists and in the payout tables) are tap targets too: 44 px tall on touch */
@media (pointer:coarse){.fr .fr-srcs a,.fr .fr-desk .fr-t td a{display:inline-flex;align-items:center;min-height:44px}}

/* ================================================================ October 18, 2026: the table wave (life.js): commander damage and tax per commander, the table's counters, the turn and chess clocks, the token tray, the life graph and recap, the playgroup ledger and the pod builder */
/* the setup screen's three tabs */
.lf-tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.lf-tabs [role=tab]{font:inherit;font-family:var(--mono);font-size:var(--fs-md);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;cursor:pointer;white-space:nowrap;min-height:44px}
.lf-tabs [role=tab][aria-selected=true]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.lf-tabs [role=tab]:focus-visible{color:var(--ink);background:var(--hover)}@media (hover:hover){.lf-tabs [role=tab]:hover{color:var(--ink);background:var(--hover)}}
.lf-tabp{display:grid;gap:var(--sp-lg);min-width:0}
/* the strip under the seats: day or night, spells this turn, a pause, the untap step's question */
.lf-gbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;padding:6px 10px;border-top:1px solid var(--rule);background:var(--surface);min-width:0}
.lf-gbar[hidden]{display:none}
.lf-gspells,.lf-gpause,.lf-gask{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted)}
.lf-gspells b{font-family:var(--mono);font-size:var(--fs-lg);color:var(--ink);min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.lf-gpause b{color:var(--warn)}
.lf-gask{color:var(--ink);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);padding:4px 8px}
.lf-dn{font-weight:700}
.lf-tt{font-variant-numeric:tabular-nums;color:var(--muted)}
/* chips on a seat: commander tax and the chess clock */
.lf-chip.lf-tax{border-style:dashed}
.lf-chip.lf-tax.on{border-style:solid}
.lf-chip.lf-clock{cursor:default;font-variant-numeric:tabular-nums}
.lf-chip.lf-clock.on{color:var(--ink);border-color:var(--c);border-width:2px}
.lf-chip.lf-clock.hot{background:var(--warn-bg);border-color:var(--warn-line);color:var(--ink)}
/* panels: headings, the counters, the command zone, the deck, the dungeon, named counters */
.lf-pbox h3.lf-ph3{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--rule2)}
.lf-pbox h3.lf-ph3 small{font-weight:400;font-family:var(--sans);font-size:var(--fs-sm)}
.lf-step span small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.lf-step.lf-tog{grid-template-columns:minmax(0,1fr) auto}
.lf-tog [aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.lf-cz{display:grid;gap:4px;padding:4px 0}
.lf-pbox .lf-check{font-size:var(--fs-sm);line-height:1.35;align-items:flex-start}
.lf-pbox .lf-check input{margin-top:3px;flex:none}
.lf-deckrow{display:grid;gap:4px}
#lf-deckmsg{margin:0;color:var(--muted)}
.lf-ring{margin:0 0 4px;padding-left:1.2em;font-size:var(--fs-sm);color:var(--ink);display:grid;gap:2px}
.lf-dg{display:grid;gap:6px;padding:6px 0;border-bottom:1px solid var(--rule)}
.lf-dg p{margin:0;font-size:var(--fs-md)}
.lf-dg .lf-dgh small{font-size:var(--fs-xs)}
.lf-dgnext{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:6px}
.lf-dgnext .btn-sm{display:grid!important;justify-items:start;text-align:left;gap:2px;white-space:normal;height:auto;padding:8px 10px;line-height:1.3}
.lf-dgnext .btn-sm span{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);font-weight:400}
.lf-more{border:1px solid var(--rule);border-radius:var(--r-md);padding:0 10px}
.lf-more>summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);padding:10px 0}
.lf-more[open]{padding-bottom:10px}
.lf-cu{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}
.lf-cuadd{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;padding-top:8px}
.lf-cuadd .lf-f{flex:1 1 12rem}
/* the turn clock panel */
.lf-chessl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lf-chessl li{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-md);border-bottom:1px solid var(--rule);padding:4px 0}
.lf-chessl b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lf-pbox .rec-t th[scope=row],.lf-recbox .rec-t th[scope=row],.lf-led .rec-t th[scope=row]{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;color:var(--ink);white-space:normal}
.rec-t small{color:var(--muted);font-size:var(--fs-xs)}
/* the token tray */
.lf-tks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lf-tk{border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;display:grid;gap:6px;background:var(--ground)}
.lf-tk p{margin:0}
.lf-tkrow{display:grid;grid-template-columns:auto auto 2.6rem auto;gap:6px 8px;align-items:center;justify-content:start}
.lf-tkrow b{font-family:var(--mono);text-align:center;font-variant-numeric:tabular-nums}
.lf-tkn{font-size:var(--fs-sm);color:var(--muted);grid-column:1}
.lf-mul{border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px 8px;margin:0;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:2px 12px}
.lf-mul legend{font-size:var(--fs-sm);color:var(--muted);padding:0 4px}
.lf-mul .lf-check small{display:inline}   /* the card's name and its note flow as one line of text, wrapping as one */
.lf-tkgo{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.lf-tkgo .lf-f{flex:1 1 14rem}
/* the life graph */
.lf-graph{margin:0;display:grid;gap:6px;min-width:0}
.lf-gr-box{position:relative;min-width:0}
.lf-graph svg{display:block;width:100%;height:auto;max-height:340px;overflow:visible}
.lf-graph svg:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.lf-gr-grid{stroke:var(--rule);stroke-width:1}
.lf-gr-zero{stroke:var(--rule2);stroke-width:1.5}
.lf-gr-ax{fill:var(--muted);font-family:var(--mono);font-size:13px}
.lf-gr-lab{fill:var(--ink);font-family:var(--mono);font-size:13px;font-weight:700}
.lf-gr-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lf-gr-dot{stroke:var(--surface);stroke-width:2}
.lf-gr-x{stroke:var(--faint);stroke-width:1}
.lf-gr-hit{fill:transparent;pointer-events:all}
.lf-gr-tip{position:absolute;top:4px;left:0;z-index:2;display:grid;gap:1px;background:var(--surface);color:var(--ink);border:1px solid var(--rule2);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:6px 10px;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.lf-gr-tip[hidden]{display:none}
.lf-gr-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-sm);color:var(--ink)}
.lf-gr-leg li{display:inline-flex;align-items:center;gap:6px}
.lf-gr-leg svg{width:28px;height:8px;flex:none}
.lf-gr-tbl summary{cursor:pointer;font-size:var(--fs-sm);color:var(--muted)}
.lf-recseats{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-md)}
.lf-recseats li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lf-recbox .lf-log{max-height:none}
/* the playgroup ledger */
.lf-led-t td,.lf-led-t th{white-space:nowrap}
.lf-led-t th[scope=row]{white-space:normal;min-width:7rem}
.lf-rbar{position:relative;display:block;width:100%;min-width:80px;max-width:140px;height:8px;border-radius:var(--r-sm);background:var(--ground);border:1px solid var(--rule);margin-top:4px}
.lf-rci{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-radius:var(--r-sm)}
.lf-rev{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--faint)}
.lf-rp{position:absolute;top:-2px;width:3px;height:10px;margin-left:-1px;background:var(--accent);border-radius:var(--r-sm)}
.lf-ledhow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-md)}
.lf-ledhow b{font-family:var(--mono)}
.lf-ledgames{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}   /* the column is the list's width: a row skipped while off screen keeps the width it last had (content-visibility remembers it), and must not hold the list open after the screen narrows */
.lf-ledgames li{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
/* a ledger shown in full can hold 3,000 games: rows off screen skip layout until scrolled to (a phone froze 4 s) */
.lf-ledgames li{content-visibility:auto;contain-intrinsic-size:auto 3.4em}
.lf-ledgames li>span{flex:1 1 16rem;min-width:0;overflow-wrap:anywhere}
.lf-ledbox{border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg);padding:10px 14px;display:grid;gap:8px}
.lf-ledbox p{margin:0}
.lf-lgseats{border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px 10px;margin:0;display:grid;gap:8px;min-width:0}
.lf-lgseats legend{font-size:var(--fs-sm);color:var(--ink);font-weight:700;padding:0 4px}
.lf-lgseats>p{margin:0}
.lf-lgseat{display:grid;grid-template-columns:1.6rem minmax(0,1fr) minmax(0,1fr) auto auto;gap:6px 8px;align-items:end;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.lf-lgk{font-family:var(--mono);font-weight:700;color:var(--muted);align-self:center;text-align:center}
.lf-lgw{align-self:center;white-space:nowrap}
@media (width < 480px){.lf-lgseat{grid-template-columns:1.6rem minmax(0,1fr) auto}.lf-lgseat .lf-f:nth-of-type(2){grid-column:2 / -1}.lf-lgseat .lf-lgw{grid-column:2}.lf-lgseat [data-lgx]{grid-column:3}}
/* the pod builder */
.lf-ppl textarea{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;width:100%;min-height:9rem;resize:vertical}
.lf-pods .lf-f{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
.lf-podgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:8px}
.lf-pod{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ground);padding:8px 12px;display:grid;gap:6px;align-content:start}
.lf-pod p{margin:0}
.lf-pod ol{margin:0;padding-left:1.4em;display:grid;gap:2px;font-size:var(--fs-md)}
.lf-pod ol small{font-size:var(--fs-xs)}
.lf-led .lf-f,.lf-pods .lf-row input[type=number]{font-size:var(--fs-md)}
@media (forced-colors:active){.lf-gr-line{forced-color-adjust:none}.lf-rci,.lf-rp,.lf-rev{forced-color-adjust:none;background:CanvasText}.lf-tabs [role=tab][aria-selected=true]{border-bottom-color:CanvasText}}
/* a panel's column never grows past the panel: long segment labels wrap instead */
.lf-pbox{grid-template-columns:minmax(0,1fr)}
#lf-app .lf-pbox .mt-seg{flex-wrap:wrap;max-width:100%;row-gap:4px}
#lf-app .lf-pbox .mt-seg button{white-space:normal;text-align:left}
/* a crowded seat (six players, partners, tax, counters) keeps every chip reachable: the chips take at most a little
   under half the seat and scroll inside it, and the life number gives way first */
#lf-app .lf-in{grid-template-rows:auto minmax(0,1fr) auto}
#lf-app .lf-chips{max-height:46cqh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;align-content:flex-start}
/* touch screens, short seats (a phone on its side with the strip showing): the life row keeps a 44 px tap zone and the
   chips give way first; a commander chip's name never drops under the smallest text size (October 21, 2026) */
@media (pointer:coarse){#lf-app .lf-in{grid-template-rows:auto minmax(44px,1fr) auto}#lf-app .lf-chips{max-height:40cqh}}
#lf-app .lf-chip small{font-size:max(var(--fs-xs),.85em)}
/* ---------------------------------------------------------------- Life Log: format presets and team games (October 21, 2026)
   The setup names teams as they sit (a fieldset per team), commander damage takes its number, the archenemy gets their
   own life; at the table a team seat says whose life it shares, and the archenemy's seat says so */
#lf-app .lf-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:10px}
#lf-app .lf-tset{border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 10px 10px;margin:0;min-width:0}
#lf-app .lf-tset legend{font-size:var(--fs-sm);font-weight:700;color:var(--ink);padding:0 4px}
#lf-app .lf-tset .lf-names{grid-template-columns:minmax(0,1fr)}
#lf-app .lf-cmdout{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-md)}
#lf-app .lf-cmdout input{width:4.5rem}
#lf-app .lf-archfirst{align-self:center}
#lf-app .lf-num small.lf-tlab{color:var(--muted);font-family:var(--sans)}
#lf-app .lf-tnote{margin:0;color:var(--muted)}
#lf-app .lf-pbox .lf-more{margin-top:6px}
/* Life Log, formats wave round five (October 22, 2026) */
/* a player count the preset can't use is drawn as off, and the reason sits beside the counts */
#lf-app .lf-nseg button:disabled{color:var(--faint);background:var(--fill);border-style:dashed;cursor:not-allowed;text-decoration:line-through}
#lf-app .lf-nwhy{align-self:center;margin-left:8px;font-size:var(--fs-sm);color:var(--muted)}
/* the tap zones are the seat's two halves (the setup says so: the left half loses life, the right half gains it); the
   number sits over both and lets taps through, so a narrow seat never squeezes a zone */
#lf-app .lf-life{grid-template-columns:1fr 1fr}
#lf-app .lf-life>.lf-minus{grid-column:1;grid-row:1}
#lf-app .lf-life>.lf-plus{grid-column:2;grid-row:1}
#lf-app .lf-life>.lf-num{grid-column:1/-1;grid-row:1;position:relative;z-index:1}
/* the turn chip is never cut: where the name and the chip don't fit on one line, the chip goes under the name */
#lf-app .lf-top{align-items:center;flex-wrap:wrap;gap:2px 4px;min-width:0}
#lf-app .lf-top .lf-name{min-width:0;flex:0 1 auto}
#lf-app .lf-top .lf-turn{flex:none;margin-left:0;font-family:var(--mono);font-size:clamp(var(--fs-xs),4.2cqmin,13px);line-height:1.4}
#lf-app .lf-num small.lf-tlab{max-width:90%;line-height:1.25}
/* a team's seats framed together */
#lf-app .lf-line.lf-tline{padding:4px;border:2px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:var(--r-lg)}
/* the planar die's result: reading type, the face in bold */
#lf-app .lf-pdres{font-size:var(--fs-md);line-height:1.5;margin:8px 0 0;min-height:1.5em}

/* ================================================================ October 17, 2026: decks additions (institutional build). Loads after the group files, so where these say something about the same thing, this wins. Every rule is scoped to its own tool's box. */

/* ---------------------------------------------------------------- Decks: the registration check (a dialog from Print) */
.ms-modal .db-regpen{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--rule2);background:var(--fill);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--muted)}
.ms-modal .db-regsum{margin:4px 0 8px;font-size:var(--fs-md)}
.ms-modal .db-regh{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;margin:14px 0 6px;color:var(--ink)}
.ms-modal .db-reg{list-style:none;margin:0;padding:0}
.ms-modal .db-reg li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--rule)}
.ms-modal .db-reg li:last-child{border-bottom:0}
.ms-modal .db-reg li p{margin:0;overflow-wrap:anywhere}
.ms-modal .db-regtag{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;line-height:1.2;padding:3px 7px;border-radius:var(--r-md);border:1px solid var(--rule2);color:var(--muted);background:var(--surface);white-space:nowrap;margin-top:1px}
.ms-modal .db-regtag.fix{color:var(--down);border-color:var(--down)}
.ms-modal .db-regtag.ok{color:var(--up);border-color:var(--up)}
.ms-modal .db-regmeta{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:3px !important;font-size:var(--fs-sm);color:var(--muted)}
.ms-modal .db-regmeta span:first-child{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);align-self:center}
.ms-modal .db-regok{margin:12px 0 4px}
.ms-modal .db-regok summary{cursor:pointer;font-size:var(--fs-md);padding:6px 0}
@media (pointer:coarse){.ms-modal .db-regok summary{padding:12px 0}}
.ms-modal .db-regacts{margin:4px 0 8px}

/* ---------------------------------------------------------------- King Goldfish: version A against version B, the land count moved */
.gf .gf-abpick{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0 6px}
.gf .gf-abpick .gf-lbl{flex:0 1 auto}
.gf .gf-abpick .gf-lbl select{max-width:min(100%,26rem)}
.gf .gf-abpick button[aria-disabled="true"]{opacity:.55;cursor:progress}
.gf .gf-abdiff{margin:6px 0 10px;color:var(--ink);overflow-wrap:anywhere}
.gf .gf-seatseg{margin:6px 0 8px}
.gf .gf-abt td.num,.gf .gf-lst td.num{white-space:nowrap}
.gf .gf-abt td.num .cl-muted{font-size:var(--fs-sm)}
.gf .gf-abt thead th:first-child{font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.gf .gf-lst tbody th{min-width:9.5rem;max-width:16rem}
.gf .gf-lst .gf-lsn{white-space:nowrap}
.gf .gf-lst .gf-lsmove{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--muted);line-height:1.3;margin-top:2px}
@media (width < 720px){
  .gf .gf-abt td.num:last-child,.gf .gf-abt th{white-space:normal}
  .gf .gf-abt td.num .cl-muted,.gf .gf-abt thead small{display:block}
  .gf .gf-abt :is(th,td){padding-left:4px;padding-right:4px}
}
/* your own list's row: the one place orange marks "where you are" */
.gf .gf-lst tr.gf-lsme th{box-shadow:inset 3px 0 0 var(--spark)}
.gf .gf-lst tr.gf-lsme th,.gf .gf-lst tr.gf-lsme td{font-weight:700}
.gf .gf-lsyou{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
.gf .gf-ab .cl-small.cl-muted,.gf .gf-ls .cl-small.cl-muted{max-width:72rem}
@media (pointer:coarse){.gf .gf-seatseg button,.gf .gf-abpick select{min-height:44px}}

/* ---------------------------------------------------------------- Manabase+: a hand you'd keep, combo odds */
.mb-kh,.mb-co{margin-top:var(--sp-xl)}
.mb-khrule{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.mb-khrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.mb-khrow label,.mb-copick label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-md);color:var(--ink);min-width:0;max-width:100%}
.mb-khrow label.mb-khgrp{flex:0 1 24rem}
.mb-khrow label.mb-khgrp select{width:100%;max-width:none}
.mb-khlab{font-weight:700}
.mb-khrow input[type=number],.mb-cotut input[type=number]{font:inherit;font-family:var(--code);font-size:var(--fs-md);width:4.5rem;min-height:max(var(--ctl-h),var(--tap));padding:4px 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);box-sizing:border-box}
.mb-khrow select,.mb-copick select{font:inherit;font-size:var(--fs-md);min-height:max(var(--ctl-h),var(--tap));max-width:min(100%,24rem);padding:4px 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.mb-khcols,.mb-cotut{border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 12px 8px;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.mb-khcols legend,.mb-cotut legend{font-size:var(--fs-sm);color:var(--muted);padding:0 4px}
.mb-khchk{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-size:var(--fs-md);color:var(--ink);cursor:pointer}
.mb-khchk input[type=checkbox]{accent-color:var(--ink);width:18px;height:18px;margin:0;flex:none}
.mb-khchk .ms-sym,.mb-khchk img{flex:none}
.mb-khpick summary{cursor:pointer;font-size:var(--fs-md);padding:6px 0}
@media (pointer:coarse){.mb-khpick summary{padding:12px 0}}
.mb-khpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 16px;max-height:16rem;overflow:auto;padding:4px 2px;border:1px solid var(--rule);border-radius:var(--r-md);margin-top:6px}
.mb-khpicks .mb-khchk{overflow-wrap:anywhere}
.mb-khdesc{margin:4px 0 10px;font-size:var(--fs-md);color:var(--ink);overflow-wrap:anywhere}
.mb-khhead .mb-big b{font-size:var(--fs-xl)}
.mb-khturns caption,.mb-cot caption{text-align:left;caption-side:top;padding:0 0 6px;color:var(--muted)}
.mb-khturns td small{margin-left:4px}
.mb-copick{align-items:flex-end}
.mb-cotut{margin:0 0 12px}
.mb-cot th[scope=colgroup]{text-align:left;border-bottom:1px solid var(--rule)}
.mb-cot td,.mb-cot th{white-space:nowrap}
@media (width < 720px){
  .mb-khrow,.mb-copick{gap:8px}
  .mb-copick label{flex:1 1 100%}
  .mb-copick select,.mb-khrow select{flex:1 1 12rem}
}

/* ---------------------------------------------------------------- October 18, 2026: the precon shelf, What can I build,
   card packages (deckbuilder.js), all dialogs from the library header or a deck's More menu */
.lib .db-home-actions{flex-wrap:wrap}
.ms-modal .db-pre-ctl,.ms-modal .db-wb-ctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;margin:6px 0 8px}
.ms-modal .db-pre-f{flex:1 1 14rem;min-width:0;margin:0}
.ms-modal .db-pre-f:first-child{flex:2 1 18rem}
.ms-modal .db-pre-n,.ms-modal #db-wb-n{margin:4px 0 8px;color:var(--muted)}
.ms-modal .db-pre-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ms-modal .db-pre-list li{border-bottom:1px solid var(--rule)}
.ms-modal .db-pre-row{display:flex;flex-direction:column;gap:2px;padding:9px 6px;min-height:44px;text-decoration:none;color:var(--ink);border-radius:var(--r-sm)}
.ms-modal .db-pre-row:focus-visible{background:var(--hover)}@media (hover:hover){.ms-modal .db-pre-row:hover{background:var(--hover)}}
.ms-modal .db-pre-row b{font-family:var(--sans);font-size:var(--fs-md);overflow-wrap:anywhere}
.ms-modal .db-pre-meta,.ms-modal .db-pre-cmdr{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.ms-modal .db-pre-morew{margin:10px 0 0}
.ms-modal .db-pre-only{margin:4px 0 8px}
.ms-modal .db-wb-src,.ms-modal .db-pk-opts{border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 12px 8px;margin:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px;min-width:0;max-width:100%}
.ms-modal .db-wb-src legend,.ms-modal .db-pk-opts legend{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);padding:0 4px}
.ms-modal .db-wb-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px}
.ms-modal label.db-wb-chk{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0;min-height:var(--tap);font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)}
.ms-modal label.db-wb-chk input{accent-color:var(--ink);width:18px;height:18px;margin:0;flex:none}
.ms-modal label.db-wb-sel{margin:0;flex:0 1 15rem;min-width:0}
.ms-modal label.db-wb-sel select{min-height:var(--tap)}
.ms-modal .db-wb-t{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.ms-modal .db-wb-t th,.ms-modal .db-wb-t td{text-align:left;vertical-align:top;padding:8px 8px;border-bottom:1px solid var(--rule)}
.ms-modal .db-wb-t thead th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--muted);white-space:nowrap}
.ms-modal .db-wb-t tbody th{font-weight:400;min-width:12rem;max-width:22rem}
.ms-modal .db-wb-t tbody th a{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.ms-modal .db-wb-t small{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:2px;font-weight:400}
.ms-modal .db-wb-t .num{text-align:right;white-space:nowrap}
.ms-modal .db-wb-t td:nth-child(4){min-width:9rem}
.ms-modal .db-wb-t details summary{cursor:pointer;white-space:nowrap;min-height:24px}
@media (pointer:coarse){.ms-modal .db-wb-t details summary{padding:10px 0}}
.ms-modal .db-wb-miss{list-style:none;margin:6px 0 0;padding:0;font-size:var(--fs-sm);min-width:12rem}
.ms-modal .db-wb-miss li{padding:1px 0;overflow-wrap:anywhere}
.ms-modal .db-wb-empty{margin:4px 0 10px;padding:8px 12px;border-left:3px solid var(--warn-line);background:var(--warn-bg);color:var(--ink);border-radius:0 var(--r-md) var(--r-md) 0}
.ms-modal .db-pk-l{list-style:none;margin:10px 0;padding:0}
.ms-modal .db-pk-i{padding:10px 0;border-bottom:1px solid var(--rule)}
.ms-modal .db-pk-h b{font-family:var(--sans);font-size:var(--fs-md);overflow-wrap:anywhere}
.ms-modal .db-pk-cards{margin:4px 0;overflow-wrap:anywhere}
.ms-modal .db-pk-i p{margin:2px 0}
.ms-modal .db-pk-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ms-modal .db-pk-recv{margin:8px 0;padding-left:1.2em;max-height:16rem;overflow:auto;font-size:var(--fs-md)}
@media (pointer:coarse){.ms-modal .db-pk-acts .btn-sm,.ms-modal .db-pre-morew .btn-sm{min-height:44px}}
/* a phone: each list is a small card (its name, then each figure under its own label) instead of a table to scroll */
@media (width < 480px){
  .ms-modal .db-wb-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ms-modal .db-wb-t,.ms-modal .db-wb-t tbody,.ms-modal .db-wb-t tr,.ms-modal .db-wb-t th,.ms-modal .db-wb-t td{display:block;width:auto}
  .ms-modal .db-wb-t tr{padding:10px 0;border-bottom:1px solid var(--rule)}
  .ms-modal .db-wb-t th,.ms-modal .db-wb-t td{border:0;padding:3px 0;text-align:left;white-space:normal;min-width:0;max-width:none}
  .ms-modal .db-wb-t td[data-l],.ms-modal .db-wb-t td.num[data-l]{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;text-align:left}
  .ms-modal .db-wb-t td[data-l]::before{content:attr(data-l);flex:0 0 9.5rem;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
  .ms-modal .db-wb-t td[data-l] details{flex:1 1 0;min-width:0}
  .ms-modal .db-wb-t .db-wb-miss{min-width:0}
  .ms-modal .db-wb-t td.num[data-l] small{display:inline;margin:0}
}

/* ---------------------------------------------------------------- Decks: every format (the formats wave, October 21, 2026)
   the points chip in the header (like the legality chip: a fact that passes or fails), the format's rules link, the
   rules and points panels, a pointed card's mark in the list view, a playgroup list's points, the Magic Online price */
.db-ptschip{display:inline-flex;align-items:center;min-height:var(--ctl-h-sm);font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;line-height:1.25;border-radius:var(--r-pill);padding:4px 10px;background:var(--veil);color:inherit;border:1px solid var(--veil-line);white-space:nowrap}
.db-banner.noart .db-ptschip{background:var(--code-bg);border-color:var(--rule)}
.db-ptschip.bad{background:var(--bad-fill);color:var(--on-media);border-color:transparent}
.db-ptschip.wip{font-weight:400;border-style:dashed}
button.db-ptschip{cursor:pointer;text-align:left}
@media (hover:hover){button.db-ptschip:hover{border-color:currentColor}}
.db-banner.noart .db-ptschip.wip{color:var(--muted)}
.db-fmtlink{display:inline-flex;align-items:center;text-decoration:none}
.db-fmtlink:focus-visible{text-decoration:underline}@media (hover:hover){.db-fmtlink:hover{text-decoration:underline}}
@media (pointer:coarse){.db-fmtlink,.db-ptschip{min-height:var(--tap)}}
.db-row .db-mark.pts{background:var(--fill);color:var(--ink);border:1px solid var(--rule2);padding:3px 7px;white-space:nowrap}
.db-row .db-mark.pts.off{color:var(--muted);border-style:dashed}
.db-rulelist{margin:0 0 8px;padding-left:18px}
.db-rulelist li{margin:0 0 6px;line-height:1.45;overflow-wrap:anywhere}
.db-fmtrules details summary{cursor:pointer;min-height:24px}
@media (pointer:coarse){.db-fmtrules details summary{display:flex;align-items:center;min-height:44px}}
.db-fmtrules p,.db-points p,.db-tix p{overflow-wrap:anywhere}
.db-ptlist{list-style:none;margin:6px 0 8px;padding:0}
.db-ptlist li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--rule)}
.db-ptlist li>span{min-width:0;overflow-wrap:anywhere}
.db-ptlist li>b{font-family:var(--sans);flex:none}
.db-fmtnote{margin:6px 0 0;overflow-wrap:anywhere}
.ms-modal .db-hl-pts{border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 12px 12px;margin:14px 0 0;min-width:0}
.ms-modal .db-hl-pts legend{font-family:var(--sans);font-weight:700;padding:0 4px;color:var(--ink)}
.ms-modal .db-hl-pts>p{margin:0 0 4px}
.db-hl-caprow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:10px}
.db-hl-caprow label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
.db-hl-caprow input{width:7rem}
@media (pointer:coarse){.db-hl-caprow .btn-sm,.db-hl-caprow input{min-height:44px}}
.db-tix .db-kv b{white-space:nowrap}
/* a phone: the header's row of chips wraps instead of scrolling sideways, so the legal badge and the points chip (now
   first after the format) are always in sight (round two, October 21, 2026) */
@media (width < 720px){
  .db-meta{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none;padding-right:14px;row-gap:6px}
  .db-meta .db-pill-select{max-width:min(14rem,100%)}
}

/* ================================================================ October 17, 2026: money additions (institutional build). Loads after the group files, so where these say something about the same thing, this wins. Every rule is scoped to its own tool's box. */

/* ---------------------------------------------------------------- the card page: every store, by printing (prices.js) */
.px-stable .px-gh{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--muted);text-align:center;border-bottom:1px solid var(--rule);padding:6px 8px 4px}
.px-stable .px-sh{white-space:normal;min-width:72px;max-width:96px;line-height:1.25;vertical-align:bottom}
.px-stable thead tr:last-child th{vertical-align:bottom}
.px-stable td.num{white-space:nowrap}
.px-stable .px-c-name{min-width:230px}
.px-stable .px-c-buy{white-space:normal;min-width:132px}
.px-stable .px-c-buy .px-link{white-space:nowrap}
.px-slink,.px-stable td .px-slink{color:var(--ink);font-weight:400;text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px;font-variant-numeric:tabular-nums}
@media (hover:hover){.px-slink:hover{color:var(--accent);text-decoration-color:currentColor}}
.px-sfin{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.px-lstat{margin:0 0 6px;color:var(--muted)}
.px-lstat:empty{display:none}
.px-sfact{color:var(--muted)}
.px-flag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin:0 6px 1px 0;vertical-align:middle}
.px-lfacts{margin-top:8px}
@media (width < 720px){
  .px-stable .px-sh{max-width:none}
  .px-stable td.num{white-space:normal;overflow-wrap:anywhere}
  .px-stable .px-nm{white-space:normal}
  .px-sfin{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .px-sfin .db-seg{display:flex;width:100%}
  .px-sfin .db-seg button{flex:1 1 0;min-height:44px}
  .px-stable td .px-slink{display:inline-flex;align-items:center;min-height:44px}
}
@media (pointer:coarse){.px-sfin .db-seg button{min-height:44px}}

/* ---------------------------------------------------------------- Collection: replacement and quick exit in the header (insight.js) */
.co-kpis > .co-3vgo{justify-content:center}
.co-kpis > .co-3vgo .btn-sm{align-self:flex-start;margin-top:4px}
.co-kpis > .co-3vgo .co-3vwait{font-size:var(--fs-md);font-weight:500;color:var(--muted);white-space:normal}
#co-3v-a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#co-3vline .cl-small{color:var(--faint)}

/* ---------------------------------------------------------------- backups: the quiet line and the reminder (me.js kit) */
.co-bak,.me-bak{margin:4px 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.co-bak:empty,.me-bak:empty{display:none}
.co-bak b,.me-bak b{color:var(--ink);font-weight:600}
.co-bak:focus,.me-bak:focus{outline:none}
.co-bak:focus-visible,.me-bak:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#co-bakn:empty,#me-bakn:empty{display:none}
.me-bakw{margin:-8px 0 16px}
.me-bakw:has(#me-bak:empty):has(#me-bakn:empty){display:none}
.me-bakw .me-bak{max-width:none;font-size:var(--fs-sm)}
.bak-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 14px;margin:8px 0 0;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);color:var(--ink);font-size:var(--fs-md)}
.bak-note p{margin:0;flex:1 1 280px;min-width:0}
.bak-acts{display:flex;flex-wrap:wrap;gap:8px}
.bak-prog{flex-basis:100%;margin:0;color:var(--muted)}
.me-baksec .me-h3{font-size:var(--fs-md);margin:14px 0 4px}
.me-baksec .me-h3:first-child{margin-top:0}
.me-baksec p{margin:0 0 8px}
.me-cktable td,.me-cktable th{white-space:nowrap}
@media (width < 720px){
  .bak-acts{width:100%}
  .bak-acts .btn-sm{flex:1 1 auto;min-height:44px;justify-content:center}
}

/* ---------------------------------------------------------------- Insights: three values, liquidity, agreement, risk (insight.js) */
.in-money .in-3v{margin-top:4px}
.in-money .in-3v > div{max-width:260px}
.in-3q{display:grid;gap:4px;margin:12px 0 4px}
.in-3q input{max-width:520px}
.in-3q .se-kpis{margin:6px 0 0}
.in-liq th[scope="row"]{font-weight:500;white-space:normal;min-width:150px}
.in-liq td{white-space:nowrap}
.in-agree li{justify-content:space-between}
.in-agr{font-variant-numeric:tabular-nums;color:var(--muted)}
.in-exp li,.in-hfacts li{justify-content:space-between;border-bottom:1px solid var(--rule);padding:4px 0}
.in-exp li > span:last-child,.in-hfacts li > span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.in-risk h4,#in-hist h4{margin:14px 0 4px;font-size:var(--fs-md)}
.in-hwin{max-width:520px}
.in-hdet{margin-top:8px}
.in-hdet summary{cursor:pointer;font-size:var(--fs-sm);padding:4px 0}
@media (width < 720px){
  .in-money .in-3v > div{max-width:none}
  .in-exp li,.in-hfacts li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
  .in-exp li > span:last-child,.in-hfacts li > span:last-child{text-align:left}
  .in-hdet summary{min-height:44px;display:flex;align-items:center}
}

/* ---------------------------------------------------------------- the Reports dialog (insight.js) */
.rp-sec{border-top:1px solid var(--rule);padding:12px 0 4px;margin-top:8px}
.rp-sec h3{margin:0 0 4px;font-size:var(--fs-lg)}
.rp-sec p{margin:0 0 8px}
.rp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.rp-row label{display:inline;font-weight:500}
.ms-modal #rp-min{width:8em;max-width:100%}
@media (pointer:coarse){.rp-row input,.rp-sec .db-check{min-height:44px}}
@media (pointer:coarse){.in-liq th[scope="row"] a,.in-agree a{display:inline-flex;align-items:center;min-height:44px}.co-kpis > .co-3vgo .btn-sm,[data-hist-go],.bak-acts .btn-sm,.me-baksec .btn-sm{min-height:44px}}

/* ================================================================ October 18, 2026: money wave (price alerts, price history files, cash in trades,
   condition-adjusted value, centering, dated fee and bulk tables). Every rule is scoped to its own tool's box. */

/* ---------------------------------------------------------------- price alerts (prices.js PX.alerts): Market, Insights and the dialog */
.px-al-lede{margin:0 0 10px;max-width:90ch;color:var(--muted)}
.px-al-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.px-al-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h rm" "rule rm" "set rm" "log rm";gap:2px 12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--rule)}
.px-al-h{grid-area:h;min-width:0}
.px-al-n{font-weight:600;overflow-wrap:anywhere}
.px-al-sub{color:var(--muted);font-size:var(--fs-sm)}
.px-al-rule{grid-area:rule;margin:0;font-variant-numeric:tabular-nums}
.px-al-mark{font-weight:500}
.px-al-on{display:inline-block;margin-left:4px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--ink);font-size:var(--fs-xs);font-weight:700}
.px-al-set{grid-area:set;margin:0}
.px-al-log{grid-area:log;margin:2px 0 0;padding:0;list-style:none;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.px-al-log li{margin:0 0 2px}
p.px-al-log{color:var(--muted)}
.px-al-rm{grid-area:rm;align-self:center}
.px-al-acts{margin:4px 0 0}
.px-al-tgt{margin:0 0 8px;font-size:var(--fs-lg)}
.px-al-tgt:empty{display:none}
.px-al-sel{width:100%;max-width:100%}
.px-al-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px 12px;margin:10px 0 4px}
.px-al-form input{width:100%}
.px-al-now{margin:6px 0;min-height:1.4em;font-variant-numeric:tabular-nums}
.px-al-h3{margin:14px 0 4px;font-size:var(--fs-md)}
.px-al-mini{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.px-al-mini li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;border-bottom:1px solid var(--rule);padding:4px 0}
.ms-modal #al-err:empty{display:none}
.px-al-name{margin:8px 0 0}
.px-al-name input{width:100%}
.mk-alerts{margin:var(--sp-xl) 0 0;padding-top:var(--sp-md);border-top:1px solid var(--rule)}
.in-alerts h4{margin:10px 0 6px;font-size:var(--fs-md)}
.in-alerts h4:first-of-type{margin-top:4px}
/* a watchlist row's own actions, under its name */
.mk-racts{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:2px}
.mk-ract{font-size:var(--fs-xs);color:var(--muted);text-decoration-color:var(--rule2)}
@media (hover:hover){.mk-ract:hover{color:var(--ink)}}
.mk-dlrow{align-items:center;gap:6px 12px;margin-top:10px}
.mk-hacts{display:flex;flex-wrap:wrap;gap:6px}
@media (width < 720px){
  .px-al-item{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "rule" "set" "log" "rm"}
  .px-al-rm{justify-self:start;min-height:44px}
  .px-al-form{grid-template-columns:minmax(0,1fr)}
  .mk-dlrow .btn-sm{min-height:44px}
}
@media (pointer:coarse){.mk-ract{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm)}.px-al-mini .btn-sm,.px-al-acts .btn-sm,.mk-hacts .btn-sm{min-height:44px}}

/* ---------------------------------------------------------------- the Trade Calculator: cash on either side (trade.js) */
.tr-terms .tr-tcash input{width:7.5em}

/* ---------------------------------------------------------------- value by condition (collection.js, insight.js, binders.js) */
.in-cond{margin:6px 0 2px}
@media (pointer:coarse){.in-cond,#rp-cond{min-height:44px}}

/* ---------------------------------------------------------------- centering from a photo (sell.js): the stage, its eight lines */
.ce-pick{align-items:center;gap:8px}
.ms-modal .ce-file{position:relative;cursor:pointer;font-weight:400;display:inline-flex;align-items:center}
.ce-file:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ms-modal #ce-err:empty{display:none}
.ce-wrap{max-height:70vh;max-height:70dvh;overflow:auto;margin:10px 0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--fill)}
.ce-stage{position:relative;width:100%;margin:0 auto;line-height:0;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none}
.ce-stage img{display:block;width:100%;height:auto;pointer-events:none}
.ce-ln{position:absolute;z-index:1;outline:none;touch-action:none}
.ce-ln::before{content:"";position:absolute;background:var(--ink);box-shadow:0 0 0 1px var(--ground)}
.ce-ln.ce-in::before{background:repeating-linear-gradient(var(--ln-dir,180deg),var(--warn) 0 6px,var(--ground) 6px 10px)}
.ce-x{top:0;bottom:0;width:24px;margin-left:-12px;cursor:ew-resize}
.ce-x::before{top:0;bottom:0;left:11px;width:2px}
.ce-x.ce-in{--ln-dir:180deg}
.ce-y{left:0;right:0;height:24px;margin-top:-12px;cursor:ns-resize}
.ce-y::before{left:0;right:0;top:11px;height:2px}
.ce-y.ce-in{--ln-dir:90deg}
.ce-knob{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--ground);border:2px solid var(--ink)}
.ce-x .ce-knob{left:3px;top:calc(50% - 9px)}
.ce-y .ce-knob{top:3px;left:calc(50% - 9px)}
.ce-in .ce-knob{border-color:var(--warn)}
.ce-x:nth-of-type(2) .ce-knob,.ce-x:nth-of-type(3) .ce-knob{top:calc(40% - 9px)}
.ce-y:nth-of-type(6) .ce-knob,.ce-y:nth-of-type(7) .ce-knob{left:calc(40% - 9px)}
.ce-ln:focus-visible .ce-knob{box-shadow:0 0 0 3px var(--accent)}@media (hover:hover){.ce-ln:hover .ce-knob{box-shadow:0 0 0 3px var(--accent)}}
.ce-nudge{align-items:center;gap:8px}
.ce-out .ce-res{margin:8px 0;font-size:var(--fs-md);line-height:1.6;font-variant-numeric:tabular-nums}
.ce-psa td,.ce-psa th{white-space:normal}
@media (width < 720px){.ce-nudge .btn-sm,.ce-pick .btn-sm,.ce-pick .db-seg button{min-height:44px}}
@media (pointer:coarse){.ce-x{width:44px;margin-left:-22px}.ce-x::before{left:21px}.ce-x .ce-knob{left:11px}.ce-y{height:44px;margin-top:-22px}.ce-y::before{top:21px}.ce-y .ce-knob{top:11px}}

/* ---------------------------------------------------------------- grading fees and bulk rates (sell.js) */
.se-fees{margin-top:12px}
.se-fees summary{cursor:pointer;font-weight:500;padding:4px 0}
.se-fees h4{margin:12px 0 4px;font-size:var(--fs-md)}
.se-feet th[scope="row"]{font-weight:500}
.se-feet td{white-space:normal;min-width:7em}.se-feet td.num{white-space:nowrap;min-width:0}
.se-bulk{margin:14px 0 8px;padding-top:8px;border-top:1px solid var(--rule)}
.se-bulk h4{margin:0 0 6px;font-size:var(--fs-md)}
.se-bulkr{margin:6px 0;padding-left:18px}
.se-bulkr li{margin:0 0 4px}
@media (pointer:coarse){.se-fees summary{min-height:44px;display:flex;align-items:center}}
/* each line's 24 px handle reaches away from its partner (the card's edge outward, the frame's edge inward), so an outer
   and an inner line drawn close together don't cover each other's handle (October 21, 2026) */
.ce-x[data-ln="oL"],.ce-x[data-ln="iR"]{margin-left:-20px}
.ce-x[data-ln="oL"]::before,.ce-x[data-ln="iR"]::before{left:19px}
.ce-x[data-ln="oL"] .ce-knob,.ce-x[data-ln="iR"] .ce-knob{left:11px}
.ce-x[data-ln="iL"],.ce-x[data-ln="oR"]{margin-left:-4px}
.ce-x[data-ln="iL"]::before,.ce-x[data-ln="oR"]::before{left:3px}
.ce-x[data-ln="iL"] .ce-knob,.ce-x[data-ln="oR"] .ce-knob{left:-5px}
.ce-y[data-ln="oT"],.ce-y[data-ln="iB"]{margin-top:-20px}
.ce-y[data-ln="oT"]::before,.ce-y[data-ln="iB"]::before{top:19px}
.ce-y[data-ln="oT"] .ce-knob,.ce-y[data-ln="iB"] .ce-knob{top:11px}
.ce-y[data-ln="iT"],.ce-y[data-ln="oB"]{margin-top:-4px}
.ce-y[data-ln="iT"]::before,.ce-y[data-ln="oB"]::before{top:3px}
.ce-y[data-ln="iT"] .ce-knob,.ce-y[data-ln="oB"] .ce-knob{top:-5px}

/* ================================================================ October 17, 2026: share additions (institutional build). Loads after the group files, so where these say something about the same thing, this wins. Every rule is scoped to its own tool's box. */

/* ---------------------------------------------------------------- the shared deck page: the preview switch's note */
.sd-studio .sd-pvnote{margin:2px 0 10px;line-height:1.5}

/* ---------------------------------------------------------------- Trade Calculator: each side's terms */
.tr-terms{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:-4px 0 var(--sp-md)}
.tr-terms label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted)}
.tr-terms select,.tr-terms input{font:inherit;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:4px 8px;min-height:var(--ctl-h);max-width:100%}
.tr-terms select:disabled{color:var(--muted)}
.tr-tsel{min-width:0}
.tr-tsel select{min-width:0}
.tr-tpct-f{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);color:var(--ink)}
.tr-terms input{width:5.5em;text-align:right;font-variant-numeric:tabular-nums}
.tr-terms select:focus-visible,.tr-terms input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* a line's liquidity facts sit under its options (the line's own grid: .tr-lmain is display:contents) */
.tr-lflags{grid-row:4;grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.tr-lflags:empty{display:none}
.tr-flag{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.35;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--fill);color:var(--muted);overflow-wrap:anywhere}
.tr-credit{font-size:var(--fs-xs)}
/* the shared list: a line saying a friend's lists are kept here */
.tr-lhead .tr-lkept{color:var(--ink)}

/* ---------------------------------------------------------------- the match view (a shared list, a kept friend) */
.tr-mt-sum{margin:0 0 var(--sp-md);font-size:var(--fs-md);line-height:1.5}
.tr-mt-s{margin:0 0 var(--sp-lg)}
.tr-mt-s h3{font-size:var(--fs-md);margin:0 0 4px}
.tr-mt-tot{margin:0 0 6px;font-size:var(--fs-sm);color:var(--muted)}
.tr-mt-tot b{font-family:var(--mono);font-size:var(--fs-lg);color:var(--ink);font-variant-numeric:tabular-nums}
.tr-mt-t th[scope="row"]{font-family:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--ink);vertical-align:top}
.tr-mt-t th[scope="row"] a{color:var(--ink);text-decoration:none}
@media (hover:hover){.tr-mt-t th[scope="row"] a:hover{color:var(--accent)}}
.tr-mt-t small{display:block;font-family:var(--sans,inherit);font-size:var(--fs-xs);font-weight:400;color:var(--faint);white-space:normal}
.tr-mt-t td{vertical-align:top}
.tr-mt-t .tr-mt-q{color:var(--muted)}
.tr-mt-t td.num{width:1%;min-width:6.5em}
@media (width >= 480px){.tr-mt-t td.num small{white-space:nowrap}}
.tr-mt-t td b{font-weight:600}

/* ---------------------------------------------------------------- Collection's Friends tab: friends kept from links */
.tg-local{margin-top:var(--sp-md)}
.tg-local h3{margin:0 0 6px}
.tg-flist{list-style:none;margin:0;padding:0}
.tg-f{padding:10px 0;border-bottom:1px solid var(--rule)}
.tg-f:last-child{border-bottom:0}
.tg-f p{margin:0 0 6px}
.tg-f .tg-f-h{margin:0 0 2px;overflow-wrap:anywhere}

/* ---------------------------------------------------------------- the card page: In Limited (cardmore.js) */
.cm-body{min-width:0}
.cm-credit{margin:0 0 var(--sp-md);font-size:var(--fs-sm);color:var(--muted);line-height:1.5;max-width:90ch}
.cm-credit a{color:inherit}
.cm-set{padding:var(--sp-md) 0 var(--sp-sm);border-top:1px solid var(--rule)}
.cm-credit + .cm-set{border-top:0;padding-top:0}
.cm-set h3{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;margin:0 0 2px;overflow-wrap:anywhere}
.cm-code{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--faint)}
.cm-sub{margin:0 0 var(--sp-sm);font-size:var(--fs-sm);color:var(--muted)}
.cm-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 var(--sp-md)}
.cm-big b{font-family:var(--mono);font-size:var(--fs-num);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cm-big span{flex:1 1 260px;min-width:0;font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.cm-wrap{max-width:680px}
.cm-table th[scope="row"]{font-family:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.cm-ab{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);text-decoration:none;border:0}
.cm-facts{display:grid;gap:8px;margin:var(--sp-md) 0;max-width:820px}
.cm-facts div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:2px 14px}
.cm-facts dt{font-weight:500}
.cm-facts dd{margin:0;font-size:var(--fs-sm);line-height:1.5}
.cm-facts dd b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cm-h4{font-size:var(--fs-md);margin:var(--sp-md) 0 4px}
.cm-pairs th[scope="row"] .cm-code{margin-left:4px}

@media (width < 720px){
  .tr-terms label{flex:1 1 auto}
  .tr-terms select,.tr-terms input{min-height:44px;font-size:max(16px,1rem)}
  .tr-tsel{flex:1 1 100%}
  .tr-tsel select{flex:1 1 auto}
  .tr-lflags{grid-row:4;grid-column:1/-1}
  .cm-facts div{grid-template-columns:minmax(0,1fr)}
}
@media (width < 480px){
  .cm-table th,.cm-table td{padding-inline:4px}
  .cm-table td.num:nth-child(3){white-space:normal;min-width:5.5em}
  .cm-table td,.cm-table th[scope="row"]{font-size:var(--fs-sm)}
}
@media (pointer:coarse){
  .tg-f .btn-sm,.tr-mt + .ms-row .btn-sm{min-height:44px}
}

/* ---------------------------------------------------------------- October 18, 2026: several decks in one link (the list),
   the line over a deck opened from it, and the rule zero card under a Commander deck (sharedeck.js) */
.sd-many{max-width:60rem}
.sd-many-head{margin:0 0 var(--sp-lg)}
.sd-many-head .sd-kick{margin:0 0 4px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}
.sd-many-head .sd-title{margin:0;font-size:var(--fs-title);overflow-wrap:anywhere}
.sd-many-head .sd-by{margin:6px 0 0;color:var(--muted)}
.sd-many-acts{margin:0 0 var(--sp-lg)}
.sd-many-l{list-style:none;margin:0 0 var(--sp-lg);padding:0;border-top:1px solid var(--rule)}
.sd-many-l li{border-bottom:1px solid var(--rule)}
.sd-many-i{display:flex;flex-direction:column;gap:3px;padding:12px 8px;min-height:44px;color:var(--ink);text-decoration:none;border-radius:var(--r-sm)}
.sd-many-i:focus-visible{background:var(--hover)}@media (hover:hover){.sd-many-i:hover{background:var(--hover)}}
.sd-many-i b{font-size:var(--fs-lg);overflow-wrap:anywhere}
.sd-many-m{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.sd-many-pips{display:inline-flex;vertical-align:middle;gap:1px}
.sd-bundle a{font-weight:700}
.sd-rz-floor{margin:0 0 8px;font-size:var(--fs-xl);line-height:1.2;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.sd-rz-floor span{font-size:var(--fs-lg);color:var(--muted)}
.sd-rz-push{margin:8px 0;padding-left:1.2em;font-size:var(--fs-md)}
.sd-rz-l{display:grid;gap:10px;margin:12px 0}
.sd-rz-l div{display:grid;grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);gap:4px 16px;padding:8px 0;border-top:1px solid var(--rule)}
.sd-rz-l dt{font-weight:700}
.sd-rz-l dd{margin:0;overflow-wrap:anywhere}
@media (width < 480px){.sd-rz-l div{grid-template-columns:minmax(0,1fr)}}
html.sd-presenting .sd-bundle{display:none!important}
/* on paper the group's buttons do nothing: the list prints as its decks */
@media print{.sd-many-acts{display:none}}

/* ================================================================ Haves List (haves.js), October 18, 2026: a seller's list for sale or trade, and a buyer's view of it. Every rule is scoped to its own box (#hs-app, .hs-*). Colors only through the tokens; picked rows use the selection fill, never the spark orange. */

/* ---------------------------------------------------------------- shared pieces */
#hs-app{--hs-gap:var(--sp-md)}
#hs-app h2{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;margin:0 0 var(--sp-sm);line-height:1.25}
.hs-f{display:grid;gap:4px;min-width:0;margin:0;border:0;padding:0}
.hs-f>label,.hs-f>legend,.hs-fl{font-size:var(--fs-sm);color:var(--muted)}
.hs-f legend{padding:0;margin-bottom:4px}
.hs-f input[type=text],.hs-f input[type=number],.hs-f input[type=search],.hs-f select,.hs-f textarea,.hs-bar input,.hs-tools input,.hs-rule select{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:6px 10px;min-height:var(--ctl-h);max-width:100%;box-sizing:border-box}
.hs-f textarea{width:100%;resize:vertical;min-height:4.5em;line-height:1.45}
.hs-fr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.hs-chk{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-md);line-height:1.4;color:var(--ink);cursor:pointer;padding:3px 0}
.hs-chk input{margin:3px 0 0;flex:none}
.hs-money,.hs-pctf{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.hs-money>span,.hs-pctf>span{color:var(--muted);font-size:var(--fs-md)}
.hs-money input{width:5.5em;text-align:right}
.hs-pctf input{width:4.5em;text-align:right}
.hs-src{display:block;margin-top:4px;font-size:var(--fs-sm);font-weight:400;color:var(--muted);line-height:1.5}
.hs-warn{color:var(--warn);font-style:normal}
.hs-pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--code);font-size:var(--fs-sm);line-height:1.5;color:var(--ink);background:var(--code-bg);border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 12px;max-height:20rem;overflow:auto}
.hs-pre:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-q{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.hs-name{color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){a.hs-name:hover{text-decoration:underline;text-underline-offset:3px}}
.hs-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.hs-main small,.hs-pr small{font-size:var(--fs-xs);color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.hs-pr{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:1px;min-width:0}
.hs-pr b{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.hs-tag{display:inline-block;align-self:flex-start;font-size:var(--fs-xs);line-height:1.35;padding:1px 8px;margin-top:2px;border-radius:var(--r-pill);border:1px solid var(--rule2);background:var(--fill);color:var(--ink)}
.hs-tag.hs-wish{border-color:var(--ink);font-weight:600}
.hs-tag.hs-warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}

/* ---------------------------------------------------------------- your lists */
.hs-headrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:var(--sp-sm)}
.hs-headrow h2{margin:0!important}
.hs-lists{list-style:none;margin:0 0 var(--sp-xl);padding:0;border-top:1px solid var(--rule)}
.hs-lists li{display:flex;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.hs-lists a{flex:1;min-width:0;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:2px}
.hs-lists a b{font-size:var(--fs-lg);overflow-wrap:anywhere}
.hs-lists a small{font-size:var(--fs-sm);color:var(--muted)}
@media (hover:hover){.hs-lists a:hover b{text-decoration:underline;text-underline-offset:3px}}
.hs-how{margin-top:var(--sp-lg)}
.hs-steps{margin:0;padding-left:1.4em;display:grid;gap:8px;font-size:var(--fs-md);line-height:1.5;max-width:72ch}

/* ---------------------------------------------------------------- the editor */
.hs-ed{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-lg)}   /* one column that never grows past the page: a select's longest option can't widen it */
#hs-app select{max-width:100%}
.hs-edtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;font-size:var(--fs-sm)}
.hs-back{color:var(--ink);text-underline-offset:3px}
.hs-back::before{content:"\2039\00a0"}
.hs-saved{color:var(--muted)}
.hs-step{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-lg);min-width:0}
.hs-step h2{display:flex;align-items:center;gap:10px}
.hs-n{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--ink);color:var(--ground);font-size:var(--fs-sm);font-weight:700;flex:none}
.hs-count{margin:0 0 4px;font-size:var(--fs-md)}
.hs-add{margin-top:6px}
.hs-help{margin:10px 0 0;max-width:72ch}
.hs-rule{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fs-lg)}
.hs-rule label{font-size:var(--fs-lg);color:var(--ink)}
.hs-rule input{font:inherit;font-size:var(--fs-lg);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:6px 8px;min-height:var(--ctl-h)}
.hs-rule select{font-size:var(--fs-md);flex:0 1 auto;min-width:0}
.hs-total{margin:12px 0 0;font-size:var(--fs-lg);line-height:1.45}
.hs-total b{font-variant-numeric:tabular-nums}
.hs-low{margin:8px 0 0;max-width:72ch}
.hs-more{margin-top:12px;border-top:1px solid var(--rule);padding-top:8px}
.hs-more>summary{cursor:pointer;font-size:var(--fs-md);font-weight:600;color:var(--ink);padding:6px 0}
.hs-moreb{display:grid;gap:14px;padding:8px 0 4px}
@media (width >= 720px){.hs-moreb{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px}.hs-moreb>.hs-bulk,.hs-moreb>.hs-f:nth-child(n+4){grid-column:1/-1}}
.hs-bulk .hs-fr{margin-top:4px}
.hs-bulk .hs-chk{padding:0}
.hs-details{display:grid;gap:12px}
@media (width >= 720px){.hs-details{grid-template-columns:1fr 1fr}.hs-details .hs-wide{grid-column:1/-1}}
.hs-details input{width:100%}
/* the share step */
.hs-len{margin:0 0 8px;font-size:var(--fs-sm);color:var(--muted)}
.hs-len.hs-long{color:var(--warn);font-weight:600}
.hs-url{width:100%;box-sizing:border-box;font-family:var(--code);font-size:var(--fs-sm);color:var(--ink);background:var(--code-bg);border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;min-height:var(--ctl-h);text-overflow:ellipsis}
.hs-sharebtns{margin-top:10px}
/* a button that can't act says so by its look too (the post that can't hold a link too long for a message) */
#hs-app .btn-sm:disabled,.ms-modal .hs-mrow .btn-sm:disabled{opacity:.45;cursor:not-allowed}
.hs-nitro{margin-top:8px;font-size:var(--fs-sm)}
.hs-longbox{margin-top:10px;padding:10px 14px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);font-size:var(--fs-md)}
.hs-longbox p{margin:0 0 6px}
.hs-longbox ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.hs-longbox .btn-sm{margin-left:6px}
.hs-qrbox{margin-top:12px}
.hs-qr{max-width:min(100%,340px);margin:0 auto 8px;border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.hs-qr svg{display:block;width:100%;height:auto}
.hs-qrwait{aspect-ratio:1;background:var(--fill)}
.hs-postv{margin-top:12px}
.hs-postv>summary{cursor:pointer;font-size:var(--fs-sm);color:var(--muted);padding:4px 0}
.hs-postv .hs-pre{margin-top:6px}
.hs-splitl{margin:0;padding-left:1.4em;display:grid;gap:12px}
.hs-splitl li{display:grid;gap:2px}
.hs-splitl small{color:var(--muted);font-size:var(--fs-sm)}
.hs-splitl .ms-row{margin-top:6px}
/* the cards, seller side */
.hs-cards h2{margin-bottom:6px}
.hs-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.hs-tools input{flex:1 1 12rem;min-width:0}
.hs-slist,.hs-vl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
/* rows off the screen skip layout until they come near it (a 300 row redraw was 250 ms of layout on a 4x slowed phone) */
.hs-srow,.hs-vrow{content-visibility:auto;contain-intrinsic-inline-size:0px;contain-intrinsic-block-size:auto 60px}   /* only the height is remembered: a row drawn at one width never holds the column open at a narrower one */
.hs-srow,.hs-vrow{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;grid-template-areas:"q main act" "q pr act";gap:2px 10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--rule)}
.hs-srow .hs-q,.hs-vrow .hs-q{grid-area:q;align-self:start;padding-top:2px;text-align:right}
.hs-srow .hs-main,.hs-vrow .hs-main{grid-area:main}
.hs-srow .hs-pr,.hs-vrow .hs-pr{grid-area:pr;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.hs-srow .hs-act,.hs-vrow .hs-act{grid-area:act}
@media (width >= 720px){
  .hs-srow,.hs-vrow{grid-template-columns:2.4rem minmax(0,1fr) minmax(7.5rem,auto) auto;grid-template-areas:"q main pr act"}
  .hs-srow .hs-pr,.hs-vrow .hs-pr{flex-direction:column;align-items:flex-end;text-align:right}
}
.hs-rec{margin-top:12px;font-size:var(--fs-md)}
.hs-rec>p{margin:0 0 8px}
.hs-bad{padding:8px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md);margin:8px 0}
.hs-bad p{margin:0 0 4px}
.hs-bad ul{margin:0;padding-left:1.2em;font-size:var(--fs-sm);display:grid;gap:4px}
.hs-bad code{font-family:var(--code);overflow-wrap:anywhere}
.hs-warns{margin:8px 0;font-size:var(--fs-sm)}
.hs-warns summary{cursor:pointer;color:var(--muted)}
.hs-ptext{font-family:var(--code)}
.hs-edit{display:grid;gap:12px}
@media (width >= 720px){.hs-edit{grid-template-columns:1fr 1fr}.hs-edit>.hs-f:first-child,.hs-enow{grid-column:1/-1}}
.hs-edit select{width:100%}
.hs-enow{margin:0;font-size:var(--fs-md);color:var(--ink)}

/* ---------------------------------------------------------------- the buyer's view */
.hs-view{min-width:0}
.hs-vhead{padding:0 0 var(--sp-md);border-bottom:1px solid var(--rule);margin-bottom:var(--sp-md)}
#hs-app .hs-vtitle{font-size:var(--fs-xl);margin:0;overflow-wrap:anywhere}
.hs-by{margin:2px 0 0;font-size:var(--fs-md);color:var(--muted);overflow-wrap:anywhere}
/* a seller's handle is one unbroken word of up to 40 characters: it breaks where it must, never widening a phone's page */
#hs-app .ms-sharebar p,.hs-wrap{overflow-wrap:anywhere;min-width:0}
.hs-pvwarn{margin:10px 0 0;padding:8px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--ink);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5;max-width:72ch;overflow-wrap:anywhere}
.hs-note{margin:10px 0 0;font-size:var(--fs-md);line-height:1.5;max-width:72ch;overflow-wrap:anywhere;white-space:normal}
.hs-got{margin:10px 0 0;padding:8px 12px;border:1px solid var(--ink);border-radius:var(--r-md);background:var(--sel);font-size:var(--fs-md);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hs-got p{margin:0;flex:1 1 16rem}
.hs-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hs-bar input[type=search]{flex:1 1 14rem;min-width:0}
.hs-bar select{flex:0 1 auto;min-width:0}
.hs-viewseg{flex:none}
.hs-filters{margin-top:8px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.hs-filters>summary{cursor:pointer;padding:8px 12px;font-size:var(--fs-md);font-weight:600}
.hs-fcount{font-weight:400;color:var(--muted)}
.hs-fbody{display:grid;gap:12px;padding:4px 12px 12px}
.hs-chips{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0;min-width:0}
.hs-chips legend{font-size:var(--fs-sm);color:var(--muted);padding:0;margin-bottom:6px;width:100%}
.hs-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);line-height:1.25;padding:4px 10px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);cursor:pointer;min-height:var(--ctl-h-sm)}
.hs-chip:has(input:checked){background:var(--sel);border-color:var(--ink)}
.hs-chip input{margin:0}
.hs-frow{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr))}
.hs-frow select{width:100%}
.hs-shown{margin:10px 0 6px;font-size:var(--fs-sm);color:var(--muted)}
.hs-grp{margin:0 0 var(--sp-md)}
#hs-app .hs-gh{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;margin:var(--sp-md) 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.hs-gn{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.hs-gt{margin-left:auto;font-variant-numeric:tabular-nums}
.hs-vrow.hs-picked,.hs-pic.hs-picked{background:var(--sel);box-shadow:inset 3px 0 0 var(--ink)}
.hs-none{margin:var(--sp-lg) 0;font-size:var(--fs-md)}
.hs-gmore{margin-top:6px}
/* the pick control: one button, then a stepper once picked */
.hs-pk{display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.hs-pk button{min-width:var(--ctl-h);min-height:var(--ctl-h);border:0;background:var(--surface);color:var(--ink);font-size:var(--fs-lg);cursor:pointer;padding:0 8px}
@media (hover:hover){.hs-pk button:hover{background:var(--hover)}}
.hs-pk button:disabled{color:var(--faint);cursor:not-allowed;background:var(--fill)}
.hs-pk button:focus-visible,.hs-pk0:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hs-pk output{min-width:1.8em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.hs-pk0{min-width:4.2rem}
/* pictures, whole and never covered: the caption, tags and pick sit under each one */
.hs-pics{list-style:none;margin:0;padding:0;display:grid;gap:14px 12px;grid-template-columns:repeat(var(--pc2),minmax(0,1fr))}
@media (width >= 720px){.hs-pics{grid-template-columns:repeat(auto-fill,minmax(calc(170px * var(--pic)),1fr))}}
.hs-pic{display:flex;flex-direction:column;gap:4px;min-width:0;padding:4px;border-radius:var(--r-md)}
.hs-picb{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-card);line-height:0}
.hs-picb img{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.hs-picb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-nopic{display:grid;place-items:center;aspect-ratio:488/680;border:1px dashed var(--rule2);border-radius:var(--r-card);padding:8px;text-align:center;font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.hs-pcap{margin:0;display:flex;flex-direction:column;gap:1px;font-size:var(--fs-xs);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.hs-pcap b{font-size:var(--fs-md);color:var(--ink);font-variant-numeric:tabular-nums}
.hs-art{font-style:italic}
.hs-pic .hs-act{margin-top:auto;padding-top:2px}
.hs-pic .hs-pk0{width:100%}
.hs-vsrc{margin-top:var(--sp-lg);max-width:80ch;line-height:1.5}
/* the dock: the picks' count and totals, always in reach at the foot of the screen */
.hs-dock{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-top:var(--sp-md);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--ground);border-top:1px solid var(--rule)}
.hs-dockt{flex:1 1 14rem;min-width:0;margin:0;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.hs-dockb{display:flex;flex-wrap:wrap;gap:8px}
/* the message dialog */
.hs-offer{margin:12px 0;display:grid;gap:2px}
.hs-orow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--fs-md)}
.hs-orow .hs-chk{padding:0}
/* the dialog's fields are full width by default (styles.css); these hold a few digits */
.ms-modal .hs-money input[type][inputmode]{width:6.5em}
.ms-modal .hs-pctf input[type][inputmode]{width:5em}
.hs-parts{display:grid;gap:12px;margin:12px 0}
.hs-pn{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.hs-part{display:grid;gap:6px}
.hs-parth{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--fs-sm)}
.hs-parth .btn-sm:first-of-type{margin-left:auto}
.hs-mrow{margin-top:4px}

@media (pointer:coarse){
  /* a card name is a 44 px target that doesn't push its own line apart */
  .hs-main a.hs-name{display:inline-flex;align-items:center;align-self:flex-start;margin-block:-8px}
  .hs-pk button{min-width:44px;min-height:44px}
  .hs-chip{min-height:44px}
  .hs-lists a{min-height:44px;justify-content:center}
}
@media (forced-colors:active){.hs-vrow.hs-picked,.hs-pic.hs-picked{border-left:4px solid CanvasText}.hs-n{border:1px solid CanvasText}}

/* the file picker beside the paste box: a full 44 px target on a touch screen */
@media (pointer:coarse){.hs-f input[type=file]{min-height:44px;padding:8px 0;box-sizing:border-box}.hs-f label[for=hs-pfile]{display:flex;align-items:center;min-height:44px}}

/* ================================================================ Formats (formats.js), October 21, 2026: /formats/ and a
   page per format. Every rule is scoped to the tool's own box (#fm-app, .fm-*). Colors only through the tokens; no blue;
   the current rule-set tab is marked in ink, never the spark orange. 44px targets on coarse pointers, no text under 13px
   (--fs-xs), breakpoints 480, 720 and 1024 only. */
.fm{display:grid;gap:var(--sp-lg)}
#fm-app{min-width:0}
#fm-app :where(h2,h3){font-family:var(--sans);line-height:1.25}
.fm-muted{color:var(--muted)}
.fm-small{font-size:var(--fs-sm);line-height:1.5}
.fm-n{display:inline-block;min-width:1.6em;padding:0 6px;margin-left:4px;border-radius:var(--r-pill);background:var(--fill);color:var(--muted);font-size:var(--fs-sm);font-weight:500;text-align:center;vertical-align:.15em;font-variant-numeric:tabular-nums}
.fm-tag{display:inline-block;font-size:var(--fs-xs);font-weight:500;line-height:1.35;padding:1px 8px;border-radius:var(--r-pill);border:1px solid var(--rule2);background:var(--fill);color:var(--ink);vertical-align:.1em;max-width:100%;overflow-wrap:anywhere}
.fm-tag.fm-yes{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.fm-badge{display:inline-block;align-self:flex-start;font-size:var(--fs-xs);font-weight:700;line-height:1.35;padding:1px 8px;border-radius:var(--r-pill);border:1px solid var(--rule2);color:var(--ink);background:var(--fill)}
.fm-st-retiring{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.fm-st-retired{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}
.fm-st-unconfirmed,.fm-st-inactive{border-style:dashed;color:var(--muted)}
.fm-src{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.fm-src a,.fm-srcl,.fm-rn a{color:var(--muted);text-underline-offset:3px}
.fm-srcl{font-size:var(--fs-sm)}
/* a link that stands alone (a row's source, a date) is at least 24px tall everywhere (WCAG 2.5.8), 44px on touch below */
.fm-srcp a,.fm-srcl,.fm-dl{display:inline-flex;align-items:center;min-height:24px}
.fm-note{margin:0 0 var(--sp-sm);max-width:72ch;color:var(--ink);line-height:1.5}
.fm-rn{display:block;margin:2px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.fm-empty{margin:var(--sp-sm) 0;padding:var(--sp-md);border:1px dashed var(--rule2);border-radius:var(--r-md);color:var(--muted)}
.fm-err{padding:var(--sp-lg);border:1px solid var(--bad-line);border-radius:var(--r-lg);background:var(--bad-soft)}
.fm-err p{margin:0 0 8px}
.fm-more{margin-top:var(--sp-sm)}
.fm-ul{margin:0;padding-left:1.25em;display:grid;gap:6px;max-width:80ch;line-height:1.5}
.fm-h3{font-size:var(--fs-lg);margin:var(--sp-md) 0 6px}
.fm-cn{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px;overflow-wrap:anywhere}
@media (hover:hover){.fm-cn:hover{text-decoration-color:var(--ink)}}
.fm-cn[aria-busy="true"]{cursor:progress;opacity:.7}
.fm-nolink{text-decoration:none;font-weight:600}

/* ---------------------------------------------------------------- the index */
.fm-index{display:grid;gap:var(--sp-xl);min-width:0}
.fm-next{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-lg);min-width:0}
.fm-next h2{font-size:var(--fs-xl);margin:0 0 var(--sp-sm)}
.fm-cal{list-style:none;margin:0;padding:0}
.fm-cal>li{display:grid;grid-template-columns:7.25em minmax(0,1fr);gap:2px 12px;padding:10px 0;border-top:1px solid var(--rule)}
.fm-cal>li:first-child{border-top:0}
.fm-when{margin:0;line-height:1.5}
.fm-cal time{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fm-est{display:block;font-size:var(--fs-sm);color:var(--muted)}
.fm-cal-w{margin:0;line-height:1.5}
.fm-cal-w a,.fm-head a,.fm-check a:not(.fm-cn),.fm-sec p a:not(.fm-cn){color:var(--ink);text-underline-offset:3px}
.fm-cal p.fm-muted{margin:2px 0 0;font-size:var(--fs-sm);line-height:1.45}
.fm-joins{margin-top:4px}
.fm-joins summary,.fm-cat summary{cursor:pointer;color:var(--ink);font-weight:600;width:fit-content;max-width:100%}
.fm-names{display:flex;flex-wrap:wrap;gap:2px 14px;margin:6px 0 0;line-height:1.5}
.fm-names>[hidden]{display:none}
.fm-find{display:grid;gap:6px;max-width:40rem}
.fm-find label{font-weight:700}
.fm-qrow{display:flex;gap:8px;align-items:center}
.fm-qrow input,.fm-ctl input,.fm-ctl select{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:6px 10px;min-height:var(--ctl-h);box-sizing:border-box;min-width:0}
.fm-qrow input{flex:1 1 auto}
.fm-find p{margin:0}
.fm-fams{display:grid;gap:var(--sp-xl);min-width:0}
.fm-fam h2{font-size:var(--fs-xl);margin:0 0 var(--sp-sm)}
.fm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:8px}
.fm-grid>li{min-width:0}
/* a format with its rule sets or variants: one group across the row, under the format's name */
.fm-grid>li.fm-group{grid-column:1/-1;padding:4px 0 4px 12px;border-left:2px solid var(--rule2)}
.fm-gh{font-size:var(--fs-lg);margin:0 0 6px}
.fm-gh .fm-muted{font-weight:400}
.fm-item{display:flex;flex-direction:column;gap:3px;height:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none}
@media (hover:hover){.fm-item:hover{border-color:var(--accent)}}
.fm-item b{font-size:var(--fs-lg);overflow-wrap:anywhere}
.fm-item .fm-aside,.fm-where,.fm-dates{font-size:var(--fs-sm);color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.fm-item .fm-aside{margin:0}
/* what the format is, in one line (attacker A7 #8, October 22, 2026): in ink under the name, before where and when */
.fm-item .fm-what{font-size:var(--fs-sm);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.fm-head .fm-what{margin:var(--sp-sm) 0 0;max-width:72ch;font-size:var(--fs-lg);line-height:1.5;color:var(--ink)}
.fm-head .fm-gl{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;text-underline-offset:3px}
@media (pointer:coarse){.fm-head .fm-gl{display:flex;align-items:center;width:fit-content;min-height:44px}}
.fm-foot{margin:0}

/* ---------------------------------------------------------------- one format */
.fm-page{display:grid;gap:var(--sp-xl);min-width:0}
.fm-head h1{font-size:var(--fs-title);line-height:1.15;margin:0;overflow-wrap:anywhere}
.fm-head h1:focus{outline:none}
.fm-head h1:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fm-aside{margin:4px 0 0;color:var(--muted)}
.fm-badges{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-sm) 0 0}
.fm-badges:empty{display:none}
.fm-facts-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--sp-md) var(--sp-xl);margin:var(--sp-md) 0 0}
.fm-facts-top>div{min-width:0}
.fm-facts-top dt{font-size:var(--fs-sm);color:var(--muted)}
.fm-facts-top dd{margin:2px 0 0;overflow-wrap:anywhere;line-height:1.45}
.fm-facts-top dd .fm-rn{margin-top:4px}
.fm-tabs{min-width:0}
/* the rule-set tabs wrap onto a second line rather than scroll: every tab, the current one too, is on screen at 320 */
.fm-tabs ul{list-style:none;margin:0;padding:0 2px;display:flex;flex-wrap:wrap;gap:0 20px;border-bottom:1px solid var(--rule)}
.fm-tabs li{flex:none}
.fm-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--muted);text-decoration:none;white-space:nowrap}
.fm-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
@media (hover:hover){.fm-tabs a:hover{color:var(--ink)}}
.fm-tabs a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.fm-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fm-toc a{display:inline-flex;align-items:center;min-height:var(--ctl-h);padding:2px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--fs-sm)}
@media (hover:hover){.fm-toc a:hover{border-color:var(--accent)}}
.fm-sec{min-width:0;scroll-margin-top:calc(var(--top-h,0px) + 12px)}
.fm-sec>h2{font-size:var(--fs-2xl);margin:0 0 var(--sp-sm)}
.fm-sec>h2:focus{outline:none}
.fm-sec>h2:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fm-sec>p{max-width:80ch;line-height:1.5}
.fm-rules{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;max-width:80ch}
.fm-rules>div{display:contents}
.fm-rules dt{color:var(--muted)}
.fm-rules dd{margin:0;line-height:1.5;overflow-wrap:anywhere}
.fm-tools{max-width:64rem;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;margin:0 0 4px}
.fm-ctl{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--muted);min-width:0}
.fm-ctl-q{flex:1 1 14rem;max-width:24rem}
.fm-tools+p{margin:0 0 4px;min-height:1.5em}
.fm-tw{min-width:0;max-width:64rem}
.fm-table{width:100%;border-collapse:collapse;font-size:var(--fs-md);line-height:1.45}
.fm-table th{text-align:left;padding:0;border-bottom:1px solid var(--rule2);vertical-align:bottom}
.fm-table th button{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:0 4px;margin:0;cursor:pointer;min-height:var(--ctl-h);display:inline-flex;align-items:center;gap:4px;text-align:left}
.fm-table th[aria-sort="ascending"] button::after{content:"\2191";color:var(--muted)}
.fm-table th[aria-sort="descending"] button::after{content:"\2193";color:var(--muted)}
.fm-table td{vertical-align:top;padding:8px 4px;border-bottom:1px solid var(--rule);min-width:0}
.fm-table td:first-child{overflow-wrap:anywhere}
.fm-table td:last-child,.fm-table th:last-child{width:1%;padding-left:12px}
.fm-table th:last-child{white-space:nowrap}
.fm-table tr[hidden]{display:none}
.fm-num{text-align:right}
.fm-table th.fm-num button{margin-left:auto}
.fm-dl{color:var(--ink);text-underline-offset:3px;font-variant-numeric:tabular-nums}
a.fm-dl{flex-direction:column;align-items:flex-start;gap:0}
.fm-dl>span{white-space:nowrap}
.fm-dh{display:block;font-size:var(--fs-xs);line-height:1.3;color:var(--muted);white-space:normal;max-width:11em;overflow-wrap:anywhere}
.fm-via{display:block;font-size:var(--fs-xs);line-height:1.3;color:var(--muted);white-space:nowrap}
/* a format's name is written as its keepers write it: cEDH stays cEDH (styles.css capitalizes every heading's first letter) */
#fm-app .fm-head h1::first-letter{text-transform:none}
.fm-missing p{overflow-wrap:anywhere}
span.fm-dl{color:var(--muted)}
.fm-cat td{background:var(--stone)}
.fm-rule b{font-weight:600}
.fm-credit{margin:var(--sp-sm) 0 0;max-width:80ch}
.fm-histbox{min-width:0}
.fm-year{margin:var(--sp-lg) 0 0;font-size:var(--fs-lg)}
.fm-year:first-child{margin-top:0}
.fm-hist{list-style:none;margin:0;padding:0}
.fm-hist>li{display:grid;grid-template-columns:7.25em minmax(0,1fr);gap:2px 12px;padding:8px 0;border-top:1px solid var(--rule)}
.fm-hist>li[hidden],.fm-year[hidden]{display:none}
.fm-hist time{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.fm-hist p{margin:0;line-height:1.5}
.fm-chg{font-weight:700}
.fm-chg-banned,.fm-chg-restricted{color:var(--bad)}
.fm-chg-unbanned,.fm-chg-unrestricted,.fm-chg-legal{color:var(--ok)}
.fm-check{max-width:80ch}
.fm-check .fm-ul{margin-top:6px}
.fm-use{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:8px}
.fm-usea{display:flex;flex-direction:column;gap:2px;height:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none}
@media (hover:hover){.fm-usea:hover{border-color:var(--accent)}}
.fm-usea span{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.fm-sets{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fm-sets li{padding:2px 10px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm)}
.fm-facts{max-width:80ch}
.fm-srcs{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-md);max-width:80ch}
.fm-srcs>li{padding:var(--sp-md);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);min-width:0}
.fm-srcs p{margin:0 0 4px;line-height:1.5;overflow-wrap:anywhere}
.fm-srch a{color:var(--ink);font-weight:700}
.fm-back{margin:0}
.fm-back a{color:var(--ink)}
.fm-missing h1{font-size:var(--fs-title);margin:0 0 var(--sp-sm)}
.fm-mlist{columns:2 16rem;column-gap:var(--sp-xl);padding-left:1.2em;line-height:1.8}
.fm-mlist a{color:var(--ink)}

@media (width < 480px){
  .fm-cal>li,.fm-hist>li{grid-template-columns:minmax(0,1fr)}
  .fm-rules{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .fm-rules dd{margin-bottom:8px}
  .fm-table td:last-child,.fm-table th:last-child{padding-left:8px}
  .fm-next{padding:var(--sp-md)}
}
@media (pointer:coarse){
  /* links that stand alone are 44px targets; a link inside a sentence (the calendar, a fact, a note) stays in its line */
  .fm-cn,.fm-dl,.fm-toc a,.fm-srcl,.fm-facts-top a,.fm-srch a,.fm-back a,.fm-mlist a,.fm-srcp a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .fm-cal-w .fm-cn,.fm-check li>.fm-cn{display:inline}
  .fm-joins summary,.fm-cat summary{padding:12px 0}
  .fm-hcards{display:flex;flex-wrap:wrap;gap:0 16px}
  .fm-sep{display:none}
  .fm-names{gap:0 16px}
  .fm-table th button,.fm-qrow input,.fm-qrow button,.fm-ctl input,.fm-ctl select,.fm-more{min-height:44px}
  .fm-table td{padding-top:2px;padding-bottom:2px}
  /* the points beside a name stand on the name's line (the name is a 44px target) */
  .fm-ptable td.fm-num b{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px}
  /* a link inside a rule's sentence stays in the sentence (styles.css makes a link alone in a cell a row-high target) */
  #fm-app .fm-rules dd>a[href]{display:inline;min-height:0}
}
@media (prefers-reduced-motion:reduce){.fm-sec{scroll-behavior:auto}}

/* ================================================================ Prep, the formats wave (October 21, 2026): the format
   menu, a field typed in by hand for a format with no MTGO lists, and the season's calendar parts. Every rule is scoped
   to Prep's own box. */
#pd-app .pd-htab{width:100%;max-width:36rem}
#pd-app .pd-htab th,#pd-app .pd-htab td{padding-left:4px;padding-right:4px}
#pd-app .pd-htab input.pd-hname{width:100%;min-width:6rem}
#pd-app .pd-htab .pd-share{width:4em}
#pd-app .pd-htab td .btn-sm{min-height:40px}
#pd-app .pd-next{list-style:none;padding-left:0}
#pd-app .pd-next li{padding:2px 0}
#pd-app .pd-stab td small{display:inline-block;max-width:34ch;line-height:1.4}
#pd-app .pd-h3{margin:var(--sp-md) 0 var(--sp-sm)}
@media (pointer:coarse){#pd-app .pd-htab td .btn-sm,#pd-app .pd-htab input{min-height:44px}}
/* a source in a table cell reads as part of the cell's text (a link in running text), not as a block of its own */
#pd-app .pd-stab td small.pd-src{display:inline;max-width:none}

/* ================================================================ the design system's shared parts (October 22, 2026)
   docs/DESIGN_SYSTEM.md says what each is for and when to use it; design_rules.py checks the stylesheet against the
   rules (the type scale, no blue, colors only through tokens). This file loads after every tool group's file (a_ to n_)
   and before the builders' own o<N>_ files, so a tool can still say something more particular about its own parts. */

/* ---------------------------------------------------------------- numbers a tile is about (30 px, 18 on phones)
   A10 #26: Atkinson's slashed zero read "2Ø" at these sizes. Every number at --fs-num or larger takes the plain-zero
   figures (--num-face; only the digits change) at tabular width, so columns of numbers line up. New markup: class "num-big" */
.num-big,.co-kpis b,.co-ledger .co-lv > b,.me-big b,.mb-big b,.mt-kpi b,.wc-b b,.rec-big b,.px-kpi b,.tr-tot b,.mk-ixnow b,.ov-v,.co-kpis > div > b,.mk-hnow b,:is(.ds,.sl,.ev,.cb) .db-rstats.fr-stats b,.ev .ev-score .mb-big b,.mt .mt-kpi b,.fr .fr-stats b,#me-app .me-big b,#me-app .ry-big b,#me-app .tev-skpis .rec-big b,#me-app .tev-report .rec-big b,.pd-kpis b,.pd-big b,.sd-stats dd,.lc-kpis b,.se-kpis b,.cm-big b,.lf-num b,.lf .lf-num b,.lf-tmclock,.lf-roll{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums}

/* ---------------------------------------------------------------- three control heights (A10 #14)
   --ctl-h-sm 28 (chips, extra-small buttons, a row's own actions), --ctl-h 32 (buttons, segments, a toolbar's fields),
   --ctl-h-lg 44 (tabs, the main search bar, Card Eval's grades). On a touch screen every control is 44 (styles.css), so
   these hold for a mouse. Buttons that wrap to two lines grow; nothing is cut. */
:root{--ctl-h-lg:2.75rem}
@media (pointer:fine){
  /* segments are sized under ids in some tools (Meta Lens, Film Room), so their one height is set firmly here */
  :root :is(.db-seg,.cl-views,.mt-seg,.mu-seg,.sl-seg,.mk-seg,.ds-seg):not([role=tablist]) > button{min-height:var(--ctl-h)!important;height:auto!important;padding-block:4px!important;padding-inline:12px;font-size:var(--fs-sm);line-height:1.25}
  :root :is(.btn-sm,.cl-dir,.cl-more){min-height:var(--ctl-h);padding-block:4px;line-height:1.25}
  :root .mu-stb{min-width:var(--ctl-h);min-height:var(--ctl-h)}
  :root .cl-parts button{min-width:var(--ctl-h-sm);min-height:var(--ctl-h-sm)}
  :root :is(.btn-xs,.fb-chip,.qf-chip,.cc-fin){min-height:var(--ctl-h-sm);padding-block:2px;line-height:1.25}
  :root .ev-fchips .fb-chip{min-height:var(--ctl-h-sm);padding-block:2px}
  :root .ev-grades > button{min-height:var(--ctl-h-lg);height:var(--ctl-h-lg);padding-block:0}
  :root #cl-form :is(.cl-go,.cl-mode){min-height:var(--ctl-h-lg);height:var(--ctl-h-lg);padding-block:0}
}

/* ---------------------------------------------------------------- one tab row (A10 #16)
   Tabs switch the panel under them: 44 px tall, 16 px words, the chosen one in ink with a 2 px rule under it (each
   tool's own selected rule draws it; this sets the shared size). Counts after a word stay in the word's color. */
:root :is(.db-tabs,.co-tabs,.mt-tabs,.mk-tabs,.wc-tabs,.cap-tabs,.pd-tabs,.lf-tabs,.fr-tabs,.di-tabs,.tr-ltabs,.wc-otabs,.cc-tabs,[role=tablist].mt-seg) > :is(button,[role=tab],a){min-height:var(--ctl-h-lg);padding-block:0;font-size:var(--fs-lg);font-weight:400;line-height:1.25}
:root .lf-tabs > [role=tab][aria-selected="true"]{border-bottom:0;box-shadow:inset 0 -2px 0 var(--ink)}

/* ---------------------------------------------------------------- one fold marker (A10 #15)
   The house chevron, pointing right when closed and down when open, in the summary's own color; never the browser's
   triangle. The folds that still showed the triangle (Set Lab, Matchup Lab, Meta Lens, Film Room, Card Eval, Draft Sim,
   Cube Generator, King Goldfish, Captain, the Haves List, Manabase+'s keepable hands) take it, and every chevron is one
   size: 7 px, 2 px stroke */
:root :is(.sl-how,.mu-det,.mt-events,.mt-receipts,.fr-how,.ev-machine,.ds-how,.ds-adv,.cb-rules,.cb-how,.cb-rulesx,.gf-log,.cap-notes,.cap-cvpaste,.hs-more,.mb-khpick,.fold) > summary{list-style:none;cursor:pointer}
:root :is(.sl-how,.mu-det,.mt-events,.mt-receipts,.fr-how,.ev-machine,.ds-how,.ds-adv,.cb-rules,.cb-how,.cb-rulesx,.gf-log,.cap-notes,.cap-cvpaste,.hs-more,.mb-khpick,.fold) > summary::-webkit-details-marker{display:none}
:root :is(.sl-how,.mu-det,.mt-events,.mt-receipts,.fr-how,.ev-machine,.ds-how,.ds-adv,.cb-rules,.cb-how,.cb-rulesx,.gf-log,.cap-notes,.cap-cvpaste,.hs-more,.mb-khpick,.fold) > summary::before{content:"";display:inline-block;vertical-align:.12em;flex:none;width:7px;height:7px;margin:0 8px 0 3px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
:root :is(.sl-how,.mu-det,.mt-events,.mt-receipts,.fr-how,.ev-machine,.ds-how,.ds-adv,.cb-rules,.cb-how,.cb-rulesx,.gf-log,.cap-notes,.cap-cvpaste,.hs-more,.mb-khpick,.fold)[open] > summary::before{transform:translateY(-2px) rotate(45deg)}
:root :is(.how,.cl-vocab,.cc-fold,.fb-sec,.cc-capd,.cc-legal-more,.cc-whyf,.cc-capwhy,.px-mo,.or-ev,.tg-sec,.cx-fold) > summary::before,:root #cc-buy .px-mo > summary::before{width:7px;height:7px;border-width:0 2px 2px 0;border-color:currentColor}
@media (prefers-reduced-motion:reduce){:root :is(.sl-how,.mu-det,.mt-events,.mt-receipts,.fr-how,.ev-machine,.ds-how,.ds-adv,.cb-rules,.cb-how,.cb-rulesx,.gf-log,.cap-notes,.cap-cvpaste,.hs-more,.mb-khpick,.fold) > summary::before{transition:none}}

/* ---------------------------------------------------------------- one toast (A10 #25)
   The site's toast (MS.toast) is the one style: ink, the reading face at 15 px, 10 by 16 padding, the medium radius.
   Market's notice in the page (its undo after a change) takes the same look, so the two read as one thing */
:root .mk-note{font-family:var(--sans);font-size:var(--fs-md);padding:10px var(--sp-lg);border-radius:var(--r-md);background:var(--ink);border-color:var(--ink);color:var(--ground);box-shadow:var(--shadow-2)}

/* ---------------------------------------------------------------- rows that scroll sideways say there is more (A10 #7)
   A shade at the edge where more tabs or chips sit out of view; it goes when that end is reached. Pure CSS: the cover
   layers scroll with the row and hide the shades at its ends. Only the background's images are set, so a row keeps its
   own background color; a row on a card (not the page) sets --sx-bg to that color. New markup: class "scroll-x" on any
   row with overflow-x:auto */
.fb-jump{--sx-bg:var(--surface)}
/* one cue per row: Collection's own fade overlays (o8_money.css .co-tabwrap::before and ::after) give way to the shade
   every tab row has; its script still keeps the tab you're on in view (handed to D8 to delete, R1) */
:root .co-tabwrap.co-tabwrap::before,:root .co-tabwrap.co-tabwrap::after{content:none}
/* the house arrow's size on Collection's two folds of its own (o8_money.css: "Add more", the source line): 7 px, a 2 px
   line, whichever side of the words it sits on (handed to D8 to adopt the fold and source note classes, R1) */
:root .co-addmore > summary::before,:root .o8-src > summary::after{width:7px;height:7px;border-right-width:2px;border-bottom-width:2px}
:root :is(.scroll-x,.db-tabs,.co-tabs,.mt-tabs,.mk-tabs,.wc-tabs,.cap-tabs,.pd-tabs,.lf-tabs,.fr-tabs,.di-tabs,.tr-ltabs,.wc-otabs,.cc-tabs,.fb-jump,.sp-kinds,.lib-nav,.cl-parts,.cats,.in-ribbon,.qf-g,.ry-years,.cb-tabs,.sl-tabs,.ev-tabs){background-image:linear-gradient(to right,var(--sx-bg,var(--ground)) 30%,transparent),linear-gradient(to left,var(--sx-bg,var(--ground)) 30%,transparent),linear-gradient(to right,var(--edge-shade),transparent),linear-gradient(to left,var(--edge-shade),transparent);background-position:left center,right center,left center,right center;background-size:28px 100%,28px 100%,12px 100%,12px 100%;background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}

/* the Limited tools' tab rows (Draft Sim, Set Lab, Card Eval, Cube Generator) stay one row and scroll, like every other
   tab row, instead of wrapping to two lines (A10, the Cube result) */
:root :is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background-image:linear-gradient(to right,var(--sx-bg,var(--ground)) 30%,transparent),linear-gradient(to left,var(--sx-bg,var(--ground)) 30%,transparent),linear-gradient(to right,var(--edge-shade),transparent),linear-gradient(to left,var(--edge-shade),transparent);background-position:left center,right center,left center,right center;background-size:28px 100%,28px 100%,12px 100%,12px 100%;background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}
:root :is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs)::-webkit-scrollbar{display:none}
:root :is(.ds,.sl,.ev,.cb) [role="tablist"]:is(.mt-seg,.fr-tabs,.cb-tabs,.sl-tabs,.ev-tabs) > button{flex:none;white-space:nowrap}

/* ---------------------------------------------------------------- 44 px to tap (A10 #28)
   On a touch screen: Collection's Captain link and Market's "the movers" (a link alone in its line) are 44 px tall, the
   line growing to hold them; Set Lab's counts inside a sentence stay inline and reach a finger by their padding (the
   line doesn't move). Meta Lens's card names and Set Lab's counts in its tables are already 44 px rows (styles.css) */
@media (pointer:coarse){
  :root :is(.co-capchips > span a,#mk-gomovers){display:inline-flex;align-items:center;min-height:var(--tap);vertical-align:middle}
  :root p .sl-n{padding-block:12px;margin-block:-12px}
}

/* ---------------------------------------------------------------- the source note (A10 #9)
   One line under a number or a table: where it comes from and when ("TCGplayer market via Scryfall, Oct 21"), with an
   info button that opens the details in place (the ranges, the method, the license). Markup (docs/DESIGN_SYSTEM.md):
   <div class="src-note"><span class="src-line">TCGplayer market via Scryfall, Oct 21</span>
     <details class="src-more"><summary><span class="vh">About these numbers</span></summary><div class="src-body">...</div></details></div> */
.src-note{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:4px 0 12px;font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.src-line{min-width:0}
.src-more{display:contents}
.src-more > summary{list-style:none;display:inline-grid;place-items:center;width:var(--ctl-h-sm);height:var(--ctl-h-sm);margin:-6px 0;border-radius:50%;cursor:pointer;color:var(--muted)}
.src-more > summary::-webkit-details-marker{display:none}
.src-more > summary::before{content:"";display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--info-i) center/16px 16px no-repeat;mask:var(--info-i) center/16px 16px no-repeat}
.src-more[open] > summary{color:var(--ink);background:var(--hover)}@media (hover:hover){.src-more > summary:hover{color:var(--ink);background:var(--hover)}}
.src-more > summary:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* the details stay display:contents so the button sits in the line; the body is drawn only when open (closed, Chrome
   still lays it out, a 26 px column thousands of pixels tall, which tools that measure the page would count) */
.src-more:not([open]) > .src-body{display:none}
.src-body{flex:1 1 100%;margin:4px 0 0;padding:8px 12px;border-left:2px solid var(--rule2);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.src-body p{margin:0 0 6px}.src-body p:last-child{margin:0}
@media (pointer:coarse){.src-more > summary{width:var(--tap);height:var(--tap);margin:-14px -8px}}

/* ---------------------------------------------------------------- "On this page" (A10 #12)
   Long pages on wide screens (Captain, Set Lab, Meta Lens, Matchup Lab, a format's page): ui.js lists the page's
   sections at the right edge and keeps the one you are reading marked (the orange tick is "where you are", like the
   menu's). Where anything of the page would sit under it (a wide table, the hub's cards) it steps aside until the
   column beside it is narrow again. Never on phones */
.otp{position:fixed;z-index:20;top:96px;right:var(--gut,32px);width:216px;background:var(--ground);padding-left:14px;transition:opacity .15s,visibility .15s;max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);overflow-y:auto;overscroll-behavior:contain;padding-block:4px;font-size:var(--fs-sm);line-height:1.35;scrollbar-width:thin}
.otp h2{margin:0 0 6px;padding-left:12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;color:var(--faint)}
.otp ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.otp a{display:block;margin-left:-1px;padding:5px 8px 5px 12px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
@media (hover:hover){.otp a:hover{color:var(--ink);text-decoration:underline}}
.otp a[aria-current]{color:var(--ink);font-weight:700;border-left-color:var(--spark)}
.otp a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r-sm)}
.otp.otp-off{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:reduce){.otp{transition:none}}
/* Set Lab and Matchup Lab fill the width with their tables, so the list would find no room beside them: on wide screens
   their page keeps a column free for it from the first paint (nothing moves when the list arrives). Not Meta Lens: its
   own column of cards holds that side, and a narrower page cuts its field table */
@media (width >= 1100px){
  :root:has(#sl-app,#mu-app) main{padding-right:240px}
}
@media (width < 1100px){.otp{display:none}}
@media print{.otp{display:none}}

/* ---------------------------------------------------------------- Windows contrast themes (A11 #16)
   The mana curve's two kinds (creatures, other spells) keep apart in any contrast theme, light or dark: creatures a
   solid bar, other spells a hatched one, drawn in the theme's own text and page colors, and the legend's keys match */
@media (forced-colors:active){
  :root :is(.db-bar2 i.c,.db-key.c){forced-color-adjust:none;background:CanvasText}
  :root :is(.db-bar2 i.n,.db-key.n){forced-color-adjust:none;background:repeating-linear-gradient(45deg,CanvasText 0 1.5px,Canvas 1.5px 4px);box-shadow:inset 0 0 0 1px CanvasText}
}

/* ---------------------------------------------------------------- short windows (A11 #15)
   At 400% zoom a desk screen reads 320 by 256; a small phone on its side is under 480 tall. Nothing sticks there: the
   phone's top bar and Draft Sim's pick bar scroll with the page, so the cards and controls get the window (they held
   57% of it before). Tools add their own bars here or in their own file the same way */
@media (height < 480px){
  :root{--top-h:0px}
  :root .top{position:relative}
  :root .ds .ds-wpick:has(.ds-timer){position:static}
}

/* text buttons (the "text" kind, read as a link: in a sentence, a table's name or sort header) are one height on every
   page, a 24 px line (--ctl-h-text, the WCAG minimum target), whatever the size of the text around them; in running
   text they give 4 px back above and below, so their line keeps its spacing. Search's "All filters" and "Clear these"
   sit in the row of chips and take the chips' 28 px. A10 #14. A touch screen has its own 44 px rules (styles.css) */
@media (pointer:fine){
  :root:root :is(.cl-inline,.linkish,.btn-link,.cc-print,.q-next,.mt-alink,.mt-table th button,.mt-ftab th button){line-height:var(--ctl-h-text)}
  :root :is(p,li,span,small,dd,.cl-small) > :is(.cl-inline,.linkish,.btn-link,.q-next){margin-block:-4px}
  /* a card's name in a sentence (Draft Sim's pick review) is a text button too: one 24 px line, not a chip's 28 px, so with
     the 4 px given back it never reaches into the next line's (T1, the dream wave's regression: 5 px overlaps at 1280) */
  :root:root .fr-card.linkish{min-height:var(--ctl-h-text)}
  :root:root .sl-n{line-height:calc(var(--ctl-h-text) - 2px)}
  :root:root :is(.qf-all,.qf-clear){line-height:var(--ctl-h-text);padding-block:2px}
}

/* card pictures come in four sizes on a desk (A10 #18): 72 (a combo's pieces), 150 (a small gallery: a card's printings
   and its twins, Oracle's pair, Goldfish's hand), the search grid's tile, and the 336 picture of one card. The small
   galleries hold their pictures at exactly 150 (times the display setting) and a row ends where it ends; a printing's
   tile adds its 7.5 px frame each side */
@media (width >= 1024px){
  :root .cc-twins{grid-template-columns:repeat(auto-fill,calc(150px * var(--pic)))}
  :root .cc-pgrid{grid-template-columns:repeat(auto-fill,calc(150px * var(--pic) + 15px))}
  :root .cc-pgrid .cc-pt-img{width:calc(150px * var(--pic));max-width:100%}
  :root .or-card{grid-template-columns:calc(150px * var(--pic)) minmax(0,1fr)}
}

/* ================================================================ Compete, the dream wave's round two (builder D10, October 23,
   2026): Meta Lens, Matchup Lab, Film Room and Prep. Loads after every group file, so a rule here wins over e_compete.css
   and n_prep.css. Tokens only (docs/DESIGN_SYSTEM.md). */

/* ---------------------------------------------------------------- Meta Lens */
/* the lists' age and source, the first line of the page (one line; the reasons behind the info button) */
#mt-app .mt-age{margin:0 0 var(--sp-md);font-size:var(--fs-sm);color:var(--muted)}
#mt-app .mt-age.mt-old .src-line b{color:var(--ink)}
#mt-app .mt-age .src-line a{color:inherit}
/* the archetype sheet: its close button has a column of its own, never over the name or the summary (A10 #23) */
.mt-drawer .mt-dh{padding-right:52px}
@media (pointer:coarse){.mt-drawer .mt-dh{padding-right:60px}}
/* the filters: one row on wide screens; on a phone folded behind one button that says what they're set to (A10, screen 9) */
#mt-app .mt-filtb{display:none}
#mt-app .mt-filters{display:contents}
#mt-app .mt-filtsum{color:var(--muted);font-weight:400}
@media (width < 720px){
  #mt-app .mt-ctrls{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding:0}
  #mt-app .mt-filtb{display:inline-flex;align-items:center;max-width:100%;text-align:left;white-space:normal;line-height:1.3;padding-block:6px;height:auto}
  #mt-app .mt-filters{display:none}
  #mt-app .mt-filters[data-open]{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;padding:var(--sp-sm) 0 0}
  #mt-app .mt-filters[data-open] .mt-seg,#mt-app .mt-filters[data-open] .mt-kinds{flex-wrap:wrap;max-width:100%}
  #mt-app .mt-filters[data-open] .mt-sel{flex-wrap:wrap}
  #mt-app .mt-filters[data-open] .mt-sel select{max-width:100%}
}
/* a row of joined buttons wraps when its column is narrower than it (200% text: "Most played cards" pushed the page 135
   px sideways, A11 #23) */
#mt-app .mt-seg{flex-wrap:wrap;max-width:100%}
/* "Most played cards": its three buttons share the column's width */
#mt-app .mt-side .mt-seg{display:flex;width:100%}
#mt-app .mt-side .mt-seg button{flex:1 1 auto;padding:0 8px}

/* ---------------------------------------------------------------- Prep: run an event (eventrun.js) */
#pd-app .er-acts,#pd-app .er-cbtn{gap:8px}
#pd-app .er-pairs{list-style:none;margin:0 0 var(--sp-md);padding:0;border-top:1px solid var(--rule)}
#pd-app .er-pair{display:grid;grid-template-columns:5.5rem minmax(12rem,1fr) auto;align-items:center;gap:6px 16px;padding:10px 0;border-bottom:1px solid var(--rule)}
#pd-app .er-pair.er-done{background:var(--fill)}
#pd-app .er-pair.er-done .er-tab{padding-left:6px}
#pd-app .er-tab{font-weight:700;font-size:var(--fs-sm);white-space:nowrap}
#pd-app .er-who{min-width:0;line-height:1.45}
#pd-app .er-who small,#pd-app .er-pn small,#pd-app .er-st small{font-size:var(--fs-xs);color:var(--muted)}
#pd-app .er-vs{display:inline-block;margin:0 8px;color:var(--muted);font-size:var(--fs-sm)}
#pd-app .er-res{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;justify-content:flex-end}
#pd-app .er-rseg{flex-wrap:wrap}
#pd-app .er-said{flex:1 1 100%;text-align:right;font-size:var(--fs-sm);color:var(--muted)}
#pd-app .er-bye .er-res{color:var(--muted);font-size:var(--fs-sm)}
#pd-app .er-clock{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
#pd-app .er-time{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-hero);font-weight:700;line-height:1.1;min-width:5ch}
#pd-app .er-minsl input{width:4.5em;min-height:var(--ctl-h);margin-left:6px;padding:0 6px;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);font:inherit}
#pd-app .er-st tr.er-dropped th,#pd-app .er-st tr.er-dropped td{color:var(--muted)}
#pd-app .er-none{color:var(--muted)}
#pd-app .er-plist{list-style:none;margin:0 0 var(--sp-md);padding:0}
#pd-app .er-plist li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 0;border-bottom:1px solid var(--rule)}
#pd-app .er-pn{min-width:0;flex:1 1 14rem}
#pd-app .er-new .mt-seg{margin-top:2px}
#pd-app .er-new textarea{font-family:var(--sans);font-size:var(--fs-lg)}
#pd-app .er-mx th,#pd-app .er-mx td{white-space:nowrap}
#pd-app .er-shared .pd-ex{margin-bottom:var(--sp-md)}
@media (width < 720px){
  #pd-app .er-pair{grid-template-columns:1fr;gap:6px}
  #pd-app .er-res{justify-content:flex-start}
  #pd-app .er-said{text-align:left}
  #pd-app .er-vs{display:block;margin:2px 0}
}
@media (pointer:coarse){
  #pd-app .er-pair .btn-xs,#pd-app .er-plist .btn-xs,#pd-app .pd-lacts .btn-xs,#pd-app .pd-icsone{min-height:var(--tap);min-width:var(--tap)}
  #pd-app .er-minsl input{min-height:var(--tap)}
}
/* the room's view: the round's pairings by name and the standings, big, over the whole page */
.er-room{position:fixed;inset:0;z-index:90;overflow-y:auto;background:var(--ground);color:var(--ink);padding:var(--sp-xl) var(--sp-xl) max(var(--sp-xl),env(safe-area-inset-bottom,0px))}
.er-room .er-rbox{max-width:1600px;margin:0 auto}
.er-room .er-rtop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;border-bottom:2px solid var(--ink);padding-bottom:var(--sp-sm)}
.er-room .er-rh{font-size:var(--fs-title);font-weight:700;line-height:1.2;margin:0}
.er-room .er-rtime{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-hero);font-weight:700;line-height:1}
.er-room .er-rbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:var(--sp-md) 0}
.er-room .mt-seg{display:inline-flex}
.er-room .mt-seg button{font-family:var(--sans);font-size:var(--fs-sm);min-height:var(--ctl-h-lg);padding:0 16px;margin-left:-1px;background:var(--ground);color:var(--ink);border:1px solid var(--rule2);cursor:pointer}
.er-room .mt-seg button:first-child{margin-left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
.er-room .mt-seg button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.er-room .mt-seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.er-room .er-rsub{font-size:var(--fs-xl);color:var(--muted);margin:0 0 var(--sp-md)}
.er-room .er-rlist{list-style:none;margin:0;padding:0;columns:20rem auto;column-gap:var(--sp-2xl,40px)}
.er-room .er-rlist li{break-inside:avoid;display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.er-room .er-rn{grid-column:1/-1;font-size:var(--fs-title);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.er-room .er-rn small{font-size:var(--fs-lg);font-weight:400;color:var(--muted)}
.er-room .er-rt{font-size:var(--fs-xl);font-weight:700;white-space:nowrap}
.er-room .er-ro{font-size:var(--fs-xl);color:var(--muted);overflow-wrap:anywhere}
.er-room .er-rst li{grid-template-columns:3rem auto 1fr}
.er-room .er-rst .er-rk{grid-row:1/3;font-size:var(--fs-title);font-weight:700;font-family:var(--num-face)}
.er-room .er-rst .er-rn{grid-column:2/-1}
@media (width < 720px){.er-room{padding:var(--sp-lg) var(--sp-md)}.er-room .er-rlist{columns:1}}

/* ---------------------------------------------------------------- Prep: the event ledger and calendar files */
.pd-lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:0 16px}
.pd-lgrid .pd-lf{margin-bottom:var(--sp-sm)}
.pd-lgrid .pd-lf input,.pd-lgrid .pd-lf select{width:100%;font:inherit;min-height:44px;padding:0 10px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink);box-sizing:border-box}
.pd-lgrid .pd-lf input:disabled{background:var(--fill);color:var(--muted)}
#pd-app .pd-ltab th,#pd-app .pd-ltab td{vertical-align:top}
#pd-app .pd-ltab small,#pd-app .pd-ltot small{font-size:var(--fs-xs);color:var(--muted)}
#pd-app .pd-lacts{white-space:nowrap}
#pd-app .pd-lacts .btn-xs+.btn-xs{margin-left:4px}
#pd-app .pd-icsone{margin-left:6px;vertical-align:1px}

/* ---------------------------------------------------------------- Film Room: plans and practice, between games */
.fr .fr-pvtop,.fr-deskalone .fr-pvtop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0 0 var(--sp-md)}
.fr .fr-pvtop select{font:inherit;font-size:var(--fs-sm);min-height:var(--ctl-h);max-width:100%;margin-left:6px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
.fr .fr-pvt td small{font-size:var(--fs-xs)}
.fr .fr-pvdiff{margin:0 0 var(--sp-md);padding-left:1.2rem;font-size:var(--fs-sm)}
.fr .fr-pvlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.fr .fr-pvm{padding:10px 0;border-bottom:1px solid var(--rule)}
.fr .fr-pvhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.fr .fr-pvhead .fr-vs{flex:1 1 12rem;min-width:0}
.fr .fr-pvst{font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--rule2);color:var(--muted);white-space:nowrap}
.fr .fr-pvst.fr-pv-same{border-color:var(--ink);color:var(--ink)}
.fr .fr-pvst.fr-pv-changed{background:var(--fill);color:var(--ink)}
.fr .fr-pvacts{display:inline-flex;gap:6px}
.fr .fr-pvm > p{margin:6px 0 0}
.fr .fr-pvform{margin:10px 0 0;padding:12px;border:1px solid var(--rule2);border-radius:var(--r-md)}
.fr .fr-pvrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.fr .fr-pvfs{border:0;margin:0 0 10px;padding:0}
.fr .fr-pvfs legend{font-size:var(--fs-sm);font-weight:700;margin:0 0 6px;padding:0}
.fr .fr-pvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:4px 16px}
.fr .fr-pvc{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-sm);padding:2px 0;border-bottom:1px solid var(--rule)}
.fr .fr-pvc span{min-width:0;overflow-wrap:anywhere}
.fr .fr-pvc select{flex:none;font:inherit;min-height:var(--ctl-h-sm);padding:0 4px;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--ground);color:var(--ink)}
.fr-bgcard{margin:var(--sp-md) 0;padding:var(--sp-md);border:1px solid var(--ink);border-radius:var(--r-md)}
.fr-bgcard .fr-bgline{font-size:var(--fs-xl);line-height:1.4;margin:0 0 6px}
#fr-bg textarea{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-lg);margin:4px 0 var(--sp-sm);padding:8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink)}
#fr-bg select{font:inherit;min-height:var(--ctl-h);margin-left:6px}
@media (pointer:coarse){.fr .fr-pvacts .btn-xs,.fr .fr-pvc select,.fr .fr-pvtop select,#fr-bg select{min-height:var(--tap)}}
#pd-app #er-late{width:min(100%,26rem)}
#fr-bg .fr-pvrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
#fr-bg .mt-seg{display:inline-flex}
#fr-bg .mt-seg button{font-family:var(--sans);font-size:var(--fs-sm);min-height:var(--ctl-h);padding:0 12px;margin-left:-1px;background:var(--ground);color:var(--ink);border:1px solid var(--rule2);cursor:pointer}
#fr-bg .mt-seg button:first-child{margin-left:0;border-radius:var(--r-md) 0 0 var(--r-md)}
#fr-bg .mt-seg button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
#fr-bg .mt-seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
@media (pointer:coarse){#fr-bg .mt-seg button{min-height:var(--tap)}}
/* a button inside a sentence reaches a finger without moving the line (DESIGN_SYSTEM.md, controls) */
@media (pointer:coarse){#pd-app .pd-note .cl-inline{padding-block:12px;margin-block:-12px}}
/* plans and practice on its own: a grid item never grows to its widest table (the table scrolls in its box) */
.fr .fr-deskalone{grid-template-columns:minmax(0,1fr)}
.fr .fr-pv{min-width:0;max-width:100%}
/* fix round one. Meta Lens: card names past the tenth fold away (D6's TOC note); a card link on a phone is at least 24 px
   tall, and a list row's link reaches a finger (attacker B1 A10-28) */
.mt .mt-cmore{margin-top:8px}
@media (width < 720px){#mt-app a[href^="/card/"]{display:inline-block;min-height:24px;line-height:24px}}
@media (pointer:coarse){#mt-app .mt-clist a{display:inline-flex;align-items:center;min-height:var(--tap)}}
/* Prep's seven tabs: one row that scrolls sideways on a phone, like every other tool's (attacker B5-22) */
@media (width < 720px){#pd-app .pd-tabs{flex-wrap:nowrap;overflow-x:auto;gap:0 20px}}
/* the ledger's events on a phone: each a card with its labels, not a table cut at the edge (attacker B5 screen 5) */
@media (width < 720px){
  #pd-app .pd-ltab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #pd-app .pd-ltab,#pd-app .pd-ltab tbody,#pd-app .pd-ltab tr,#pd-app .pd-ltab th,#pd-app .pd-ltab td{display:block;width:auto}
  #pd-app .pd-ltab tr{border-bottom:1px solid var(--rule);padding:8px 0}
  #pd-app .pd-ltab th,#pd-app .pd-ltab td{border:0;padding:2px 0;text-align:left}
  #pd-app .pd-ltab td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:var(--fs-sm)}
  #pd-app .pd-ltab td.num br,#pd-app .pd-ltab td[data-l="Day"] br,#pd-app .pd-ltab td[data-l="Format and deck"] br{display:none}
  #pd-app .pd-ltab td small{margin-left:4px}
  #pd-app .pd-ltab .pd-lacts{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
}

/* o1_front.css: the front door and the frame, dream wave (builder D1, October 22, 2026). Loads after every group file
   (build.py reads src/css/ in name order), so a rule here wins where it says the same thing. Tokens only: no new colors */

/* ---- the phone's top bar: Life Log beside the search (A7 #14: it sat below the fold of the menu drawer) */
@media (width < 720px){
  .top-life{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:auto;border-radius:var(--r-md);color:var(--ink);text-decoration:none}
  .top-life .px{width:24px;height:24px}
  .top-life[aria-current="page"] .px-acc{fill:var(--spark)}
  .top-life + .top-find{margin-left:0}
}

/* ---- the landing: the line under the search box, the "I want to..." row, the keeps as links */
.land-jump{margin:-4px 0 0;font-size:var(--fs-md);color:var(--muted)}
.land-jump a{font-weight:700}
.missing .land-jump{margin-top:10px}
a.keep-a{color:var(--ink);text-decoration:none;border-radius:var(--r-md);padding:8px;margin:-8px}
@media (hover:hover){a.keep-a:hover{background:var(--fill)}}
@media (hover:hover){a.keep-a:hover h3{text-decoration:underline}}
a.keep-a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- every tool on one page (/tools/) */
.tx{display:flex;flex-direction:column;gap:40px;padding:24px 0 8px;max-width:980px}

/* ---- the Overview: back to the table, the rows of other things you saved */
.ov-table{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 16px;margin-bottom:24px;padding:16px 20px;border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--stone);color:var(--ink);text-decoration:none}
@media (hover:hover){.ov-table:hover{background:var(--fill);text-decoration:none}}
.ov-table .ov-name b{font-size:var(--fs-xl)}
.ov-table-ic{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.ov-go{font-size:var(--fs-xl)}
@media (width < 720px){ .ov-table{padding:14px 16px;margin-bottom:20px} }

/* ---- the palette: card rows say cost and type; at 400% zoom the whole palette scrolls (A11 #24) */
.pal-list small .mana{margin-right:4px}
.pal-list small .sym{width:1em;height:1em;vertical-align:-.12em}
@media (height < 480px){
  .palette{padding-top:8px;overflow-y:auto}
  .pal-box{overflow:visible}
}

/* ---- the keys sheet: the page's keys, then everywhere; keys shown as typed (A8: g read as G) */
.keysheet kbd,.keysheet dt kbd{text-transform:none}
/* doubled class: the site-wide first-letter rule (:is(h1,...,dt,.label):not([contenteditable])::first-letter) counts
   as two classes, so a single .keysheet lost to it and "g then o" read "G then o" (fix round one, B1-A8-18) */
.keysheet.keysheet dt::first-letter{text-transform:none}
.ks-h3{margin:14px 0 8px;font-size:var(--fs-md);font-weight:700;color:var(--muted)}
.ks-off{margin:0 0 10px;padding:8px 12px;border:1px solid var(--warn-line);border-radius:var(--r-md);background:var(--warn-bg);color:var(--ink)}
.keysheet p a{color:var(--ink);font-weight:700}

/* ---- a pasted list's offer: a second action */
.ms-toast .ms-toast-act2{margin-left:6px}

/* ---- in play (table mode): the small dot that stands in for the offline and update bars. It never takes a tap */
.ms-netdot{position:fixed;z-index:80;top:calc(6px + env(safe-area-inset-top,0px));left:calc(6px + env(safe-area-inset-left,0px));width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 2px var(--ground);pointer-events:none}
.ms-netdot.ms-netdot-off{background:var(--warn-line)}
html[data-table="1"] #ms-bars{display:none}

/* ---- Safari's seven-day note (My Stuff, Life Log's playgroup tab) */
.ms-safari7{margin:0 0 18px;padding:14px 16px;border:1px solid var(--warn-line);border-radius:var(--r-lg);background:var(--warn-bg);color:var(--ink)}
.ms-safari7 h2{margin:0 0 6px;font-size:var(--fs-lg);font-weight:700}
.ms-safari7 p{margin:0 0 8px;font-size:var(--fs-md);line-height:1.5}
.ms-safari7 .ms-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.ms-safari7 .ms-s7-src{margin:0;font-size:var(--fs-sm);color:var(--muted)}

/* ---- My Stuff: offline, recently deleted */
.me-shop{border:0;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.me-shop .ms-check{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-md);line-height:1.4}
.me-shop .ms-check input{margin-top:3px}
.me-bin li{align-items:center}
.me-bin li > span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.me-bin li b{overflow-wrap:anywhere}
.me-binbtns{display:flex;flex-wrap:wrap;gap:6px;flex:none}
#me-off-st{margin:8px 0 0}
@media (pointer: coarse){ .me-shop .ms-check{min-height:44px;align-items:center} .me-shop .ms-check input{margin-top:0} }

/* ---- scripted smooth scrolling and the page's own stop for reduced motion (A11 #19; app.js turns script's glides into jumps) */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ---- a glossary term marked in running text (stuff.js MS.gloss): a dotted line, the sentence on hover, the link to it */
abbr.ms-gloss{text-decoration:none;cursor:help}
abbr.ms-gloss a{color:inherit;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){abbr.ms-gloss a:hover{text-decoration-style:solid}}
/* on touch a glossary word standing alone as a figure's name (the Meta Lens) reaches 44 px tall without moving the
   text (T1, the dream wave's regression: "Archetypes" was 17 to 21 px) */
@media (pointer:coarse){.mt-kpi abbr.ms-gloss a{position:relative}.mt-kpi abbr.ms-gloss a::after{content:"";position:absolute;inset:-14px 0}}

/* ---- the landing's line is a live region, present while empty (fix round one, B1-N8): no room taken until it speaks */
.land-jump:empty{margin:0}

/* o2_decks.css: builder D2's decks work in the dream wave (October 22, 2026). Loads after every group file, so a rule
   here wins over the same one in b_decks.css or i_decks.css. Tokens only (no raw colors), sentence case, no blue, orange
   only for where you are; breakpoints 480, 720, 1024, 1100; 44 px targets on coarse pointers. */

/* ---------------------------------------------------------------- the guess an import made */
.db-guess{margin:var(--sp-md) 0;padding:var(--sp-md) var(--sp-lg);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--stone)}
.db-guess p{margin:0 0 var(--sp-sm);font-size:var(--fs-md)}
.db-guess .ms-row{flex-wrap:wrap;gap:var(--sp-sm)}

/* ---------------------------------------------------------------- "Legal in": one line under the header, details below it */
.db-legalin{margin:var(--sp-sm) 0 0}
.db-legalin-b{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;font-size:var(--fs-md);line-height:1.45;color:var(--ink);padding:var(--sp-xs) 0}
.db-legalin-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.db-legalin-more{text-decoration:underline;text-underline-offset:3px;color:var(--muted);white-space:nowrap}
.db-legalin-p{margin:var(--sp-sm) 0 var(--sp-md);padding:var(--sp-md) var(--sp-lg);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.db-legalin-p p{margin:0 0 var(--sp-sm)}
.db-legalin-l{list-style:none;margin:0;padding:0;columns:2 280px;column-gap:var(--sp-xl)}
.db-legalin-l li{break-inside:avoid;padding:var(--sp-2xs) 0;font-size:var(--fs-md)}
.db-legalin-mark{display:inline-block;width:1.4em;font-weight:700}
.db-legalin-l li.yes .db-legalin-mark{color:var(--ok)}
.db-legalin-l li.no .db-legalin-mark{color:var(--bad)}

/* ---------------------------------------------------------------- importing several decks: the review table */
.db-batch{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.db-batch th,.db-batch td{text-align:left;padding:var(--sp-xs) var(--sp-sm);border-bottom:1px solid var(--rule);vertical-align:middle}
.db-batch th.num,.db-batch td.num{text-align:right;font-variant-numeric:tabular-nums}
.db-batch-name{width:100%;min-width:12em;font:inherit;padding:var(--sp-xs) var(--sp-sm);border:1px solid var(--line-field);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.db-batch select{font:inherit;max-width:14em}
.db-batch-g{display:block}
.db-batch input[type=checkbox]{accent-color:var(--ink);width:18px;height:18px}
@media (pointer:coarse){
  .db-batch input[type=checkbox]{width:24px;height:24px}
  .db-batch-name,.db-batch select{min-height:44px}
  .db-legalin-b{min-height:44px}
}

/* ---------------------------------------------------------------- the deck header (attack A10 #4): a light card, the
   picture beside the name at a size it fills sharply (never under text or a shade), one line of facts, three menus */
.db-banner.db-hd{display:flex;align-items:flex-start;gap:var(--sp-lg);min-height:0;padding:var(--sp-md) var(--sp-lg);overflow:visible}
.db-banner.db-hd .db-banner-body{flex:1 1 auto;min-width:0;padding:0}
.db-banner.db-hd .db-banner-art{order:-1;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-xs);width:150px;max-width:150px;padding:0;align-self:flex-start}
.db-banner.db-hd .db-banner-frame,.db-banner.db-hd .db-banner-art>.dimg{width:150px;max-width:150px}
.db-banner.db-hd .db-credit{margin:0;max-width:150px;text-align:left;font-size:var(--fs-xs);line-height:1.3;color:var(--muted);text-shadow:none}
.db-banner.db-hd .db-title{text-shadow:none}
.db-banner.db-hd .db-meta{margin-top:6px;gap:6px var(--sp-md);font-family:var(--sans)}
.db-pxbasis{margin-left:6px;font-size:var(--fs-xs);color:var(--muted);font-family:var(--sans);white-space:nowrap}
/* the chip wraps its basis under the figures when the header is narrow or the text large, never past the screen's
   edge (T1, the dream wave's regression: 73 px of sideways scroll on a 390 phone with the largest text) */
.db-banner.db-hd .db-pricechip{flex-wrap:wrap;row-gap:0;max-width:100%}
.db-banner.db-hd .db-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-sm);overflow:visible;padding:0}
.db-banner.db-hd .db-actions .btn-sm{background:var(--surface);color:var(--ink);border-color:var(--line-field);backdrop-filter:none}
.db-banner.db-hd .db-actions .btn-sm[disabled]{opacity:.45}
.db-hd-row2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs) var(--sp-md);margin:var(--sp-sm) 0 0}
.db-hd-row2 .db-legalin{flex:1 1 320px;min-width:0;margin:0}
.db-hd-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.db-hd-quiet:not(:has(:not([hidden]))){display:none}

/* the menus under Play and Share */
.db-menu{position:relative;display:inline-block}
.db-menu-b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.db-menu-b[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.db-menu-list{position:absolute;left:0;top:calc(100% + 4px);z-index:40;min-width:240px;max-width:min(320px,calc(100vw - 32px));padding:var(--sp-xs) 0;background:var(--surface);color:var(--ink);border:1px solid var(--rule2);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.db-menu-list[hidden]{display:none}
.db-menu-i{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;box-sizing:border-box;padding:var(--sp-sm) var(--sp-md);border:0;background:none;color:inherit;font:inherit;font-size:var(--fs-md);text-align:left;text-decoration:none;cursor:pointer}
.db-menu-i:focus{background:var(--hover);outline:none}@media (hover:hover){.db-menu-i:hover{background:var(--hover);outline:none}}
.db-menu-i:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.db-menu-why{font-size:var(--fs-xs);color:var(--muted);line-height:1.3}

/* the deck tab's controls: the View popover and the highlighter */
.db-controls2{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-sm) var(--sp-md)}
.db-viewwrap{flex:0 1 auto;min-width:0}
.db-viewb::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.db-viewb[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.db-viewpop{margin-top:var(--sp-sm);padding:var(--sp-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--stone);display:flex;flex-direction:column;gap:var(--sp-sm)}
.db-viewpop[hidden]{display:none}
.db-vrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--sp-md)}
.db-vrow label{display:inline-flex;align-items:center;gap:6px}
.db-find{flex:1 1 260px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--sp-sm)}
.db-find input{flex:1 1 220px;min-width:0;font:inherit;font-size:var(--fs-md);padding:6px var(--sp-sm);border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.db-find input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.db-findn{color:var(--muted)}
.db-addhint{margin:4px 0 0}
.db-addopts[hidden]{display:none}
/* a highlighted card: a ring outside its picture (never on it), a mark on a list row */
.db-card.db-hl{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-card)}
.db-row.db-hl{background:var(--sel);box-shadow:inset 3px 0 0 var(--ink)}

/* castability dots: a shape per state (circle at or above the bar, triangle up to 8 points under, square more than 8
   under), so the meaning survives grayscale and color blindness (attack A11 #6); the percentage shows on focus. The
   square's corners are square: radii keep to the design system's steps (T1, the dream wave's regression: 1 px was an
   eighth radius) */
.db-dot,.db-dot.good,.db-dot.close,.db-dot.low,.db-dot.na{background:none;filter:drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 1px var(--surface)) drop-shadow(var(--dot-shadow))}
.db-row .db-dot,.db-row .db-dot.good,.db-row .db-dot.close,.db-row .db-dot.low,.db-row .db-dot.na{background:none}
.db-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);background:var(--dc);border-radius:50%}
.db-dot.close::before{width:12px;height:11px;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.db-dot.low::before{width:9px;height:9px;border-radius:0}
.db-dot.na::before{opacity:.6}
.db-row .db-dot::before{width:8px;height:8px}
.db-row .db-dot.close::before{width:10px;height:9px}
.db-row .db-dot.low::before{width:8px;height:8px}
.db-dk,.db-dk.good,.db-dk.close,.db-dk.low,.db-dk.na{background:none;position:relative;width:12px;height:12px;border-radius:0}
.db-dk::before{content:"";position:absolute;inset:1px;border-radius:50%;background:var(--dot-na)}
.db-dk.good::before{background:var(--dot-good)}
.db-dk.close::before{inset:0;border-radius:0;background:var(--dot-close);clip-path:polygon(50% 0,100% 100%,0 100%)}
.db-dk.low::before{inset:2px;border-radius:0;background:var(--dot-low)}
@media (hover:hover){
  .db-dot[data-pct]:focus-visible::after,.db-dot[data-pct]:hover::after{content:attr(data-pct);position:absolute;inset:auto;left:50%;top:100%;transform:translate(-50%,2px);z-index:5;padding:1px 6px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font:700 var(--fs-xs)/1.4 var(--sans);white-space:nowrap;pointer-events:none}
}
@media (forced-colors:active){.db-dot::before,.db-dk::before{forced-color-adjust:none}}

@media (width < 720px), (height < 480px) and (pointer:coarse){
  /* a phone: the picture small beside the name, then the facts, the menus and the credit across the whole width */
  .db-banner.db-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-xs) var(--sp-md);padding:var(--sp-sm) var(--sp-md);align-items:start}
  .db-banner.db-hd.db-hasimg{grid-template-columns:64px minmax(0,1fr)}
  .db-banner.db-hd .db-banner-art,.db-banner.db-hd .db-banner-body{display:contents}
  .db-banner.db-hd .db-banner-art>.dimg{grid-column:1;grid-row:1;width:64px;max-width:64px;margin:4px 0 0}
  .db-banner.db-hd .db-title-row{grid-column:-2;grid-row:1;align-self:center}
  .db-banner.db-hd .db-meta{grid-column:1/-1;grid-row:2;margin:4px 0 0;padding:2px 0 4px;flex-wrap:wrap;overflow:visible}
  .db-banner.db-hd .db-actions{grid-column:1/-1;grid-row:3;display:flex;margin-top:2px}
  .db-banner.db-hd .db-banner-art>.db-credit{grid-column:1/-1;grid-row:4;max-width:none;padding:0;margin:0}
  .db-banner.db-hd .db-meta .db-pill-select{max-width:min(14rem,100%)}
  .db-menu-list{min-width:220px}
  .db-find{flex-basis:100%}
}
@media (width < 480px){
  /* a narrow phone (320 to 479): the name a size down, tighter rows, so the four actions share one line (the header
     was 432 px of an 800 px screen at 320 wide) */
  .db-banner.db-hd{padding:var(--sp-sm);gap:2px var(--sp-sm)}
  .db-banner.db-hd .db-title{font-size:var(--fs-xl)}   /* a narrow phone: the 18 px step (design_rules: steps only) */
  .db-banner.db-hd .db-meta{gap:4px 8px}
  .db-banner.db-hd .db-actions{gap:4px}
  .db-banner.db-hd .db-actions .btn-sm{padding-inline:10px}
}
@media (pointer:coarse){
  .db-menu-i{min-height:44px;justify-content:center}
  .db-find input{min-height:44px}
  /* a link standing as a figure's name (Karsten's bar) reaches 44 px tall without moving the text (T1, the dream wave's
     regression: it was 24 px) */
  .db-kv a{position:relative}
  .db-kv a::after{content:"";position:absolute;inset:-14px 0}
}
@media print{.db-hd-row2,.db-controls2,.db-dotkey{display:none!important}}

/* ---------------------------------------------------------------- the library: each deck's picture whole, at the art's own
   shape (Scryfall's art crop, 1.368 wide to 1 tall), with nothing on it; the badges sit in the card's body */
.lib-card .lib-art{aspect-ratio:1.368}
.lib-card .lib-art.lib-art-none{aspect-ratio:auto;height:var(--sp-sm);background:var(--fill)}
.lib-badges.lib-badges-in{position:static;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px}
.lib-badges.lib-badges-in .lib-stagechip{box-shadow:none}
.lib-basis{font-size:var(--fs-xs);color:var(--muted);font-weight:400;white-space:nowrap}

/* ---------------------------------------------------------------- commanders you own (the empty command zone, What can I build) */
.db-leaders{list-style:none;margin:var(--sp-sm) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-sm)}
.db-leader{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;width:100%;min-height:44px;box-sizing:border-box;padding:var(--sp-sm) var(--sp-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-md);text-align:left;cursor:pointer}
@media (hover:hover){.db-leader:hover{border-color:var(--ink)}}
.db-leader:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.db-leader-n{font-weight:700;overflow-wrap:anywhere}
.db-leader small{flex-basis:100%;font-size:var(--fs-xs);color:var(--muted)}
.db-wb-leaders{margin:0 0 var(--sp-lg)}

/* ---------------------------------------------------------------- the Wildcard Planner: what the bill leaves out */
.wc-leftout{margin:var(--sp-sm) 0 0;font-size:var(--fs-md)}
.wc-later .wc-h:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------------- a friend's suggestions, reviewed */
.db-sglist{list-style:none;margin:0 0 var(--sp-md);padding:0}
.db-sgrow{padding:var(--sp-sm) 0;border-bottom:1px solid var(--rule)}
.db-sgrow label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-md)}
.db-sgrow input[type=checkbox]{accent-color:var(--ink);width:18px;height:18px}
.db-sgrow.off label{color:var(--muted)}
.db-sgwhy{margin:4px 0 0 26px;font-size:var(--fs-sm);color:var(--ink)}
.db-sgnote{margin:var(--sp-sm) 0 var(--sp-md);padding:var(--sp-sm) var(--sp-md);border-left:3px solid var(--rule2);background:var(--stone);font-size:var(--fs-md)}
.db-sgpick{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:var(--sp-sm) 0}
.db-sgpick label{display:flex;align-items:center;gap:8px;font-size:var(--fs-md)}
@media (pointer:coarse){.db-sgrow label,.db-sgpick label{min-height:44px}.db-sgrow input[type=checkbox]{width:24px;height:24px}}

/* ---------------------------------------------------------------- the history: a timeline, the box */
.db-hist{display:flex;flex-direction:column;gap:var(--sp-md)}
.db-box p{margin:0 0 var(--sp-sm)}
.db-htime{list-style:none;margin:var(--sp-sm) 0 0;padding:0}
.db-hver{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px var(--sp-sm);align-items:start;padding:var(--sp-sm) 0;border-bottom:1px solid var(--rule)}
.db-hver.isbox{box-shadow:inset 3px 0 0 var(--ink);padding-left:var(--sp-sm)}
.db-hsel{padding-top:2px}
.db-hsel input{accent-color:var(--ink);width:18px;height:18px}
.db-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--sp-sm);margin:0;font-size:var(--fs-md)}
.db-hhead time{font-variant-numeric:tabular-nums;color:var(--muted)}
.db-hboxmark{font-size:var(--fs-xs);border:1px solid var(--ink);border-radius:var(--r-pill);padding:0 8px}
.db-hdiff{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink);overflow-wrap:anywhere}
.db-hacts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.db-hnow{margin:var(--sp-sm) 0;padding:var(--sp-sm) var(--sp-md);background:var(--stone);border-radius:var(--r-md);font-size:var(--fs-md)}
@media (width < 720px){.db-hver{grid-template-columns:auto minmax(0,1fr)}.db-hacts{grid-column:2;justify-content:flex-start}}
@media (pointer:coarse){.db-hsel input{width:24px;height:24px}}

/* ---------------------------------------------------------------- the budget pass */
.db-bud{list-style:none;margin:var(--sp-sm) 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-sm)}
.db-budrow fieldset{margin:0;padding:var(--sp-sm) var(--sp-md);border:1px solid var(--rule2);border-radius:var(--r-md)}
.db-budrow legend{padding:0 4px;font-size:var(--fs-md)}
.db-budopt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:4px 0;font-size:var(--fs-md)}
.db-budopt input{accent-color:var(--ink);width:18px;height:18px}
.db-budopt small{flex-basis:100%;margin-left:26px;font-size:var(--fs-xs);color:var(--muted)}
.db-budp{color:var(--muted);font-size:var(--fs-sm)}
.db-budsum{font-weight:700;margin:var(--sp-sm) 0}
@media (pointer:coarse){.db-budopt{min-height:44px}.db-budopt input{width:24px;height:24px}}

/* ---------------------------------------------------------------- compare: any list */
.cmp-anyin{display:flex;flex-direction:column;gap:6px;margin:var(--sp-sm) 0 var(--sp-md);max-width:44rem}
.cmp-lab{font-family:var(--sans);font-size:var(--fs-sm)}
.cmp-paste{width:100%;min-height:10rem;resize:vertical;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink);padding:8px}
.cmp-in{width:100%;min-height:40px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--ground);color:var(--ink);padding:6px 10px;font-size:var(--fs-md)}
.cmp-err{border-left:3px solid var(--ink);padding:4px var(--sp-sm);margin:var(--sp-sm) 0}
@media (pointer:coarse){.cmp-in,.cmp-views button{min-height:44px}}
/* the header takes the keyboard after an import or "back to top" (B1-S1), never the editable name */
.db-banner.db-hd:focus{outline:none}
.db-banner.db-hd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the compare tab's four views on a phone: one row of four, a long name on two lines inside its button, never one
   view left alone on a line (B5-23) */
@media (width < 480px){
  .cmp-views{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .cmp-views button{padding:6px 4px;white-space:normal;line-height:1.2;text-align:center;font-size:var(--fs-xs);overflow-wrap:break-word}
}

/* ================================================================ sharing and links, the dream wave (October 22, 2026; D3)
   The shared deck page's one toolbar row (the Display panel), its loading header, whose deck it is, and suggestions:
   the panel, and the marks on the deck (a cut, an added card). Card pictures stay whole and untouched: a mark sits in
   the caption or as a ring outside the picture, never on it. Loads after f_share.css, so these rules win. */

/* ---------------------------------------------------------------- one row: views, Display, then the actions */
.sd-bar{flex-wrap:nowrap}
.sd-disp{position:relative;flex:0 0 auto}
.sd-dispb::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.sd-dispb[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.sd-disp-p{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:grid;gap:12px;width:max-content;max-width:min(360px,calc(100vw - 32px));padding:14px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
.sd-disp-p[hidden]{display:none}
.sd-disp-p .sd-sel{justify-content:space-between}
.sd-acts{flex-wrap:nowrap}
.sd-acts .btn-sm{white-space:nowrap}
@media (width < 1024px){.sd-long{display:none}}
@media (width < 720px){
  .sd-bar{flex-wrap:wrap}
  .sd-acts{flex-wrap:nowrap}
  .sd-acts .btn-sm{flex:1 1 0;min-width:0;padding-inline:8px}
}
@media (width < 480px){
  .sd-disp-p{position:fixed;left:16px;right:16px;top:auto;max-width:none;width:auto;margin-top:6px}
  .sd-bar{gap:8px}
  .sd-seg button{padding-inline:10px}
  .sd-dispb{padding-inline:10px}
}

/* ---------------------------------------------------------------- the header while the card list is on its way */
.sd-hr-wait{display:grid;justify-items:end;align-content:start;gap:14px;min-height:120px}
.sd-counting{margin:0;font-size:var(--fs-sm);color:var(--sd-muted)}
.sd-ghost-stats{display:block;width:min(300px,60vw);height:52px;border-radius:var(--r-md);background:var(--sd-row)}
@container sdf (width < 760px){.sd-hr-wait{justify-items:start;min-height:0}}

/* ---------------------------------------------------------------- the deck's name on the type scale (fix round one,
   B5-24a): a deck's name is the page's one h1, --fs-title (30 px at every width; DESIGN_SYSTEM.md), not 43 to 60 px */
.sd-title{font-size:var(--fs-title);line-height:1.1}

/* ---------------------------------------------------------------- whose deck: shared with you, or yours */
.sd-sharebar{margin-bottom:var(--sp-md)}
.sd-mine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.sd-version .ms-sharebtns{display:flex;flex-wrap:wrap;gap:8px}
.sd-sugban b{font-weight:700}

/* ---------------------------------------------------------------- suggestions: the marks on the deck */
.sd-tag-cut{background:none;border:1px solid var(--sd-ink);color:var(--sd-ink)}
.sd-tag-add{background:var(--sd-ink);color:var(--sd-ground)}
.sd-row.sd-cut .sd-n{text-decoration:line-through;text-decoration-thickness:1.5px}
.sd-row.sd-cut .sd-n .sd-tag{text-decoration:none}
.sd-row.sd-add{background:none;box-shadow:inset 0 0 0 1px var(--sd-edge)}
.sd-row.sd-add::before{background:var(--sd-ink)}
.sd-grp-sug .sd-gh{color:var(--sd-ink)}
.sd-lgrp li.sd-cut > button,.sd-lgrp li.sd-cut > a{text-decoration:line-through}
/* a tile or featured card marked: a ring outside the picture and the word under it, the picture itself untouched */
.sd-tile.sd-cut .sd-tpic,.sd-fc.sd-cut .sd-fpic{outline:2px dashed var(--sd-ink);outline-offset:4px;border-radius:var(--r-md)}
.sd-tile.sd-add .sd-tpic{outline:2px solid var(--sd-ink);outline-offset:4px;border-radius:var(--r-md)}
.sd-tcap .sd-tag{margin-left:6px}
.sd-lcut{display:inline;min-height:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer}
@media (pointer:coarse){.sd-lcut{display:inline-flex;align-items:center;min-height:44px}}
/* while suggesting, a card in the deck takes a tap as a cut */
.sd-frame [data-cut]{cursor:pointer}

/* ---------------------------------------------------------------- the suggestion panel (the studio's place and look) */
.sd-sugp h3{margin:0;font-size:var(--fs-md)}
.sd-sg-addf{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:10px;align-items:end}
.sd-sg-addf .sd-sg-name{grid-column:1 / -1}
.sd-sg-addf .sd-sg-bf{grid-column:1}
.sd-sg-addf .sd-sg-qf{grid-column:2;grid-row:2}
.sd-sg-addf > button{grid-column:1 / -1;justify-self:start}
.sd-sg-qf input{width:100%}
.sd-sg-err{grid-column:1 / -1;margin:0;color:var(--bad)}
.sd-sg-err:empty{display:none}
.sd-sg-l{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sd-sg-i{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.sd-sg-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.sd-sg-q{min-width:2.2em;font:700 var(--fs-md)/1.2 var(--sans);font-variant-numeric:tabular-nums}
.sd-sg-n{font-weight:700}
.sd-sg-b{color:var(--muted);font-size:var(--fs-sm)}
.sd-sg-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sd-step{display:inline-flex;align-items:center;gap:8px}
.sd-step > span{min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums}
.sd-sg-whyt{margin:0;padding-left:10px;border-left:2px solid var(--rule2);color:var(--muted);font-size:var(--fs-sm)}
.sd-sg-who,.sd-sg-note{margin:0}
.sd-sg-note{color:var(--muted)}
.sd-sg-res{display:grid;gap:8px;padding:12px;border:1px solid var(--rule);border-radius:var(--r-md)}
.sd-sg-dl{display:grid;gap:4px;margin:0}
.sd-sg-dl > div{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sm)}
.sd-sg-dl dt{color:var(--muted)}
.sd-sg-dl dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.sd-sg-res p{margin:0}
.sd-sg-acts{flex-wrap:wrap}
@media (pointer:coarse){.sd-sg-i .btn-xs,.sd-sg-acts .btn-sm{min-height:44px;min-width:44px}}
textarea#sd-sg-note{width:100%;resize:vertical;font:inherit}

/* ---------------------------------------------------------------- the panels' fields (Customize and Suggest changes):
   the site's dialog fields, instead of the browser's bare ones */
.sd-studio input:not([type=checkbox]):not([type=radio]),.sd-studio select,.sd-studio textarea{font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--rule2);border-radius:var(--r-md);padding:8px 10px;width:100%;min-height:var(--ctl-h-sm)}
.sd-studio input:not([type=checkbox]):not([type=radio]):focus-visible,.sd-studio select:focus-visible,.sd-studio textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.sd-studio input::placeholder,.sd-studio textarea::placeholder{color:var(--faint)}
@media (pointer:coarse){.sd-studio input:not([type=checkbox]):not([type=radio]),.sd-studio select{min-height:44px;font-size:16px}}

/* ---------------------------------------------------------------- the embed dialog: the code and a live preview */
.sd-embcode{width:100%;min-height:96px;font:400 var(--fs-sm)/1.45 var(--code);resize:vertical}
.sd-embprev{margin-top:var(--sp-md);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.sd-embprev iframe{display:block;width:100%;height:420px;height:min(420px,50vh);height:min(420px,50dvh);border:0}

/* ---------------------------------------------------------------- present and print: only the deck */
html.sd-presenting .sd-sharebar,html.sd-presenting .sd-sugp,html.sd-presenting .sd-disp-p{display:none!important}
@media print{.sd-sharebar,.sd-sugp,.sd-disp-p{display:none!important}}

/* ================================================================ o4_table.css: the table (builder D4, the dream wave, October 22, 2026).
   Life Log, King Goldfish and Prep. Loads after every group file, so where a rule here says something about the same
   thing as h_table.css, e_compete.css or styles.css, this one wins. Every rule is scoped to its own tool's box. */

/* ---------------------------------------------------------------- Life Log: table mode (contract 4)
   While a game is in play (html[data-table="1"], set by life.js): no site bar over the table (the offline note and the
   new-version offer wait until the game is left; Life Log works fully offline), the site's notices sit above the
   table's own strips and bar (--lf-stack, measured by life.js), and no pull-to-refresh or overscroll moves the page */
html[data-table="1"] #ms-bars{display:none!important}
html[data-table="1"] .ms-toasts:not(.ms-toasts-top){bottom:calc(var(--lf-stack,64px) + 8px)!important}
html[data-table="1"] .lf-toast{bottom:calc(var(--lf-stack,64px) + 8px)}
html[data-table="1"],html[data-table="1"] body{overscroll-behavior:none}
/* the game view keeps the page's main landmark and its h1 for screen readers: the table covers them on screen, so the
   rest of the page stays hidden and only the h1 is read with the table */
html[data-table="1"] body.lf-playing main{visibility:visible}
html[data-table="1"] body.lf-playing main>:not(#lf-app){visibility:hidden}
html[data-table="1"] body.lf-playing main>.ph .ph-h{visibility:visible}

/* ---------------------------------------------------------------- Life Log: the table as a grid
   life.js places each seat (seats come in seat order in the page; a team's seats are one framed group) */
#lf-app .lf-table.lf-grid{display:grid;gap:6px;padding:6px;flex:1;min-height:0;min-width:0}
#lf-app .lf-grid>.lf-seat,#lf-app .lf-tline>.lf-seat{flex:none;min-width:0;min-height:0}
#lf-app .lf-tline{display:grid;gap:6px;min-width:0;min-height:0;padding:4px;border:2px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:var(--r-lg)}

/* ---------------------------------------------------------------- Life Log: a seat
   rows: the name, a team's line when there is one, the life row (never under 44 px, its two tap zones), the chips */
#lf-app .lf-in{grid-template-rows:auto minmax(44px,1fr) auto}
#lf-app .lf-in.lf-hastl{grid-template-rows:auto auto minmax(44px,1fr) auto}
#lf-app .lf-tlab[hidden],#lf-app .lf-top .lf-turn[hidden]{display:none}
#lf-app .lf-tlab{margin:0;padding:0 8px 2px;font-family:var(--sans);font-size:max(var(--fs-xs),min(3.6cqmin,13px));line-height:1.25;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* the chips: those that fit whole (life.js fitChips folds the rest into "+N more"); a reminder wraps rather than cut */
#lf-app .lf-chips{max-height:none;overflow:hidden;align-content:flex-start;min-width:0}
#lf-app .lf-chips>[hidden],#lf-app .lf-chips[hidden]{display:none!important}
#lf-app .lf-chips>.lf-chip{max-width:100%;min-width:0}
#lf-app .lf-chips>.lf-tag{white-space:normal;text-align:center;line-height:1.25}
#lf-app .lf-chip.lf-cmdsum b{font-variant-numeric:tabular-nums;color:var(--ink)}
#lf-app .lf-chip.lf-chipmore{border-style:dashed;color:var(--ink);font-weight:700}
/* a short, wide seat: name, team line and life on the left, the chips in a column on the right */
#lf-app .lf-in.lf-wide{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto minmax(44px,1fr)}
#lf-app .lf-in.lf-wide.lf-hastl{grid-template-rows:auto auto minmax(44px,1fr)}
#lf-app .lf-in.lf-wide>.lf-top,#lf-app .lf-in.lf-wide>.lf-tlab,#lf-app .lf-in.lf-wide>.lf-life{grid-column:1}
#lf-app .lf-in.lf-wide>.lf-chips{grid-column:2;grid-row:1 / -1;align-content:center;justify-content:center;padding:6px}
/* the name: never cut below four letters (the seat's grid gives it the whole width, the turn chip goes under it) */
#lf-app .lf-top .lf-name{min-width:min(100%,6.5ch);padding-inline:6px}

/* the life row is its own container, so the number is sized by the room the row has (it can never run into the name
   or the chips); every number at the table is in the site's number face (--num-face, "MS Figures": a plain zero, lead
   decision 2), with figures of one width so a total doesn't shift as it changes */
#lf-app .lf-life{container-type:size;min-height:0}
#lf-app .lf-num{gap:0;overflow:hidden}
#lf-app .lf-num b{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;font-weight:700;letter-spacing:-.02em;line-height:1;font-size:clamp(22px,min(58cqh,26cqw),180px)}
#lf-app .lf-num b[data-n="3"]{font-size:clamp(20px,min(56cqh,19cqw),150px)}
#lf-app .lf-num b[data-n="4"],#lf-app .lf-num b[data-n="5"]{font-size:clamp(18px,min(50cqh,15cqw),120px)}
#lf-app .lf-tap{font-size:clamp(18px,min(36cqh,13cqw),48px)}
/* the running tally and the turn badge: ink on the seat, at least 7:1 in sun glare (the seat's color stays as a rule) */
#lf-app .lf-num em{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-weight:700;color:var(--ink);font-size:clamp(13px,min(20cqh,10cqw),34px);line-height:1.1;margin-top:1px;padding:0 .2em;border-bottom:3px solid var(--c)}
#lf-app .lf-num small{font-size:clamp(12px,min(13cqh,6cqw),15px);line-height:1.25;max-width:94%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
#lf-app .lf-turn{background:var(--ink);color:var(--surface);box-shadow:0 0 0 2px var(--c);font-weight:700}
/* on a phone (no hover) a tapped control never stays shaded or outlined as if held: hover looks only where a pointer
   can hover; a tap still flashes while pressed (:active) */
@media (hover:none){
  #lf-app .lf-tap:hover{background:none;color:color-mix(in srgb,var(--ink) 65%,transparent)}
  #lf-app .lf-tap:active{background:color-mix(in srgb,var(--c) 22%,transparent)}
  #lf-app .lf-name:hover{background:none}
  #lf-app .btn-sm:not(.primary):hover,#lf-app .btn-xs:not(.primary):not([disabled]):hover{border-color:var(--rule)}
  #lf-app .lf-tabs [role=tab]:hover{background:none}
  #lf-app .lf-tabs [role=tab][aria-selected=false]:hover{color:var(--muted)}
}

/* ---------------------------------------------------------------- Life Log: the commander damage grid (life.js cmdOverlay)
   over the table seat for seat: each opponent's commander a tile where that player sits, this seat its heading and
   Done; each tile's inside is turned to face this seat's player (like a seat's .lf-in) */
#lf-app .lf-panel.lf-cmdp{inset:auto;padding:0;display:block;background:var(--scrim)}
#lf-app .lf-cmdp>.lf-pbox{position:absolute;inset:0;width:auto;max-height:none;max-width:none;padding:0;border:0;border-radius:0;background:none;display:block;overflow:hidden}
#lf-app .lf-cmdp .lf-pbox>.ms-x{display:none}
#lf-app .lf-cmdg{position:absolute;inset:0}
#lf-app .lf-cmdseat,#lf-app .lf-cmdc{position:absolute}
#lf-app .lf-cmdseat>.lf-cmdc{position:absolute}
#lf-app .lf-cmdc{overflow:hidden;border:2px solid color-mix(in srgb,var(--cc) 55%,var(--rule));border-radius:var(--r-md);background:color-mix(in srgb,var(--cc) 10%,var(--surface))}
#lf-app .lf-cmdc.hot{background:var(--warn-bg);border-color:var(--warn-line)}
#lf-app .lf-cmdin{container-type:size;position:absolute;top:50%;left:50%;transform-origin:50% 50%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);border-top:8px solid var(--cc)}
#lf-app .lf-cmdme .lf-cmdin,#lf-app .lf-cmdmate .lf-cmdin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center}
#lf-app .lf-cmdme{background:var(--surface);border-color:var(--ink)}
#lf-app .lf-cmdmate{background:var(--surface);opacity:.75}
#lf-app .lf-cmdmate p{margin:0;font-size:var(--fs-md);color:var(--muted)}
#lf-app .lf-cmdp h2{margin:0;font-size:var(--fs-lg);line-height:1.25;overflow-wrap:anywhere}
#lf-app .lf-cmdlife{margin:0;font-size:var(--fs-sm);color:var(--muted)}
/* a short seat keeps the heading and Done; its life line steps aside (the seat under the grid shows the life) */
@container (max-height:170px){#lf-app .lf-cmdme .lf-cmdlife{display:none}#lf-app .lf-cmdme h2{font-size:var(--fs-md)}#lf-app .lf-cmdme .lf-cmdin{gap:4px;padding:4px 8px}}
#lf-app .lf-cmdhit{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:44px;overflow:hidden;padding:6px 50px;border:0;background:none;color:var(--ink);font:inherit;text-align:center;cursor:pointer;touch-action:manipulation}
#lf-app .lf-cmdn{font-weight:700;font-size:var(--fs-md);line-height:1.25;max-width:100%;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#lf-app .lf-cmdw{font-size:var(--fs-sm);line-height:1.25;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lf-app .lf-cmdv b{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-hero);font-weight:700;line-height:1}
#lf-app .lf-cmdtip{font-size:var(--fs-sm);color:var(--muted);line-height:1.25}
#lf-app .lf-cmdminus{grid-area:1 / 1;align-self:start;justify-self:end;margin:4px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-xl);font-weight:700;line-height:1;cursor:pointer;touch-action:manipulation}
#lf-app .lf-cmdminus:disabled{opacity:.4;cursor:default}
@media (pointer:coarse){#lf-app .lf-cmdminus{width:44px;height:44px}}
/* a short tile (a phone on its side, six seats) keeps the commander's name and its number: the hint, then the owner's
   name step aside, and the number steps down the scale */
@container (max-height:150px){#lf-app .lf-cmdtip{display:none}}
@container (max-height:110px){#lf-app .lf-cmdw{display:none}#lf-app .lf-cmdv b{font-size:var(--fs-num)}}
/* a narrow tile: the minus sits above the name, so the room is kept above and below the number alike; narrow and short,
   the room above only */
@container (max-width:220px){#lf-app .lf-cmdhit{padding:50px 6px}}
@container (max-width:220px) and (max-height:190px){#lf-app .lf-cmdhit{padding:50px 6px 6px}#lf-app .lf-cmdtip,#lf-app .lf-cmdw{display:none}}
#lf-app .lf-cmdhit:focus-visible,#lf-app .lf-cmdminus:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media (hover:hover){#lf-app .lf-cmdhit:hover{background:color-mix(in srgb,var(--cc) 14%,transparent)}#lf-app .lf-cmdminus:hover:not(:disabled){border-color:var(--ink)}}
#lf-app .lf-cmdhit:active{background:color-mix(in srgb,var(--cc) 22%,transparent)}
@media (forced-colors:active){#lf-app .lf-cmdin{border-top-color:CanvasText}}

/* ---------------------------------------------------------------- Life Log: Past games */
#lf-app .lf-pastb{display:inline-flex;flex-wrap:wrap;gap:6px}

/* ---------------------------------------------------------------- King Goldfish (goldfish.js)
   the hand as big as a row of seven allows on a wide screen (it was 128 px on a 1280 screen); on a phone the game and
   the numbers are two views with a switch; a short window (400% zoom, a phone on its side) doesn't hold the status
   bar in place, so the bars never take most of the window */
.gf .gf-views{display:none}
@media (width < 720px){
  .gf .gf-views{display:inline-flex;margin:0 0 10px}
  .gf[data-view="num"] .gf-playv,.gf[data-view="play"] .gf-numv{display:none}
}
@media (width >= 1024px){
  .gf .gf-hand{container-type:inline-size}
  .gf .gf-hand .gf-row{--gf-w:clamp(128px,calc((100cqw - 60px) / 7),150px)}
  .gf .gf-hand .gf-odds{font-size:var(--fs-sm)}
}
@media (height < 480px){.gf .gf-status{position:static}}
@media (height < 480px){html:has(.gf-status){scroll-padding-top:64px}}

/* ---------------------------------------------------------------- Life Log: dice (D4 to D20, one to ten at once) and the high roll */
#lf-app .lf-dice{display:grid;gap:8px}
#lf-app .lf-dsides{flex-wrap:wrap;row-gap:4px;max-width:100%}
#lf-app .lf-dcount{grid-template-columns:minmax(0,1fr) auto 3.2rem auto;max-width:22rem}
#lf-app .lf-roll{display:grid;gap:6px;justify-items:center;font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;text-align:center;line-height:1.4}
#lf-app .lf-dres{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#lf-app .lf-dres b{min-width:2.4em;padding:4px 8px;border:2px solid var(--ink);border-radius:var(--r-md);font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-2xl);line-height:1.2;text-align:center}
#lf-app .lf-dtot{font-size:var(--fs-md);font-weight:400;color:var(--muted)}

/* ---------------------------------------------------------------- Life Log: league seasons (the Playgroup tab) */
#lf-app .lf-seas .lf-seah{margin-top:4px;font-size:var(--fs-xl);line-height:1.3}
/* a long form's last row (Start the season) stays in view at the foot of its box on a short screen */
#lf-rec .lf-dacts{position:sticky;bottom:calc(var(--sp-lg) * -1);z-index:1;margin:0 calc(var(--sp-lg) * -1) calc(var(--sp-lg) * -1);padding:10px var(--sp-lg);background:var(--ground);border-top:1px solid var(--rule)}
#lf-app .lf-seameta{margin:0;color:var(--muted)}
#lf-app .lf-sea-t td,#lf-app .lf-sea-t th{white-space:nowrap}
#lf-app .lf-sea-t th[scope=row]{white-space:normal;min-width:7rem}
#lf-app .lf-sea-t b{font-variant-numeric:tabular-nums}
#lf-rec .lf-seaimg,#lf-app .lf-seaimg{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r-md)}
#lf-rec .lf-sea-t td,#lf-rec .lf-sea-t th{white-space:nowrap}
/* the rule zero sheet on the setup: a field per player, the camera under it while it reads a QR code */
#lf-rec .lf-rzin{display:grid;gap:10px}
#lf-rec .lf-rzrow{display:grid;gap:4px}
#lf-rec .lf-rzmsg:empty{display:none}
#lf-rec .lf-rzmsg,#lf-app .lf-rzmsg{margin:0}
.lf-qrgo{justify-self:start}
.lf-qr{display:grid;gap:6px;justify-items:start}
.lf-qr video{display:block;width:min(100%,360px);aspect-ratio:4/3;object-fit:cover;background:var(--ink);border-radius:var(--r-md)}
.lf-qr p{margin:0}
#lf-app .lf-rz0row{align-items:center}
/* the board's extras: a token or a face-down card is a plain tile the size of a card; counters and what a card is
   attached to are said under its picture, never on it; an attached card sits tucked against its permanent */
.gf .gf-tile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;aspect-ratio:488/680;padding:8px;border-radius:var(--r-card);border:2px solid var(--ink);background:var(--surface);color:var(--ink);text-align:center;overflow:hidden}
.gf .gf-tile b{font-family:var(--sans);font-size:var(--fs-md);line-height:1.2;overflow-wrap:anywhere}
.gf .gf-tile small{font-size:var(--fs-xs);color:var(--muted);line-height:1.3}
.gf .gf-downt{background:repeating-linear-gradient(135deg,var(--fill) 0 8px,var(--surface) 8px 16px)}
.gf .gf-cap{display:block;margin-top:4px;font-family:var(--sans);font-size:var(--fs-xs);line-height:1.3;color:var(--ink);text-align:center;overflow-wrap:anywhere;max-width:var(--gf-w)}
.gf .gf-card.gf-attd{margin-left:calc(var(--gf-w) * -0.35);z-index:0}
.gf .gf-card.gf-attd.tapped{margin-left:calc(var(--gf-w) * -0.1)}
.gf .gf-bfacts{margin-top:10px}
.gf .gf-ctrl,.ms-modal .gf-ctrl{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
.ms-modal .gf-ctrl li{display:grid;grid-template-columns:minmax(0,1fr) auto 3rem auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--rule)}
.ms-modal .gf-ctrl b{text-align:center;font-variant-numeric:tabular-nums}
.ms-modal .gf-ctradd,.ms-modal .gf-tokform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:6px 0}
.ms-modal .gf-tokform .gf-lbl input{width:12rem;max-width:100%}
/* two decks on one device: the cover between turns, the other player's open side, both life totals */
.gf .gf-cover{display:grid;gap:12px;justify-items:start;margin:12px 0;padding:24px 20px;min-height:min(60vh,520px);min-height:min(60dvh,520px);align-content:center;border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--surface)}
.gf .gf-cover h2{margin:0;font-family:var(--sans);font-size:var(--fs-2xl)}
.gf .gf-cover p{margin:0;font-size:var(--fs-md)}
.gf .gf-coverlife{display:flex;flex-wrap:wrap;gap:8px 24px}
.gf .gf-coverlife b{font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-2xl)}
.gf .gf-dueltop{align-items:center}
.gf .gf-duelh{margin:0;font-size:var(--fs-md)}
.gf .gf-dlife{display:inline-flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px 16px}
.gf .gf-dl{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:4px}
.gf .gf-dln{white-space:nowrap}
.gf .gf-dl.gf-dlme .gf-dln{font-weight:700}
.gf .gf-dl b{min-width:2.2em;text-align:center;font-size:var(--fs-xl);font-family:var(--num-face);font-variant-numeric:tabular-nums lining-nums}
.gf .gf-foe{border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;background:var(--surface)}
.gf .gf-foebf{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gf .gf-foec{display:grid;gap:4px;width:76px;justify-items:center;text-align:center}
.gf .gf-foec .gf-tile{width:72px;font-size:var(--fs-xs)}
.gf .gf-foeimg{padding:0;border:0;background:none;display:block;min-height:0}
.gf .gf-foeimg img{width:72px;height:auto;aspect-ratio:488/680;border-radius:var(--r-card);display:block}
.gf .gf-foec.tapped .gf-foeimg img,.gf .gf-foec.tapped .gf-tile{transform:rotate(90deg) scale(.8)}
.gf .gf-foen{font-size:var(--fs-xs);line-height:1.25;overflow-wrap:anywhere}
.ms-modal .gf-duelform{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:8px 14px;margin:8px 0}
.ms-modal .gf-duelform .gf-lbl{display:grid;gap:4px}
.ms-modal .gf-duelform select,.ms-modal .gf-duelform input{max-width:100%;width:100%}

/* ---------------------------------------------------------------- Life Log: the pod's rule zero sheet */
#lf-app .lf-rz{margin:0;padding-left:1.4em;display:grid;gap:12px;font-size:var(--fs-md)}
#lf-app .lf-rz>li{padding-bottom:10px;border-bottom:1px solid var(--rule)}
#lf-app .lf-rzc,#lf-app .lf-rzci{display:inline-block;margin-left:6px;font-size:var(--fs-sm);color:var(--muted)}
#lf-app .lf-rzf{margin:6px 0 4px}
#lf-app .lf-rzl{margin:0;display:grid;gap:2px;font-size:var(--fs-sm)}
#lf-app .lf-rzl>div{display:grid;grid-template-columns:minmax(7.5rem,auto) minmax(0,1fr);gap:8px}
#lf-app .lf-rzl dt{color:var(--muted)}
#lf-app .lf-rzl dd{margin:0;overflow-wrap:anywhere}

/* D5, cards, search and the Interaction Oracle (dream wave, October 22, 2026). Loads after every group file. */

/* the card page: the name, cost, type and rules text come first in the page, so a screen reader reads the card before
   its price and "Your stuff" (attack A11 #7); on screen the picture keeps its place, left on a desk, under the type
   line on a phone */
.cc-mainfirst>.cc-art,.cc-first>.cc-art{order:-1}

/* card first: the top of the card drawn from its small file while the card list loads */
.cc-first .cc-firstwait{padding:var(--sp-md) 0}
.cc-first .cc-legal{opacity:1}

/* a network that never answers: the loading line says so and stops moving (attack A9 #14) */
.cl-wait.cl-stuck::after{display:none;animation:none}
.cl-wait.cl-stuck{color:var(--ink)}
.cl-wait.cl-stuck .btn-sm{margin-left:8px}

/* the Oracle on opposite sides: a lasting restriction's row, its rule numbers and what it was read from */
.or-row.or-lock .or-cr{margin:4px 0 0}
.or-unread{max-width:72ch}
.or-rul-both{border-left:3px solid var(--rule2);padding-left:12px}

/* Super Search on a phone: the quick filters and the format lock (unless one is on) fold into Filters, so the first
   results start in the first screen; opened, the chips wrap instead of running off the edge (attacks A7 #14, A10 #6).
   The sort and view row still scrolls sideways under its soft edge (a_cards.css): wrapped, it took three rows */
@media (width < 720px){
  .cl-hero:not(.cl-fopen) #cl-qf{display:none}
  .cl-hero:not(.cl-fopen) .cl-lock:not(.on):not(.fromq){display:none}
  .cl-hero.cl-fopen .qf{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none}
  .cl-hero.cl-fopen .qf-g{flex-wrap:wrap;flex-shrink:1}
  .cl-hero.cl-fopen .qf-end{padding-right:0}
}

/* the quick view's format names link to their pages, as on the card page (attack A7 #8; stuff.js handoff): the whole
   row is the target on a touch screen */
.qv-legal a{color:var(--ink);text-decoration:none}
@media (hover:hover){.qv-legal a:hover{text-decoration:underline}}
@media (pointer: coarse){
  .qv-legal li{position:relative}
  .qv-legal li>a::after{content:"";position:absolute;inset:-7px 0;min-height:44px}
}
/* the quick view's "Full card page" in the top bar on a phone, not a row of its own (attack A10 #30; stuff.js handoff) */
.qv-bar .qv-full-bar{display:none}
@media (width < 720px){
  .qv-box:has(.qv-bar .qv-full-bar) .qv-head .qv-full{display:none}   /* only once the bar carries its copy */
  .qv-bar .qv-full-bar{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink)}
}

/* Super Search's results, used: copy, CSV, add all to a deck, one at random (a fold in the results bar) */
.cl-acts{position:relative;margin-left:auto}
.cl-acts>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1.5px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm)}
.cl-acts>summary::-webkit-details-marker{display:none}
.cl-acts>summary::after{content:"\25BE";color:var(--muted)}
.cl-acts[open]>summary{border-color:var(--ink)}
.cl-acts-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;gap:6px;min-width:220px;padding:10px;border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
.cl-acts-menu .btn-sm{justify-content:flex-start;margin:0}
@media (pointer: coarse){.cl-acts>summary,.cl-acts-menu .btn-sm{min-height:44px}}
/* on a phone the count and "Use these cards" share a row, and the bar's gaps are tighter, so the first results start
   higher (attack A7 #14: y 549 of 844 after round one); the sort and view row stays full width under them */
@media (width < 720px){
  .cl-bar{flex-direction:row;flex-wrap:wrap;align-items:center;padding-top:8px;margin-top:8px}
  .cl-bar>.cl-count{flex:1 1 auto;min-width:0}
  .cl-acts{margin-left:auto;align-self:center}
  .cl-bar>.cl-controls{flex:1 0 100%}
  .cl-acts-menu{right:0;left:auto}
  .cl-layout{padding-top:12px}
}

/* a name in another language, or a flavor name, found when no English name matched */
.cl-intl{border:1.5px solid var(--rule2);border-radius:var(--r-lg);padding:12px 14px;margin:0 0 16px;background:var(--surface)}
.cl-intl p{margin:0 0 8px}
.cl-intl p:last-child{margin:0}

/* the card page: the wording then and now, its name in other languages, the glossary link beside a keyword */
.cc-wording{margin:4px 0 0;max-width:62ch}
.cc-ochange{margin:6px 0 4px;padding:8px 12px;border-left:3px solid var(--rule2)}
.cc-ochange p{margin:0 0 4px}
.cc-printed{margin:8px 0 4px}
.cc-printed>summary,.cc-fold-s>summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);min-height:32px;display:flex;align-items:center}
@media (pointer: coarse){.cc-printed>summary,.cc-fold-s>summary{min-height:44px}}
.cc-printed .cc-sub{margin:12px 0 6px}
.cc-pwording{border-top:1px solid var(--rule);padding:8px 0}
.cc-psets{font-size:var(--fs-sm);color:var(--muted);margin:0 0 4px}
.cc-asprinted,.cc-before{font-size:var(--fs-lg)}
.cc-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 18px;margin:0}
.cc-names div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule)}
.cc-names dt{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.cc-names dd{margin:0;text-align:right}
.cc-gloss{display:inline-flex;align-items:center;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin:0 10px 6px -2px;text-decoration:underline;text-underline-offset:3px}
@media (pointer: coarse){.cc-gloss{min-height:44px;margin-bottom:0}}

/* fix round one: "Looking for the Life Log?" above Super Search's results (attacker A7 #5), and a card's mana from the
   tokens it makes, said beside the mana it makes itself (B3-F20) */
.cl-jump{margin:4px 0 12px}
.cl-jump a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (pointer: coarse){.cl-jump a{padding:12px 0}}
.cc-pmtok{margin-left:6px}

/* ================================================================ Learn, Since you left, Glossary and Sets (builder D7,
   October 22, 2026; learn_pages.py and learn.js). Scoped to the pages' own boxes (.lr, .gl, .sn, .st and the shared lr-
   pieces). Colors only through the tokens; no blue; the current page in the Learn row is marked in ink, never the spark
   orange. Breakpoints 480, 720 and 1024 only; 44px targets on coarse pointers; no text under 13px. */
.lr,.gl,.sn,.st{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-lg);min-width:0}
.gl-az,.st-jump{min-width:0;max-width:100%}
.lr-lede{margin:0;max-width:72ch;font-size:var(--fs-lg);line-height:1.6;color:var(--ink)}
.lr-small,.lr-src{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.lr-src{display:block;margin:4px 0 0}
.lr-src a,.lr-small a{color:var(--muted);text-underline-offset:3px}
.lr a,.gl a,.sn a,.st a{color:var(--ink);text-underline-offset:3px}

/* the row of Learn pages under each page's header */
.lr-nav{margin:0 0 var(--sp-md)}
.lr-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lr-nav a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--fs-sm)}
@media (hover:hover){.lr-nav a:hover{border-color:var(--accent)}}
.lr-nav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:700}

.lr-sec{min-width:0;scroll-margin-top:var(--sp-xl)}
.lr-sec>h2{font-size:var(--fs-2xl);line-height:1.25;margin:var(--sp-lg) 0 var(--sp-sm)}
.lr-sec h3{font-size:var(--fs-lg);margin:0 0 4px}
.lr-sec p{max-width:72ch;line-height:1.6;margin:0 0 var(--sp-sm)}
.lr-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.lr-toc a{display:inline-flex;align-items:center;min-height:32px}

/* how to read a card: the picture whole, the numbers in a strip beside it (never on it), the parts in a list */
.lr-card{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--sp-lg) var(--sp-xl);align-items:start}
.lr-fig{margin:0;width:min(300px,62vw)}
.lr-pw{position:relative;padding-right:30px}
.lr-cardlink{display:block;border-radius:4.8%/3.4%}
.lr-pic{display:block;width:100%;height:auto;aspect-ratio:488/680;border-radius:4.8%/3.4%;background:var(--fill)}
.lr-marks{list-style:none;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;width:26px}
.lr-marks li{position:absolute;right:0;top:var(--y);transform:translateY(-50%);display:flex;align-items:center}
.lr-marks li::before{content:"";width:6px;height:1px;background:var(--muted);margin-right:2px}
.lr-marks span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--ground);font-size:var(--fs-xs);font-weight:700;line-height:1}
.lr-fig figcaption{margin-top:8px;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);padding-right:30px}
.lr-noimg .lr-cardlink{display:grid;place-items:center;aspect-ratio:488/680;border:1px dashed var(--rule2);padding:12px;text-align:center;color:var(--muted)}
.lr-noimg .lr-pic{background:none;font-size:var(--fs-sm);color:var(--muted)}
.lr-parts{margin:0;padding-left:1.6em;display:grid;gap:10px;max-width:46ch;line-height:1.5}
.lr-parts li::marker{font-weight:700}
.lr-parts b{display:block}

/* mana symbols */
.lr-syms{list-style:none;margin:0 0 var(--sp-md);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:6px 16px}
.lr-syms li{display:flex;gap:10px;align-items:center;min-width:0}
.lr-syms .sym{width:1.6em;height:1.6em}
.lr-syms b{font-family:var(--code);font-weight:500;margin-right:4px}
.lr-every summary{cursor:pointer;font-weight:600;width:fit-content;max-width:100%}
.lr-tw{max-width:40rem;overflow-x:auto;margin-top:8px}
.lr-symt{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.lr-symt th{text-align:left;font-size:var(--fs-sm);color:var(--muted);font-weight:500;padding:4px 8px;border-bottom:1px solid var(--rule2)}
.lr-symt td{padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:middle}
.lr-symt .sym{width:1.4em;height:1.4em}
.lr-symt code{font-family:var(--code);font-size:var(--fs-sm)}

/* the turn */
.lr-turn{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:8px;counter-reset:ph}
.lr-turn>li{counter-increment:ph;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);padding:10px 12px;min-width:0}
.lr-turn>li h3::before{content:counter(ph) ". ";color:var(--muted)}
.lr-turn ol{margin:4px 0 0;padding-left:1.1em;display:grid;gap:4px;font-size:var(--fs-md);line-height:1.45}
.lr-zones{margin:0;padding-left:1.2em;display:grid;gap:6px;line-height:1.5;max-width:72ch}

/* where to play, a first deck, and the online list on Since you left */
.lr-where{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:10px}
.lr-where>li{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);padding:12px 14px;min-width:0}
.lr-where p{margin:0}
.lr-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:8px}
.lr-tool{display:flex;flex-direction:column;gap:2px;min-height:44px;height:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none}
@media (hover:hover){.lr-tool:hover{border-color:var(--accent)}}
.lr-tool span{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}

/* ---------------------------------------------------------------- the glossary */
.gl-find{display:grid;gap:6px;max-width:40rem}
html:not(.js) .gl-find{display:none}
.gl-find label{font-weight:700}
.gl-qrow{display:flex;gap:8px;align-items:center}
.gl-qrow input,.st-find input,.sn-row select{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface);border:1px solid var(--line-field);border-radius:var(--r-md);padding:6px 10px;min-height:var(--ctl-h);box-sizing:border-box;min-width:0}
.gl-qrow input{flex:1 1 auto}
.gl-n,.st-count{margin:0;font-size:var(--fs-sm);color:var(--muted);min-height:1.5em}
.gl-az ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.gl-az a,.gl-az span{display:inline-grid;place-items:center;min-width:32px;min-height:32px;padding:0 6px;box-sizing:border-box;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
@media (hover:hover){.gl-az a:hover{background:var(--hover)}}
.gl-az span,.gl-az a[aria-disabled="true"]{color:var(--faint);font-weight:400;pointer-events:none}
.gl-none,.st-none,.sn-none{margin:0;padding:var(--sp-md);border:1px dashed var(--rule2);border-radius:var(--r-md);color:var(--muted)}
.gl-none[hidden],.st-none[hidden],.sn-none[hidden]{display:none}
.gl-sec{scroll-margin-top:var(--sp-lg)}
.gl-sec[hidden],.gl-item[hidden],.gl-az[hidden]{display:none}
.gl-sec>h2{font-size:var(--fs-2xl);margin:var(--sp-lg) 0 4px;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.gl-list{margin:0}
.gl-item{padding:10px 0;border-bottom:1px solid var(--rule);scroll-margin-top:var(--sp-xl);max-width:72ch}
.gl-item:target,.gl-item:focus{outline:none;background:var(--fill);box-shadow:-10px 0 0 var(--fill),10px 0 0 var(--fill);border-radius:var(--r-sm)}
.gl-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gl-item dt{font-weight:700;font-size:var(--fs-lg);line-height:1.35}
.gl-item dfn{font-style:normal}
.gl-also{font-weight:400;font-size:var(--fs-sm);color:var(--muted)}
.gl-self{font-weight:400;color:var(--faint)!important;text-decoration:none;padding:0 4px}
.gl-self:focus-visible{color:var(--ink)!important}@media (hover:hover){.gl-self:hover{color:var(--ink)!important}}
.gl-item dd{margin:4px 0 0}
.gl-item dd p{margin:0;line-height:1.55}
.gl-links{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px!important;font-size:var(--fs-sm)}
.gl-links .lr-src{display:inline;margin:0}

/* ---------------------------------------------------------------- since you left */
.sn-pick{display:grid;gap:8px;padding:var(--sp-md) var(--sp-lg);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);max-width:46rem}
.sn-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.sn-row label{font-weight:700}
.sn-quick{display:flex;flex-wrap:wrap;gap:6px}
.sn-quick .btn-sm[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.sn-sum{margin:0;line-height:1.5}
.sn-years{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-md)}
.sn-year[hidden]{display:none}
.sn-year>h3{font-size:var(--fs-xl);margin:0 0 4px}
.sn-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sn-item{border-left:3px solid var(--rule2);padding:4px 0 4px 12px;max-width:72ch}
.sn-item h4{font-size:var(--fs-lg);margin:2px 0 2px}
.sn-item p{margin:0;line-height:1.55}
.sn-when{font-size:var(--fs-sm);color:var(--muted)}
.sn-when time{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sn-kind{display:inline-block;margin-left:6px;padding:0 8px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--fill);color:var(--ink);font-size:var(--fs-xs);line-height:1.5}
/* Tournaments now: the next steps on this site */
.sn-next-h{font-size:var(--fs-lg);margin:var(--sp-md) 0 4px}
.sn-next{margin:0;padding-left:1.2em;display:grid;gap:6px;line-height:1.5;max-width:72ch}

/* ---------------------------------------------------------------- the sets */
.st-ctl{display:grid;gap:8px;max-width:56rem}
.st-ctl fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.st-ctl legend{float:left;font-weight:700;margin-right:8px}
.st-ctl fieldset label{display:inline-flex;align-items:center;gap:6px;min-height:32px}
.st-gn{color:var(--muted);font-size:var(--fs-sm)}
.st-find{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.st-find label{font-weight:700}
.st-find input{flex:0 1 20rem}
.st-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.st-jump a{display:inline-grid;place-items:center;min-height:32px;padding:0 6px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;text-decoration:none}
@media (hover:hover){.st-jump a:hover{background:var(--hover)}}
.st-jump a[aria-disabled="true"]{color:var(--faint);pointer-events:none}
.st-year{scroll-margin-top:var(--sp-lg)}
.st-year[hidden],.st-list li[hidden]{display:none}
.st-year>h2{font-size:var(--fs-2xl);margin:var(--sp-md) 0 4px;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.st-n{font-size:var(--fs-sm);font-weight:400;color:var(--muted);margin-left:6px}
.st-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:2px 16px}
.st-list li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--rule);min-width:0}
.st-list .ss,.st-nosym{flex:none;width:1.6em;height:1.6em;margin-top:2px}
.st-list p{margin:0;min-width:0;display:grid;gap:1px;line-height:1.4}
.st-name{font-weight:700;overflow-wrap:anywhere}
.st-m{font-size:var(--fs-sm);color:var(--muted)}
.st-m>*+*::before{content:" \00B7  ";color:var(--faint)}
.st-m code{font-family:var(--code);font-size:var(--fs-sm);color:var(--ink)}
.st-soon{color:var(--ink);font-weight:700}
.st-par,.st-out{font-size:var(--fs-sm);color:var(--muted)}
.st-out a{color:var(--muted)}

@media (width < 720px){
  /* the letters and the years stay one row on a phone, scrolled sideways inside their own strip */
  .gl-az ul,.st-jump ul{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px}
  .gl-az li,.st-jump li{flex:none}
  .lr-card{grid-template-columns:minmax(0,1fr)}
  .lr-fig{width:min(300px,78vw)}
}
@media (width < 480px){
  .lr-sec>h2,.gl-sec>h2,.st-year>h2{font-size:var(--fs-xl)}
  .sn-pick{padding:var(--sp-md)}
}
@media (pointer:coarse){
  .lr-nav a,.lr-toc a,.gl-az a,.gl-az span,.st-jump a,.st-ctl fieldset label{min-height:44px;min-width:44px}
  .gl-links a,.lr-src a,.st-name,.st-out a,.gl-self,.lr-parts a,.lr-zones a,.sn-next a,.gl-none a{display:inline-flex;align-items:center;min-height:44px}
  .gl-qrow input,.st-find input,.sn-row select,.sn-quick .btn-sm,.gl-qrow .btn-sm{min-height:44px}
}
@media print{.lr-nav,.gl-find,.gl-az,.st-ctl,.st-jump,.sn-pick{display:none}}

/* ---- o8_money.css: the dream wave's collection and money changes (builder D8, October 22, 2026). Loads after every
   group file, so a rule here wins over the same rule in c_money.css, g_collection.css and j_money.css. */

/* ---- Collection: the one-line ledger (collection.js ledgerHTML) in place of the tile row */
.co-head{display:block;padding:var(--sp-sm) 0 0}
.co-ledger{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin:0;font-family:var(--sans);font-size:var(--fs-md);line-height:1.45;color:var(--muted)}
.co-ledger .co-li{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;min-width:0}
.co-ledger b{font-family:var(--sans);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.co-ledger .co-lv b{font-size:var(--fs-num);letter-spacing:-.01em}
.co-ledger .co-pabout{margin-left:10px}
.co-ledger .co-refresh{display:inline;margin:0;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.co-ledger .co-lsrc{font-size:var(--fs-sm)}
.co-ledger .cl-inline{font-size:var(--fs-sm)}
.co-ledger .co-3vwait{font-weight:500;color:var(--muted)}
.co-intakeh{margin:6px 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:80ch}
.co-head .co-title{margin:2px 0 0}
.co-head .co-actions{margin-top:var(--sp-sm)}

/* ---- the page header's actions: Intake, Import and More (a disclosure, not a dialog) */
.ph-x .co-actions,.co-head .co-actions{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-end;align-items:center}
.co-more{position:relative}
.co-moremenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;min-width:13rem;padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.co-moremenu[hidden]{display:none}
.co-moremenu button{display:flex;align-items:center;width:100%;min-height:40px;padding:8px 12px;font:inherit;font-family:var(--sans);font-size:var(--fs-md);text-align:left;color:var(--ink);background:none;border:0;border-radius:var(--r-sm);cursor:pointer}
@media (hover:hover){.co-moremenu button:hover{background:var(--hover)}}
.co-moremenu button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.co-moremenu button:disabled{color:var(--faint);cursor:default}

/* ---- the tab row: its edge shade is the site's (n_system.css, every tab row); collection.js keeps the tab you're on in view */
.co-tabwrap .co-tabs{margin:var(--sp-lg) 0 var(--sp-md)}

/* ---- the add box: its options folded under a line that names them */
.co-add{padding:10px 12px}
.co-addmore{margin-top:6px}
/* the folds here (class "fold") take the house chevron from n_system.css: 7 px, a 2 px line, right when closed */
.co-addmore>summary{display:block;min-height:32px;padding:6px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.co-addmore>summary span{color:var(--ink)}
.co-addmore .co-addopts{margin-top:8px}
.co-lastadd{margin:6px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.co-lastadd .cl-inline{font-size:var(--fs-sm)}

/* ---- sort and group (and Captain, once used) behind one button */
.co-fbtn .co-fon{display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;margin-left:4px;padding:0 4px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-size:var(--fs-xs);font-weight:700}
.co-fpanel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);font-family:var(--sans);font-size:var(--fs-md);color:var(--muted)}
.co-fpanel[hidden]{display:none}
.co-fpanel>label{color:var(--muted)}
.co-fpanel select{min-height:40px;padding:6px 10px;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink);background:var(--ground);border:1px solid var(--line-field);border-radius:var(--r-md)}
.co-fpanel .co-capchips{flex-basis:100%;margin:2px 0 0}
.co-caplink,.co-capchips>span a{display:inline-flex;align-items:center;min-height:44px}

/* ---- a wishlist grouped by the deck that needs each card */
.co-ghdeck a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- Intake: a name added with no printing chosen says so on its line */
.in-rb-pnc{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.35}

/* ---- the import receipt: rows saved differently from the file, and the value as Collection counts it */
.co-ival{margin:8px 0;font-size:var(--fs-md)}
.co-ival b{font-variant-numeric:tabular-nums}
.co-changed{margin:8px 0;padding:8px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-md)}
.co-changed>summary{font-weight:600;min-height:32px}
.co-changed ul{margin:6px 0 0;padding-left:18px;font-size:var(--fs-sm);line-height:1.45}
.co-keyh{margin:var(--sp-md) 0 6px;font-family:var(--sans);font-size:var(--fs-md);font-weight:700}

/* the backup reminder (me.js) in Collection's head: one quiet strip, its actions as small buttons, so the cards come up
   on a phone's first screen; the same actions and words as everywhere else */
.co-head .bak-note{display:block;margin:10px 0 0;padding:8px 12px;font-size:var(--fs-sm)}
.co-head .bak-note>p:first-child{display:inline;margin:0 8px 0 0}
.co-head .bak-acts{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px;vertical-align:middle}
.co-head .bak-acts>.btn-sm{width:auto;flex:none;min-height:32px;padding:4px 10px}
.co-head .bak-acts>.btn-sm:not(.primary){padding:4px 2px;border:0;background:none;box-shadow:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.co-abin{display:inline-flex;align-items:center;gap:6px}
/* the cards view's tools: the filter, View and sort, Select, on one row */
.co-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.co-controls .co-filter{flex:1 1 180px;min-width:0}
.co-controls .co-filter input{width:100%}

@media (pointer:coarse){
  .co-head .bak-acts>.btn-sm{min-height:44px}
  .co-moremenu button,.co-addmore>summary,.co-ledger .cl-inline,.co-lastadd .cl-inline{min-height:44px}
}
@media (width < 720px){
  .ph-x .co-actions{display:flex;width:100%}
  .ph-x .co-actions>.btn-sm,.ph-x .co-actions>.co-more{flex:1 1 0}
  .ph-x .co-actions .co-more>.btn-sm{width:100%}
  .ph-x .co-actions .btn-sm{min-height:44px}
  .co-moremenu{left:auto;right:0;min-width:min(16rem,calc(100vw - 32px))}
  .co-ledger{font-size:var(--fs-sm)}
  .co-ledger .co-lv{flex-basis:100%}
  .co-ledger{gap:2px 14px}
  .co-head .bak-note>p:first-child{display:block;margin:0 0 2px}
  .co-controls .co-filter{flex:1 1 140px}
  .co-controls>.btn-sm{min-height:44px;padding-inline:10px}
  .co-tabwrap .co-tabs{margin:var(--sp-md) 0 var(--sp-sm)}
  .co-head .co-bak{margin-top:2px}
}

/* ---- Trade at a shop counter (attackers A9 #6 and #11, A10 #25): the cards with no price in the headline, a quiet
   line under each add box instead of a notice over the form, and on a phone one row per card with a sticky bar */
.tr-tot-unp{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.tr-addsay{margin:6px 0 0;font-size:var(--fs-sm);color:var(--muted);min-height:1.2em}
.tr-addsay[hidden]{display:none}
.tr-lsum{display:none}
.tr-dk-unp{display:block;font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
@media (width < 720px){
  .tr-line{grid-template-columns:44px minmax(0,1fr) auto 44px;grid-template-areas:"pic name price x" "pic sum qty qty" "opts opts opts opts";gap:2px 10px;padding:8px 0}
  .tr-thumb img{width:44px}
  .tr-lname{font-size:var(--fs-md);line-height:1.3}
  .tr-lsum{grid-area:sum;display:inline-flex;align-items:center;justify-self:start;max-width:100%;min-height:44px;padding:0 4px 0 0;font:inherit;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);background:none;border:0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .tr-lsum::after{content:"";flex:none;width:6px;height:6px;margin:0 0 3px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  .tr-line.is-open .tr-lsum::after{transform:rotate(-135deg);margin-bottom:-3px}
  .tr-lopts{display:none}
  .tr-line.is-open .tr-lopts{display:flex;padding:4px 0 2px}
  .tr-lqty{justify-self:end}
  .tr-lprice{align-self:start}
  .tr-lprice small{max-width:13em;margin-left:auto}
  .tr-lx{align-self:start}
  /* the give, get and difference bar at the foot of the screen stays while you type into either side (A9 #11: it went
     away in the second side's add box); it steps aside only while a phone keyboard leaves the page too little room
     (trade.js: tr-kbd) */
  .tr-typing .tr-dock{display:flex}
  .tr-kbd .tr-dock{display:none}
}

/* ---- a one-line source: what the figures are and their date, the ranges and gaps behind it (Market; D6's site-wide
   source component can replace this one) */
.o8-src{margin:8px 0 0;max-width:90ch;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.o8-src>summary{display:block;min-height:32px;padding:4px 0}
.o8-src>summary b{font-weight:700;color:var(--ink)}
.o8-src>p{margin:4px 0 0}
@media (pointer:coarse){
  /* a block that grows to 44 px by its padding, so its words stay one sentence (attacker B1-N4: a flex row ran
     "Prices through" into the date) */
  .o8-src>summary{min-height:44px;padding:11px 0}
  #mk-gomovers{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- a copy's own value (Collection): its badge, and its fieldset in the copy's details */
.co-b.own{background:var(--fill);color:var(--ink);border:1px solid var(--rule2)}
.co-ownv .co-wide{grid-column:1/-1}
.co-ownv>p{margin:0 0 8px}

/* ---- a stack of more than one, where a slab or your own figure is for one copy (B5-2) */
.co-ovq{margin:0 0 4px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.co-ovn{display:grid;gap:2px;margin:0 0 8px}

/* ---- Intake on a phone (B5, screen 2): the head's other actions under More, the settings folded to one line; labels
   in sentence case (B5-25: g_collection.css set them in capitals) */
.in .in-cl{text-transform:none;letter-spacing:normal}
.in-more{position:relative;display:inline-block}
.in-moremenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:grid;gap:4px;min-width:12rem;padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.in-moremenu[hidden]{display:none}
.in-moremenu .btn-sm{justify-content:flex-start;width:100%}
.in-ctxd{margin:var(--sp-sm) 0}
.in-ctxd>summary{display:block;min-height:32px;padding:6px 0;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.in-ctxd>summary #in-ctxs{color:var(--ink)}
.in-ctxd[open]>summary{margin-bottom:6px}
.cr-how{margin:8px 0 0}
/* on the camera's dark screen: its own light text, never the page's (T1, the dream wave's regression: muted text on the
   dark screen read at 2.3:1 in the light theme) */
.cr-how>summary{display:block;min-height:32px;padding:4px 0;font-size:var(--fs-sm);color:var(--on-media-dim)}
.cr-how .cr-howl{color:var(--on-media);text-decoration:underline;text-underline-offset:3px}
@media (pointer:coarse){
  .in-ctxd>summary,.cr-how>summary{min-height:44px;padding:11px 0}
  .in-moremenu .btn-sm{min-height:44px}
  /* About prices' "Read store prices" at the end of a sentence takes a 44 px tap without moving the text (T1, the dream
     wave's regression: 23 px) */
  .co-pfacts dd .cl-inline{position:relative}
  .co-pfacts dd .cl-inline::after{content:"";position:absolute;inset:-12px 0}
}

/* ---- Trade's head (B5, screen 3): Share link and More on a phone, the other five under More; every action in one row
   on a wider screen. The network note and "Ready for the shop" as one line each */
.tr-morebtn{display:none}
.tr-moremenu{display:contents}
.tr-netnote{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink)}
.tr-netnote[hidden]{display:none}
.tr-shopnote{margin:6px 0 0}
@media (width < 720px){
  .tr-actions{position:relative}
  .tr-morebtn{display:inline-flex}
  .tr-moremenu{display:none}
  .tr-actions.is-open .tr-moremenu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;display:grid;gap:4px;padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
  .tr-actions.is-open .tr-moremenu .btn-sm{justify-content:flex-start;width:100%;min-height:44px}
  /* the two add boxes before the totals: the bar at the foot of the screen carries give, get and the difference */
  #tr-app{display:flex;flex-direction:column}
  #tr-app>.tr-sides{order:2}
  #tr-app>.tr-sum{order:3}
  #tr-app>.tr-facts{order:4}
  #tr-app>.tr-dock,#tr-app>#tr-live{order:5}
}

/* ---- the Haves List: every paper card to tick, when none are marked for trade (B5-14) */
.hs-alllist{display:grid;gap:0;max-height:min(50dvh,24rem);overflow:auto;margin:6px 0;padding:0 4px;border:1px solid var(--rule);border-radius:var(--r-md)}
.hs-alllist .hs-allrow{min-height:44px;align-items:center}

/* ---- Market: the movers' choices folded to one line that names them (B1-A10-9) */
.mk-ctld{margin:0 0 6px}
.mk-ctld>summary{display:block;min-height:32px;padding:6px 0;font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.mk-ctld[open]>summary{margin-bottom:6px}

/* ---- the inline buttons that read as links take the system's smallest height, 28 px (B1-A10-14: 20 to 24 px) */
.co-ledger .co-pabout,#mk-gomovers{display:inline-flex;align-items:center;min-height:28px}
@media (pointer:coarse){
  .co-ledger .co-pabout,#mk-gomovers{min-height:44px}
  .mk-ctld>summary{min-height:44px;padding:11px 0}
  /* a link inside Market's text reaches 24 px on a touch screen by its padding; the line doesn't move (B1-A10-28b) */
  .mk a:not([class*="btn"]),main:has(#mk-app) .how a:not([class*="btn"]){padding-block:3px}
}
/* what an add did reads in the ink, not green (B5, screen 2): the line is a report, and green read as an instruction */
.in .in-say.is-ok{color:var(--ink)}

/* D9, draft night and cube (round two of the dream wave, October 23, 2026): Draft Sim, Set Lab and Cube Generator.
   Loads after every group file, so a rule here says something more particular about these tools' own parts. Tokens
   only (design_rules.py), breakpoints 480, 720, 1024 and 1100, nothing sticks in a short window. */

/* ---------------------------------------------------------------- Draft Sim: one pick bar (A10 #20 and screen 16)
   The pack's pictures stand alone; the card you chose is ringed, and one bar under the pack, held at the foot of the
   screen while the pack scrolls, names it with its pick button */
.ds .ds-pickbar{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:4px calc(-1 * var(--gut)) 0;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));min-height:calc(var(--ctl-h-lg) + 16px);background:var(--ground);border-top:1px solid var(--rule2)}
.ds .ds-pickbar p{margin:0;min-width:0;font-size:var(--fs-md);line-height:1.35}
.ds .ds-pbname{flex:1 1 12rem;overflow-wrap:anywhere}
.ds .ds-pbname b{color:var(--ink)}
.ds .ds-pbhint{color:var(--muted)}
.ds .ds-pickgo{min-height:var(--ctl-h-lg);padding-inline:24px;font-size:var(--fs-md);font-weight:700}
/* the chosen card: a ring with a gap, so it never reads as the pointer's own ring, and the picture stays uncovered */
.ds .ds-card[data-sel]{box-shadow:0 0 0 3px var(--ground),0 0 0 6px var(--ink)}
.ds .ds-card[data-sel]:focus-visible{box-shadow:0 0 0 3px var(--ground),0 0 0 6px var(--ink),var(--shadow-2)}@media (hover:hover){.ds .ds-card[data-sel]:hover{box-shadow:0 0 0 3px var(--ground),0 0 0 6px var(--ink),var(--shadow-2)}}
@media (width < 720px){.ds .ds-pickgo{flex:1 1 auto}}
/* a short window (400% zoom, a phone on its side): the bar scrolls with the page, as the pick's head does (A11 #15) */
@media (height < 480px){.ds .ds-pickbar{position:static;margin-inline:0;padding-inline:0}}
@media (forced-colors:active){.ds .ds-card[data-sel]{outline:3px solid CanvasText;outline-offset:3px}}

/* ---------------------------------------------------------------- Set Lab: the curve drawn, leading the page (A10, screen
   11). Small multiples on one scale: thin columns from one baseline, a rounded data end, one neutral ink */
.sl .sl-mult{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:20px 28px;margin:12px 0 4px}
.sl .sl-pan{min-width:0}
.sl .sl-pancap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:24px;margin:0 0 4px;font-size:var(--fs-sm);line-height:1.35;color:var(--ink)}
.sl .sl-pancap > span:last-child{color:var(--muted);font-size:var(--fs-xs)}
.sl .sl-cols{display:flex;align-items:stretch;gap:2px;height:96px;padding-top:20px;border-bottom:1px solid var(--rule2)}
.sl .sl-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.sl .sl-col > i{flex:none;display:block;width:min(100%,24px);background:var(--muted);border-radius:var(--r-sm) var(--r-sm) 0 0}
@media (hover:hover){.sl .sl-col:hover > i{background:var(--ink)}}
.sl .sl-colv{flex:none;font-size:var(--fs-xs);font-weight:700;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.sl .sl-xs{display:flex;gap:2px;margin-top:4px}
.sl .sl-xs span{flex:1 1 0;min-width:0;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
/* the panels sit seven across when the page's column has room for them (a container query: the side menu changes it) */
.sl #sl-chart{container:slchart / inline-size}
@container slchart (width >= 860px){.sl .sl-mult{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 22px}}
@container slchart (width < 440px){.sl .sl-mult{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.sl .sl-cols{height:84px}}
@media (forced-colors:active){.sl .sl-col > i{forced-color-adjust:none;background:CanvasText}.sl .sl-cols{border-color:CanvasText}}
/* a share of a pack no slot deals: a quiet 0, so the numbers that are there stand out */
.sl .sl-z{color:var(--faint)}

/* ---------------------------------------------------------------- Draft Sim: drafting with friends by link (draftlink.js) */
.ds .dl-intro p,.ds .dl-start p{max-width:72ch}
.ds .dl-note{margin:0 0 var(--sp-lg)}
.ds .dl-start textarea{width:100%;max-width:28rem;min-height:7.5rem;font:inherit;font-size:var(--fs-lg);padding:8px 10px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.ds .dl-prow{align-items:flex-start}
.ds .dl-head .gf-h{margin-bottom:4px}
.ds .dl-turn{margin:8px 0 6px;font-size:var(--fs-lg)}
.ds .dl-order{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:6px 0 8px;padding:0}
.ds .dl-order li{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-h);padding:2px 10px;border:1px solid var(--rule2);border-radius:var(--r-pill);font-size:var(--fs-sm);color:var(--ink)}
.ds .dl-order li > span:first-child{font-weight:700;color:var(--muted)}
.ds .dl-order li.dl-now{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:700}
.ds .dl-me .btn-xs{margin:2px 4px 2px 0}
.ds .dl-send{border-color:var(--rule2)}
.ds .dl-send.dl-sendnow{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ds .dl-send .gf-h{margin-bottom:4px}
.ds .dl-wait p,.ds .dl-done p{margin:0 0 8px}
.ds .dl-tabs{margin-top:var(--sp-xl)}
.ds .dl-take[aria-pressed="true"]{font-weight:700;box-shadow:inset 3px 0 0 var(--ink);padding-left:10px}
.ds .dl-col li:has(.dl-take[aria-pressed="true"]){background:var(--sel)}
.ds .dl-pickbar{margin-top:var(--sp-lg)}
.ds .dl-pools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px 28px}
.ds .dl-pool .gf-h{padding-bottom:6px;border-bottom:1.5px solid var(--ink);margin:0 0 6px}
.ds .dl-plist{list-style:none;margin:6px 0 0;padding:0}
.ds .dl-plist li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.ds .dl-log{list-style:none;padding:0;margin:0}
.ds .dl-log .dl-day{margin:var(--sp-md) 0 2px;padding-bottom:4px;border-bottom:1.5px solid var(--ink);font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.ds .dl-log .dl-t{display:inline-block;min-width:2.6em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.ds .dl-split{border-color:var(--ink)}
@media (pointer:coarse){.ds .dl-order li{min-height:var(--tap)}.ds .dl-take{min-height:var(--tap)}}
.ds .dl-tabs > button{gap:6px}
.ds .dl-tabs > button > span{color:inherit;font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- Draft Sim: the sealed pool workbench */
.ds .ds-pooltab textarea{display:block;width:100%;min-height:9rem;margin:6px 0 10px;padding:8px 10px;font-family:var(--code);font-size:var(--fs-md);line-height:1.45;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.ds .ds-poolsrc{margin:4px 0 0}
.ds .ds-pvsw{margin-top:var(--sp-lg)}
.ds .ds-plshare{margin-top:8px}
.ds .ds-pvcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:24px 28px;margin-top:8px;align-items:start}
.ds .ds-pvcol{min-width:0}
.ds .ds-pvcol .gf-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 4px;padding-bottom:6px;border-bottom:1.5px solid var(--ink)}
.ds .ds-pvcol .gf-h > span{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
.ds .ds-pvh{margin:10px 0 2px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.ds .ds-pvlist{list-style:none;margin:0;padding:0}
.ds .ds-pvlist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;min-height:var(--ctl-h);padding:3px 0 3px 8px;border-bottom:1px solid var(--rule);font-size:var(--fs-md)}
.ds .ds-pvlist li.ds-pvon{box-shadow:inset 3px 0 0 var(--ink)}
.ds .ds-pvlist li:not(.ds-pvon) .ds-nl{color:var(--muted)}
.ds .ds-pvtog{min-width:3.6em}
.ds .ds-pvtog[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.ds .ds-pvstep{display:inline-flex;align-items:center;gap:4px}
.ds .ds-pvstep b{min-width:2.6em;text-align:center;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
@media (pointer:coarse){.ds .ds-pvlist li{min-height:var(--tap)}.ds .ds-pvtog,.ds .ds-pvstep .btn-xs{min-height:var(--tap);min-width:var(--tap)}}

/* ---------------------------------------------------------------- Cube Generator: hover pictures on the list (A10 #24 needs
   no CSS: data-peek), drafted 1,000 times, changes, pack rules */
.cb .cb-simrun{margin:0 0 var(--sp-lg);padding:var(--sp-md) var(--sp-lg);border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--surface)}
.cb .cb-simrun p{margin:0 0 8px}
.cb .cb-simrun .ms-row{margin:4px 0 8px}
.cb .cb-simline{margin:0 0 8px;font-size:var(--fs-md)}
.cb .cb-sim .gf-h{margin:var(--sp-xl) 0 8px}
.cb .cb-simcards{min-width:16rem;line-height:1.6}
.cb .cb-simctl{align-items:center;gap:8px 12px;margin-bottom:8px}
.cb .cb-simctl input{font:inherit;font-size:var(--fs-md);min-height:var(--ctl-h);padding:4px 10px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);width:14rem;max-width:100%}
.cb .cb-simt td,.cb .cb-simt th{font-variant-numeric:tabular-nums}
.cb .cb-simtog{margin:0;padding-left:1.2em;line-height:1.7}
.cb progress,.ds progress{width:100%;max-width:28rem;height:10px;accent-color:var(--ink)}
.cb .cb-changes section + section{margin-top:var(--sp-2xl)}
.cb .cb-vers{list-style:none;margin:0;padding:0}
.cb .cb-ver{padding:10px 0;border-bottom:1px solid var(--rule)}
.cb .cb-ver p{margin:4px 0 0;line-height:1.6}
.cb .cb-verh{font-size:var(--fs-md)}
.cb .cb-vk{display:inline-block;min-width:4.2em;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.cb .cb-vercut .fr-card{text-decoration:line-through}
.cb .cb-ver .ms-row{margin-top:6px}
.cb .cb-cmp textarea,.cb .cb-prbund textarea{display:block;width:100%;max-width:40rem;margin:6px 0 8px;padding:8px 10px;font-family:var(--code);font-size:var(--fs-md);border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.cb .cb-cmph{margin:var(--sp-lg) 0 4px;font-size:var(--fs-md)}
.cb .cb-cmph span{color:var(--muted);font-weight:400}
.cb .cb-pr{margin-bottom:var(--sp-2xl)}
.cb .cb-prslots{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.cb .cb-prslot{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;gap:4px 8px;align-items:center}
.cb .cb-prslot input{font:inherit;font-size:var(--fs-md);min-height:var(--ctl-h);padding:4px 8px;border:1px solid var(--rule2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);width:100%}
.cb .cb-prq input{font-family:var(--code)}
.cb .cb-prcount{grid-column:2 / -1;color:var(--muted)}
.cb .cb-prbund label{display:block;margin-top:var(--sp-md);font-size:var(--fs-sm)}
.cb .cb-packh{margin:var(--sp-lg) 0 6px}
@media (pointer:coarse){.cb .cb-prslot input,.cb .cb-simctl input{min-height:var(--tap)}}
.cb :is(.cb-simcards,.cb-simtog,.cb-ver,.cb-cmp) .fr-card.linkish{font-weight:400}
.cb .cb-simpairs th,.cb .cb-simpairs td{vertical-align:top}
.ds .dl-barbtns{margin:0;gap:8px}
@media (width < 720px){.ds .dl-barbtns{flex:1 1 100%}.ds .dl-barbtns .btn-sm{flex:1 1 auto}}
/* pack 1, pick 1 by link (daily.js): the link fields take the row, the dialog's parts keep their space */
.dq-send .lf-row input,.dq #dq-paste{flex:1 1 16rem;min-width:0;max-width:40rem}
#dq-out .dq-send{margin-top:var(--sp-md)}
.ms-modal #dq-make{margin-top:var(--sp-md)}
.dq .dq-ans{margin-bottom:var(--sp-md)}
@media (pointer:coarse){.dq-send .lf-row input,.dq .lf-row input{min-height:var(--tap)}}