:where(:root){--r-md:var(--r-card,10px);--r-lg:var(--r-card,14px);--r-xl:var(--r-card,18px);--radius:var(--r,8px);--radius-btn:var(--r,10px);--maxw:1120px;--sec-pad:clamp(40px,7vw,88px);--f-display:var(--serif,Georgia,serif);--f-body:var(--sans,system-ui,sans-serif);--t-base:1rem}/* names the model likes and the house does not define: same look as the house radii, zero specificity */

/* ---- generic: an app header is a kicker / h1 / lede, not a link bar: the seed's split nav (layouts.css, written for a brand + links + actions bar) would put
   each line in a three-column grid and squeeze the title into a third of the width, so app pages keep their header lines whole ---- */
html[data-app-kit][data-l-nav=split] [data-sec=nav] > :is(p,h1,h2){display:revert;grid-template-columns:none;min-height:revert;padding-block:revert;gap:normal;align-items:normal}

/* ---- generic: board = an accent header band, the working list on the left, the figures over the panels in a right column ---- */
html[data-l-app=board] body > [data-sec=nav]{max-width:none;padding-inline:max(16px,calc((100vw - 1200px) / 2));background:var(--accent);color:var(--on-accent,#fff)}
html[data-l-app=board] body > [data-sec=nav] *{color:inherit}
html[data-l-app=board] body > [data-sec=nav] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)} /* a house chip behind the kicker stays readable on the band */
@media (min-width:960px){
html[data-l-app=board] [data-main]{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
html[data-l-app=board] [data-main] > [data-sec=list]{grid-column:1;grid-row:1 / span 3}
html[data-l-app=board] [data-main] > [data-sec=stats]{grid-column:2;grid-row:1}
html[data-l-app=board] [data-main] > [data-sec=feature]{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr)}
html[data-l-app=board] [data-main] > :not([data-sec]){grid-column:1 / -1}
/* railtable = the rail (the header as a left column) with the working list first */
html[data-l-app=railtable] body{display:grid;grid-template-columns:260px minmax(0,1fr)}
html[data-l-app=railtable] body > *{grid-column:2}
html[data-l-app=railtable] body > [data-sec=nav]{grid-column:1;grid-row:1 / span 20;position:sticky;top:0;height:100vh;padding:32px 24px;border-right:1px solid var(--line);background:var(--surface);max-width:none;box-sizing:border-box}
}
html[data-l-app=railtable] [data-main]{display:flex;flex-direction:column}
html[data-l-app=railtable] [data-main] > [data-sec=list]{order:-1}
@media (min-width:960px){html[data-l-app=railtable] [data-main]{padding-top:var(--s-7)}}
/* the column arrangements: sections take the full width (a kit whose main aligns its grid items to the start would shrink them); the rail's main starts below the top edge */
html:is([data-l-app=chartsfirst],[data-l-app=tablefirst],[data-l-app=railtable]) [data-main]{align-items:stretch}
@media (min-width:960px){html[data-l-app=rail] [data-main]{padding-top:var(--s-7)}}
/* a header in a side column (rail / trio / railtable): its title wraps between words inside the column (break-word only breaks a word that cannot fit; anywhere split 'appointments' mid-word) at a rail-sized heading */
html:is([data-l-app=rail],[data-l-app=trio],[data-l-app=railtable]) body > [data-sec=nav]{min-width:0;overflow-wrap:break-word;hyphens:auto}
html:is([data-l-app=rail],[data-l-app=trio],[data-l-app=railtable]) body > [data-sec=nav] h1{font-size:clamp(1.3rem,1.8vw,1.75rem);line-height:1.15}
/* mirror = the panels on the right (3 parts), the list and the rest on the left (2 parts) */
@media (min-width:960px){
html[data-l-app=mirror] [data-main]{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start}
html[data-l-app=mirror] [data-main] > [data-sec=feature]{grid-column:2;grid-row:1 / span 2}
html[data-l-app=mirror] [data-main] > :not([data-sec=feature]){grid-column:1}
}

/* featcol = the controls / panels as a left column, the rest on the right; dock = three columns (panels | list | figures);
   trio = the rail header + the figures as a right column; heads = the header and the figures side by side at the top, the rest full width under them */
@media (min-width:960px){
html[data-l-app=featcol] [data-main]{grid-template-columns:260px minmax(0,1fr);align-items:start}
html[data-l-app=featcol] [data-main] > [data-sec=feature]{grid-column:1;grid-row:1 / span 2;position:sticky;top:16px}
html[data-l-app=featcol] [data-main] > :not([data-sec=feature]){grid-column:2}
html[data-l-app=dock] [data-main]{grid-template-columns:240px minmax(0,1fr) 220px;align-items:start}
html[data-l-app=dock] [data-main] > [data-sec=feature]{grid-column:1;grid-row:1 / span 2;position:sticky;top:16px}
html[data-l-app=dock] [data-main] > [data-sec=stats]{grid-column:3;grid-row:1 / span 2;position:sticky;top:16px}
html[data-l-app=dock] [data-main] > :not([data-sec=feature]):not([data-sec=stats]){grid-column:2}
html[data-l-app=trio] body{display:grid;grid-template-columns:240px minmax(0,1fr)}
html[data-l-app=trio] body > *{grid-column:2}
html[data-l-app=trio] body > [data-sec=nav]{grid-column:1;grid-row:1 / span 20;position:sticky;top:0;height:100vh;padding:32px 24px;border-right:1px solid var(--line);background:var(--surface);max-width:none;box-sizing:border-box}
html[data-l-app=trio] [data-main]{grid-template-columns:minmax(0,1fr) 280px;align-items:start;padding-top:var(--s-7)}
html[data-l-app=trio] [data-main] > [data-sec=stats]{grid-column:2;grid-row:1 / span 2;position:sticky;top:16px}
html[data-l-app=trio] [data-main] > :not([data-sec=stats]){grid-column:1}
html[data-l-app=heads] body{padding-top:var(--s-6);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-7);row-gap:var(--s-5);max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,16px);align-items:end}
html[data-l-app=heads] body > *{grid-column:1 / -1}
html[data-l-app=heads] body > [data-sec=nav]{grid-column:1;grid-row:1;padding-inline:0;max-width:none;margin:0}
html[data-l-app=heads] [data-main]{display:contents}
html[data-l-app=heads] [data-main] > *{grid-column:1 / -1;align-self:start}
html[data-l-app=heads] [data-main] > [data-sec=stats]{grid-column:2;grid-row:1;align-self:end;padding-block-end:var(--s-5)}
html[data-l-app=heads] [data-main] > :last-child{margin-bottom:var(--s-8)}
}

/* ---- data_viz ---- the chart = feature, the data table = list, the paste box = stats (today: it closes the Data column). An arrangement other than rail
   lets each section place itself (no row span) and gives the paste box its own section rule. */
html[data-app-kit=data_viz]:where([data-l-app]:not([data-l-app=rail])) [data-main]{grid-template-rows:none}
html[data-app-kit=data_viz]:where([data-l-app]:not([data-l-app=rail])) [data-main] > *{grid-row:auto;grid-column:auto}
html[data-app-kit=data_viz]:where([data-l-app]:not([data-l-app=rail])) .work > .w-paste{margin-top:0;padding-top:var(--s-4);border-top:1px solid var(--ink)}
html[data-app-kit=data_viz][data-l-app=sbs] [data-main] > [data-sec=stats]{grid-row:1}
@media (min-width:960px){html[data-app-kit=data_viz][data-l-app=sbs] .work > .w-paste{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-5);align-items:end}}

/* ---- records ---- the figures = stats, the search / filter / new bar = feature, the table = list. Any arrangement: the page's full width; in a column the
   bar stacks its controls and the figures stack; railtable puts the search first. */
html[data-app-kit=records]:where([data-l-app]) .top,html[data-app-kit=records]:where([data-l-app]) main.wrap{max-width:var(--page)}
@media (min-width:960px){
html[data-app-kit=records]:is([data-l-app=featcol],[data-l-app=dock],[data-l-app=board]) .bar > *{flex:1 1 100%}
html[data-app-kit=records]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio],[data-l-app=dock],[data-l-app=board]) .stats{gap:var(--s-4) var(--s-6)}
html[data-app-kit=records]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio],[data-l-app=dock]) .stats{flex-direction:column}
html[data-app-kit=records][data-l-app=heads] .stats{border-bottom:0;justify-content:flex-end}
html[data-app-kit=records][data-l-app=heads] .top{border-bottom:0}
}
html[data-app-kit=records][data-l-app=railtable] [data-main] > [data-sec=feature]{order:-2}
@media (min-width:960px){html[data-app-kit=records][data-l-app=dock] [data-main]{grid-template-columns:200px minmax(0,1fr) 170px}}

/* ---- todo ---- the add form = feature, the show / count bar = stats (today: the head of the list), the tasks = list. Any arrangement: the page's full width
   and the bar keeps its own section step; in a column the form stacks its fields; heads puts the add form beside the title; tablefirst keeps the bar on top. */
html[data-app-kit=todo]:where([data-l-app]) .top,html[data-app-kit=todo]:where([data-l-app]) main.wrap{max-width:var(--page)}
html[data-app-kit=todo]:where([data-l-app]) .t-bar{margin-bottom:0}
@media (min-width:960px){
html[data-app-kit=todo]:is([data-l-app=featcol],[data-l-app=dock],[data-l-app=board]) .add > *{flex:1 1 100%}
html[data-app-kit=todo]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio],[data-l-app=dock],[data-l-app=board]) .t-bar{flex-direction:column;align-items:flex-start}
html[data-app-kit=todo]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio],[data-l-app=dock],[data-l-app=board]) .t-bar .seg{flex-wrap:wrap}
html[data-app-kit=todo][data-l-app=heads] [data-main] > [data-sec=feature]{grid-column:2;grid-row:1;align-self:end;padding-block-end:var(--s-5)}
html[data-app-kit=todo][data-l-app=heads] [data-main] > [data-sec=stats]{grid-column:1 / -1;grid-row:auto;align-self:start;padding-block-end:0}
html[data-app-kit=todo][data-l-app=heads] .top{border-bottom:0}
}
html[data-app-kit=todo][data-l-app=tablefirst] [data-main] > [data-sec=stats]{order:-2}

/* ---- tracker ---- the week figures = stats, Today = list, Last 7 days = feature, Your habits = other. Any arrangement: the page's full width and a grid main (low specificity, so each arrangement's own grid / flex / contents wins)
   (today: a block main whose sections keep their own top rule and step); sbs / board put Your habits under both columns. */
html[data-app-kit=tracker]:where([data-l-app]) .top,html[data-app-kit=tracker]:where([data-l-app]) main.wrap{max-width:var(--page)}
html[data-app-kit=tracker]:where([data-l-app]) :where(main.wrap){display:grid;column-gap:var(--s-7);align-items:start}
@media (min-width:960px){
html[data-app-kit=tracker]:is([data-l-app=sbs],[data-l-app=board]) [data-main] > [data-sec=other]{grid-column:1 / -1}
html[data-app-kit=tracker]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio]) [data-main] > [data-sec=stats] .facts{grid-template-columns:minmax(0,1fr)}
html[data-app-kit=tracker]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio],[data-l-app=board],[data-l-app=mirror],[data-l-app=sbs]) [data-main] > section:nth-child(2){margin-top:0}
html[data-app-kit=tracker]:is([data-l-app=board],[data-l-app=mirror],[data-l-app=sbs]) [data-main] > [data-sec=feature]{margin-top:0}
html[data-app-kit=tracker][data-l-app=board] [data-main] > [data-sec=stats]{padding-bottom:var(--s-5)}
html[data-app-kit=tracker][data-l-app=sbs] [data-main]{grid-auto-flow:row dense} /* the week (feature, after Today in the page) fills the left cell beside Today */
}

/* ---- finance_tools ---- people = feature, expenses = list, the balances + settle-up aside = stats (today: three columns, people | expenses | aside).
   Any arrangement: the aside scrolls with the page unless a column arrangement makes it sticky; sbs lays its two panels side by side. */
html[data-app-kit=finance_tools]:where([data-l-app]) .side{position:static}
@media (min-width:960px){
html[data-app-kit=finance_tools]:is([data-l-app=sbs],[data-l-app=chartsfirst],[data-l-app=tablefirst]) .side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html[data-app-kit=finance_tools]:is([data-l-app=statcol],[data-l-app=statright],[data-l-app=trio]) .side{position:sticky;top:16px}
html[data-app-kit=finance_tools][data-l-app=heads] .top{border-bottom:0}
}
/* finance's header is a brand + totals bar, not text lines: the seed's split nav keeps them as they are; in a side column the brand mark sits over the title */
html[data-app-kit=finance_tools][data-l-nav=split] [data-sec=nav] > *{display:flex;grid-template-columns:none;min-height:0;padding-block:0;gap:var(--s-3) var(--s-6)}
html[data-app-kit=finance_tools]:is([data-l-app=rail],[data-l-app=trio]) .brand{flex-direction:column;align-items:flex-start}

@media (min-width:961px){
html[data-app-kit=docs][data-l-app=mirror] .shell{flex-direction:row-reverse}
html[data-app-kit=docs][data-l-app=mirror] .side{border-right:0;border-left:1px solid var(--line)}
html[data-app-kit=docs]:is([data-l-app=strip],[data-l-app=index],[data-l-app=toc]) .shell{flex-direction:column}
html[data-app-kit=docs]:is([data-l-app=strip],[data-l-app=index],[data-l-app=toc]) .dk-tree{flex:none}
html[data-app-kit=docs]:is([data-l-app=strip],[data-l-app=index]) .side{width:auto;flex:1;border-right:0;border-bottom:1px solid var(--line);padding:var(--s-3) max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)))}
html[data-app-kit=docs][data-l-app=strip] .tree ul{display:flex;flex-wrap:wrap;gap:0 var(--s-2);padding-left:0}
html[data-app-kit=docs][data-l-app=strip] .trow{padding-inline:var(--s-2)}
html[data-app-kit=docs][data-l-app=strip] .trow .tw{display:none}
html[data-app-kit=docs][data-l-app=index] .tree > ul{columns:3 240px;column-gap:var(--s-6)}
html[data-app-kit=docs][data-l-app=index] .tnode{break-inside:avoid}
html[data-app-kit=docs][data-l-app=index] .side{padding-block:var(--s-7);background:var(--sunk-0,var(--sunk))}
html[data-app-kit=docs][data-l-app=index] .trow{min-height:52px;font-size:var(--t-md)}
html[data-app-kit=docs][data-l-app=index] .tree > ul > .tnode > .trow{font-weight:700;color:var(--ink)}
html[data-app-kit=docs][data-l-app=toc] .dk-tree{align-self:center;width:min(600px,calc(100% - 48px));margin-top:var(--s-5)}
html[data-app-kit=docs][data-l-app=toc] .side{width:auto;flex:1;border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);padding:var(--s-4) var(--s-5)}
html[data-app-kit=docs][data-l-app=inset] .shell{width:min(1000px,calc(100% - 48px));margin:var(--s-5) auto var(--s-6);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);overflow:hidden;box-shadow:0 24px 60px -40px rgb(0 0 0/.45)}
html[data-app-kit=docs][data-l-app=inset] .side{background:var(--bg)}
html[data-app-kit=docs][data-l-app=deck] body{flex-direction:row;align-items:stretch}
html[data-app-kit=docs][data-l-app=deck] .bar{flex:none;width:236px;max-width:none;margin:0;flex-direction:column;align-items:stretch;gap:var(--s-3);height:100vh;padding:var(--s-5) var(--s-4);border-bottom:0;box-sizing:border-box}
html[data-app-kit=docs][data-l-app=deck] .bar{border-right:1px solid var(--line)}
html[data-app-kit=docs][data-l-app=deck] .bar > *{margin:0;max-width:none;flex:none}
html[data-app-kit=docs][data-l-app=deck] .bar #menu{align-self:flex-start}
html[data-app-kit=docs][data-l-app=deck] .brand{white-space:normal;font-size:var(--t-lg)}
html[data-app-kit=docs][data-l-app=deck] .shell{flex:1;min-width:0;height:100vh}
html[data-app-kit=docs][data-l-app=panel] .dk-tree{align-self:flex-start;margin:0 0 var(--s-5) var(--s-5)}
html[data-app-kit=docs][data-l-app=panel] .side{margin-top:var(--s-4)}
html[data-app-kit=docs][data-l-app=panel] .side{border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);box-shadow:0 18px 40px -30px rgb(0 0 0/.4);padding:var(--s-4) var(--s-3)}
html[data-app-kit=docs][data-l-app=band] .bar{width:100%;margin:0;box-sizing:border-box;padding-block:var(--s-4);border-bottom:0}
html[data-app-kit=docs][data-l-app=band] .bar .btn{color:inherit;border-color:currentColor}
html[data-app-kit=docs][data-l-app=band] .bar #mode{background:var(--on-accent,#fff);color:var(--accent)}
html[data-app-kit=docs][data-l-app=band] .side{background:var(--sunk-0,var(--sunk))}
html[data-app-kit=docs][data-l-app=duo] .dk-tree{flex:0 0 45%}
html[data-app-kit=docs][data-l-app=duo] .side{width:auto;flex:1;padding:var(--s-5);background:var(--sunk-0,var(--sunk))}
html[data-app-kit=docs][data-l-app=duo] .trow{min-height:56px;margin-bottom:var(--s-2);padding-inline:var(--s-3);border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface);font-size:var(--t-md)}
html[data-app-kit=docs][data-l-app=duo] .tree ul ul{padding-left:var(--s-5)}
}

/* ---- recipes (L-SITES-C 10-11; the recipe book): the list view #view-list is data-main (a grid under an arrangement; never while hidden), its parts
   section.rc-top[data-sec=stats] (kicker / h1 / count), .rc-tools[data-sec=feature] (search + tag chips), .rc-grid[data-sec=list] (the cards); the recipe
   and add views keep their own look. stack = today; gridfirst = the cards first (wide screens); sidehead = the title a sticky left column; filters = the search + tags
   a sticky left column; banner = the title on an accent panel; compact = a slim title row; toolsfirst = the search a centred card first; pair = the title
   and the search side by side; right = the title a right column; spotlight = the first recipe a large card. */
html[data-app-kit=recipes][data-l-app=banner] #view-list[data-main]:not([hidden]) > .rc-top{margin-bottom:var(--s-6);padding:var(--s-7) var(--s-6);border-radius:var(--r-card,12px);background:var(--accent);color:var(--on-accent,#fff)}
html[data-app-kit=recipes][data-l-app=banner] #view-list[data-main]:not([hidden]) > .rc-top :is(h1,.count){color:inherit}
html[data-app-kit=recipes][data-l-app=banner] #view-list[data-main]:not([hidden]) > .rc-top .kicker{color:inherit;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
html[data-app-kit=recipes][data-l-app=banner] #view-list[data-main]:not([hidden]) .list-head{margin:0}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) .list-head h1{font-size:var(--t-2xl)}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) .list-head{margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
html[data-app-kit=recipes][data-l-app=toolsfirst] #view-list[data-main]:not([hidden]) > .rc-tools{order:-1;width:min(680px,100%);justify-self:center;margin-bottom:var(--s-6);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);box-sizing:border-box}
html[data-app-kit=recipes][data-l-app=toolsfirst] #view-list[data-main]:not([hidden]) .tools{margin:0;justify-items:center}
html[data-app-kit=recipes][data-l-app=toolsfirst] #view-list[data-main]:not([hidden]) .search{width:100%;max-width:none}
html[data-app-kit=recipes][data-l-app=toolsfirst] #view-list[data-main]:not([hidden]) .chips{justify-content:center}
html[data-app-kit=recipes][data-l-app=spotlight] #view-list[data-main]:not([hidden]) .grid > :first-child{grid-column:span 2;grid-row:span 2;padding:var(--s-6);background:var(--wash,var(--sunk))}
html[data-app-kit=recipes][data-l-app=spotlight] #view-list[data-main]:not([hidden]) .grid > :first-child h3{font-size:var(--t-2xl)}
@media (max-width:600px){html[data-app-kit=recipes][data-l-app=spotlight] #view-list[data-main]:not([hidden]) .grid > :first-child{grid-column:auto;grid-row:auto}}
@media (min-width:961px){
html[data-app-kit=recipes][data-l-app=gridfirst] #view-list[data-main]:not([hidden]) > .rc-grid{order:-1;margin-bottom:var(--s-6)}
html[data-app-kit=recipes][data-l-app=gridfirst] #view-list[data-main]:not([hidden]) .list-head{margin-top:var(--s-4)}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]){grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-7)}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) > .rc-top{grid-column:1;grid-row:1}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) > .rc-tools{grid-column:2;grid-row:1;align-self:end}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) > .rc-grid{grid-column:1 / -1;grid-row:2}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) .list-head{border-bottom:0;margin:0;padding:0}
html[data-app-kit=recipes][data-l-app=compact] #view-list[data-main]:not([hidden]) .tools{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:end;margin-bottom:var(--s-5)}
html[data-app-kit=recipes][data-l-app=sidehead] #view-list[data-main]:not([hidden]){grid-template-columns:300px minmax(0,1fr);column-gap:var(--s-8)}
html[data-app-kit=recipes][data-l-app=sidehead] #view-list[data-main]:not([hidden]) > .rc-top{grid-column:1;grid-row:1 / span 2;position:sticky;top:var(--s-4);padding:var(--s-6) var(--s-5);border-radius:var(--r-card,12px);background:var(--sunk-0,var(--sunk))}
html[data-app-kit=recipes][data-l-app=sidehead] #view-list[data-main]:not([hidden]) > :not(.rc-top){grid-column:2}
html[data-app-kit=recipes][data-l-app=sidehead] #view-list[data-main]:not([hidden]) .list-head{flex-direction:column;align-items:flex-start;margin:0}
html[data-app-kit=recipes][data-l-app=sidehead] #view-list[data-main]:not([hidden]) .list-head h1{font-size:var(--t-3xl)}
html[data-app-kit=recipes][data-l-app=filters] #view-list[data-main]:not([hidden]){grid-template-columns:260px minmax(0,1fr);column-gap:var(--s-7)}
html[data-app-kit=recipes][data-l-app=filters] #view-list[data-main]:not([hidden]) > .rc-top{grid-column:1 / -1;grid-row:1}
html[data-app-kit=recipes][data-l-app=filters] #view-list[data-main]:not([hidden]) > .rc-tools{grid-column:1;grid-row:2;position:sticky;top:var(--s-4);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface)}
html[data-app-kit=recipes][data-l-app=filters] #view-list[data-main]:not([hidden]) > .rc-grid{grid-column:2;grid-row:2}
html[data-app-kit=recipes][data-l-app=filters] #view-list[data-main]:not([hidden]) .tools{margin:0}
html[data-app-kit=recipes][data-l-app=filters] #view-list[data-main]:not([hidden]) .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
html[data-app-kit=recipes][data-l-app=pair] #view-list[data-main]:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-7)}
html[data-app-kit=recipes][data-l-app=pair] #view-list[data-main]:not([hidden]) > .rc-top{grid-column:1;grid-row:1;align-self:center}
html[data-app-kit=recipes][data-l-app=pair] #view-list[data-main]:not([hidden]) > .rc-tools{grid-column:2;grid-row:1;padding:var(--s-5);border-radius:var(--r-card,12px);background:var(--sunk-0,var(--sunk))}
html[data-app-kit=recipes][data-l-app=pair] #view-list[data-main]:not([hidden]) > .rc-grid{grid-column:1 / -1;grid-row:2;margin-top:var(--s-6)}
html[data-app-kit=recipes][data-l-app=pair] #view-list[data-main]:not([hidden]) .tools{margin:0}
html[data-app-kit=recipes][data-l-app=pair] #view-list[data-main]:not([hidden]) .search{max-width:none}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]){grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s-7)}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]) > .rc-top{grid-column:2;grid-row:1 / span 2;position:sticky;top:var(--s-4);padding-left:var(--s-6);border-left:2px solid var(--accent)}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]) > .rc-tools{grid-column:1;grid-row:1}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]) > .rc-grid{grid-column:1;grid-row:2}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]) .list-head{flex-direction:column;align-items:flex-start}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]) .list-head h1{font-size:var(--t-3xl)}
html[data-app-kit=recipes][data-l-app=right] #view-list[data-main]:not([hidden]) .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
html[data-app-kit=recipes][data-l-app] #view-list[data-main]:not([hidden]):has(> .rc-tools ~ .rc-tools) > :is(.rc-top,.rc-tools,.rc-grid){grid-column:1 / -1;grid-row:auto;position:static;order:0}
html[data-app-kit=recipes][data-l-app] #view-list[data-main]:not([hidden]):has(> .rc-tools ~ .rc-tools) > .rc-top{border-left:0;padding-left:0}
}

/* ---- status_page (L-SITES-C 10-11; the status page / admin): header.bar = nav, main.stage = data-main (a grid), the services = section.sp-svcs[data-sec=list],
   the side panels (incidents, history, e-mail updates) = section.sp-side[data-sec=feature] (aside.side inside). stack = today; flip = the panels left;
   column = one centred column; incidents = the three panels as a row over the services; tiles = the services two to a row, the panels a row under them;
   deck = the header a left column, the panels then the services; compact = each service one dense row; banner = an accent header band; strip = the
   services one scrolling row of cards, the panels a row under them; duo = services and panels half and half. */
html[data-app-kit=status_page][data-l-app] .stage{align-items:start}
html[data-app-kit=status_page][data-l-app=column] .stage{grid-template-columns:minmax(0,1fr);max-width:820px}
html[data-app-kit=status_page][data-l-app=banner] .bar{padding-block:var(--s-5);background:var(--accent);color:var(--on-accent,#fff);border-bottom:0}
html[data-app-kit=status_page][data-l-app=banner] .bar .brand h1{font-size:var(--t-2xl);color:inherit}
html[data-app-kit=status_page][data-l-app=banner] .bar .btn-primary{background:var(--on-accent,#fff);color:var(--accent);border-color:var(--on-accent,#fff)}
html[data-app-kit=status_page][data-l-app=banner] .bar .overall{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent);color:inherit}
@media (min-width:960px){
html[data-app-kit=status_page][data-l-app=flip] .stage{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
html[data-app-kit=status_page][data-l-app=flip] .sp-side{grid-column:1;grid-row:1}
html[data-app-kit=status_page][data-l-app=flip] .sp-svcs{grid-column:2;grid-row:1}
html[data-app-kit=status_page]:is([data-l-app=incidents],[data-l-app=tiles],[data-l-app=strip]) .stage{grid-template-columns:minmax(0,1fr)}
html[data-app-kit=status_page]:is([data-l-app=incidents],[data-l-app=tiles],[data-l-app=strip]) .side{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
html[data-app-kit=status_page][data-l-app=incidents] .sp-side{grid-row:1}
html[data-app-kit=status_page][data-l-app=incidents] .sp-svcs{grid-row:2}
html[data-app-kit=status_page][data-l-app=tiles] .svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-app-kit=status_page][data-l-app=strip] .svcs{grid-auto-flow:column;grid-auto-columns:clamp(260px,30%,340px);overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:var(--s-2)}
html[data-app-kit=status_page][data-l-app=duo] .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html[data-app-kit=status_page][data-l-app=compact] .svcs{gap:0;border:1px solid var(--line);border-radius:var(--r-card,12px);overflow:hidden;background:var(--surface)}
html[data-app-kit=status_page][data-l-app=compact] .svc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;align-items:center;column-gap:var(--s-4);padding:var(--s-2) var(--s-4);border:0;border-radius:0;border-bottom:1px solid var(--line)}
html[data-app-kit=status_page][data-l-app=compact] .svc .bars{margin:0}
html[data-app-kit=status_page][data-l-app=compact] .svc .bars span{height:14px}
html[data-app-kit=status_page][data-l-app=compact] .svc-foot{margin:0}
html[data-app-kit=status_page][data-l-app=compact] .svc-foot .ago{display:none}
html[data-app-kit=status_page][data-l-app=compact] .svc-top .uptime{margin-left:0}
}
@media (min-width:961px){
html[data-app-kit=status_page][data-l-app=deck] body{flex-direction:row;align-items:flex-start}
html[data-app-kit=status_page][data-l-app=deck] .bar{flex:none;width:250px;height:100vh;flex-direction:column;align-items:stretch;flex-wrap:nowrap;padding:var(--s-5) var(--s-4);border-bottom:0;border-right:1px solid var(--line);box-sizing:border-box}
html[data-app-kit=status_page][data-l-app=deck] .bar .brand{margin:0}
html[data-app-kit=status_page][data-l-app=deck] .bar .controls{flex-direction:column;align-items:stretch}
html[data-app-kit=status_page][data-l-app=deck] .bar .controls input{width:100%}
html[data-app-kit=status_page][data-l-app=deck] .stage{flex:1;min-width:0;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
html[data-app-kit=status_page][data-l-app=deck] .sp-side{grid-column:1;grid-row:1}
html[data-app-kit=status_page][data-l-app=deck] .sp-svcs{grid-column:2;grid-row:1}
}

html[data-app-kit=booking][data-l-app=column] .work{grid-template-columns:minmax(0,1fr);max-width:760px}
html[data-app-kit=booking][data-l-app=column] .work > section:last-child{grid-column:auto}
html[data-app-kit=booking][data-l-app=band] body > [data-sec=nav] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
html[data-app-kit=booking][data-l-app=band] body > [data-sec=nav] .btn-primary{background:var(--on-accent,#fff);color:var(--accent)}
html[data-app-kit=booking][data-l-app=band] body > [data-sec=nav]{padding-block:var(--s-7) var(--s-6);margin-bottom:var(--s-6)}
html[data-app-kit=booking][data-l-app=compact] .top{padding-block:var(--s-5) var(--s-3)}
html[data-app-kit=booking][data-l-app=compact] .top h1{font-size:var(--t-2xl)}
html[data-app-kit=booking][data-l-app=compact] .top .lede{display:none}
@media (min-width:960px){
html[data-app-kit=booking][data-l-app=swap] .work{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
html[data-app-kit=booking][data-l-app=swap] .bk-time{grid-column:1;grid-row:1}
html[data-app-kit=booking][data-l-app=swap] .bk-day{grid-column:2;grid-row:1}
html[data-app-kit=booking][data-l-app=swap] .bk-mine{grid-row:2}
html[data-app-kit=booking][data-l-app=timefirst] .work{grid-template-columns:minmax(0,1fr)}
html[data-app-kit=booking][data-l-app=timefirst] .bk-time{grid-row:1}
html[data-app-kit=booking][data-l-app=timefirst] .bk-time .slots{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
html[data-app-kit=booking][data-l-app=timefirst] .bk-time form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-5);align-items:end}
html[data-app-kit=booking][data-l-app=timefirst] .bk-time form > :is(.error,#book){grid-column:1 / -1;justify-self:start}
html[data-app-kit=booking][data-l-app=timefirst] .bk-day{grid-row:2}
html[data-app-kit=booking][data-l-app=timefirst] .bk-mine{grid-row:3}
html[data-app-kit=booking][data-l-app=mine] .work{grid-template-columns:280px minmax(0,1fr)}
html[data-app-kit=booking][data-l-app=mine] .bk-mine{grid-column:1;grid-row:1 / span 2;position:sticky;top:var(--s-4);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface)}
html[data-app-kit=booking][data-l-app=mine] .bk-day{grid-column:2;grid-row:1}
html[data-app-kit=booking][data-l-app=mine] .bk-time{grid-column:2;grid-row:2}
html[data-app-kit=booking][data-l-app=three] .work{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr)}
html[data-app-kit=booking][data-l-app=three] .work > section:last-child{grid-column:auto}
html[data-app-kit=booking][data-l-app=three] .bk-time .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-app-kit=booking][data-l-app=wide] .work{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html[data-app-kit=booking][data-l-app=wide] .bk-day{grid-column:1 / -1}
html[data-app-kit=booking][data-l-app=wide] .bk-day .days > *{min-height:76px}
html[data-app-kit=booking][data-l-app=wide] .work > section:last-child{grid-column:auto}
}
@media (min-width:1100px){
html[data-app-kit=booking][data-l-app=deck] body{display:grid;grid-template-columns:330px minmax(0,1fr);column-gap:var(--s-7);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html[data-app-kit=booking][data-l-app=deck] body > *{grid-column:2;max-width:none;padding-inline:0}
html[data-app-kit=booking][data-l-app=deck] body > .sh-nav{grid-column:1 / -1}
html[data-app-kit=booking][data-l-app=deck] body > .top{grid-column:1;grid-row:2 / span 4;position:sticky;top:var(--s-4);display:block;padding:var(--s-6) var(--s-5);border-radius:var(--r-card,12px);background:var(--sunk-0,var(--sunk))}
html[data-app-kit=booking][data-l-app=deck] body > .top > * + *{margin-top:var(--s-3)}
html[data-app-kit=booking][data-l-app=deck] body > .top h1{font-size:var(--t-3xl)}
html[data-app-kit=booking][data-l-app=deck] body > main{grid-row:2}
}

html[data-app-kit=news][data-l-app=masthead] .nw-head{justify-items:center;text-align:center;padding-block:var(--s-5);border-top:4px double var(--ink);border-bottom:1px solid var(--ink)}
html[data-app-kit=news][data-l-app=masthead] .date{font:700 var(--t-2xl)/1.1 var(--serif,var(--sans));letter-spacing:0;text-transform:none;color:var(--ink)}
html[data-app-kit=news][data-l-app=compact] .story{gap:var(--s-3);padding-block:var(--s-2)}
html[data-app-kit=news][data-l-app=compact] .story h3{font-size:var(--t-md)}
html[data-app-kit=news][data-l-app=compact] .story .sum{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
html[data-app-kit=news][data-l-app=compact] .story .more{margin-top:2px}
html[data-app-kit=news][data-l-app=compact] .story img{width:72px;height:52px}
html[data-app-kit=news][data-l-app=lead] .list > li:first-child .story{grid-template-columns:minmax(0,1fr);padding-bottom:var(--s-6)}
html[data-app-kit=news][data-l-app=lead] .list > li:first-child .story img{order:-1;width:100%;height:clamp(200px,30vw,360px);border-radius:var(--r-card,12px)}
html[data-app-kit=news][data-l-app=lead] .list > li:first-child .story h3{font-size:var(--t-2xl)}
html[data-app-kit=news][data-l-app=band] body > [data-sec=nav]{padding-block:var(--s-6)}
html[data-app-kit=news][data-l-app=lead] .nw-head{justify-self:center;width:min(420px,100%);justify-items:center;text-align:center}
html[data-app-kit=news][data-l-app=columns] .nw-head{justify-self:end;width:min(340px,100%);justify-items:end;text-align:right}
html[data-app-kit=news][data-l-app=band] body > [data-sec=nav] .find .btn{background:var(--on-accent,#fff);color:var(--accent)}
html[data-app-kit=news][data-l-app=band] body > [data-sec=nav] .mark{background:var(--on-accent,#fff);color:var(--accent)}
@media (min-width:960px){
html[data-app-kit=news]:is([data-l-app=sidecol],[data-l-app=cards],[data-l-app=slim],[data-l-app=columns],[data-l-app=wide]) main{max-width:var(--page,1200px)}
html[data-app-kit=news][data-l-app=sidecol] main{grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s-7);align-items:start}
html[data-app-kit=news][data-l-app=sidecol] .nw-list{grid-column:1;grid-row:1}
html[data-app-kit=news][data-l-app=sidecol] .nw-head{grid-column:2;grid-row:1;position:sticky;top:var(--s-4);padding:var(--s-5);border-radius:var(--r-card,12px);background:var(--sunk-0,var(--sunk))}
html[data-app-kit=news][data-l-app=sidecol] .date{font-size:var(--t-xl);letter-spacing:.04em}
html[data-app-kit=news][data-l-app=cards] main{grid-template-columns:240px minmax(0,1fr);column-gap:var(--s-6);align-items:start}
html[data-app-kit=news][data-l-app=cards] .nw-head{grid-column:1;grid-row:1;position:sticky;top:var(--s-4);min-height:min(60vh,520px);align-content:end;padding:var(--s-5);border-radius:var(--r-card,12px);background:var(--accent);color:var(--on-accent,#fff)}
html[data-app-kit=news][data-l-app=cards] .nw-head :is(.src,.date){color:inherit}
html[data-app-kit=news][data-l-app=cards] .date{font:700 var(--t-3xl)/1.05 var(--serif,var(--sans));letter-spacing:0;text-transform:none}
html[data-app-kit=news][data-l-app=cards] .nw-list{grid-column:2;grid-row:1}
html[data-app-kit=news][data-l-app=cards] .list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
html[data-app-kit=news][data-l-app=cards] .story{grid-template-columns:minmax(0,1fr);height:100%;align-content:start;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);box-sizing:border-box}
html[data-app-kit=news][data-l-app=cards] .list li:first-child .story{border-top:1px solid var(--line)}
html[data-app-kit=news][data-l-app=cards] .story img{order:-1;width:100%;height:130px}
html[data-app-kit=news][data-l-app=cards] .story h3{font-size:var(--t-md)}
html[data-app-kit=news][data-l-app=slim] main{grid-template-columns:190px minmax(0,1fr);column-gap:var(--s-6);align-items:start}
html[data-app-kit=news][data-l-app=slim] .nw-head{grid-column:1;grid-row:1;position:sticky;top:var(--s-4);padding-top:var(--s-4);border-top:3px solid var(--accent)}
html[data-app-kit=news][data-l-app=slim] .nw-list{grid-column:2;grid-row:1}
html[data-app-kit=news][data-l-app=columns] .list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}
html[data-app-kit=news][data-l-app=columns] .list li:nth-child(2) .story{border-top:0}
html[data-app-kit=news][data-l-app=wide] .story img{width:200px;height:132px}
html[data-app-kit=news][data-l-app=wide] .story h3{font-size:var(--t-xl)}
}

/* ---- local_events (L-SITES-C 10-11; the live event finder): header.top = nav (brand + saved / data-sources buttons), the search + date / kind chips =
   section.hero[data-sec=feature] (a body child), main = data-main: the source line = section.le-head[data-sec=stats], the events = .le-list[data-sec=list].
   stack = today; finder = the search a sticky left column; right = the search a right column; compact = a slim title with the search on one row; cards =
   the events two across; center = everything centred, the list narrow; band = an accent header + search band; duo = the title left, the search right;
   agenda = the events as dense date rows; poster = a very large title. */
html[data-app-kit=local_events][data-l-app=compact] .hero{padding-block:var(--s-5) var(--s-3);gap:var(--s-3)}
html[data-app-kit=local_events][data-l-app=compact] .hero h1{font-size:var(--t-2xl);max-width:none}
html[data-app-kit=local_events][data-l-app=center] .hero{justify-items:center;text-align:center}
html[data-app-kit=local_events][data-l-app=center] .hero :is(.find,.chips){justify-content:center}
html[data-app-kit=local_events][data-l-app=center] main{max-width:760px}
html[data-app-kit=local_events][data-l-app=band] .top{max-width:none;padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)));background:var(--accent);color:var(--on-accent,#fff);border-bottom:0}
html[data-app-kit=local_events][data-l-app=band] .top .btn{color:inherit}
html[data-app-kit=local_events][data-l-app=band] .top .mark{background:var(--on-accent,#fff);color:var(--accent)}
html[data-app-kit=local_events][data-l-app=band] .hero{max-width:none;margin-bottom:var(--s-5);padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)));background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
html[data-app-kit=local_events][data-l-app=agenda] .list{gap:0;border-top:1px solid var(--line)}
html[data-app-kit=local_events][data-l-app=agenda] .ev{grid-template-columns:64px minmax(0,1fr);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding-inline:0}
html[data-app-kit=local_events][data-l-app=agenda] .ev .date{background:transparent;padding:0}
html[data-app-kit=local_events][data-l-app=agenda] .ev .sum{display:none}
html[data-app-kit=local_events][data-l-app=poster] .hero{padding-block:var(--s-8) var(--s-6)}
html[data-app-kit=local_events][data-l-app=poster] .hero h1{font-size:clamp(3rem,1.4rem + 6vw,7rem);line-height:.95;max-width:12ch}
@media (min-width:960px){
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:var(--s-7);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body > *{grid-column:1 / -1;max-width:none;padding-inline:0;margin-inline:0}
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body > .hero{grid-column:1;grid-row:2 / span 3;position:sticky;top:var(--s-4);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);margin-top:var(--s-5)}
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body > .hero h1{font-size:var(--t-2xl)}
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body > :is(.keys,main){grid-column:2}
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body > main{grid-row:3;padding-top:var(--s-5)}
html[data-app-kit=local_events]:is([data-l-app=finder],[data-l-app=right]) body > .keys{grid-row:2;margin-top:var(--s-5)}
html[data-app-kit=local_events][data-l-app=right] body{grid-template-columns:minmax(0,1fr) 340px}
html[data-app-kit=local_events][data-l-app=right] body > .hero{grid-column:2}
html[data-app-kit=local_events][data-l-app=right] body > :is(.keys,main){grid-column:1}
html[data-app-kit=local_events][data-l-app=cards] .list{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-app-kit=local_events][data-l-app=duo] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-7);align-items:end}
html[data-app-kit=local_events][data-l-app=duo] .hero > :is(.kicker,h1){grid-column:1}
html[data-app-kit=local_events][data-l-app=duo] .hero > h1{grid-row:2 / span 3}
html[data-app-kit=local_events][data-l-app=duo] .hero > :not(.kicker):not(h1){grid-column:2}
}

/* ---- travel (L-SITES-C 10-11; the packing list): header.top = nav (title + trip bar + the packing figures strip), main = data-main: the filters / bulk
   toolbar = section.toolbar[data-sec=feature], the table = section.tablewrap[data-sec=list] (the sticky quick add + hint follow it). stack = today; deck = the header a sticky left
   column (figures stacked); aside = the header a right column; band = an accent header band; toolsright / toolsleft = the toolbar a sticky column beside
   the table; listfirst = the table (and its quick add) first, the toolbar under it; pill = the toolbar a narrow centred card; tiles = the figures as large tiles; focus = title and figures on one row. */
html[data-app-kit=travel][data-l-app=band] .top{padding-block:var(--s-7);max-width:none;padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)));background:var(--accent);color:var(--on-accent,#fff);border-bottom:0}
html[data-app-kit=travel][data-l-app=band] .top :is(#brand,.tripmeta,.btn){color:inherit}
html[data-app-kit=travel][data-l-app=band] .top :is(.strip,select){color:var(--ink)}
html[data-app-kit=travel][data-l-app=listfirst] .tablewrap{order:-2}
html[data-app-kit=travel][data-l-app=listfirst] .quickadd{order:-1}
html[data-app-kit=travel][data-l-app=listfirst] main > .hint{order:1}
html[data-app-kit=travel][data-l-app=pill] .toolbar{width:min(520px,100%);justify-self:center;justify-content:center;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface);box-sizing:border-box}
html[data-app-kit=travel][data-l-app=tiles] .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,2fr);gap:var(--s-3);padding:0;border:0;background:transparent}
html[data-app-kit=travel][data-l-app=tiles] .stat{padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface)}
html[data-app-kit=travel][data-l-app=tiles] .stat dd{font-size:var(--t-2xl)}
@media (max-width:760px){html[data-app-kit=travel][data-l-app=tiles] .strip{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-app-kit=travel][data-l-app=tiles] .stat.grow{grid-column:1 / -1}}
@media (min-width:960px){
html[data-app-kit=travel][data-l-app=focus] .top{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-6);align-items:center}
html[data-app-kit=travel][data-l-app=focus] .top > .tripmeta{grid-column:1;grid-row:2}
html[data-app-kit=travel][data-l-app=focus] .top > .strip{grid-column:2;grid-row:1 / span 2}
html[data-app-kit=travel][data-l-app=focus] .brandrow{flex-direction:column;align-items:flex-start}
html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) main{grid-template-columns:minmax(0,1fr) 240px;column-gap:var(--s-5);align-items:start}
html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) .toolbar{grid-column:2;grid-row:1;position:sticky;top:var(--s-4);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-card,12px);background:var(--surface)}
html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) .toolbar,html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) .toolbar :is(.filters,.bulk){flex-direction:column;align-items:stretch}
html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) :is(.tablewrap,.quickadd,main > .hint){grid-column:1}
html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) .tablewrap{grid-row:1}
html[data-app-kit=travel]:is([data-l-app=toolsright],[data-l-app=toolsleft]) .toolbar{grid-row:1 / span 3}
html[data-app-kit=travel][data-l-app=toolsleft] main{grid-template-columns:240px minmax(0,1fr)}
html[data-app-kit=travel][data-l-app=toolsleft] .toolbar{grid-column:1}
html[data-app-kit=travel][data-l-app=toolsleft] :is(.tablewrap,.quickadd,main > .hint){grid-column:2}
}
@media (min-width:1100px){
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) body{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:var(--s-6);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) body > *{max-width:none;padding-inline:0;margin-inline:0}
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) .top{grid-column:1;grid-row:1;position:sticky;top:0;padding-block:var(--s-5);border-bottom:0}
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) .brandrow,html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) .tripbar{flex-direction:column;align-items:stretch}
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) .strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) .stat.grow{grid-column:1 / -1}
html[data-app-kit=travel]:is([data-l-app=deck],[data-l-app=aside]) main{grid-column:2;grid-row:1}
html[data-app-kit=travel][data-l-app=aside] body{grid-template-columns:minmax(0,1fr) 300px}
html[data-app-kit=travel][data-l-app=aside] .top{grid-column:2}
html[data-app-kit=travel][data-l-app=aside] main{grid-column:1}
}

html[data-app-kit=places_near][data-l-app=band] body > [data-sec=nav] .btn-primary{background:var(--on-accent,#fff);color:var(--accent)}
html[data-app-kit=places_near][data-l-app=band] body > [data-sec=nav] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
html[data-app-kit=places_near][data-l-app=band] body > [data-sec=nav]{margin-bottom:var(--s-4);padding-bottom:var(--s-5)}
html[data-app-kit=places_near][data-l-app=band] body > [data-sec=nav] :is(.chips button:not([aria-pressed=true]),input){color:var(--ink)}
html[data-app-kit=places_near][data-l-app=band] body > [data-sec=nav] .chips button[aria-pressed=true]{background:var(--on-accent,#fff);color:var(--accent)}
html[data-app-kit=places_near][data-l-app=compact] .top{padding-block:var(--s-4) var(--s-2)}
html[data-app-kit=places_near][data-l-app=compact] .top h1{font-size:var(--t-2xl)}
html[data-app-kit=places_near][data-l-app=compact] .top .search{margin-top:var(--s-2)}
html[data-app-kit=places_near][data-l-app=narrow] :is(.top,.locator,.credit){max-width:860px}
@media (min-width:861px){
html[data-app-kit=places_near][data-l-app=narrow] .locator{grid-template-columns:300px minmax(0,1fr)}
html[data-app-kit=places_near][data-l-app=narrow] .map{height:min(56vh,520px)}
html[data-app-kit=places_near][data-l-app=mapleft] .locator{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
html[data-app-kit=places_near][data-l-app=mapleft] .map{grid-column:1;grid-row:1}
html[data-app-kit=places_near][data-l-app=mapleft] .side{grid-column:2;grid-row:1}
html[data-app-kit=places_near]:is([data-l-app=maptop],[data-l-app=listtop],[data-l-app=overlay],[data-l-app=cards]) .locator{grid-template-columns:minmax(0,1fr)}
html[data-app-kit=places_near][data-l-app=maptop] .map{grid-row:1;position:relative;top:auto;height:180px}
html[data-app-kit=places_near][data-l-app=maptop] .side{grid-row:2}
html[data-app-kit=places_near][data-l-app=maptop] .stores{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
html[data-app-kit=places_near][data-l-app=listtop] .side{grid-row:1}
html[data-app-kit=places_near][data-l-app=listtop] .stores{grid-auto-flow:column;grid-auto-columns:clamp(240px,28%,320px);max-height:none;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:var(--s-2)}
html[data-app-kit=places_near][data-l-app=listtop] .map{grid-row:2;position:relative;top:auto;height:min(60vh,560px)}
html[data-app-kit=places_near][data-l-app=cards] .side{grid-row:1}
html[data-app-kit=places_near][data-l-app=cards] .stores{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
html[data-app-kit=places_near][data-l-app=cards] .map{grid-row:2;position:relative;top:auto;height:min(52vh,480px)}
html[data-app-kit=places_near][data-l-app=overlay] .locator{position:relative}
html[data-app-kit=places_near][data-l-app=overlay] .map{grid-row:1;grid-column:1;position:relative;top:auto;height:min(80vh,740px)}
html[data-app-kit=places_near][data-l-app=overlay] .side{grid-row:1;grid-column:1;z-index:2;align-self:start;width:340px;max-height:calc(min(76vh,700px) - 32px);margin:var(--s-4);padding:var(--s-4);overflow:auto;border-radius:var(--r-card,12px);background:var(--surface);box-shadow:0 20px 50px -24px rgb(0 0 0/.45);box-sizing:border-box}
html[data-app-kit=places_near][data-l-app=overlay] .stores{max-height:none}
}
@media (min-width:1100px){
html[data-app-kit=places_near][data-l-app=deck] body{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:var(--s-6);align-items:start;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html[data-app-kit=places_near][data-l-app=deck] body > *{grid-column:2;max-width:none;padding-inline:0;margin-inline:0}
html[data-app-kit=places_near][data-l-app=deck] body > .top{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;padding-block:var(--s-6)}
html[data-app-kit=places_near][data-l-app=deck] body > .top .search{grid-template-columns:1fr 1fr}
html[data-app-kit=places_near][data-l-app=deck] body > .top .search input{grid-column:1 / -1}
html[data-app-kit=places_near][data-l-app=deck] body > .top h1{font-size:var(--t-2xl)}
html[data-app-kit=places_near][data-l-app=deck] .locator{grid-template-columns:minmax(260px,320px) minmax(0,1fr);padding-top:var(--s-6)}
}

/* ======== C-APPS (L-APPS-C, templates 10-11): the app bases with no layouts before 10-11. Each kit's own rules live in vendor/kvapps/kva-<kit>.css, linked by that kit's page only; here only the rules the C-APPS kits share. ======== */

/* ---- shared by the C-APPS kits (listed, so no other kit changes): band paints the header in the accent: the kicker chip keeps a see-through chip so its text stays readable (as board) ---- */
html:is([data-app-kit=auth],[data-app-kit=calculator],[data-app-kit=calendar],[data-app-kit=chat_ui],[data-app-kit=component],[data-app-kit=crud_app],[data-app-kit=editor],[data-app-kit=feed],[data-app-kit=fitness],[data-app-kit=form],[data-app-kit=generator],[data-app-kit=kanban],[data-app-kit=map_dashboard],[data-app-kit=map_explorer],[data-app-kit=market_bubbles],[data-app-kit=media_player],[data-app-kit=notes],[data-app-kit=plotter],[data-app-kit=prices],[data-app-kit=spreadsheet],[data-app-kit=store_locator],[data-app-kit=timer],[data-app-kit=watchlist],[data-app-kit=weather])[data-l-app=band] body > [data-sec=nav] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
html:is([data-app-kit=auth],[data-app-kit=calculator],[data-app-kit=calendar],[data-app-kit=chat_ui],[data-app-kit=component],[data-app-kit=crud_app],[data-app-kit=editor],[data-app-kit=feed],[data-app-kit=fitness],[data-app-kit=form],[data-app-kit=generator],[data-app-kit=kanban],[data-app-kit=map_dashboard],[data-app-kit=map_explorer],[data-app-kit=market_bubbles],[data-app-kit=media_player],[data-app-kit=notes],[data-app-kit=plotter],[data-app-kit=prices],[data-app-kit=spreadsheet],[data-app-kit=store_locator],[data-app-kit=timer],[data-app-kit=watchlist],[data-app-kit=weather])[data-l-app=band] body > [data-sec=nav] :is(input,select,textarea){color:var(--ink)} /* a field on the band keeps its own text colour (its box is the surface) */