/* mmqr.ca — the page's own classes.
 *
 * styles.css above this is the Industry design system, pruned on 2026-08-16 to
 * the components this page actually uses; the pristine copy is under _ds/.
 * This file is what the page adds on top: the classes distilled out of the
 * export's 129 inline style= attributes, found by
 *
 *     python3 web_proto_worker/cssmap.py mmqr_ca/styles.css mmqr_ca
 *
 * Only declaration sets the export repeated are named. A style used once is
 * still inline, deliberately — a class with one call site is an inline style
 * with a layer of indirection. See CSS_NOTES.md.
 *
 * Loaded after styles.css, so a class here beats a design-system class of the
 * same specificity. Nothing here uses !important and nothing needs to.
 */

/* — page rhythm — */
.section       { padding: 48px 0 56px; }
/* The design system's own .hr, tightened to the gap this page puts between a
   kicker and the heading under it. Overriding the one declaration is why the
   <hr>s still carry class="hr" rather than a rule of their own. */
.section > .hr { margin: 0 0 24px; }
.kicker {
  display: block; margin: 0 0 12px;
  font-size: 13px; line-height: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
}
.section-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 32px; line-height: 36px;
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 8px;
}
.lede {
  font-size: 15px; line-height: 24px; max-width: 60ch; margin: 0 0 8px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — nav and hero — */
.nav-link      { white-space: nowrap; }
.hero-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(46px, 6.8vw, 92px); line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase;
  /* The negative left margin is the optical correction for the condensed
     face's left side bearing, so it is in em and moves with the clamp. */
  margin: 0 0 0 -0.052em;
}
.hero-title span { display: block; }

/* — the condensed uppercase run-in, at three sizes —
   Grouped because the type treatment is one decision; what differs between
   them is how each sits in its row, which is what the three rules below say. */
.svc-name, .sheet-value, .proc-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase;
}
.stack-name {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 28px; line-height: 32px;
  letter-spacing: 0.02em; text-transform: uppercase;
}

/* — the two data rows: services (full width) and the spec sheet (boxed) — */
.svc-row, .sheet-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.svc-row       { gap: 4px 24px; padding: 16px 0; }
.sheet-row     { gap: 4px 20px; padding: 14px 24px; }
/* The sheet's last row butts against the frame's own border; the services
   list keeps its rule on the last row, which is why only this one drops it. */
.sheet-row:last-child { border-bottom: 0; }

.idx {
  width: 32px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
}
.svc-name      { flex: 0 1 280px; }
.svc-note {
  flex: 1 1 340px; font-size: 15px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.sheet-label   { flex: 0 1 200px; font-size: 15px; }
.sheet-value   { flex: 0 0 auto; min-width: 140px; }
.sheet-note {
  flex: 1 1 260px; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.sheet-tab {
  border-left: 1px solid var(--color-divider);
  padding: 12px 24px; white-space: nowrap;
  font-size: 13px; line-height: 24px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-feature-settings: 'tnum' 1;
}

/* — process cards — */
.proc-card     { padding: 24px; }
.proc-title    { line-height: 24px; margin: 0; }
.proc-body {
  font-size: 15px; line-height: 24px; margin: 12px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — contact form —
   The honeypot field: a real input that no person can reach. Positioned
   off-screen rather than display:none, because some bots skip what is not
   rendered; aria-hidden and tabindex="-1" in the markup keep it out of
   assistive technology and the tab order. mmqr_ca_web_app drops any
   submission that arrives with it filled in. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — stack — */
.stack-item    { border-top: 1px solid var(--color-divider); padding-top: 12px; }
.stack-note {
  font-size: 13px; line-height: 18px; margin-top: 4px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — the project pages (2026-09-21) —
   starry_go_mail.html and the four docsis_*.html pages are built from the
   classes above and add only these. Each is on every one of them, which is
   the bar this file sets for a class. */

/* The brand is a link home on the project pages. .nav a is (0,1,1) and sets
   14px, which beats .nav-brand's 18px at (0,1,0) -- the same fight
   .nav a.btn-primary in styles.css already settles for the button. */
.nav a.nav-brand { font-size: 18px; }

/* Skip link, first in the tab order, visible only while focused (WCAG 2.4.1):
   every page puts five nav links before its content. Positioned off-screen
   rather than display:none so it exists for the keyboard to reach. */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 1;
  padding: 8px 12px; background: var(--color-accent); color: var(--color-bg);
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* Code. Square and hairline-bordered like the blueprint frame; the ground is
   the input's surface colour. .dim is a comment in a code block. */
.pre {
  margin: 0; padding: 16px 20px; overflow-x: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; tab-size: 4;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.pre .dim { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }