/* RackRibbon public site. One stylesheet, no scripts, no webfonts, no image
   files, nothing third party. A privacy page that fetches a font from another
   company in order to say it collects nothing is a page that hands the
   reader's address to that company. So: system fonts only, everything served
   from Pages.

   The visual idea is the app's own workbench, because the site is describing a
   tool and should look like it: graphite ground, cool-white label stock,
   electric blue for the one thing you are working on, and amber held in
   reserve so it only ever means "fix this before you print".

   The visual signature is the LABEL STRIP: an ordered row of whole cells on a
   cool-white rail, with one shaded gap and one blue current cell. That is the
   object the reader actually holds. It deliberately shares nothing with
   FoldPin's vertical dashed fold line and hole marks, LaceLoad's pin rail and
   hanging pairs, BrassPause's brass stand lip, or GlazeTag's specimen cards.

   Every mark is drawn in CSS, so every page is plain ASCII and no glyph is at
   the mercy of the reader's font. Measurements are mono with tabular figures,
   so 432 mm and 17.5 mm line up wherever they appear. */

:root {
  --ground:      #14171a;
  --ground-deep: #0f1214;
  --panel:       #1c2126;
  --panel-lit:   #232930;
  --rail:        #2b323a;

  --stock:       #f7f9fa;
  --stock-edge:  #9aa4ad;
  --stock-gap:   #dfe4e8;
  --stock-ink:   #14181c;

  --text:        #eef1f3;
  --text-soft:   #b6bfc7;
  --muted:       #8a949d;

  --blue:        #62a6ff;
  --blue-deep:   #2c7bef;
  --blue-wash:   #17263c;

  --amber:       #ffc266;
  --amber-wash:  #2c2214;

  --rule:        #262d34;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 40rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 17px/1.65 var(--sans);
  color: var(--text);
  background: var(--ground);
  /* One cool wash across the top, like a bench lamp over dark hardware. */
  background-image: radial-gradient(56rem 20rem at 20% -8rem, #1d242c 0%, var(--ground) 72%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.4rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--blue-deep);
  color: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
}

/* --- Rack rails ------------------------------------------------------------
   Two narrow punched rails down the outer edges on wide screens, the way a
   19-inch frame is bounded. Decoration only, and they disappear on a phone
   rather than crowding it. */
@media (min-width: 62rem) {
  body::before,
  body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 26px;
    background:
      radial-gradient(circle at 13px 22px, var(--ground-deep) 3.5px, transparent 4px) 0 0 / 26px 64px repeat-y,
      linear-gradient(var(--rail), var(--rail));
    opacity: 0.7;
    pointer-events: none;
  }
  body::before { left: 2.2rem; }
  body::after  { right: 2.2rem; }
}

/* --- Site chrome ---------------------------------------------------------- */

header.site {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(var(--ground-deep), transparent);
}
header.site .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding-top: 1.5rem;
  padding-bottom: 1.2rem;
}
.wordmark {
  text-decoration: none;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.wordmark b { font-weight: 700; }
.wordmark span { color: var(--muted); font-weight: 400; }

nav.site { margin-left: auto; display: flex; gap: 1rem; }
nav.site a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
nav.site a:hover { color: var(--text); border-bottom-color: var(--blue); }
nav.site a[aria-current="page"] { color: var(--text); border-bottom-color: var(--blue); }

main { padding: 2.2rem 0 1rem; }

footer.site {
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  background: var(--ground-deep);
  color: var(--text-soft);
  font-size: 0.94rem;
}
footer.site .wrap { padding-top: 1.5rem; padding-bottom: 2.4rem; }
footer.site p { margin: 0.4rem 0; }
footer.site .links { display: flex; gap: 1.1rem; margin-bottom: 0.8rem; }

/* --- Type ----------------------------------------------------------------- */

h1 {
  font-size: 1.95rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 0.2rem 0 0.9rem;
}
h2 {
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 2.3rem 0 0.7rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
h3 { font-size: 1.03rem; margin: 1.6rem 0 0.5rem; }

p { margin: 0.85rem 0; }

.lead {
  font-size: 1.12rem;
  color: var(--text);
}

.status {
  display: inline-block;
  font: 600 0.82rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-wash);
  border: 1px solid #4a3a1e;
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  margin: 0 0 0.4rem;
}

a { color: var(--blue); }
a:hover { color: #8cc0ff; }

.mm { font-family: var(--mono); font-variant-numeric: tabular-nums; }

ul.ruled { list-style: none; margin: 0.9rem 0; padding: 0; }
ul.ruled li {
  border-top: 1px solid var(--rule);
  padding: 0.7rem 0 0.7rem 1.1rem;
  position: relative;
}
ul.ruled li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.18rem;
  width: 5px;
  height: 5px;
  background: var(--blue);
}
ul.ruled li:last-child { border-bottom: 1px solid var(--rule); }
ul.ruled strong { color: #fff; }

ul.plain { padding-left: 1.15rem; }
ul.plain li { margin: 0.35rem 0; }

/* --- The label strip figure ------------------------------------------------
   An ordered row of whole cells on cool-white stock, one shaded gap, one blue
   current cell. Drawn here, not photographed, and the caption says so. */

figure.strip { margin: 1.4rem 0 1.2rem; }

/* The worked example is a band lifted out of an actual generated PDF, served from this
   origin. It is white paper, so it sits on a light plate rather than on the graphite
   ground, and it keeps the sheet's own proportions. */
figure.sheet { margin: 1.4rem 0 1.2rem; }
figure.sheet img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  padding: 0.7rem;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
}
figure.sheet figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.7rem;
}
figure.sheet figcaption strong { color: var(--text-soft); }

.stock {
  display: flex;
  background: var(--stock);
  border: 1px solid var(--stock-edge);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
}
.cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.62rem 0.1rem;
  text-align: center;
  font: 600 0.7rem/1 var(--mono);
  color: var(--stock-ink);
  border-left: 1px solid var(--stock-gap);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.cell:first-child { border-left: 0; }
.cell.current { background: var(--blue-deep); color: #fff; }
.gap {
  flex: 0 0 1.5rem;
  background: var(--stock-gap);
  border-left: 1px solid var(--stock-edge);
  border-right: 1px solid var(--stock-edge);
}

.piece-row { display: flex; gap: 0.5rem; align-items: stretch; }
.piece-row .stock { flex: 1 1 auto; }

figure.strip figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.7rem;
}

/* --- Fact panels ---------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1.2rem 0;
}
.panel h3 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

table.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.97rem;
}
table.facts caption {
  caption-side: bottom;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: left;
  padding-top: 0.6rem;
  line-height: 1.5;
}
table.facts th,
table.facts td {
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0.5rem;
  text-align: left;
}
table.facts th { color: var(--text-soft); font-weight: 600; }
table.facts td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
table.facts tr.sum td { border-bottom: 0; color: #fff; font-weight: 600; }

.note {
  border-left: 3px solid var(--blue-deep);
  background: var(--blue-wash);
  padding: 0.8rem 1rem;
  margin: 1.2rem 0;
  border-radius: 0 8px 8px 0;
}
.note.caution {
  border-left-color: #a97a2c;
  background: var(--amber-wash);
}
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }

dl.qa { margin: 0.6rem 0; }
dl.qa dt {
  font-weight: 600;
  color: #fff;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
dl.qa dd { margin: 0.5rem 0 0; }

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--panel-lit);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

@media (max-width: 30rem) {
  h1 { font-size: 1.62rem; }
  .cell { font-size: 0.58rem; padding-left: 0; padding-right: 0; }
  .gap { flex-basis: 0.9rem; }
}