/* Kodebeat lab pages: the browser tools that sit beside a paper (the review sheet,
   well-architected and its card deck). Each is a self-contained app
   with its own layout, so it does not take site.css, whose base rules would
   fight that layout. What it takes from the brand lives here instead: the
   self-hosted fonts, the tokens under --kb-* names (each page maps its own
   variable names onto them, so light and dark are decided in one place), and
   the slim header and footer every lab page shares. */

/* ---- fonts: the same files and ranges as site.css ----------------------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- tokens: site.css's values, light and dark, under --kb-* ------------ */
:root{
  --kb-ink:#152019; --kb-paper:#F5F8F3; --kb-panel:#FFFFFF;
  --kb-moss:#3E7C4F; --kb-moss-deep:#2C5B3A; --kb-amber:#C8880F; --kb-amber-ink:#8A5E08;
  --kb-mist:#D9E2D6; --kb-muted:#5C6B60;
  --kb-link:var(--kb-moss-deep); --kb-on-accent:#FFFFFF; --kb-pulse:var(--kb-moss);
  --kb-btn:#152019; --kb-btn-ink:#FFFFFF; --kb-btn-hover:#2C5B3A;
  --kb-tint:color-mix(in srgb,var(--kb-moss) 7%,var(--kb-paper));
  --kb-shadow:rgba(21,32,25,.18);
  --kb-display:'Bricolage Grotesque',system-ui,sans-serif;
  --kb-body:'Public Sans',system-ui,-apple-system,sans-serif;
  --kb-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kb-ink:#E4ECE5; --kb-paper:#0E1611; --kb-panel:#152019;
    --kb-moss:#3E7C4F; --kb-moss-deep:#8FC79C; --kb-amber:#D69A2A; --kb-amber-ink:#E2B150;
    --kb-mist:#28392E; --kb-muted:#A3B5A7;
    --kb-link:#8FC79C; --kb-pulse:#5FA873;
    --kb-btn:#E4ECE5; --kb-btn-ink:#0E1611; --kb-btn-hover:#8FC79C;
    --kb-shadow:rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --kb-ink:#E4ECE5; --kb-paper:#0E1611; --kb-panel:#152019;
  --kb-moss:#3E7C4F; --kb-moss-deep:#8FC79C; --kb-amber:#D69A2A; --kb-amber-ink:#E2B150;
  --kb-mist:#28392E; --kb-muted:#A3B5A7;
  --kb-link:#8FC79C; --kb-pulse:#5FA873;
  --kb-btn:#E4ECE5; --kb-btn-ink:#0E1611; --kb-btn-hover:#8FC79C;
  --kb-shadow:rgba(0,0,0,.5);
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

/* ---- the header: logo, the paper, the catalogue, the theme toggle ------- */
.kb-bar{border-bottom:1px solid var(--kb-mist);background:var(--kb-paper);font-family:var(--kb-body)}
.kb-bar-in{max-width:1180px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;gap:1.1rem}
.kb-logo{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-.05em;
  text-decoration:none;color:var(--kb-ink);display:flex;align-items:center;gap:.45rem;margin-right:auto}
.kb-logo svg{overflow:visible;flex:none}
.kb-logo .pulse{stroke:var(--kb-pulse)}
.kb-bar a.kb-link{color:var(--kb-ink);text-decoration:none;font-weight:500;font-size:.9rem;white-space:nowrap}
.kb-bar a.kb-link:hover{color:var(--kb-link)}
.kb-bar .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;flex:none;
  border:1px solid var(--kb-mist);border-radius:4px;background:none;color:var(--kb-ink);cursor:pointer}
.kb-bar .theme-toggle:hover{border-color:var(--kb-moss);color:var(--kb-link)}
.kb-bar .theme-toggle svg{width:1rem;height:1rem}
.kb-bar .theme-toggle .to-light{display:none}
:root[data-theme="dark"] .kb-bar .theme-toggle .to-light{display:block}
:root[data-theme="dark"] .kb-bar .theme-toggle .to-dark{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .kb-bar .theme-toggle .to-light{display:block}
  :root:not([data-theme="light"]) .kb-bar .theme-toggle .to-dark{display:none}
}
@media(max-width:520px){
  .kb-bar-in{padding:0 16px;gap:.8rem}
  .kb-bar a.kb-link.kb-wide{display:none}
  .kb-bar .theme-toggle{width:2.5rem;height:2.5rem}
}
.kb-bar a:focus-visible,.kb-bar button:focus-visible,.kb-foot a:focus-visible,.kb-foot button:focus-visible{
  outline:3px solid var(--kb-amber);outline-offset:3px;border-radius:2px}

/* ---- the footer: the same line every page on the site closes on --------- */
.kb-foot{border-top:1px solid var(--kb-mist);margin-top:3rem;padding:1.6rem 0;font-family:var(--kb-body);
  font-size:.84rem;color:var(--kb-muted);background:var(--kb-paper)}
.kb-foot .foot{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.kb-foot .foot-links{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.kb-foot a,.kb-foot .kb-cookie-settings{color:var(--kb-muted)}
@media(max-width:520px){.kb-foot .foot{padding:0 16px}}