/* ===========================================================================
   license-record-check.css — page-scoped styles for Tool 01 only.

   SCOPE RULE: everything here is prefixed .lrc- or scoped under .lrc-page.
   The tool itself is styled entirely by /assets/tool-chassis.css; this file
   adds the page frame around it (header, intro, caveat blocks, footer) and
   the two result blocks the chassis has no class for.

   COLOUR RULE: not one hex literal in this file. Every colour resolves through
   a canon token that tool-chassis.css mirrors verbatim from assets/v4.css:
   --pacific-900 --pacific-700 --ocean-600 --sky-400 --aqua-400
   --foam-50 --foam-100 --sand-200 --sun-300 --coral-400 (+ --tc-white).
   Adding a hex here is how a palette drifts. Do not.

   FONT RULE: no external font. Same system stack the chassis uses.
   =========================================================================== */

.lrc-page {
  --lrc-ink: var(--pacific-900);
  --lrc-ink-soft: var(--pacific-700);
  --lrc-edge: var(--ocean-600);
  --lrc-divider: var(--sky-400);
  --lrc-ground: var(--foam-50);
  --lrc-quiet: var(--foam-100);
  --lrc-warm: var(--sand-200);
  --lrc-surface: var(--tc-white);

  margin: 0;
  padding: 0;
  color: var(--lrc-ink);
  background: var(--lrc-ground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.lrc-page *,
.lrc-page *::before,
.lrc-page *::after {
  box-sizing: border-box;
}

/* [hidden] must beat any author display, same reason as the chassis. */
.lrc-page [hidden] {
  display: none !important;
}

/* Page-frame focus ring matches the corrected chassis ring: Pacific outline
   carries the contrast (11:1), the Aqua halo is decoration. */
.lrc-page :focus-visible {
  outline: 3px solid var(--pacific-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--aqua-400);
  border-radius: 8px;
}

.lrc-page :focus:not(:focus-visible) {
  outline: none;
}

.lrc-shell {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* --- Skip link ------------------------------------------------------------ */

.lrc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  font-weight: 700;
  color: var(--tc-white);
  background: var(--pacific-900);
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.lrc-skip:focus {
  left: 0;
}

/* --- Header --------------------------------------------------------------- */

.lrc-head {
  background: var(--lrc-surface);
  border-bottom: 1px solid var(--lrc-divider);
}

.lrc-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 12px;
}

.lrc-brand {
  display: inline-grid;
  align-content: center;
  min-height: 44px;
  color: var(--lrc-ink);
  text-decoration: none;
}

.lrc-brand strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lrc-brand small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lrc-ink-soft);
}

.lrc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.lrc-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lrc-ink);
  text-decoration: none;
}

.lrc-nav a:hover {
  background: var(--lrc-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Breadcrumb + intro --------------------------------------------------- */

.lrc-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: clamp(18px, 3vw, 28px);
  font-size: 13px;
  font-weight: 600;
  color: var(--lrc-ink-soft);
}

.lrc-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lrc-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lrc-crumb [aria-current="page"] {
  color: var(--lrc-ink);
}

.lrc-intro {
  display: grid;
  gap: 14px;
  padding-bottom: clamp(18px, 3vw, 26px);
}

.lrc-intro h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lrc-lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--lrc-ink-soft);
  text-wrap: pretty;
}

.lrc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

/* --- Result blocks the chassis has no class for --------------------------- */

.lrc-out {
  display: grid;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--lrc-quiet);
  border: 1px solid var(--lrc-edge);
  border-radius: 8px;
}

.lrc-out__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lrc-ink-soft);
}

.lrc-out__num {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.lrc-out__go {
  justify-self: start;
}

.lrc-out__url {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.lrc-out__urlLabel {
  font-weight: 700;
  color: var(--lrc-ink-soft);
}

.lrc-out__urlValue {
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--lrc-warm);
}

.lrc-out__note {
  margin: 0;
  max-width: 66ch;
  font-size: 14px;
  color: var(--lrc-ink);
  text-wrap: pretty;
}

/* The name to paste. Sand edge = same visual language as the honest blank. */
.lrc-paste {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  background: var(--lrc-surface);
  border: 1px solid var(--lrc-edge);
  border-left: 6px solid var(--lrc-warm);
  border-radius: 8px;
}

.lrc-paste__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lrc-ink-soft);
}

.lrc-paste__value {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Chip lines inside a grid parent: keep the chip its own width, not stretched. */
.lrc-chipline {
  margin: 2px 0 0;
  justify-self: start;
}

/* --- Tap area on the source-route links -----------------------------------
   The link inside an honest blank's .tc-field__where is how a homeowner
   actually reaches the primary source, so it should not be an 18px-tall
   target just because it sits in a sentence. WCAG 2.5.8 exempts inline links,
   but exempt is not the same as good.

   Widening it with padding would change the line box and break wrapping, so
   the hit area is extended by an absolutely-positioned pseudo-element
   instead: the target grows to 44px, the text does not move by one pixel.
   Scoped to .lrc-page so it cannot leak into any other tool's chassis usage.
   Safe here because each of these blocks holds exactly one link, with far
   more than 26px of separation from the next one.
   -------------------------------------------------------------------------- */

.lrc-page .tc-field__where a,
.lrc-page .lrc-caveat p a {
  position: relative;
}

.lrc-page .tc-field__where a::after,
.lrc-page .lrc-caveat p a::after {
  content: "";
  position: absolute;
  inset-block: -13px;
  inset-inline: 0;
  /* No background: this is a hit area, not a visible box. */
}

/* A wide control should span the whole auto-fit grid on roomy viewports. */
.lrc-control--wide {
  grid-column: 1 / -1;
  max-width: 34rem;
}

/* --- Caveat blocks -------------------------------------------------------- */

.lrc-caveat {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--lrc-surface);
  border: 1px solid var(--lrc-edge);
  border-radius: 8px;
}

.lrc-caveat__h {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.lrc-caveat p {
  margin: 0;
  max-width: 68ch;
  text-wrap: pretty;
}

.lrc-caveat a {
  color: var(--lrc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.lrc-foot__note {
  margin: 4px 0 0;
  max-width: 66ch;
  font-size: 13px;
  color: var(--lrc-ink-soft);
  text-wrap: pretty;
}

/* --- Next / related ------------------------------------------------------- */

.lrc-next {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: clamp(22px, 4vw, 34px) 0 0;
}

.lrc-next__card {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 44px;
  padding: 16px 18px;
  background: var(--lrc-surface);
  border: 1px solid var(--lrc-edge);
  border-radius: 8px;
  color: var(--lrc-ink);
  text-decoration: none;
}

.lrc-next__card span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lrc-ink-soft);
}

.lrc-next__card strong {
  font-size: 17px;
  font-weight: 700;
  text-wrap: pretty;
}

.lrc-next__card:hover {
  background: var(--lrc-quiet);
}

.lrc-next__card:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Page footer ---------------------------------------------------------- */

.lrc-foot {
  margin-top: clamp(30px, 6vw, 56px);
  padding-block: 22px;
  background: var(--lrc-surface);
  border-top: 1px solid var(--lrc-divider);
}

.lrc-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lrc-foot__inner strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.lrc-foot__inner span {
  font-size: 13px;
  color: var(--lrc-ink-soft);
}

.lrc-foot__inner nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.lrc-foot__inner nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lrc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lrc-foot__inner nav a:hover {
  background: var(--lrc-quiet);
}

/* --- Reduced motion -------------------------------------------------------
   Nothing here animates or moves. This block exists so the rule is stated
   rather than assumed: no state on this page is carried by motion, so a
   reduced-motion reader loses no part of the story.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lrc-page *,
  .lrc-page *::before,
  .lrc-page *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Forced colors -------------------------------------------------------- */

@media (forced-colors: active) {
  .lrc-out,
  .lrc-paste,
  .lrc-caveat,
  .lrc-next__card {
    border: 1px solid CanvasText;
  }

  .lrc-page :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}

/* --- Narrow viewports ----------------------------------------------------- */

@media (max-width: 620px) {
  .lrc-head__inner {
    justify-content: flex-start;
  }

  .lrc-out__go {
    justify-self: stretch;
    width: 100%;
  }

  .lrc-foot__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   Directory/profile frame convergence
   -------------------------------------------------------------------------- */

.lrc-page {
  --lrc-navy: #16324f;
  --lrc-coral: #d95745;
  --lrc-divider: #d8d9dc;
  background: var(--tc-white);
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: clip;
}

.lrc-shell {
  width: min(calc(100% - 48px), 1180px);
  max-width: none;
  padding-inline: 0;
}

.lrc-page .csdp-brand__accent {
  color: var(--lrc-coral);
}

.lrc-page :focus-visible {
  outline: 3px solid var(--lrc-coral);
  outline-offset: 2px;
  box-shadow: none;
}

.lrc-head {
  min-height: 64px;
  background: var(--tc-white);
  border-bottom-color: var(--lrc-divider);
}

.lrc-head__inner {
  min-height: 64px;
  padding-block: 0;
}

.lrc-brand {
  display: inline-flex;
  min-height: 64px;
  align-items: center;
  color: var(--lrc-navy);
}

.lrc-brand strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.lrc-brand small {
  display: none;
}

.lrc-nav {
  gap: 28px;
}

.lrc-nav a {
  min-height: 44px;
  padding: 0;
  color: var(--lrc-ink);
  font-size: 14px;
  font-weight: 650;
}

.lrc-nav a:hover {
  color: var(--lrc-navy);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lrc-crumb {
  min-height: 52px;
  padding-top: 0;
}

.lrc-intro {
  gap: 13px;
  padding: 40px 0 32px;
  border-top: 1px solid var(--lrc-divider);
}

.lrc-intro h1 {
  max-width: 25ch;
  color: var(--lrc-ink);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: 0;
}

.lrc-lede {
  max-width: 68ch;
  color: var(--lrc-ink-soft);
  font-size: 17px;
}

.lrc-page .tc-tool {
  border-color: var(--lrc-divider);
  box-shadow: none;
}

.lrc-page .tc-tool__title,
.lrc-page .tc-tool__purpose,
.lrc-page .tc-method__h,
.lrc-page .tc-input__legend,
.lrc-page .tc-result__head,
.lrc-page .tc-foot__label,
.lrc-out__label,
.lrc-paste__label,
.lrc-next__card span {
  letter-spacing: 0;
  text-transform: none;
}

.lrc-out,
.lrc-paste,
.lrc-caveat,
.lrc-next__card {
  border-color: var(--lrc-divider);
  box-shadow: none;
}

.lrc-out {
  background: var(--tc-white);
}

.lrc-foot {
  color: var(--lrc-ink);
  background: var(--tc-white);
  border-top-color: var(--lrc-divider);
}

.lrc-foot__inner strong {
  color: var(--lrc-navy);
}

.lrc-foot__inner nav {
  gap: 10px 24px;
}

.lrc-foot__inner nav a {
  padding-inline: 0;
  color: var(--lrc-ink);
  text-decoration: none;
}

.lrc-foot__inner nav a:hover {
  color: var(--lrc-navy);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 620px) {
  .lrc-shell {
    width: min(calc(100% - 32px), 1180px);
  }

  .lrc-head__inner {
    min-height: 64px;
    flex-wrap: nowrap;
    padding-block: 0;
  }

  .lrc-nav {
    width: auto;
    gap: 0;
    margin-left: auto;
    overflow: visible;
  }

  .lrc-nav a:not(:first-child) {
    display: none;
  }

  .lrc-intro {
    padding-top: 30px;
  }
}