/* Floor 16 sample deliverables: one stylesheet for every document under /samples/.
   Follows the Documents section of the Core Brand Guidelines 2026.6: black on white, Montserrat
   headings, Roboto Mono labels, Inter body (Aptos in Office), tables that do the work. Deep Sky
   appears only as the logo light, the highlight and table rules (charts follow guide section 08).
   Load order in each sample:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&family=Roboto+Mono:wght@500;700&display=swap">
     <link rel="stylesheet" href="/brand/floor16-tokens.css">
     <link rel="stylesheet" href="/samples/sample.css">                                          */

* { box-sizing: border-box; }
html { background: var(--f16-wash); }
body { margin: 0; font: 400 15px/1.6 var(--f16-text); color: var(--f16-body); -webkit-font-smoothing: antialiased; }

/* ---------- the bar above the document: back to the site, sample label, print ---------- */
.s-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 24px; background: #fff; border-bottom: 1px solid #D5D8DF; font: 500 11px/1.4 var(--f16-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f16-mute); }
.s-bar a { color: #000; text-decoration: none; font-weight: 700; }
.s-bar a:hover { text-decoration: underline; text-decoration-color: var(--f16-sky); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.s-bar .s-tag { color: #000; }
.s-bar button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; color: #000; font-weight: 700; }

/* ---------- the page: Letter proportions on screen, one column ---------- */
.s-doc { max-width: 880px; margin: 32px auto 64px; background: #fff; border: 1px solid #D5D8DF; padding: 72px 80px 64px; }
@media (max-width: 760px) { .s-doc { margin: 0; border: 0; padding: 32px 18px 48px; } }

/* running header: document title left, FLOOR 16 TECHNOLOGIES right, hairline */
.s-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid #000; margin-bottom: 48px;
  font: 500 10px/1.4 var(--f16-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f16-mute); }

/* cover block */
.s-cover { padding-bottom: 32px; margin-bottom: 40px; border-bottom: 2px solid #000; }
.s-cover .s-logo { width: 190px; margin: -14px 0 36px -14px; display: block; }
.eyebrow { font: 500 11px/1.4 var(--f16-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--f16-mute); }
h1.s-title { font: 800 44px/1.08 var(--f16-display); letter-spacing: -.02em; color: #000; margin: 10px 0 14px; }
.s-sub { font-size: 18px; color: var(--f16-body); margin: 0 0 24px; }
.s-meta { width: 100%; border-collapse: collapse; margin-top: 8px; }
.s-meta th { font: 700 10px var(--f16-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f16-mute); text-align: left; padding: 6px 12px 2px 0; }
.s-meta td { font-size: 14px; padding: 0 12px 6px 0; vertical-align: top; color: #000; }

/* headings: H1 with a 1pt black rule, H2, H3 */
h2 { font: 700 26px/1.25 var(--f16-display); color: #000; margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1.5px solid #000; }
h3 { font: 700 18px/1.3 var(--f16-display); color: #000; margin: 32px 0 10px; }
h4 { font: 600 15px/1.3 var(--f16-display); color: #000; margin: 22px 0 8px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }
.lede { font-size: 17px; color: #000; }
.muted { color: var(--f16-mute); }
.mono { font-family: var(--f16-mono); }

/* the highlight: one or two per page, behind bold black text */
.mk { font-weight: 700; color: #000; background: linear-gradient(transparent 62%, var(--f16-sky) 62%, var(--f16-sky) 92%, transparent 92%); }

/* ---------- tables ---------- */
table.t { width: 100%; border-collapse: collapse; margin: 12px 0 22px; font-size: 14px; }
table.t th { background: var(--f16-peri); color: #000; font: 700 10.5px/1.3 var(--f16-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 8px 10px; }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--f16-peri); vertical-align: top; }
table.t td.num, table.t th.num { text-align: right; font-family: var(--f16-mono); font-size: 13px; }
table.t.fin th { background: #000; color: #fff; }
table.t tr.total td { border-top: 3px double #000; border-bottom: 0; font-weight: 700; }
table.t.matrix th { background: none; border-bottom: 1.5px solid #000; }
table.t.sched td:last-child { font-family: var(--f16-mono); font-size: 12.5px; }

/* callout: Periwinkle fill, 3pt black left rule. Flag: black mono caps on Peony or Mauve */
.callout { background: var(--f16-peri); border-left: 3px solid #000; padding: 16px 20px; margin: 18px 0 22px; }
.callout > :last-child { margin-bottom: 0; }
.flag { display: inline-block; font: 700 10px/1.5 var(--f16-mono); letter-spacing: .1em; text-transform: uppercase; color: #000; background: var(--f16-peony); padding: 1px 6px; }
.flag.mauve { background: var(--f16-mauve); }
.flag.peri { background: var(--f16-peri); }

/* numbers in a row, each on a 3px rule; the one that matters on Deep Sky */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 20px 0 28px; }
.nums > div { border-top: 3px solid #000; padding-top: 10px; }
.nums > div.sky { border-top-color: var(--f16-sky); }
.nums b { display: block; font: 800 34px/1 var(--f16-display); letter-spacing: -.02em; color: #000; }
.nums span { display: block; margin-top: 6px; font-size: 13px; color: var(--f16-mute); line-height: 1.45; }

/* score bars and charts: use the tokens' .f16-bar and .f16-fill-NN; these are the row layout */
.bars { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 22px; }
.bars .r { display: grid; grid-template-columns: 180px 1fr 56px; gap: 14px; align-items: center; font-size: 14px; }
.bars .r .v { font: 500 12px var(--f16-mono); text-align: right; color: #000; }
.bars .trk { height: 14px; border: 1.5px solid #000; background: #fff; }
.bars .trk > i { display: block; height: 100%; background: #000; }
.bars .trk > i.sky { background: var(--f16-sky); }
@media (max-width: 560px) { .bars .r { grid-template-columns: 1fr 48px; } .bars .r .trk { grid-column: 1 / -1; } }

/* footer: key icon, document number and version, page */
.s-foot { display: flex; align-items: center; gap: 12px; margin-top: 56px; padding-top: 10px; border-top: 1px solid #000; font: 500 10px var(--f16-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f16-mute); }
.s-foot img { width: 26px; margin: -4px; }
.s-foot .r { margin-left: auto; }
.s-note { font-size: 12.5px; color: var(--f16-mute); border-top: 1px solid #D5D8DF; padding-top: 10px; margin-top: 28px; }

@media print {
  html { background: #fff; }
  .s-bar { display: none; }
  .s-doc { border: 0; margin: 0; padding: 0; max-width: none; }
  h2 { break-after: avoid; }
  table, .callout, .nums { break-inside: avoid; }
}