/* ===================================================================
   LaunchCheck — light + glassmorphism UI
   Layered on top of the SassTech compiled Tailwind build (output.css),
   which we use only for its font imports and design tokens.
   All component styles live here, so no Tailwind build step is needed.
   =================================================================== */

:root {
  --lc-accent:      #1351d8;   /* SassTech --color-main-600 */
  --lc-accent-soft: #eef4ff;
  --lc-heading:     #150e3d;   /* SassTech --heading-color */
  --lc-body:        #5b6178;
  --lc-muted:       #838aa2;

  --lc-pass: #16a34a;
  --lc-warn: #d97706;
  --lc-fail: #dc2626;
  --lc-info: #94a3b8;

  --lc-bg:      #f6f7fb;
  --lc-line:    rgba(21, 14, 61, 0.08);

  /* Glass recipe — used by .glass */
  --lc-glass-bg:     rgba(255, 255, 255, 0.66);
  --lc-glass-border: rgba(255, 255, 255, 0.85);
  --lc-glass-shadow: 0 8px 32px rgba(21, 14, 61, 0.07), 0 1px 2px rgba(21, 14, 61, 0.04);

  --lc-radius: 18px;
  --lc-wrap: 1060px;

  --lc-sans: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The template's display face. Loaded by output.css's @import — the hero
     already uses it, and the report must match or it reads as a bolted-on
     admin panel rather than the same product. */
  --lc-serif: "DM Serif Display", Georgia, serif;

  --lc-ink: #150e3e;   /* template --color-main-two-600 */
}

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

.lc-body {
  margin: 0;
  background: var(--lc-bg);
  color: var(--lc-body);
  font-family: var(--lc-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--lc-heading); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
.lc-accent { color: var(--lc-accent); }

.lc-wrap { max-width: var(--lc-wrap); margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ambient colour wash behind the glass ---------- */

.lc-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lc-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.lc-blob--1 { width: 620px; height: 620px; top: -220px; left: -140px;  background: #cfe0ff; }
.lc-blob--2 { width: 520px; height: 520px; top: -120px; right: -160px; background: #e3d9ff; }
.lc-blob--3 { width: 460px; height: 460px; top: 420px;  left: 44%;     background: #d7f0ff; opacity: .38; }

/* ---------- the glass primitive ---------- */

.glass {
  background: var(--lc-glass-bg);
  border: 1px solid var(--lc-glass-border);
  box-shadow: var(--lc-glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--lc-radius);
}

/* Fallback: if backdrop-filter is unsupported, use a near-opaque panel
   so text never sits on an unreadable transparent background. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.95); }
}

/* ---------- nav ---------- */

.lc-nav {
  position: sticky; top: 0; z-index: 50;
  border-radius: 0;
  border-width: 0 0 1px;
  border-color: var(--lc-line);
}
.lc-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.lc-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17.5px; letter-spacing: -.02em;
  color: var(--lc-heading); text-decoration: none;
}
.lc-brand__mark {
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(135deg, var(--lc-accent), #7c3aed);
  box-shadow: 0 2px 8px rgba(19, 81, 216, .35);
}
.lc-nav__links a { color: var(--lc-muted); text-decoration: none; margin-left: 24px; font-size: 14.5px; font-weight: 500; }
.lc-nav__links a:hover { color: var(--lc-heading); }

/* ---------- hero ---------- */

.lc-hero { padding: 86px 0 44px; text-align: center; }
.lc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.7); border: 1px solid var(--lc-glass-border);
  color: var(--lc-body); font-size: 13px; font-weight: 600;
  padding: 7px 15px; border-radius: 99px; margin-bottom: 22px;
}
.lc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lc-pass); }

.lc-hero h1 { font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -.035em; font-weight: 800; }
.lc-hero h1 .font-dm-serif { font-weight: 400; font-style: italic; }
.lc-sub { color: var(--lc-body); font-size: 18px; max-width: 620px; margin: 0 auto 36px; }

/* search box — the SassTech "domain search" pattern, reskinned */
.lc-scanbox {
  display: flex; gap: 10px; align-items: center;
  max-width: 620px; margin: 0 auto; padding: 10px;
  border-radius: 999px;
}
.lc-scanbox input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: 14px 20px; font-size: 16.5px; font-family: inherit; color: var(--lc-heading);
}
.lc-scanbox input::placeholder { color: var(--lc-muted); }
.lc-scanbox:focus-within { box-shadow: 0 8px 32px rgba(19,81,216,.16), 0 0 0 3px rgba(19,81,216,.13); }

.lc-btn {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 650; font-size: 15px;
  padding: 15px 30px; border-radius: 999px; white-space: nowrap;
  background: var(--lc-accent); color: #fff;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 4px 14px rgba(19,81,216,.28);
}
.lc-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.lc-btn:active { transform: translateY(0); }
.lc-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.lc-btn.is-ghost {
  background: rgba(255,255,255,.72); color: var(--lc-heading);
  border: 1px solid var(--lc-glass-border); box-shadow: none;
}
.lc-btn.is-ghost:hover { border-color: var(--lc-accent); color: var(--lc-accent); }

.lc-examples { color: var(--lc-muted); font-size: 13.5px; margin-top: 16px; }
.lc-linkish {
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13.5px;
  color: var(--lc-accent); text-decoration: underline; text-underline-offset: 2px; padding: 0 5px;
}

/* ---------- states ---------- */

.lc-error {
  padding: 15px 20px; margin-bottom: 26px;
  background: rgba(254, 226, 226, .8); border-color: rgba(220,38,38,.28); color: #9f1239;
  font-weight: 500;
}
.lc-loading { padding: 30px; text-align: center; color: var(--lc-muted); margin-bottom: 26px; }
.lc-loading p { margin: 12px 0 0; }
.lc-spinner {
  display: inline-block; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(19,81,216,.16); border-top-color: var(--lc-accent);
  animation: lc-spin .8s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

/* ---------- results ---------- */

/* The report is a dashboard, not an article — it gets the template's full
   1290px container instead of the 1060px prose width. */
.lc-results { padding-bottom: 72px; }
@media (min-width: 1160px) {
  .lc-results { max-width: 1290px; }

  .lc-results__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 20px;
    align-items: start;
  }
  .lc-results__main { order: 1; min-width: 0; }
  .lc-results__side {
    order: 2;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .lc-results__side .lc-plan { margin-bottom: 0; }

  /* One clean row: radar (2 cols) + four stat cards. */
  .lc-stats { grid-template-columns: repeat(6, 1fr); }

  /* Score card spreads out: ring | meta | projection right. */
  .lc-score { justify-content: space-between; }
}

/* The report's anchor. Dark, branded, unmistakably part of the same product
   as the hero — not the fourth white card in a row. */
.lc-score {
  display: flex; gap: 38px; align-items: center;
  padding: 34px 38px; margin-bottom: 14px; flex-wrap: wrap;
  background:
    radial-gradient(900px 320px at 88% -30%, rgba(51,103,255,.34), transparent 62%),
    linear-gradient(135deg, #1b1450 0%, var(--lc-ink) 58%, #100b2e 100%);
  border: 0;
  box-shadow: 0 20px 50px rgba(21,14,62,.30);
  color: rgba(255,255,255,.76);
}
.lc-score h2 { color: #fff; }
.lc-score .lc-verdict { color: rgba(255,255,255,.72); }

.lc-ring { position: relative; width: 138px; height: 138px; flex-shrink: 0; }
.lc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lc-ring__bg { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 9; }
.lc-ring__fg {
  fill: none; stroke: var(--lc-accent); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1), stroke .4s ease;
}
/* Centred in the ring box. `baseline` alignment would push the pair to the
   top of the 138px square instead of its middle — the number must sit dead
   centre, with /100 nudged down to sit on its baseline. */
.lc-ring__num {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 400; letter-spacing: -.02em; color: #fff;
  font-family: var(--lc-serif); line-height: 1;
}
.lc-ring__num small {
  font-family: var(--lc-sans);
  font-size: 13px; color: rgba(255,255,255,.5); font-weight: 700;
  margin-left: 3px; position: relative; top: 9px;
}

.lc-score__meta { flex: 1; min-width: 260px; }
.lc-score__meta h2 {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 30px; letter-spacing: -.01em;
  word-break: break-all; margin-bottom: 4px;
}
.lc-verdict { color: var(--lc-body); margin-bottom: 16px; font-size: 15px; }

.lc-pills { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.lc-pill {
  font-size: 13px; padding: 6px 13px; border-radius: 99px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.62);
}
.lc-pill b { font-weight: 700; }
.lc-pill.is-pass b { color: #4ade80; }
.lc-pill.is-warn b { color: #fbbf24; }
.lc-pill.is-fail b { color: #f87171; }
.lc-pill.is-count b { color: #fff; }

.lc-projection {
  margin: 18px 0 0; font-size: 14.5px; color: rgba(255,255,255,.7);
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.lc-projection__now {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 26px; letter-spacing: -.01em;
  color: rgba(255,255,255,.4); text-decoration: line-through;
  text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,.3);
}
.lc-projection__arrow { font-size: 18px; color: rgba(255,255,255,.4); }

/* The projection is the call to action — it jumps to the plan, so it has to
   look and behave like something you can click. */
.lc-projection__then,
.lc-projection__label { cursor: pointer; text-decoration: none; }
.lc-projection__label {
  border-bottom: 1px dashed rgba(255,255,255,.3);
  transition: color .16s ease, border-color .16s ease;
}
.lc-projection__label:hover { color: #fff; border-bottom-color: rgba(255,255,255,.7); }
.lc-projection__then:hover { filter: brightness(1.15); }
.lc-projection__then:focus-visible,
.lc-projection__label:focus-visible {
  outline: 2px solid #4ade80; outline-offset: 3px; border-radius: 4px;
}
/* The payoff number. It bounces on arrival, then keeps a slow glow so the eye
   returns to it — this is the one thing we want the visitor to act on. */
.lc-projection__then {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 38px; letter-spacing: -.01em;
  display: inline-block; transform-origin: 50% 100%;
  animation: lc-bounce 2.4s infinite, lc-glow 2.4s ease-in-out infinite;
}
.lc-score .lc-projection__then { color: #4ade80 !important; }

/* A real bounce: fast launch, hang at the top, accelerate down, small
   secondary hop, then rest. Squash on landing sells the weight. */
@keyframes lc-bounce {
  0%        { transform: translateY(0)     scaleY(1); }
  8%        { transform: translateY(0)     scaleY(.86); }  /* crouch */
  20%       { transform: translateY(-22px) scaleY(1.06); } /* launch */
  30%       { transform: translateY(-24px) scaleY(1); }    /* hang */
  42%       { transform: translateY(0)     scaleY(.9); }   /* land + squash */
  52%       { transform: translateY(-8px)  scaleY(1.02); } /* second hop */
  62%       { transform: translateY(0)     scaleY(.96); }
  70%, 100% { transform: translateY(0)     scaleY(1); }    /* rest */
}
@keyframes lc-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(74,222,128,0); }
  50%      { text-shadow: 0 0 26px rgba(74,222,128,.75); }
}

/* Motion is decorative here — never force it on someone who opted out. */
@media (prefers-reduced-motion: reduce) {
  .lc-projection__then { animation: none; transform: none; }
}
.lc-projection__label { color: rgba(255,255,255,.65); }

/* ---------- headline stats strip ---------- */

.lc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.lc-stat {
  padding: 18px 20px 16px;
  display: flex; flex-direction: column;
}
.lc-stat__num {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 50px; letter-spacing: -.02em;
  line-height: 1; color: var(--lc-heading);
  font-variant-numeric: tabular-nums;
}
/* Brand blue is the default; status colours are reserved for actual problems,
   so a page of green numbers stops reading as decoration. */
.lc-stat.is-good .lc-stat__num { color: var(--lc-accent); }
.lc-stat.is-warn .lc-stat__num { color: var(--lc-warn); }
.lc-stat.is-bad  .lc-stat__num { color: var(--lc-fail); }
.lc-stat__unit {
  font-size: 11px; font-weight: 800; color: var(--lc-muted);
  text-transform: uppercase; letter-spacing: .1em; margin: 6px 0 10px;
}
.lc-stat__ctx { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lc-body); }

/* Radar spans two columns and holds only the chart. */
.lc-radar { grid-column: span 2; align-items: center; justify-content: center; padding: 10px; }
.lc-radar svg { width: 100%; max-width: 250px; height: auto; }
.lc-radar__ring { fill: none; stroke: rgba(21,14,61,.07); stroke-width: 1; }
.lc-radar__axis { stroke: rgba(21,14,61,.09); stroke-width: 1; }
.lc-radar__shape {
  fill: rgba(19,81,216,.16); stroke: var(--lc-accent); stroke-width: 2;
  stroke-linejoin: round;
}
.lc-radar__label {
  font-size: 10.5px; font-weight: 700; fill: var(--lc-muted);
  font-family: var(--lc-sans); letter-spacing: .04em; text-transform: uppercase;
}

@media (max-width: 560px) {
  .lc-radar { grid-column: span 1; }
  .lc-stat__num { font-size: 30px; }
}

/* ---------- category score tiles ---------- */

.lc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.lc-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.lc-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(21,14,61,.1); }
.lc-tile__score {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 32px; letter-spacing: -.02em; line-height: 1.1;
}
.lc-tile__name { font-size: 13.5px; font-weight: 700; color: var(--lc-heading); line-height: 1.3; }
.lc-tile__meta { font-size: 11.5px; color: var(--lc-muted); }
.lc-tile__meta.is-fail { color: var(--lc-fail); font-weight: 700; }

/* ---------- severity chips ---------- */

.lc-sev {
  display: inline-block; font-size: 10.5px; font-weight: 800; line-height: 1;
  padding: 4px 8px; border-radius: 5px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
}
.lc-sev.is-critical { background: #fee2e2; color: #b91c1c; }
.lc-sev.is-high     { background: #ffedd5; color: #c2410c; }
.lc-sev.is-medium   { background: #fef3c7; color: #a16207; }
.lc-sev.is-low      { background: #eef2f7; color: #64748b; }

/* ---------- action plan ---------- */

.lc-plan { padding: 28px; margin-bottom: 22px; scroll-margin-top: 90px; }

/* ---------- all-fixes modal ---------- */

.lc-modal {
  /* Overriding the UA `display: block` to get a flex column also drops the
     default `margin: auto` centring, so pin and centre it explicitly. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(860px, 92vw);
  height: fit-content;
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--lc-glass-border);
  border-radius: var(--lc-radius);
  background: #fbfcfe;
  color: var(--lc-body);
  box-shadow: 0 40px 90px rgba(21,14,61,.34);
  overflow: hidden;
  /* The dialog is the flex column; only the body scrolls. */
  flex-direction: column;
}
.lc-modal[open] { display: flex; }
.lc-modal::backdrop {
  background: rgba(21,14,62,.55);
  backdrop-filter: blur(3px);
}

.lc-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--lc-line);
  background: #fff;
}
.lc-modal__head h3 {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 27px; letter-spacing: -.01em; margin: 0 0 4px;
}
.lc-modal__sub { margin: 0; font-size: 13.5px; color: var(--lc-muted); }
.lc-modal__close {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--lc-line); background: #fff; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--lc-muted);
  transition: background .16s ease, color .16s ease;
}
.lc-modal__close:hover { background: var(--lc-accent-soft); color: var(--lc-heading); }

.lc-modal__filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 26px; border-bottom: 1px solid var(--lc-line);
  background: #fff;
}

.lc-modal__body { padding: 4px 26px 8px; overflow-y: auto; flex: 1; }
.lc-modal__body .lc-step:first-child { padding-top: 18px; }
.lc-modal__body .lc-step:first-child::before { top: 17px; }

.lc-modal__foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 26px; border-top: 1px solid var(--lc-line); background: #fff;
}

@media (max-width: 620px) {
  .lc-modal { width: 96vw; max-height: 92vh; }
  .lc-modal__head, .lc-modal__filters, .lc-modal__body, .lc-modal__foot { padding-inline: 18px; }
}
.lc-plan__head {
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 2px solid var(--lc-accent);
}
.lc-plan__head h3 {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 27px; letter-spacing: -.01em; margin-bottom: 4px;
}
.lc-plan__sub { margin: 0; font-size: 14px; color: var(--lc-muted); }

.lc-plan__list { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.lc-step {
  counter-increment: step; position: relative;
  padding: 18px 0 18px 44px; border-top: 1px solid var(--lc-line);
}
.lc-step:first-child { border-top: 0; padding-top: 4px; }
.lc-step::before {
  content: counter(step);
  position: absolute; left: 0; top: 17px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: var(--lc-accent-soft); color: var(--lc-accent);
}
.lc-step:first-child::before { top: 3px; }
.lc-step[data-severity="critical"]::before { background: #fee2e2; color: #b91c1c; }
.lc-step[data-severity="high"]::before     { background: #ffedd5; color: #c2410c; }

.lc-step__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.lc-step__label { font-size: 15.5px; margin: 0; }
.lc-step__cat { font-size: 11.5px; color: var(--lc-muted); }
.lc-step__detail { margin: 0 0 8px; font-size: 14px; color: var(--lc-body); }
.lc-step__fix {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--lc-heading);
}
.lc-plan__more { margin: 18px 0 0; font-size: 13px; color: var(--lc-muted); }

/* ---------- evidence lists ---------- */

.lc-evidence {
  margin: 8px 0; padding: 10px 12px 10px 26px; list-style: disc;
  background: rgba(21,14,61,.03); border-radius: 8px;
  font-size: 12.5px; color: var(--lc-body);
}
.lc-evidence li { margin: 2px 0; word-break: break-word; }

/* ---------- copyable snippets ---------- */

.lc-snippet { position: relative; margin: 10px 0 0; }
.lc-snippet pre {
  margin: 0; padding: 13px 74px 13px 14px; overflow-x: auto;
  background: #150e3d; border-radius: 10px;
}
.lc-snippet code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; color: #d8e0f5; white-space: pre;
}
.lc-snippet__copy {
  position: absolute; top: 9px; right: 9px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #e7ecfa; border-radius: 6px; padding: 5px 11px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background .16s ease;
}
.lc-snippet__copy:hover { background: rgba(255,255,255,.22); }

.lc-card { padding: 28px; margin-bottom: 20px; }
/* Card headings use the template's display face, like the hero. */
.lc-card h3 {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 24px; letter-spacing: -.01em; margin-bottom: 18px;
}
.lc-card h4 { font-size: 16px; margin-bottom: 8px; }
.lc-card p { margin: 0; color: var(--lc-body); font-size: 14.5px; }
.lc-explain h2, .lc-faq h2 {
  font-family: var(--lc-serif); font-weight: 400; font-size: 38px; letter-spacing: -.015em;
}

/* ---------- social previews ---------- */

.lc-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; }
.lc-prev { margin: 0; }
.lc-prev figcaption {
  font-size: 11.5px; color: var(--lc-muted); margin-bottom: 9px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
}
.lc-prev__box {
  background: #fff; border: 1px solid #dfe3ec; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(21,14,61,.05);
}
.lc-prev__box.is-x { border-radius: 16px; }
.lc-prev__box.is-slack {
  background: rgba(255,255,255,.6); border: 0; border-left: 3px solid var(--lc-accent);
  border-radius: 0 10px 10px 0; padding: 12px 14px; box-shadow: none;
}
/* Chat apps render a tall, narrow card with the image on top and no chrome. */
.lc-prev__box.is-chat { border-radius: 14px; border-color: #d7dbe6; }
.lc-prev__box.is-chat .lc-prev__domain { margin: 6px 0 0; font-size: 11px; }

.lc-prev__note { margin: -8px 0 18px; font-size: 13px; color: var(--lc-muted); }
.lc-prev__img {
  aspect-ratio: 1200 / 630; background: #eef1f7 center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.lc-prev__img.is-missing::after {
  content: "No og:image"; font-size: 12px; color: #9aa3b5; font-weight: 600;
}
.lc-prev__img.is-small { aspect-ratio: auto; height: 116px; border-radius: 7px; margin-top: 10px; }
.lc-prev__body { padding: 12px 14px; }
.lc-prev__box.is-slack .lc-prev__body { padding: 0; }
.lc-prev__domain { font-size: 11.5px; color: #78829a; margin: 0 0 4px; }
.lc-prev__title {
  font-weight: 700; font-size: 14px; line-height: 1.35; margin: 0 0 4px; color: var(--lc-heading);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-prev__box.is-slack .lc-prev__title { color: var(--lc-accent); }
.lc-prev__desc {
  font-size: 12.5px; color: #6c7488; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.is-empty { font-style: italic; color: #a8b0c2; }

/* ---------- filters ---------- */

.lc-filters { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.lc-filter {
  background: rgba(255,255,255,.72); border: 1px solid var(--lc-glass-border);
  color: var(--lc-body); padding: 8px 17px; border-radius: 99px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.lc-filter:hover { color: var(--lc-heading); }
.lc-filter.is-active { background: var(--lc-accent); border-color: var(--lc-accent); color: #fff; }

/* ---------- category accordions ---------- */

.lc-cat { margin-bottom: 14px; overflow: hidden; }
.lc-cat__head {
  display: flex; align-items: center; gap: 15px; width: 100%;
  padding: 19px 24px; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.lc-cat__head:hover { background: rgba(255,255,255,.45); }
.lc-cat__chev { color: var(--lc-muted); transition: transform .22s ease; flex-shrink: 0; }
.lc-cat.is-open .lc-cat__chev { transform: rotate(90deg); }
.lc-cat__title { flex: 1; min-width: 0; }
.lc-cat__title h3 {
  margin: 0; font-family: var(--lc-serif); font-weight: 400;
  font-size: 20px; letter-spacing: -.01em;
}
.lc-cat__title p { margin: 2px 0 0; font-size: 13px; color: var(--lc-muted); }
.lc-cat__score {
  font-family: var(--lc-serif); font-weight: 400;
  font-size: 24px; letter-spacing: -.02em;
}

.lc-bar { height: 3px; background: rgba(21,14,61,.07); }
.lc-bar span { display: block; height: 100%; transition: width .85s cubic-bezier(.4,0,.2,1); }

.lc-cat__body { display: none; padding: 4px 24px 18px; }
.lc-cat.is-open .lc-cat__body { display: block; }

.lc-check { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid var(--lc-line); }
.lc-check[hidden] { display: none; }
.lc-check__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex-shrink: 0; }
.lc-check__dot.pass { background: var(--lc-pass); }
.lc-check__dot.warn { background: var(--lc-warn); }
.lc-check__dot.fail { background: var(--lc-fail); }
.lc-check__dot.info { background: var(--lc-info); }
.lc-check__body { flex: 1; min-width: 0; }
.lc-check__label {
  font-weight: 700; font-size: 14.5px; color: var(--lc-heading);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lc-check__detail { font-size: 13.8px; color: var(--lc-body); margin-top: 2px; }
.lc-check__fix {
  font-size: 13px; color: var(--lc-accent); margin-top: 8px;
  background: var(--lc-accent-soft); border-left: 2px solid var(--lc-accent);
  padding: 8px 12px; border-radius: 0 7px 7px 0;
}
.lc-check__fix code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

.lc-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

/* ---------- monitoring signup (demand test) ---------- */

.lc-monitor {
  margin-top: 24px;
  padding: 28px;
  border-color: rgba(19, 81, 216, 0.22);
  background:
    linear-gradient(135deg, rgba(19,81,216,.05), rgba(124,58,237,.04)),
    var(--lc-glass-bg);
}
.lc-monitor h3 { font-size: 18px; margin-bottom: 10px; }
.lc-monitor p { font-size: 14.5px; color: var(--lc-body); margin-bottom: 10px; }
.lc-monitor code {
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
  background: rgba(21,14,61,.06); padding: 1px 5px; border-radius: 4px;
}
.lc-monitor__honest { color: var(--lc-muted); font-size: 13.5px; }
.lc-monitor__honest strong { color: var(--lc-heading); }

.lc-monitor__form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.lc-monitor__form input {
  flex: 1; min-width: 220px;
  padding: 14px 18px; font-size: 15px; font-family: inherit;
  color: var(--lc-heading);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--lc-glass-border); border-radius: 999px; outline: none;
}
.lc-monitor__form input:focus { box-shadow: 0 0 0 3px rgba(19,81,216,.13); }
.lc-monitor__form input::placeholder { color: var(--lc-muted); }

.lc-monitor__msg { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.lc-monitor__msg.is-ok { color: var(--lc-pass); }
.lc-monitor__msg.is-err { color: var(--lc-fail); }

/* ---------- explain + faq ---------- */

.lc-explain, .lc-faq { padding: 64px 0; }
.lc-explain h2, .lc-faq h2 { font-size: 27px; margin-bottom: 26px; letter-spacing: -.02em; }
.lc-explain__lede { max-width: 640px; margin: -6px 0 26px; color: var(--lc-body); }
.lc-explain__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; }
.lc-explain__grid .lc-card { margin: 0; }
.lc-explain__grid .lc-card em { color: var(--lc-heading); font-style: italic; }

.lc-accordion { display: flex; flex-direction: column; gap: 12px; }
.lc-acc { padding: 4px 24px; }
.lc-acc summary {
  cursor: pointer; padding: 18px 0; font-weight: 650; font-size: 15.5px;
  color: var(--lc-heading); list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.lc-acc summary::-webkit-details-marker { display: none; }
.lc-acc summary::after {
  content: "+"; color: var(--lc-accent); font-size: 21px; line-height: 1; flex-shrink: 0;
  transition: transform .2s ease;
}
.lc-acc[open] summary::after { transform: rotate(45deg); }
.lc-acc p { padding-bottom: 18px; margin: 0; font-size: 14.5px; }

.lc-footer { border-top: 1px solid var(--lc-line); padding: 28px 0; }
.lc-footer p { margin: 0; color: var(--lc-muted); font-size: 13.5px; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .lc-hero { padding: 52px 0 32px; }
  .lc-scanbox { flex-direction: column; border-radius: var(--lc-radius); padding: 14px; }
  .lc-scanbox input { width: 100%; text-align: center; }
  .lc-btn { width: 100%; }
  .lc-nav__links { display: none; }
  .lc-score { gap: 20px; }
  .lc-cat__head { padding: 16px 18px; }
  .lc-cat__body { padding: 4px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Critical gate banner (ADR-0014) --------------------------------- *
 * Only rendered when a blocking failure caps the score. Sits inside the
 * dark score card, so it borrows the card's light-on-dark treatment rather
 * than the usual alert red, which would vibrate against the navy.
 */
.lc-gate {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
}

.lc-gate__head {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.lc-gate__head b { color: #fff; }

.lc-gate__list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.lc-gate__list li + li { margin-top: 4px; }
.lc-gate__list b { color: rgba(255, 255, 255, 0.95); font-weight: 600; }

/* ---- Diagnosis view (ADR-0015) --------------------------------------- *
 * Shown when the page could not be read. Everything the normal report puts
 * on screen is meaningless here, so it is hidden rather than left empty.
 */
.lc-results.is-unreachable .lc-score,
.lc-results.is-unreachable .lc-stats,
.lc-results.is-unreachable .lc-grid,
.lc-results.is-unreachable .lc-results__cols,
.lc-results.is-unreachable .lc-filters { display: none; }

.lc-diag { padding: 30px 32px 26px; }

.lc-diag__kind {
  margin: 0 0 10px;
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 107, 107, 0.14);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #c0392b;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lc-diag__title {
  margin: 0 0 10px;
  font-family: var(--lc-serif), Georgia, serif;
  font-size: 1.85rem;
  line-height: 1.2;
  color: var(--lc-ink);
}

.lc-diag__summary {
  margin: 0 0 6px;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #4a4a63;
}

.lc-diag__host {
  margin: 0 0 22px;
  font-size: 0.84rem;
  color: #8a8aa0;
  word-break: break-all;
}

.lc-diag__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.lc-diag__item {
  padding: 15px 17px;
  border-radius: 12px;
  border: 1px solid rgba(21, 14, 62, 0.09);
  border-left: 3px solid rgba(21, 14, 62, 0.16);
  background: rgba(255, 255, 255, 0.55);
}

.lc-diag__item.is-fail { border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.05); }
.lc-diag__item.is-warn { border-left-color: #e8a33d; background: rgba(232, 163, 61, 0.05); }
.lc-diag__item.is-pass { border-left-color: #27ae60; }

.lc-diag__label { margin: 0 0 4px; font-weight: 650; font-size: 0.95rem; color: var(--lc-ink); }
.lc-diag__detail { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #55556e; }
.lc-diag__fix { margin: 8px 0 0; font-size: 0.88rem; font-weight: 600; color: #2c2c48; }

.lc-diag__evidence {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #6a6a85;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lc-diag__item .lc-snippet { margin-top: 12px; }

/* ---- Benchmark line and score working (ADR-0016) --------------------- */
.lc-bench { margin: 6px 0 0; display: flex; flex-direction: column; gap: 1px; }

.lc-bench__line {
  font-size: 0.94rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

.lc-bench__note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
}

.lc-tile__rank {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6a6a85;
}

.lc-tile__rank.is-low { color: #c0392b; }

/* The working. Quiet by design — there for the sceptic, not the skimmer. */
.lc-tile__math {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #9a9ab0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}