/* The kit in a real browser. Boards draw a 390x844 phone, so the kit pins its page chrome (top bar, page head, footer,
   tab bar, sheet, toast) to that frame with position:absolute. Here the same parts sit in the viewport instead, clear of the
   notch and the home indicator. Placement only: no sizes, colours or type change (KIT.md: a screen places, never restyles).
   A page opts in with <body class="k-app">. */
.k-app{margin:0;min-height:100svh;background:var(--bg);color:var(--text);font-family:'Suited Sans',system-ui,sans-serif;font-size:15px;line-height:1.45;
 -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.k-app *,.k-app *::before,.k-app *::after{box-sizing:border-box}
.k-app button{border:0;background:none;padding:0;cursor:pointer}
/* a kit button keeps the kit's own type and colour (kit.css .k-btn: weight 500, ivory; board parity 10-18f, 12.9). The :where()
   adds nothing to the specificity, so every other button resets exactly as before. */
.k-app button:where(:not(.k-btn)){font:inherit;color:inherit}
/* the board's reset (lib.py button{font:inherit}) still hands a kit button the page's line-height: .k-btn sets no line-height of its own */
.k-app button:where(.k-btn){line-height:inherit}
/* the same for a kit button drawn as a link (<a class="k-btn sec">, Replay, Edit): kit.css colour, not the parent's (board lib.py a{} is 0,0,1) */
.k-app a{text-decoration:none}
.k-app a:where(:not(.k-btn)){color:inherit}
/* the kit's link keeps its own grey (kit.css .k-link, --text-2): the resets above would otherwise make it ivory (board parity 10-18b) */
.k-app .k-link{color:var(--text-2)}
.k-app :focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* An indicator in a line of text (Home's 14 and 6/6, a night's header, hand counts, FriendPage's 64) is drawn on the screens
   as the board's inline ind (app-build ui.py): the line's own weight 400 and colour (--text-3 in a k-small, .52), a 16 icon
   4 from its value. A row's trail or sub and a top bar keep the kit's (kit.css .k-ind: 500 in --text-2, 14 icon), as drawn there (LaptopProfile,
   LaptopQuickPlay, BlockedPlayers, Leaderboard's season date); gold time, green yours and dim keep their colours (board parity 10-18h) */
.k-app .k-ind:not(.time,.up,.dim){font-weight:400;color:inherit;gap:4px}
.k-app .k-ind:not(.time,.up,.dim)>svg{width:16px;height:16px}
.k-app :is(.k-row-trail,.k-row-sub,.k-top) .k-ind:not(.time,.up,.dim){font-weight:500;color:var(--text-2);gap:5px}
.k-app :is(.k-row-trail,.k-row-sub,.k-top) .k-ind:not(.time,.up,.dim)>svg{width:14px;height:14px}

/* one phone-width column, centred on wider screens */
.k-app .k-col{position:relative;max-width:430px;margin:0 auto;min-height:100svh;padding:calc(env(safe-area-inset-top) + 8px) 24px calc(env(safe-area-inset-bottom) + 40px)}
.k-app .k-col.tabs{padding-bottom:calc(env(safe-area-inset-bottom) + 120px)}   /* a tab screen leaves 120 clear under its last content */

/* page chrome flows at the top of the column instead of sitting at board coordinates */
.k-app .k-top{position:relative;left:auto;right:auto;top:auto;margin:0 -8px 24px}
.k-app .k-page{position:relative;left:auto;right:auto;top:auto;margin:0 0 24px}
.k-app .k-foot{position:sticky;left:auto;right:auto;bottom:calc(env(safe-area-inset-bottom) + 24px);margin-top:32px}

/* Edge fades (V1 38.84): the status-bar fade and the capsule's fade are one pair, the same ramp and one tint per theme (the
   theme's own --bg, as kit.css sets it). App tokens, kept here: kit.css is generated by scripts/sync-kit.py and a sync would
   drop them. Move them into design/build/kit.py if the kit takes the fades.
   The top fade has a floor (design/icon README, "The iPhone status bar", V1 38.911): the installed iPhone app's bar is `default`,
   drawn in theme-color, so the page starts below it and env(safe-area-inset-top) is 0 there; 16 keeps content from being cut
   hard at the bar. */
:root{--fade-top-h:max(16px,calc(env(safe-area-inset-top,0px)*1.5));--fade-bottom-h:clamp(84px,calc(env(safe-area-inset-bottom,0px) + 64px),112px);--fade-ramp:#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.36) 58%,rgba(0,0,0,.14) 80%,transparent 100%}
:root,.k-dark,[data-theme=dark]{--fade-top-tint:rgba(10,10,10,.6);--fade-bottom-tint:rgba(10,10,10,.82);--tabs-ring:rgba(242,239,233,.14);--fade-blur:12px}
.k-light,[data-theme=light]{--fade-top-tint:rgba(243,239,230,.6);--fade-bottom-tint:rgba(243,239,230,.82);--tabs-ring:rgba(23,21,15,.16);--fade-blur:12px}

/* the capsule floats over the page. V1 38.84: two matched edge fades (the --fade-* tokens above), both drawn by the capsule's fade so
   they come and go with it: ::after a short tint behind the capsule (the bottom 10-12%; the tint itself never blurs, the blur is its own layer below), ::before a fade under the
   status bar, strongest at the top and gone by 1.5x the safe area (none where there is no safe area). Neither takes a tap. */
.k-app .k-tabs-fade{position:fixed;height:var(--fade-bottom-h,98px);background:none;pointer-events:none}
.k-app .k-tabs-fade::before,.k-app .k-tabs-fade::after{content:"";left:0;right:0;pointer-events:none;animation:none;transition:none}
.k-app .k-tabs-fade::after{position:absolute;bottom:0;height:100%;background:var(--fade-bottom-tint);
 -webkit-mask-image:linear-gradient(to top,var(--fade-ramp));mask-image:linear-gradient(to top,var(--fade-ramp))}
.k-app .k-tabs-fade::before{position:fixed;top:0;height:var(--fade-top-h,0px);background:var(--fade-top-tint);
 -webkit-mask-image:linear-gradient(to bottom,var(--fade-ramp));mask-image:linear-gradient(to bottom,var(--fade-ramp));
 -webkit-backdrop-filter:none;backdrop-filter:none}
/* The progressive blur (V1-326, board v201: content runs edge to edge, blurred under the status bar and the capsule). In the
   kit the capsule's fade::before is the bottom blur; here ::before is the status-bar tint (above), so it takes none of the
   kit's blur and the two blurs hang off the fade's holder (#tabs) instead, pinned to the window like the tints. Each sits
   under its tint (38, the tints 39, the capsule 40): full --fade-blur at the screen edge, held to 30% of the fade, none where
   the fade ends. Only where backdrop-filter works and not with Reduce transparency: there the tint alone stays. No top blur
   on a laptop (k-wide), where the fade isn't drawn at all. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.k-app #tabs:has(>.k-tabs-fade)::before,.k-app #tabs:has(>.k-tabs-fade)::after{content:"";position:fixed;left:0;right:0;z-index:38;pointer-events:none;animation:none;transition:none;
 -webkit-backdrop-filter:blur(var(--fade-blur,12px));backdrop-filter:blur(var(--fade-blur,12px))}
.k-app #tabs:has(>.k-tabs-fade)::before{bottom:0;height:var(--fade-bottom-h,98px);
 -webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 100%)}
.k-app #tabs:has(>.k-tabs-fade)::after{top:0;height:var(--fade-top-h,0px);
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 100%)}
}
@media (prefers-reduced-transparency:reduce){.k-app #tabs:has(>.k-tabs-fade)::before,.k-app #tabs:has(>.k-tabs-fade)::after{content:none;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* with less behind it, the capsule keeps its own edge over photos, felt and light cards */
.k-app .k-tabs{box-shadow:inset 0 0 0 1px var(--tabs-ring,var(--line)),0 10px 30px rgba(var(--shade-rgb),calc(.45*var(--shade-a))),var(--lift)}
/* the board (Table and components, v153) puts the capsule 20 from the bottom, or at the safe area itself where that is more (34 on a Face ID iPhone), inside the 98 fade */
.k-app .k-tabs{position:fixed;bottom:max(20px,env(safe-area-inset-bottom))}

/* sheets and toasts are fixed to the viewport, kept to the column's width */
.k-app .k-veil{position:fixed}
.k-app .k-sheet{position:fixed;max-width:430px;margin:0 auto;max-height:calc(100svh - env(safe-area-inset-top) - 12px);overflow:auto;
 padding-bottom:calc(env(safe-area-inset-bottom) + 30px)}
.k-app .k-toast{position:fixed;max-width:398px;margin:0 auto}
.k-app .k-chart{max-width:100%}
.k-app .k-chart>svg{max-width:100%;height:auto}

/* On a laptop (design/app-build/laptop.py). wide.js puts k-wide on <html> from 1024 wide; the kit then opens its sheet as a
   centred 480 dialog. Home, Profile and Help take the laptop frame: the wordmark top left, the capsule top centre, content
   in one column at most 1200 wide (120 each side at 1440). Join and the other full-screen flows keep their centred column. */
.k-wide .k-app .k-col:is(.k-home,.k-profile,.k-help){max-width:none;padding:120px max(80px,calc((100% - 1200px) / 2)) 80px}
.k-wide .k-lap-hd{position:absolute;left:40px;top:26px;height:48px;display:flex;align-items:center;z-index:40}
.k-wide .k-lap-on{position:absolute;right:40px;top:26px;height:48px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);text-decoration:none;z-index:40}
.k-wide .k-app .k-tabs-fade{display:none}
.k-wide .k-app #tabs:has(>.k-tabs-fade)::before,.k-wide .k-app #tabs:has(>.k-tabs-fade)::after{content:none}
.k-wide .k-app .k-tabs{position:absolute;top:20px;bottom:auto}
.k-wide .k-app .k-sheet{max-width:none;margin:0;max-height:calc(100svh - 96px);padding-bottom:32px}

/* tiles four across, 16 apart; a tile that spans the phone spans two columns */
.k-wide .lap-main{position:relative}
.k-wide .lap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.k-wide .lap-grid>.w2{grid-column:span 2}
/* a page under a tab keeps the frame: its back button moves to the left of the title */
.k-wide .lap-main .k-top:has(+ .k-page){position:absolute;left:-60px;right:0;top:-2px;margin:0}
/* and the title sits 16 after it (laptop.py title(): .lap-t gap 16, the 38 button pulled 60 left), so at 114, not the
   column's 120: LaptopQuickPlay, LaptopFriends and LaptopStatus (QC round 2026-10-19i). A line under the title stays at 120. */
.k-wide .lap-main .k-top:has(+ .k-page)+.k-page>.k-title{margin-left:-6px}
/* anything not drawn for a laptop keeps its phone layout in a 560 column, centred under the frame */
.k-wide .lap-narrow{max-width:560px;margin:0 auto}
/* Settings and Help: the list on the left, the page beside it */
.k-wide .lap-side{display:grid;grid-template-columns:264px minmax(0,640px);column-gap:96px;align-items:start}
.k-wide .lap-nav{position:sticky;top:24px}
.k-wide .lap-read{position:relative;min-width:0}
.k-wide .lap-read>.k-top{display:none}
.k-wide .lap-read.sub>.k-top{display:flex}
/* with its back button hidden, the page's title keeps the reading column's edge (LaptopSettings, LaptopHelp: 480), not 16
   after a button that isn't drawn */
.k-wide .lap-main .lap-read:not(.sub)>.k-top+.k-page>.k-title{margin-left:0}

@media (prefers-reduced-motion:reduce){.k-app *{transition-duration:0ms!important;animation-duration:0ms!important}}

/* Touch targets (V1 38.92): kit.css gives every kit control (icon button, small button, segment, the wordmark as a link) a
   tap at least 44 across. Two are the app's own: a section head's arrow (Friends, Missions on a laptop), 26-28 tall, takes
   the wordmark's reach */
:where(a.soc-hd-go){position:relative}
a.soc-hd-go::after{content:"";position:absolute;inset:-9px -4px}
/* the table's name as you type it (Create a game): 34 tall; 5 more above and below, the words where they were */
.k-pt input.tname{padding:5px 0;margin-top:5px;margin-bottom:-5px}

/* Light mode (V1 38.93): a locked room's chip (home.css: opacity .35, grayscale .6) faded into the ivory page until the Gold and
   Platinum chips read as blank white discs. On paper it keeps more of itself; the lock and the dimmed stakes still say locked.
   Move into design/app-build/bento.py (.stake.locked .art) if the kit takes it. */
.k-light .k-home .stake.locked .art,[data-theme=light] .k-home .stake.locked .art{opacity:.6}