/* Header additions: the set slot, Menu groups and a phone nav that fits.
   Selectors carry :root so they outrank the page-family header rules in inner.css and home.css. */
:root .site-header nav.primary-nav>a.nav-set{display:flex;align-items:center;gap:10px;color:var(--ac);padding-left:22px;border-left:1px solid var(--soft)}
:root .site-header .nav-set-chip{font:600 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--soft);padding:3px 7px;white-space:nowrap}
:root .site-header .more-nav nav .menu-group{margin:0 12px 2px;font:600 13px var(--body);color:var(--muted)}
/* One search field at every width. It flexes between 150 and 300px beside the utilities;
   on phones it folds to its icon (see below). The theme switch lives in Menu. */
:root body .site-header .header-search-form{display:flex;align-items:stretch;flex:0 1 300px;min-width:150px;height:40px;border:1px solid var(--soft);background:var(--bg2)}
:root body .site-header .header-search-form:focus-within{border-color:var(--ac)}
:root .site-header .header-find{display:flex;align-items:center;justify-content:center;flex:none;width:36px;color:var(--muted);cursor:text}
:root .site-header .header-find-field{display:flex;flex:1;min-width:0}
:root body .site-header .header-search-form input{flex:1;width:auto;min-width:0;border:0;background:transparent;color:var(--ink);padding:0 8px 0 0;font:15px var(--body);outline:none}
:root body .site-header .header-search-form button{flex:none;border:0;border-left:1px solid var(--soft);background:transparent;color:var(--ac);font:600 14px var(--body);padding:0 12px;cursor:pointer;min-height:0}
:root body .site-header .header-search-form button:hover{background:var(--ac-soft)}
:root body .site-header .header-search{display:none}
:root body.home-page .site-header .header-actions{min-width:0;justify-content:flex-end;justify-self:stretch}
/* The masthead's utility column sizes to its content, so the field asks for its full width there. */
@media(min-width:701px){:root body.home-page .site-header .header-search-form{width:300px}}
/* Menu: theme first, then three short groups in two columns so nothing scrolls inside it. */
:root .site-header .more-nav nav{width:440px;column-count:2;column-gap:8px;max-height:none;overflow:visible}
:root .site-header .more-nav .header-menu-tools{column-span:all;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 8px 12px;margin:0 0 4px;border-bottom:1px solid var(--soft);font:14px var(--body);color:var(--muted)}
:root .site-header .more-nav .header-menu-tools button{min-height:40px;padding:0 12px;border:1px solid var(--soft);background:none;color:var(--ink);font:600 14px var(--body);cursor:pointer}
:root .site-header .more-nav .menu-section{break-inside:avoid;padding:8px 0 6px}
:root .site-header .more-nav nav a{min-height:44px;display:flex;align-items:center;padding:0 12px}
/* The account menu shows its avatar only (its label names it) until the one-row header has room. */
@media(max-width:1700px){:root .site-header .player-menu summary>span:last-child{display:none}}
/* Laptops: where one row can't fit the destinations, the set slot, the account controls and a search
   field of at least 160px, the destinations take their own row (as below 1241px). Measured: signed out
   that holds up to 1411px; signed in (the pre-paint player hint), the Playing chip and account menu need it up to 1500px. */
@media(min-width:1241px) and (max-width:1411px){
:root body.utility-page .site-header{grid-template-columns:auto minmax(0,1fr);gap:0 24px;padding-top:10px}
:root body.utility-page .site-header .header-actions{grid-column:2}
:root body.utility-page .site-header .primary-nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--soft);margin-top:10px;overflow-x:auto;gap:24px}
:root body.utility-page .site-header .primary-nav>a{min-height:44px;padding-block:10px}
}
@media(min-width:1412px) and (max-width:1500px){
:root[data-player=in] body.utility-page .site-header{grid-template-columns:auto minmax(0,1fr);gap:0 24px;padding-top:10px}
:root[data-player=in] body.utility-page .site-header .header-actions{grid-column:2}
:root[data-player=in] body.utility-page .site-header .primary-nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--soft);margin-top:10px;overflow-x:auto;gap:24px}
:root[data-player=in] body.utility-page .site-header .primary-nav>a{min-height:44px;padding-block:10px}
}
/* One-row header up to 1700px: the Playing chip keeps its deck art and star, the deck name is in its label. */
@media(min-width:1501px) and (max-width:1700px){:root .site-header .playing-toggle .playing-name{display:none}}
/* Phones: the field opens under the header while focused (or just tapped), above the page. */
@media(max-width:700px){
:root body .site-header .header-search-form{flex:none;min-width:0;width:auto;height:44px;border:0;background:none}
:root .site-header .header-find{width:40px;height:44px;color:var(--ink)}
:root .site-header .header-find-field{position:absolute;left:0;right:0;top:100%;z-index:45;gap:0;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--soft);opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0)}
:root .site-header .header-search-form:is(:focus-within,:hover) .header-find-field{opacity:1;pointer-events:auto;clip-path:none}
:root .site-header .header-search-form:is(:focus-within,:hover) .header-find{color:var(--ac)}
:root body .site-header .header-find-field input{height:44px;border:1px solid var(--ac);background:var(--bg2);padding:0 12px;font-size:16px}
:root body .site-header .header-find-field button{height:44px;border:1px solid var(--ac);border-left:0;background:var(--ac);color:var(--ac-ink)}
:root .site-header .more-nav{position:static}
:root .site-header .more-nav nav{position:absolute;left:0;right:0;top:100%;width:auto;z-index:46;column-gap:4px;padding:8px 8px 12px;border-inline:0}
}
/* The narrowest phones keep search in Menu instead. */
:root .site-header .more-nav nav a.menu-search-link{display:none;column-span:all}
@media(max-width:340px){:root body .site-header .header-search-form{display:none}:root .site-header .more-nav nav a.menu-search-link{display:flex}}
/* Phones: the set of the moment is the last destination in the nav row, not a third header row,
   so the header stays near 110px. Its page carries the dates; the row scrolls on the narrowest phones. */
@media(max-width:700px){
:root body .site-header nav.primary-nav{gap:6px;justify-content:space-between;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-top:6px}
:root body .site-header nav.primary-nav::-webkit-scrollbar{display:none}
:root body .site-header nav.primary-nav>a{font-size:16px}
:root body .site-header nav.primary-nav>a.nav-set{display:flex;padding-left:0;border-left:0;gap:0;color:var(--ink)}
:root body .site-header nav.primary-nav>a.nav-set .nav-set-chip{display:none}
}
@media(min-width:421px) and (max-width:700px){:root body .site-header nav.primary-nav>a{font-size:17px}}
@media(max-width:374px){:root body .site-header nav.primary-nav{gap:14px;justify-content:flex-start}}
/* Phones: the wordmark yields so Add, Sign in, search and Menu fit on one row. */
@media(max-width:420px){:root body.utility-page .site-header .brand-row .wordmark{font-size:30px}}
@media(max-width:374px){:root body.utility-page .site-header .brand-row .wordmark{font-size:24px}:root body .site-header .header-actions{gap:4px}}
/* Events: upcoming play and tournament results are two tabs of one destination. */
.event-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.event-tabs a{font:500 15px var(--body);color:var(--ink);text-decoration:none;border:1px solid var(--soft);padding:10px 14px;min-height:44px;box-sizing:border-box;display:flex;align-items:center}
/* A tab is not a button: the current tab is ink on a raised fill with an accent underline. */
.event-tabs a[aria-current]{background:var(--bg2);border-color:var(--ink);color:var(--ink);box-shadow:inset 0 -3px 0 var(--ac)}
/* The Playing chip: the pinned deck's code and Rift Atlas from any page. */
.playing-chip{position:relative;display:flex;align-items:center}
.playing-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px 4px 4px;background:var(--bg2);border:1px solid var(--soft);color:var(--ink);font:600 14px var(--body);cursor:pointer;white-space:nowrap}
.playing-toggle:hover,.playing-toggle[aria-expanded=true]{border-color:var(--ac);color:var(--ac)}
.playing-toggle img{width:20px;height:28px;display:block}
.playing-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:300px;display:grid;gap:8px;padding:16px;background:var(--bg2);border:1px solid var(--soft);box-shadow:0 12px 32px #0006}
.playing-panel .button{width:100%;justify-content:center;font:600 16px/1.2 var(--body);min-height:44px}
.playing-label{margin:0;font:13px var(--mono);text-transform:uppercase;color:var(--muted)}
.playing-legend,.playing-status{font-size:13px;color:var(--muted);margin:0}
.playing-status:empty{display:none}
.playing-stop{background:none;border:0;padding:6px 0;color:var(--muted);font:14px var(--body);text-align:left;cursor:pointer;text-decoration:underline}
.playing-star{color:var(--ac)}
/* Phones: the star alone; the button's label still names the deck. */
@media(max-width:600px){.playing-chip{position:static}.playing-toggle{padding:4px 10px}.playing-toggle img,.playing-toggle .playing-name{display:none}.playing-panel{left:12px;right:12px;width:auto}}
/* Footer: four short groups (read, look up, play, Riftwatch), then the Riot notice. */
:root .footer{padding:40px max(24px,calc((100vw - 1376px)/2)) 32px;border-top:1px solid var(--soft);gap:28px 48px}
:root .footer-brand{font:800 28px/1 var(--head);letter-spacing:-.02em}
:root .footer nav{flex:1 1 640px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px}
.footer-group{display:flex;flex-direction:column;align-items:flex-start}
.footer-group-name{margin:0 0 4px;font:600 14px/1.5 var(--body);color:var(--ink)}
:root .footer nav a{min-height:36px;display:inline-flex;align-items:center;gap:6px}
@media(max-width:700px){:root .footer{padding:32px 16px 28px}:root .footer nav{grid-template-columns:repeat(2,minmax(0,1fr))}:root .footer nav a{min-height:40px}}
/* Back to top: quiet ink in the corner, shown by client.mjs after three screens of scrolling.
   Phone pages with their own bottom bar (deck dock, Add bar) and the builder keep the corner clear. */
.to-top{position:fixed;z-index:15;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;background:var(--bg2);border:1px solid var(--soft);color:var(--ink);font:600 14px var(--body);text-decoration:none;box-shadow:0 6px 18px #0004}
.to-top:hover{border-color:var(--ink);text-decoration:none}
.to-top[hidden],body[data-page-family=builder] .to-top{display:none}
@media(max-width:720px){body:has(.dk-dock:not([hidden]),.add-bar) .to-top{display:none}}
/* Home on small tablets: the masthead keeps a real wordmark beside the account controls, so search
   folds to its icon as on phones and opens a full-width field under the header. */
@media(min-width:701px) and (max-width:900px){
:root body.home-page .site-header .header-search-form{flex:none;min-width:0;width:auto;height:44px;border:0;background:none}
:root body.home-page .site-header .header-find{width:40px;height:44px;color:var(--ink)}
:root body.home-page .site-header .header-find-field{position:absolute;left:0;right:0;top:100%;z-index:45;gap:0;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--soft);opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0)}
:root body.home-page .site-header .header-search-form:is(:focus-within,:hover) .header-find-field{opacity:1;pointer-events:auto;clip-path:none}
:root body.home-page .site-header .header-find-field input{height:44px;border:1px solid var(--ac);background:var(--bg2);padding:0 12px;font-size:16px}
:root body.home-page .site-header .header-find-field button{height:44px;border:1px solid var(--ac);border-left:0;background:var(--ac);color:var(--ac-ink)}
}
/* Phones with a Playing deck: the star keeps its size, search moves into Menu, and the wordmark
   takes the room that is left so nothing slides under it. Narrow phones shorten Add to its plus. */
.playing-chip{flex:none}
@media(max-width:600px){
:root body .site-header:has(.playing-chip:not([hidden])) .header-search-form{display:none}
:root body .site-header:has(.playing-chip:not([hidden])) .more-nav nav a.menu-search-link{display:flex}
:root body .site-header:has(.playing-chip:not([hidden])) .brand-row .wordmark{font-size:clamp(21px,calc((100vw - 260px)/4.4),32px)}
}
@media(max-width:380px){
:root body .site-header:has(.playing-chip:not([hidden])) .player-add{font-size:0;padding:0 14px}
:root body .site-header:has(.playing-chip:not([hidden])) .player-add>span[aria-hidden]{font-size:20px}
:root body .site-header:has(.playing-chip:not([hidden])) .brand-row .wordmark{font-size:clamp(21px,calc((100vw - 234px)/4.4),32px)}
}

/* Header A: the slim bar. --top-bar is its height while it shows, so page sticky bars sit under it. */
/* The sticky bars slide with it (a transition on :root itself would restyle every element each frame),
   and in-page links land below it. */
:root{--top-bar:0px;scroll-padding-top:var(--top-bar)}
:root[data-top-bar]{--top-bar:calc(50px + env(safe-area-inset-top,0px))}
:is(.rulings-tools,.guide-contents,.guide-toc,.dk-side,.deck-study-heading,.db-workspace>.db-deck,.db-search-head,.db-toolbar,.card-tool-header,.card-reference .reference-art,.hub-nav,.pe-live,.pe-form .player-form-actions,.add-stack,.path-stage-head){transition:top .22s cubic-bezier(.2,.8,.2,1)}
.slim-bar{position:fixed;left:0;right:0;top:0;z-index:44;display:flex;align-items:center;gap:2px;height:calc(50px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(6px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));background:var(--bg);background:color-mix(in srgb,var(--bg) 95%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--soft);transform:translateY(-100%);visibility:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s}
.slim-bar.is-on{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.slim-mark{flex:none;display:flex;align-items:center;min-height:44px;padding-right:12px;font:800 21px/1 var(--head);text-transform:uppercase;color:var(--ink);text-decoration:none}
.slim-mark .accent{color:var(--brand)}
.slim-title{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 0 0 12px;border:0;border-left:1px solid var(--soft);background:none;color:var(--ink);text-align:left;cursor:pointer}
.slim-title b,.slim-title small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slim-title b{font:700 19px/1.1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.slim-title small{font:500 13px/1.3 var(--body);color:var(--muted)}
.slim-bar>button:not(.slim-title){flex:none;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px;border:0;background:none;color:var(--ink);font:500 15px var(--body);cursor:pointer}
.slim-search{position:absolute;inset:env(safe-area-inset-top,0px) 0 0 0;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;background:var(--bg)}
.slim-search[hidden]{display:none}
.slim-bar.is-search>:not(.slim-search){visibility:hidden}
.slim-search input{flex:1;min-width:0;height:40px;border:1px solid var(--ac);background:var(--bg2);color:var(--ink);font:16px var(--body);padding:0 12px;outline:0}
.slim-search button{min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink);font:500 15px var(--body);cursor:pointer}
@media(min-width:701px){.slim-bar{padding-inline:24px 16px}}
@media print{.slim-bar{display:none}}

/* One Menu sheet: drops from the top on phones, a panel under the header on wider screens. */
html:has(.menu-sheet[open]){overflow:hidden;scrollbar-gutter:stable}
:root body .menu-sheet{position:fixed;inset:0 0 auto 0;margin:0;padding:0;width:100%;max-width:none;max-height:100dvh;overflow:auto;overscroll-behavior:contain;border:0;border-bottom:1px solid var(--soft);background:var(--bg);color:var(--ink)}
:root body .menu-sheet::backdrop{background:#0008}
:root body .menu-sheet[open]{animation:menu-in .2s cubic-bezier(.2,.8,.2,1)}
:root body .menu-sheet.is-closing{animation:menu-out .16s ease-in forwards}
:root body .menu-sheet.is-closing::backdrop{opacity:0;transition:opacity .16s}
@keyframes menu-in{from{transform:translateY(-24px);opacity:0}}
@keyframes menu-out{to{transform:translateY(-24px);opacity:0}}
:root body .menu-sheet-body{padding:env(safe-area-inset-top,0px) 0 calc(16px + env(safe-area-inset-bottom,0px))}
:root body .menu-sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 16px;background:var(--bg);border-bottom:1px solid var(--soft)}
:root body .menu-sheet-head h2{margin:0;font:700 24px/1 var(--head);text-transform:uppercase;outline:0}
:root body .menu-sheet-head button{min-height:44px;padding:0 12px;border:0;background:none;color:var(--ink);font:500 15px var(--body);cursor:pointer}
:root body .menu-sheet-places{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px 4px}
:root body .menu-sheet-places a{min-height:52px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--soft);background:var(--bg2);color:var(--ink);text-decoration:none;font:700 19px/1 var(--head);text-transform:uppercase}
:root body .menu-sheet-places a[aria-current]{border-color:var(--ink)}
:root body .menu-sheet-places .nav-set-name{font:inherit}
:root body .menu-sheet .header-menu-tools{display:flex;align-items:center;gap:6px;margin:12px 16px 4px;padding:0}
:root body .menu-sheet .header-menu-tools>span{flex:none;width:64px;font:500 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
:root body .menu-sheet .menu-section{display:inline-block;vertical-align:top;width:50%;padding:6px 0 2px}
:root body .menu-sheet .menu-group{margin:10px 16px 0;font:500 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
:root body .menu-sheet .menu-section a{min-height:44px;display:flex;align-items:center;padding:0 16px;color:var(--ink);text-decoration:none;font:500 16px var(--body)}
:root body .menu-sheet .menu-section a[aria-current]{box-shadow:inset 3px 0 0 var(--ink)}
:root body .menu-sheet a.menu-search-link{display:none}
@media(max-width:340px){:root body .menu-sheet a.menu-search-link{display:flex;min-height:44px;align-items:center;padding:0 16px;color:var(--ink)}}
@media(min-width:701px){
 :root body .menu-sheet{inset:12px 16px auto auto;width:440px;max-height:calc(100dvh - 24px);border:1px solid var(--soft);box-shadow:0 18px 48px #0006}
 :root body .menu-sheet::backdrop{background:#0004}
 :root body .menu-sheet:not(.from-bar) .menu-sheet-places{display:none}
}
@media(prefers-reduced-motion:reduce){:root body .menu-sheet[open],:root body .menu-sheet.is-closing{animation:none}.slim-bar,.slim-bar.is-on{transition:none}:is(.hub-nav,.db-search-head,.db-toolbar,.card-tool-header,.add-stack,.dk-side){transition:none}}

/* Theme: System, Light or Dark as one segmented control, in the Menu sheet and the no-script menu. */
:root .header-menu-tools[role=radiogroup] button{flex:1;min-height:44px;padding:0 10px;border:1px solid var(--soft);background:none;color:var(--muted);font:500 15px var(--body);cursor:pointer}
:root .header-menu-tools[role=radiogroup] button+button{margin-left:-1px}
:root .header-menu-tools[role=radiogroup] button[aria-checked=true]{position:relative;background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}

/* Phones: every tab grows by the same amount, so the labels sit evenly and the tap areas meet with no
   dead gaps between them. The narrowest phones scroll the row with snap and an edge fade. */
@media(max-width:700px){
 :root body .site-header nav.primary-nav{display:flex;gap:0;justify-content:stretch}
 :root body .site-header nav.primary-nav>a{flex:1 0 auto;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;text-align:center}
}
@media(max-width:360px){
 :root body .site-header nav.primary-nav{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
 :root body .site-header nav.primary-nav>a{scroll-snap-align:start}
}

/* 44 px hit areas by padding, not bigger type. */
:root .footer nav a{min-height:44px}
:root .site-header .brand-row .wordmark{padding-block:9px;margin-block:-9px}
:root body .site-header .more-nav summary{min-width:44px;justify-content:center}
@media(max-width:600px){:root .site-header .playing-toggle{min-width:44px;min-height:44px;justify-content:center}}
.breadcrumbs a,.reference-more{padding:12px 6px;margin-inline:-6px}

/* One toast (toast.mjs): compact, above the safe area and the builder dock, tap or swipe to dismiss. */
.rw-toast{position:fixed;z-index:60;inset:auto auto calc(16px + env(safe-area-inset-bottom,0px)) 50%;margin:0;width:max-content;max-width:min(520px,calc(100vw - 24px));overflow:visible;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px solid var(--ac);background:var(--bg2);color:var(--ink);box-shadow:0 10px 28px #0006;font:500 15px/1.4 var(--body);transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.rw-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rw-toast p{margin:0;min-width:0;padding:8px 0}
.rw-toast:not(:has(.rw-toast-action:not([hidden]))){padding-right:16px}
.rw-toast-action{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--ink);background:none;color:var(--ink);font:600 15px var(--body);cursor:pointer}
.rw-toast.is-top{inset:calc(max(var(--top-bar,0px),env(safe-area-inset-top,0px)) + 12px) auto auto 50%;transform:translate(-50%,-12px)}
.rw-toast.is-top.is-on{transform:translate(-50%,0)}
@media(max-width:900px){:root:has(.db-app[data-mode=builder][data-tab]) .rw-toast:not(.is-top){bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media(max-width:700px){.rw-toast,.rw-toast.is-top{left:12px;right:12px;width:auto;max-width:none;transform:translateY(12px)}.rw-toast.is-top{transform:translateY(-12px)}.rw-toast.is-on,.rw-toast.is-top.is-on{transform:none}}
@media(prefers-reduced-motion:reduce){.rw-toast{transition:none}}

/* Press states on touch screens, and a thin line when the next page is slow (header-client.mjs). */
@media(hover:none){:is(a,button,summary,[role=button],label:has(>input:is([type=checkbox],[type=radio]))):active{opacity:.6;transition:none}}
.nav-progress{position:fixed;left:0;top:0;z-index:70;height:2px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.nav-progress.is-on{opacity:1;animation:nav-progress 8s cubic-bezier(.1,.6,.2,1) forwards}
@keyframes nav-progress{from{transform:scaleX(.08)}to{transform:scaleX(.9)}}
@media(prefers-reduced-motion:reduce){.nav-progress.is-on{animation:none;transform:scaleX(.5)}}

/* Page to page: a short fade in Safari and Chrome, off under reduced motion. */
@view-transition{navigation:auto}
/* Moving between pages (Oct 7 review): the header leaves the fade and swaps in place, so it never dims,
   ghosts or slides; the page fades out to the background and the next one fades in, so two layouts never
   show at once. The slim bar appears only after the next page has scrolled. */
.site-header{view-transition-name:site-header}
.slim-bar{view-transition-name:slim-bar}
::view-transition-group(site-header),::view-transition-group(slim-bar),::view-transition-new(site-header),::view-transition-new(slim-bar){animation:none}
::view-transition-old(site-header),::view-transition-old(slim-bar){animation:none;opacity:0}
::view-transition-old(root){animation:rw-page-out .12s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:rw-page-in .2s cubic-bezier(0,0,.2,1) .12s both}
@keyframes rw-page-out{to{opacity:0}}
@keyframes rw-page-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Sign-in sheet (signin-sheet.mjs): a bottom sheet on phones, a panel on wider screens. */
:root .signin-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:92dvh;overflow:auto;padding:0;border:0;border-top:1px solid var(--soft);border-radius:14px 14px 0 0;background:var(--bg);color:var(--ink)}
:root .signin-sheet[open]{animation:signin-up .26s cubic-bezier(.2,.8,.2,1)}
@keyframes signin-up{from{transform:translateY(40px);opacity:0}}
:root .signin-sheet::backdrop{background:rgb(0 0 0/.65)}
.signin-body{display:grid;gap:12px;padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.signin-top{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.signin-top img{width:60px;height:auto;border-radius:4px}
:root .signin-top h2{margin:0;font:700 26px/1 var(--head);text-transform:uppercase;letter-spacing:0;outline:0}
.signin-top p{margin:6px 0 0;color:var(--muted);font:15px/1.4 var(--body)}
.signin-providers{display:grid;gap:8px}
.signin-providers form{margin:0}
.signin-providers .provider{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;border:1px solid var(--soft);background:var(--bg2);padding:0 16px;color:var(--ink);font:600 16px var(--body);cursor:pointer}
.signin-providers .provider svg{width:20px;height:20px;flex:none}
.signin-providers .provider:disabled{opacity:.6;cursor:default}
.signin-fine{margin:0;text-align:center;font:13px var(--body);color:var(--muted)}
.signin-later{justify-self:center;min-height:44px;padding:0 16px;border:0;background:none;color:var(--ink);font:500 15px var(--body);cursor:pointer}
.signin-next{margin:0 0 16px;padding:12px 14px;border:1px solid var(--ac);font:500 15px/1.4 var(--body)}
@media(min-width:701px){:root .signin-sheet{inset:0;margin:auto;width:440px;height:fit-content;border:1px solid var(--soft);border-radius:0}}
@media(prefers-reduced-motion:reduce){:root .signin-sheet[open]{animation:none}}

/* Shared controls (W1d). A main button that cannot be used yet is a quiet outline, never a dim cyan. */
:root .button.primary:disabled{background:none;border-color:var(--soft);color:var(--muted);opacity:1}
/* Touch screens: every control in the tools is at least 44 px (B-28, D-24, E-12). */
@media(hover:none){
 :is(.db-app,.player-profile,.player-page,.set-hub,.card-inspector,.dk-head,.card-header-lookup,.hub-nav,.add-tool) :is(button:not([data-swap-to]),.button,summary,select,input[type=search],input[type=text]){min-height:44px}
 :is(.db-app,.player-profile,.player-page,.set-hub,.card-inspector,.dk-head,.add-tool) button:not([data-swap-to]){min-width:44px}
 :is(.hub-nav,.player-tabs,.pe-tabs) :is(a,button){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .save-button{min-height:44px}
}