/* craton-v2.css · craton-erp.us v2
   ─────────────────────────────────────────────────────────────────────────────
   An additive layer loaded after css/craton.css. It adds one component and
   changes nothing that already exists, so it can be removed without touching
   the prerendered pages.

   1 · The device row (.cr-devices / .cr-device)

   The same call-out ALIDADE uses for its mobile screens, drawn in CRATON's
   vocabulary rather than ALIDADE's. Three decisions, each with a reason:

   a) The frame is square. --radius-card on this brand is 2px; CRATON is a
      square-cornered system and a 30px pill frame would have been an ALIDADE
      import. The phone's own rounded silhouette sits inside a square plinth,
      which is what the brand would do.

   b) The captures are masked, not cropped. Each PNG had the prototype's void
      colour (#0E1115) baked into its four corners. Those corners are now
      transparent, so the frame's surface shows through the phone's radius
      instead of four darker notches appearing in it.

   c) The separation is a surface step and a hairline, never a shadow. The
      phone bezel is #161C24 — the same value as --bg-page, which is why it
      would vanish if the frame sat at page level. The section drops to
      --bg-section-alt (#1F2731) and the frame rises to --surface-raised
      (#2C3744), putting the phone 1.30:1 above its frame instead of 1.00:1.
      The 1px hairline does the rest.

   The emphasised frame reuses .cr-card--hi's own rule — a 2px top strip in
   the strata colour — rather than inventing an emphasis. Its top padding
   drops by 1px so the four captures still align on their top edge.
*/

.cr-mobile { background: var(--bg-section-alt); }

.cr-devices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  margin-top: var(--s7);
  align-items: start;
}

.cr-device {
  margin: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 10px;
}

.cr-device--hi {
  border-top: 2px solid var(--accent-strata);
  padding-top: 9px;
}

.cr-device img { display: block; width: 100%; height: auto; }

.cr-device figcaption {
  font-family: var(--t-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 6px 4px;
  text-wrap: balance;
}

.cr-device figcaption b {
  display: block;
  color: var(--text-bright);
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}

@media (max-width: 1000px) {
  .cr-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 560px) {
  .cr-devices { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; }
}

/* ── 2 · Type floor ──────────────────────────────────────────────────────────
   Two label styles sit at 9.5px, below the 10px floor the other three sites in
   the portfolio are held to. Both are all-caps mono at 0.2em tracking, which is
   the hardest combination to read small — the tracking is pulled back a little
   as the size goes up so the labels occupy the same line length they did.

   Measured: .cr-eyebrow appears on every interior page; .cr-ev__l is the
   evidence label on the record and hours surfaces. */
[data-brand="craton"] .cr-eyebrow { font-size: 10px; letter-spacing: 0.185em; }
.cr-ev__l { font-size: 10px; letter-spacing: 0.185em; }

/* ── 3 · Touch targets ───────────────────────────────────────────────────────
   The primary nav and the footer link lists were 18–19px tall. They are
   navigation, not links inside a sentence, so WCAG 2.5.8's inline exception
   does not cover them: at 390 the footer lists are the main way around the
   site and every one of them was under half the 44px floor.

   The nav bar is 68px, so a 44px target fits inside it without changing the
   bar's height. In the footer this opens the lists up, which they needed. */
.cr-nav ul li a,
footer ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
footer ul li { display: flex; }

/* ── 4 · Image slots ─────────────────────────────────────────────────────────
   <image-slot> is a custom element defined in the bundle's JavaScript, which
   the prerender removes. The build now swaps each one for the plain <img> it
   was standing in for; this is the sizing the custom element used to apply.
   The three slot wrappers already position the element, so this only has to
   make the image fill it. */
.cr-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 5 · Platform status mark (10 Oct 2026) ────────────────────────────────
   CRATON is public and in development, availability planned for 2027 (TBD).
   The status is carried the CRATON way: a fill pattern plus the literal word,
   never colour alone. The 45deg hatch is the same pattern .cr-band--attention
   already uses, so no new hue enters the palette. .cr-sm--attention had no
   rule in craton.css (the binder's attention marks rendered as empty boxes);
   it now shares the hatch. */
.cr-sm--hatch,
.cr-sm--attention {
  background: repeating-linear-gradient(45deg, var(--surface-raised) 0 3px, var(--accent-primary) 3px 5px);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.cr-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s4);
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-card, 2px);
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-primary-hover);
  background: transparent;
  max-width: 100%;
}
.cr-status .cr-sm { width: 12px; height: 12px; }

.cr-status--sm {
  margin: 0 0 var(--s4);
  padding: 0;
  border: 0;
  font-size: 10px;
  color: var(--text-muted);
}
.cr-status--sm .cr-sm { width: 10px; height: 10px; }

.cr-avail {
  font-family: var(--t-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: var(--s4) 0 0;
}

/* ── 6 · Walkthrough request form ──────────────────────────────────────────
   Composes a mailto: — nothing is sent from the page and nothing is stored. */
.cr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); margin-top: var(--s6); text-align: left; }
.cr-form__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-form__f--wide { grid-column: 1 / -1; }
.cr-form label {
  font-family: var(--t-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-label);
}
.cr-form input,
.cr-form select,
.cr-form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text-bright);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control, 2px);
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
.cr-form textarea { min-height: 112px; resize: vertical; }
.cr-form input:focus-visible,
.cr-form select:focus-visible,
.cr-form textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent-primary); }
.cr-form__hint { font-size: 13px; color: var(--text-muted); }
.cr-form__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.cr-form__act .cr-btn { cursor: pointer; }
.cr-form__err { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--text-bright); display: flex; gap: 10px; align-items: center; }
.cr-form__err[hidden], .cr-confirm[hidden], .cr-form[hidden] { display: none; }
.cr-confirm {
  margin-top: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--border-hairline);
  border-top: 2px solid var(--accent-strata);
  background: var(--surface-card);
  text-align: left;
}
.cr-confirm .cr-disp { font-size: 32px; margin: var(--s3) 0; }
@media (max-width: 720px) { .cr-form { grid-template-columns: 1fr; } }
.cr-form label .cr-form__hint { font-size: inherit; color: var(--text-muted); }

/* ── 10 Oct 2026 · brand-standard alignment (HYP-BS-04-CRAT v1.0) ──────────────
   Big Shoulders Display 800 is tracked for marketing headlines (standard: .07em; packet range
   .04–.07em). .05em keeps the large hero inside its measure. Muted label is #9CA6B2 (set in craton.css). */
.cr-disp{letter-spacing:.05em}
.cr-hero h1.cr-disp{max-width:13ch}