@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:ital,wght@0,700;0,800;1,700;1,800&display=swap');

/* Shared presentation layer for the existing KFR workflow pages.
   Page-specific layout and behavior remain owned by each surface. */
:root[data-theme="dark"],:root:not([data-theme="light"]){
  color-scheme:dark;
  --navy:#031a2d;--navy2:#01101e;--navy3:#0b3653;
  --court:#01101e;--page:#01101e;--bg:#01101e;
  --panel:#082942;--panel2:#0b3653;--row:#082942;--row-alt:#0b3653;--card:#082942;--card2:#0b3653;
  --ink:#f7fbff;--text:#f7fbff;--bone:#f7fbff;--dim:#b9c9d6;--onnavy:#f7fbff;--onnavy-dim:#b9c9d6;
  --line:rgba(237,247,255,.25);--neon:#28eef1;--cyan:#28eef1;--btn:#087ff5;
  --red:#ff3b43;--ok:#00cf3f;--amber:#ddf500;--brk:rgba(40,238,241,.14);--brk-ink:#6ff8fa;
  --disp:'Montserrat',Arial,sans-serif;--body:'Inter',Arial,sans-serif;--mono:'Inter',Arial,sans-serif;
}

html[data-theme="dark"] body{background:var(--court);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
html[data-theme="dark"] body h1,html[data-theme="dark"] body h2,html[data-theme="dark"] body h3{font-family:var(--disp)}
html[data-theme="dark"] body input,html[data-theme="dark"] body select,html[data-theme="dark"] body button{font-family:var(--body)}
html[data-theme="dark"] body input:focus-visible,html[data-theme="dark"] body select:focus-visible,html[data-theme="dark"] body button:focus-visible,html[data-theme="dark"] body a:focus-visible{outline:3px solid var(--neon);outline-offset:3px}

.kfr-surface-head{display:flex;align-items:center;gap:16px;min-height:72px;margin-bottom:24px;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.kfr-surface-brand{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--ink);text-decoration:none}
.kfr-surface-brand img{width:72px;height:72px;flex:0 0 72px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.kfr-surface-brand span{font:800 italic 18px/1 var(--disp);white-space:nowrap}
.kfr-surface-brand-compact img{width:56px;height:56px;flex-basis:56px}
.kfr-surface-brand-compact span{font-size:17px}
.kfr-surface-head .kfrnav{margin-left:auto}

html[data-theme="dark"] body .card,html[data-theme="dark"] body .step,html[data-theme="dark"] body .path,html[data-theme="dark"] body .example,html[data-theme="dark"] body .callout{border-color:var(--line);border-radius:16px}
html[data-theme="dark"] body .pill{border-radius:9px}

/* Preserve the dense board layout while aligning its banner with the KFR v1 shell. */
html[data-theme="dark"] body>.hero{background:linear-gradient(115deg,#01101e,#031a2d 58%,#0b3653);border-bottom-color:var(--cyan)}
html[data-theme="dark"] .ctl{background:var(--court)}

@media(max-width:560px){
  .kfr-surface-head{min-height:64px;margin-bottom:18px;gap:10px}
  .kfr-surface-brand img{width:60px;height:60px;flex-basis:60px}
  .kfr-surface-brand span{font-size:15px}
  .kfr-surface-brand-compact span{display:none}
}