/* ===== Home page: Design Score, the hero's "new" tag and the security index link =====
   Page-only additions for index.html, loaded after mobile.css. The block reuses the site's surfaces: the banner size
   for the card (mobile.css), the tint-over-paper fill every card uses, opal for what is new, and the score bands of
   the Design Score panel itself, so the sample reads the same here as on score.html. */

.dsc {
  /* the panel's score bands: 85 and up, 75 to 84, 50 to 64 */
  --dsc-a: oklch(80% 0.09 165);
  --dsc-b: oklch(85% 0.12 125);
  --dsc-d: oklch(78% 0.12 55);
  padding-block: var(--section-gap-s) var(--space-2xl);
}
.dsc svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the card: the claim on the left, a sample panel on the right ---------- */
.dsc-card {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center;
  padding: var(--pad-banner-b) var(--pad-banner-i);
  border: 1px solid var(--glass-edge); border-radius: var(--r-banner);
  background:
    radial-gradient(48% 70% at 88% 22%, var(--opal-1a), transparent 72%),
    radial-gradient(40% 60% at 66% 100%, var(--opal-2a), transparent 72%),
    linear-gradient(160deg, var(--tint-2), var(--tint-1) 60%), var(--color-paper-2);
}
.dsc-copy { display: grid; justify-items: start; min-width: 0; }
.dsc-tag { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; padding: 0 var(--space-sm) 0 var(--space-2xs); border: 1px solid var(--opal-1a); border-radius: var(--radius-pill); background: var(--opal-1a); color: var(--opal-1); font: 500 var(--text-xs)/1 var(--font-body); }
.dsc-tag b { display: inline-grid; place-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--opal-1); color: var(--opal-ink); font-weight: 600; }
.dsc-copy h2 { margin-top: var(--space-lg); font-size: clamp(2rem, 2.2vw + 1rem, 3.25rem); max-width: 20ch; }
.dsc-copy .lead { margin-top: var(--space-md); max-width: 46ch; color: var(--color-muted); }

/* three ways in, one rule above each */
.dsc-points { width: 100%; margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-md); }
.dsc-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.dsc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-nest); background: var(--tint-2); color: var(--opal-2); }
.dsc-ico svg { width: 20px; height: 20px; }
.dsc-points h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.dsc-points p { margin-top: var(--space-2xs); max-width: 56ch; font-size: var(--text-sm); color: var(--color-muted); }
.dsc-points code { padding: 0 var(--space-2xs); border-radius: 6px; background: var(--tint-2); color: var(--color-ink-2); font: 400 12.5px/1.5 var(--font-code); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dsc .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.dsc .actions .btn svg { width: 16px; height: 16px; transition: translate var(--dur-short) var(--ease-out); }
.dsc .actions .btn:hover svg { translate: 3px 0; }

/* ---------- the sample panel: the real panel's parts, drawn small ---------- */
.dsc-shot { position: relative; margin: 0; display: grid; justify-items: center; gap: var(--space-md); min-width: 0; }
.dsc-shot::before { content: ""; position: absolute; z-index: 0; inset: 10% 6% 18%; border-radius: 50%; background: radial-gradient(closest-side, var(--opal-1a), var(--opal-2a) 60%, transparent); filter: blur(var(--space-xl)); pointer-events: none; }
.dsc-panel { position: relative; z-index: 1; display: grid; gap: var(--space-md); width: 100%; max-width: 420px; padding: var(--space-md); border: 1px solid var(--glass-edge); border-radius: var(--r-card); background: var(--color-paper); box-shadow: 0 32px 80px -24px oklch(0% 0 0 / 0.7), 0 10px 28px oklch(0% 0 0 / 0.38), inset 0 1px 0 oklch(100% 0 0 / 0.05); text-align: left; }
.dsc-ph { display: flex; align-items: center; gap: var(--space-xs); min-height: 28px; padding-inline: var(--space-2xs); }
.dsc-brand { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: -0.01em; color: var(--color-ink); }
.dsc-brand img { width: 18px; height: 18px; flex: none; }
.dsc-ver { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); font: 500 12px/1 var(--font-outlier); color: var(--color-muted); }
.dsc-dots { margin-left: auto; display: inline-flex; gap: var(--space-xs); }
.dsc-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tint-3); }
.dsc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--r-tile); background: var(--color-paper-2); }
.dsc-tabs span { display: grid; place-items: center; height: 32px; border-radius: var(--r-nest); font: 600 12px/1 var(--font-body); color: var(--color-muted); }
.dsc-tabs .is-on { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.07), 0 1px 4px oklch(0% 0 0 / 0.45); }

/* the score: a ring with a soft glow in the band's colour, the grade, the page and the measurement */
.dsc-sum { display: flex; align-items: center; gap: var(--space-md); padding-inline: var(--space-2xs); }
.dsc-ring { position: relative; isolation: isolate; flex: none; width: 112px; height: 112px; }
.dsc-ring::before { content: ""; position: absolute; z-index: -1; inset: 18px; border-radius: 50%; background: var(--dsc-b); opacity: 0.2; filter: blur(var(--space-md)); }
.dsc-ring svg { width: 100%; height: 100%; overflow: visible; }
.dsc-ring circle { fill: none; stroke-width: 8; }
.dsc-ring .dsc-ring-t { stroke: var(--tint-2); }
.dsc-ring .dsc-ring-v { stroke: url(#dsc-grad); stroke-dasharray: 100 100; stroke-dashoffset: 18; }
.dsc-stop-a { stop-color: var(--opal-1); }
.dsc-stop-b { stop-color: var(--dsc-b); }
.dsc-n { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.dsc-n b { font: 500 2.5rem/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dsc-n small { margin-top: var(--space-2xs); font-size: 12px; color: var(--ink-quiet); }
.dsc-meta { display: grid; justify-items: start; gap: var(--space-2xs); min-width: 0; }
.dsc-grade { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--dsc-b) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--dsc-b) 42%, transparent); color: var(--dsc-b); font: 600 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.dsc-meta b { margin-top: var(--space-2xs); font: 500 var(--text-sm)/1.2 var(--font-code); color: var(--color-ink); overflow-wrap: anywhere; }
.dsc-meta small { font-size: 12px; color: var(--ink-quiet); }

/* seven categories: name, bar, score */
.dsc-cats { margin: 0; padding: var(--space-sm) var(--space-2xs) 0; list-style: none; display: grid; gap: var(--space-sm); border-top: 1px solid var(--color-rule); }
.dsc-cats li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 2.25em; align-items: center; gap: var(--space-sm); font-size: 12px; line-height: 1.2; color: var(--color-muted); }
.dsc-cats span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsc-cats i { position: relative; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--tint-2); }
.dsc-cats i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c, var(--dsc-b)); transform-origin: 0 50%; transform: scaleX(calc(var(--s, 0) / 100)); }
.dsc-cats b { justify-self: end; font: 600 12px/1 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dsc-pf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-2xs) 0; border-top: 1px solid var(--color-rule); }
.dsc-fb { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 600 12px/1 var(--font-body); white-space: nowrap; }
.dsc-fb svg { width: 16px; height: 16px; }
.dsc-pf small { font-size: 12px; color: var(--ink-quiet); }
.dsc-shot figcaption { position: relative; z-index: 1; font-size: var(--text-xs); color: var(--ink-quiet); text-align: center; }

/* as the sample arrives, the ring draws, the number counts up and the bars fill, one after another.
   Without scripts, or with reduced motion, it simply shows the finished panel. */
@property --dsc-n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js.fx .dsc-n b { --dsc-n: 82; counter-reset: dsc var(--dsc-n); transition: --dsc-n 1600ms var(--ease-out) 240ms; }
  .js.fx .dsc-n b > span { display: none; }
  .js.fx .dsc-n b::after { content: counter(dsc); }
  .js.fx .dsc-shot:not(.is-in) .dsc-n b { --dsc-n: 0; }
  .js.fx .dsc-ring .dsc-ring-v { transition: stroke-dashoffset 1600ms var(--ease-out) 240ms; }
  .js.fx .dsc-shot:not(.is-in) .dsc-ring .dsc-ring-v { stroke-dashoffset: 100; }
  .js.fx .dsc-cats i::before { transition: transform 900ms var(--ease-out) calc(420ms + var(--k, 0) * 70ms); }
  .js.fx .dsc-shot:not(.is-in) .dsc-cats i::before { transform: scaleX(0); }
}

/* ---------- hero: the new tag sits beside the free tag ---------- */
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.hero .hero-tags .free-tag { margin-bottom: 0; }
.new-tag { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 28px; padding: 0 var(--space-sm) 0 var(--space-2xs); border: 1px solid var(--opal-1a); border-radius: var(--radius-pill); background: var(--opal-1a); color: var(--opal-1); font-size: var(--text-xs); font-weight: 500; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.new-tag b { display: inline-grid; place-items: center; min-height: 20px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--opal-1); color: var(--opal-ink); font-size: 12px; font-weight: 600; }
.new-tag svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--dur-short) var(--ease-out); }
.new-tag:hover { border-color: var(--opal-1); color: var(--color-ink); }
.new-tag:hover svg { translate: 2px 0; }
.new-tag:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- checked at the gate: the way to the full index ---------- */
.gate-cta { justify-self: start; }
.gate-cta svg { width: 16px; height: 16px; transition: translate var(--dur-short) var(--ease-out); }
.gate-cta:hover svg { translate: 3px 0; }

/* ---------- narrower screens ---------- */
@media (max-width: 75rem) {
  .dsc-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-xl); }
}
@media (max-width: 60rem) {
  .dsc { padding-block: var(--section-gap-s) var(--space-xl); }
  .dsc-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--pad-banner-b) var(--pad-banner-i); }
  .dsc-copy { justify-items: center; text-align: center; }
  .dsc-copy h2, .dsc-copy .lead { margin-inline: auto; }
  .dsc-points { max-width: 520px; margin-inline: auto; text-align: left; }
  .dsc .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; margin-inline: auto; }
  .dsc .actions .btn { justify-content: center; }
  .hero-tags { justify-content: center; }
  .gate-cta { justify-self: center; }
}
@media (max-width: 40rem) {
  .dsc-panel { gap: var(--space-sm); padding: var(--space-sm); }
  .dsc-ring { width: 96px; height: 96px; }
  .dsc-n b { font-size: 2.125rem; }
  .dsc-sum { gap: var(--space-sm); }
  .dsc-cats li { grid-template-columns: 9.25em minmax(0, 1fr) 2.25em; gap: var(--space-xs); }
  .dsc-points li { gap: var(--space-sm); }
}