/* App-only rules on top of /site.css, the Prism design built from site/ (the Foliyo page).
   Here: the fonts, the signing status in the hero, what a real report adds to the sample
   report's layout, and the share page. Colours read the design's tokens. */
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

[hidden] { display: none !important; }
code { font-family: var(--mono); }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn, .pbtn { cursor: pointer; }
.btn[aria-disabled="true"] { opacity: .55; cursor: wait; }

/* signing: the wallet message and the steps, under the hero buttons */
.note {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--accent);
  background: var(--soft);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.status { margin-top: 16px; display: grid; gap: 8px; font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.status li { display: flex; align-items: center; gap: 10px; animation: await .4s var(--fluid) both; }
.status li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.status li:last-child { color: var(--text); }
.status li:last-child::before { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* a report on screen: the home page steps aside, and the intro and nav do not replay */
.report-view .intro { display: none; }
.report-view .nav, .share-page .nav { animation: none; }
#result { padding-top: 72px; }
#result .sec-sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#result .rep-wallet code { font: inherit; }
#result .rep-wallet .pbtn { height: 24px; margin-left: 6px; padding: 0 8px; vertical-align: middle; font: 500 11.5px/1 var(--mono); }
#result .rep .note { font-family: var(--sw); }
#result .lg p { overflow-wrap: anywhere; }
#result .lg .pts { font: 500 13px/1.42 var(--mono); }
.ref { font: 400 11.5px/1 var(--mono); color: var(--muted); }
.ref:hover, .ref:focus-visible { color: var(--accent); }
.deductions { margin: 10px 0; }
.deductions li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 2px 0; }
.deductions .pts { color: var(--accent); }
.deductions .back { color: var(--muted); }
.deductions .total { display: block; padding-top: 8px; font-weight: 500; }
.score-line .small { font-size: 11.5px; color: var(--muted); }
#result .src-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; }
#result .src-list .n { color: var(--muted); }
#result .src-list .url { word-break: break-all; }
#result .src-list .bad { color: var(--muted); }
#result .src-list li:target { background: var(--soft); }
@media (max-width: 560px) {
  #result { padding-top: 48px; }
  .score-line .small { font-size: 12px; }
}

/* share page: the card, its buttons and the pitch */
.share-page main { max-width: 760px; margin: 0 auto; padding: 56px var(--g) 96px; }
.share-card { display: block; width: 100%; height: auto; border-radius: 10px; outline: 1px solid var(--share-bd); outline-offset: -1px; }
.share-page .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.share-page .actions .btn { flex: 1 1 200px; }
.pitch { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--rule2); }
.pitch h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
.pitch > p:not(.promise) { margin-top: 16px; font-size: 18px; line-height: 1.45; color: rgba(var(--ink-rgb), .8); }
.pitch .promise { margin-top: 14px; font: 400 12px/1.45 var(--mono); color: var(--muted); }
.pitch .btn { margin-top: 24px; }
.share-page .small { margin-top: 24px; font-size: 12px; color: var(--muted); }