/* brand-review/system-v4/base.css: shared base for every tab of the Kaizn design system v3 review (Josh, 2026-10-30: "your new version of the design system built into its own page ... with tabs that I can cycle through").
   Lines 3 to 56 of brand-review/components-v1/part1.css copied as is (page chrome, sections with the subtle grid, the Navy band roles, glass, the thirteen color classes); then the tab bar and pager. Every color comes from system-v2/tokens.css. */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--tx);font:400 1.0625rem/1.55 var(--fb)}
h1,h2,h3,h4,p,figure,ul,dl,dd,blockquote{margin:0}
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;color:var(--h);text-wrap:balance}
h2{font-size:clamp(1.7rem,1.5vw + 1.1rem,2.4rem);line-height:1.1}
h3{font-size:1.25rem;line-height:1.2}
h4{font-size:1.05rem;line-height:1.25}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer}
code{font:500 .8rem/1.4 var(--fm)}
mark{padding:.06em .3em;color:var(--onhl);background:var(--hl);border-radius:var(--bevel-sm);corner-shape:bevel;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ic{flex:none;width:20px;height:20px}
/* page chrome: solid bar, versions row, part nav */
.bar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px clamp(12px,2vw,28px);background:var(--bar);border-bottom:1px solid var(--line)}
.bar h1{margin-right:6px;font-size:1.2rem}
.th{display:flex;gap:6px;margin-left:auto}
.tb{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font:700 .85rem var(--fd);color:var(--h);background:transparent;--cut:var(--bevel-ctl);--band:1px;--band-color:var(--line)}
.tb[aria-pressed=true]{color:var(--onsel);background:var(--sel);--band-color:var(--sel)}
.vers{display:flex;flex-wrap:wrap;gap:4px 8px;padding:6px clamp(12px,2vw,28px);font:700 .78rem var(--fd);color:var(--tx);background:var(--bar);border-bottom:1px solid var(--line)}
.vers a{color:var(--h);text-underline-offset:3px}
.vers a[aria-current]{text-decoration:none;font-weight:800}
.parts{display:flex;flex-wrap:wrap;gap:10px;padding:14px clamp(12px,2vw,28px);background:var(--ground)}
.pt{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:700 .9rem var(--fd);color:var(--h);text-decoration:none;--cut:var(--bevel-ctl);--band-color:var(--line)}
.pt[aria-current]{color:var(--onsel);background:var(--sel);--band-color:var(--sel)}
/* sections: flat with the subtle grid (2 percent, 48px cell), padding clamp(56px,7vw,112px) above and below */
.d{position:relative;padding-block:clamp(56px,7vw,112px);scroll-margin-top:84px;color:var(--tx);background-color:var(--ground);background-image:linear-gradient(color-mix(in srgb,var(--h) var(--grid),transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--h) var(--grid),transparent) 1px,transparent 1px);background-size:48px 48px}
.d.w{background-color:var(--wash)}
.d.bnd{background-color:var(--bandbg);background-image:linear-gradient(color-mix(in srgb,var(--white) var(--grid),transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--white) var(--grid),transparent) 1px,transparent 1px);color:var(--white)}
/* the Navy band is Navy in both themes: its text and glass roles are set here, so every component inside reads right in light and dark */
.bnd{--h:var(--white);--tx:var(--silver);--mu:var(--fog);--ac:var(--silver);--tint:var(--white);--ta:12%;--accent:var(--white);--focus:var(--white);--line:var(--fog);--chip:color-mix(in srgb,var(--white) 30%,transparent);--gl:color-mix(in srgb,var(--white) 16%,transparent);--edge:color-mix(in srgb,var(--white) 12%,transparent)}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.eyebrow{display:block;margin-bottom:12px;font:700 11px var(--fd);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.sub{max-width:60rem;margin-top:10px;font:500 1.05rem/1.5 var(--fd);color:var(--tx)}
.g{margin-top:clamp(34px,4vw,52px)}
.g>h3{margin-bottom:6px}
.g>.sub{margin:0 0 18px}
.cn{display:block;font:700 .74rem/1.3 var(--fd);color:var(--mu)}
.cn code{color:var(--tx)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.cell{display:grid;gap:6px;justify-items:start;align-content:start;min-width:0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
/* glass: tinted, 14px blur, hairline band from the bevel recipe, solid fallback */
.glass{--bc:var(--gl);background:color-mix(in srgb,var(--tint) var(--ta),transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* v4 (decision 5697): inside a glass card, glass buttons and glass boxes become plain --bar fills, never glass on glass (library-v4/library.css:137) */
.glass .glass,.glass .sg{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bar)}
@supports not (backdrop-filter:blur(1px)){.glass{background:color-mix(in srgb,var(--tint) 94%,transparent)}}
.bx{--bc:var(--edge)}
.glass.bx{--bc:var(--gl)}
/* the thirteen colors, by name: each sets its dark stop --ca and light stop --cb for the current theme */
.c-red{--ca:var(--red-a);--cb:var(--red-b)}.c-orange-red{--ca:var(--orange-red-a);--cb:var(--orange-red-b)}.c-brown{--ca:var(--brown-a);--cb:var(--brown-b)}
.c-lime{--ca:var(--lime-a);--cb:var(--lime-b)}.c-green{--ca:var(--green-a);--cb:var(--green-b)}.c-teal{--ca:var(--teal-a);--cb:var(--teal-b)}
.c-cyan{--ca:var(--cyan-a);--cb:var(--cyan-b)}.c-sky{--ca:var(--sky-a);--cb:var(--sky-b)}.c-blue{--ca:var(--blue-a);--cb:var(--blue-b)}
.c-violet{--ca:var(--violet-a);--cb:var(--violet-b)}.c-purple{--ca:var(--purple-a);--cb:var(--purple-b)}.c-magenta{--ca:var(--magenta-a);--cb:var(--magenta-b)}
.c-pink{--ca:var(--pink-a);--cb:var(--pink-b)}.c-pewter{--ca:var(--pewter);--cb:var(--pewter)}
/* design system tabs: a row of page links, so the underline style (Josh on the tab decision: "we'll use both, but for different purposes"). One tab is one page, so only one tab is ever loaded. */
.dst{display:flex;gap:2px;padding:4px clamp(12px,2vw,28px) 0;overflow-x:auto;scrollbar-width:thin;background:var(--bar);border-bottom:1px solid var(--line)}
.dst a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:800 .9rem var(--fd);color:var(--mu);text-decoration:none;white-space:nowrap}
.dst a:hover{color:var(--h)}
.dst a[aria-current]{color:var(--h);background:linear-gradient(var(--cta-b),var(--cta-b)) left bottom/100% 3px no-repeat}
.dst a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* pager: previous and next tab at the foot of every tab; the left and right arrow keys do the same */
.pgr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px clamp(12px,2vw,28px) 44px;background:var(--ground);border-top:1px solid var(--gl)}
.pgr a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;font:800 1rem var(--fd);color:var(--h);text-decoration:none;--cut:var(--bevel-ctl)}
.pgr a{--band-color:var(--gl)}
.pgr a[rel=next]{margin-left:auto}
.pgr small{font:700 .72rem var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}

/* v4 additions (decision 5695). Picture stage (decisions 5690, 5697): a section or frame with a background picture and the flat 60 percent overlay; set --pic-l (daylight, light theme) and --pic-d (dark twin) to url() values. Content goes in .stage>* with glass panels over it. */
.stage{position:relative;isolation:isolate;background:var(--pic-l) center/cover no-repeat}
:root.dark .stage{background-image:var(--pic-d)}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--ov) var(--str),transparent)}
/* decision 5794: 60 percent overlay only when the text sits on a glass panel; text directly on the picture gets 80 percent (.ov80) */
.stage.ov80{--str:80%}
/* Kairos nav item colors (decision 5681): an item with data-id sets --nc from tokens.css */
[data-id=home]{--nc:var(--nav-home)}[data-id=requests]{--nc:var(--nav-requests)}[data-id=projects]{--nc:var(--nav-projects)}[data-id=library]{--nc:var(--nav-library)}[data-id=money]{--nc:var(--nav-money)}[data-id=sales]{--nc:var(--nav-sales)}[data-id=settings]{--nc:var(--nav-settings)}
/* date text (decision 5678) */
.t-late{color:var(--late);font-weight:600}.t-due{color:var(--due-today);font-weight:600}
/* progress (decision 5685): add .dn to .trk only when the value is 100 and the fill has reached the end of the track (states-v4/states.js:23-27), never earlier */
.fil{background:linear-gradient(135deg,var(--progress-a),var(--progress-b))}
.trk.dn .fil{background:linear-gradient(135deg,var(--progress-done-a),var(--progress-done-b))}