@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Core class-first components from the Paul Lambson design system. */
.pl-btn { font: inherit; font-size: 15px; font-weight: 500; line-height: 20px; min-height: 44px; padding: 10px var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--ink-muted); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; }
.pl-btn:hover { background: var(--maple-soft); }
.pl-btn:focus-visible, .pl-input:focus-visible, .score-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pl-btn:disabled, .pl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.pl-btn-primary { background: var(--shellac); border-color: var(--shellac); color: var(--on-shellac); }
.pl-btn-primary:hover { background: var(--shellac); filter: brightness(1.08); }
.pl-btn-quiet { border-color: transparent; padding-inline: var(--space-2); color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-muted); text-underline-offset: 4px; }
.pl-btn-quiet:hover { background: transparent; text-decoration-color: var(--ink); }
.pl-card, .pl-panel { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-2); box-sizing: border-box; }
.pl-card { max-width: 420px; }
.pl-card-eyebrow, .eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pl-card-title { margin: 0; font-family: var(--font-serif); font-size: 26px; line-height: 34px; font-weight: 400; color: var(--ink); }
.pl-tag { display: inline-block; font-size: 12px; line-height: 20px; font-weight: 500; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--stone); color: var(--ink); white-space: nowrap; }
.pl-tag-maple { background: var(--maple-soft); }
.pl-tag-success { background: var(--milk-paint-soft); color: var(--milk-paint); }
.pl-tag-info { background: var(--ai-soft); color: var(--ai); }
.pl-tag-error { background: var(--paper-raised); border: 1px solid var(--barn-red); color: var(--barn-red); }
.pl-callout { border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); background: var(--maple-soft); color: var(--ink); box-sizing: border-box; }
.pl-callout-title { margin: 0 0 var(--space-1); font-weight: 600; font-size: 15px; line-height: 22px; }
.pl-callout-body { margin: 0; font-size: 15px; line-height: 24px; }
.pl-callout-info { background: var(--ai-soft); }
.pl-callout-info .pl-callout-title { color: var(--ai); }
.pl-callout-success { background: var(--milk-paint-soft); }
.pl-callout-success .pl-callout-title { color: var(--milk-paint); }
.pl-callout-error { background: var(--paper-raised); border: 1px solid var(--barn-red); }
.pl-callout-error .pl-callout-title { color: var(--barn-red); }
.pl-stat { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.pl-stat-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pl-stat-value { font-family: var(--font-serif); font-size: 56px; line-height: 64px; font-weight: 400; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pl-stat-key .pl-stat-value { color: var(--shellac); }
.pl-endmark { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-6) auto; width: 100%; max-width: 240px; color: var(--maple); }
.pl-endmark::before, .pl-endmark::after { content: ""; flex: 1; height: 1px; background: var(--line); }