/* Floor 16 Technologies: brand tokens and core components.
   Edition 2026.6. One file for the website, Vantage and any HTML document or report.
   Source of truth: 01-Brand-Guide. Light ground only.
   Fonts: Montserrat 600 700 800, Inter 400 500 600, Roboto Mono 500 700
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800&family=Roboto+Mono:wght@500;700&display=swap */

:root {
  color-scheme: light;

  /* palette: seven colors, one blue. Cyan Glow (#34F8FF) is retired */
  --f16-black: #000000;     /* type, outlines, key bases, dark sections. Never a key top */
  --f16-white: #FFFFFF;     /* pages, key tops */
  --f16-sky: #05BDFF;       /* the one brand blue: logo light, highlight, selected key, primary button base */
  --f16-peri: #D0D9FE;      /* pale bands, tags, hairlines, table headers, callouts */
  --f16-mauve: #C879FF;     /* one key top or tile per piece, one chart series */
  --f16-peony: #E06C9F;     /* one key top or tile per piece, a chart series, a flag */
  --f16-persian: #1D3DB7;   /* charts and small grid coordinates */

  /* roles (grays are functional tints, not brand colors) */
  --f16-paper: #FFFFFF;
  --f16-ink: #000000;
  --f16-body: #222222;
  --f16-mute: #555555;
  --f16-rule: #D0D9FE;
  --f16-grid: #E7ECFE;
  --f16-wash: #F4F5F8;

  /* type */
  --f16-display: Montserrat, 'Segoe UI', system-ui, sans-serif;
  --f16-text: Inter, Aptos, 'Segoe UI', system-ui, sans-serif;
  --f16-mono: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;

  /* keys: base drop is a twelfth of the key, corner about 15 percent, icon half the key */
  --f16-key: 72px;
}

/* ---------- type ---------- */
.f16-eyebrow { font: 500 11px/16px var(--f16-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f16-mute); }
.f16-h1 { font: 800 clamp(34px, 5vw, 56px)/1.06 var(--f16-display); letter-spacing: -.02em; color: var(--f16-ink); margin: 0; }
.f16-h2 { font: 700 22px/1.25 var(--f16-display); color: var(--f16-ink); margin: 0; }
.f16-body { font: 400 15px/1.6 var(--f16-text); color: var(--f16-body); }
.f16-num { font: 700 30px/1.2 var(--f16-display); letter-spacing: -.02em; color: var(--f16-ink); }

/* ---------- the highlight: one per headline, behind bold black text only ---------- */
.f16-mark { background: linear-gradient(transparent 62%, var(--f16-sky) 62%, var(--f16-sky) 92%, transparent 92%); padding: 0 3px; margin: 0 -3px; }
.f16-mark-sm { border-bottom: 3px solid var(--f16-sky); padding-bottom: 2px; font-weight: 700; color: var(--f16-ink); } /* under small text */

/* ---------- grid paper (header bands, key rows, backgrounds) ---------- */
.f16-gridpaper { background-color: var(--f16-paper);
  background-image: linear-gradient(var(--f16-grid) 1px, transparent 1px), linear-gradient(90deg, var(--f16-grid) 1px, transparent 1px);
  background-size: 24px 24px; }

/* ---------- keys: white or a brand color, never black. Black outline, solid black base, label underneath ---------- */
.f16-keyrow { display: flex; align-items: flex-end; gap: calc(var(--f16-key) / 4); }   /* at most six in a row */
.f16-key { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--f16-ink); }
.f16-key__top { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: var(--f16-key); height: var(--f16-key); border: 2px solid var(--f16-black); border-radius: calc(var(--f16-key) * .155);
  background: var(--f16-white); box-shadow: 0 calc(var(--f16-key) / 12) 0 0 var(--f16-black); margin-bottom: calc(var(--f16-key) / 12); }
.f16-key__top svg { width: 50%; height: 50%; fill: none; stroke: var(--f16-black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f16-key__label { font: 700 11px/16px var(--f16-mono); letter-spacing: .16em; text-transform: uppercase; }
.f16-key--sky .f16-key__top, .f16-key.is-selected .f16-key__top { background: var(--f16-sky); }   /* the action, or the page you are on */
.f16-key--peri .f16-key__top { background: var(--f16-peri); }
.f16-key--mauve .f16-key__top { background: var(--f16-mauve); }
.f16-key--peony .f16-key__top { background: var(--f16-peony); }
.f16-on-dark .f16-key__top { box-shadow: 0 calc(var(--f16-key) / 12) 0 0 var(--f16-white); }   /* on black the base turns white */

/* ---------- buttons are not keys: a face on a solid base, never a soft shadow. One primary per page ---------- */
.f16-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; box-sizing: border-box;
  border: 2px solid var(--f16-black); border-radius: 10px; background: var(--f16-white); color: var(--f16-black);
  box-shadow: 0 4px 0 0 var(--f16-black); font: 700 14px/1 var(--f16-text); text-decoration: none; cursor: pointer; margin-bottom: 4px; }
.f16-btn--primary { background: var(--f16-black); color: var(--f16-white); box-shadow: 0 4px 0 0 var(--f16-sky); }
.f16-btn:active { transform: translateY(4px); box-shadow: none; }
.f16-link { font: 600 14px var(--f16-text); color: var(--f16-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- views as words (instead of tabs, pills and chips) ---------- */
.f16-words { display: flex; gap: 28px; flex-wrap: wrap; }
.f16-words a { font: 500 15px var(--f16-text); color: var(--f16-mute); text-decoration: none; }
.f16-words a[aria-current] { font-weight: 700; color: var(--f16-ink); border-bottom: 3px solid var(--f16-sky); padding-bottom: 2px; }

/* ---------- tables ---------- */
.f16-table { width: 100%; border-collapse: collapse; font: 400 14px var(--f16-text); }
.f16-table th { background: var(--f16-peri); color: var(--f16-ink); font: 700 11px var(--f16-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 8px 12px; }
.f16-table td { padding: 8px 12px; border-bottom: 1px solid var(--f16-rule); }
.f16-table--financial th { background: var(--f16-ink); color: var(--f16-paper); }
.f16-table .num { text-align: right; font-family: var(--f16-mono); font-size: 13px; }
.f16-table tr.total td { border-top: 3px double var(--f16-ink); border-bottom: 0; font-weight: 700; }

/* ---------- chart fills 01 to 20 (guide section 08). Pick by number: .f16-fill-13 in a .f16-bar ---------- */
.f16-bar { display: flex; gap: 2px; height: 22px; }          /* stacked: 2px between segments, square ends */
.f16-bar > * { box-sizing: border-box; }
.f16-fill-01 { background: var(--f16-black); }                                           /* solid: done, counted */
.f16-fill-02 { background: var(--f16-sky); }                                             /* the one that matters */
.f16-fill-03 { background: var(--f16-peri); }                                            /* quiet context */
.f16-fill-04 { background: var(--f16-white); border: 1.5px solid var(--f16-black); }     /* outline: empty, target */
[class*="f16-fill-"]:not(.f16-fill-01):not(.f16-fill-02):not(.f16-fill-03):not(.f16-fill-19):not(.f16-fill-20) { border: 1.5px solid var(--f16-black); }
.f16-fill-05 { background: repeating-linear-gradient(135deg, #000 0 1.5px, #fff 1.5px 7px); }                    /* scored: signed, not yet money */
.f16-fill-06 { background: repeating-linear-gradient(135deg, #000 0 3px, #fff 3px 12px); }                       /* scored wide */
.f16-fill-07 { background: repeating-linear-gradient(45deg, #000 0 1.5px, #fff 1.5px 7px); }                     /* scored back */
.f16-fill-08 { background: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 7px), repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 7px); } /* cross-hatch: not firm */
.f16-fill-09 { background: linear-gradient(#000 1px, transparent 1px) 0 0/8px 8px, linear-gradient(90deg, #000 1px, #fff 1px) 0 0/8px 8px; }                 /* grid */
.f16-fill-10 { background: repeating-linear-gradient(90deg, #000 0 1.5px, #fff 1.5px 7px); }                     /* ruled: measured */
.f16-fill-11 { background: repeating-linear-gradient(0deg, #000 0 1.4px, #fff 1.4px 6px); }                      /* lined */
.f16-fill-12 { background: radial-gradient(#000 1.1px, #fff 1.3px) 0 0/6px 6px; }                                /* dotted: estimate */
.f16-fill-13 { background: repeating-linear-gradient(135deg, #000 0 1.5px, var(--f16-sky) 1.5px 7px); }           /* scored on sky: in progress, and it matters */
.f16-fill-14 { background: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 7px), repeating-linear-gradient(135deg, #000 0 1px, var(--f16-sky) 1px 7px); }
.f16-fill-15 { background: repeating-linear-gradient(135deg, #000 0 1.5px, var(--f16-peri) 1.5px 7px); }          /* quiet and unfinished */
.f16-fill-16 { background: radial-gradient(#000 1.1px, var(--f16-peri) 1.3px) 0 0/6px 6px; }                    /* quiet estimate */
.f16-fill-17 { background: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0/6px 6px; }               /* checker */
.f16-fill-18 { background: repeating-linear-gradient(90deg, #000 0 9px, #fff 9px 14px); }                        /* dashed: planned, not started */
.f16-fill-19 { background: var(--f16-mauve); }                                           /* one series per piece */
.f16-fill-20 { background: var(--f16-peony); }                                           /* a series, or a flag */
.f16-legend { display: flex; gap: 16px; font: 500 11px var(--f16-mono); color: var(--f16-ink); }
.f16-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; box-sizing: border-box; }