/* Softrecs Retrievability Check Inherits the theme's type and colour tokens where they exist, with plain fallbacks so the tool still looks deliberate if it is dropped anywhere else. */ .src-tool { /* Names below are the child theme's own tokens, which flip for dark mode on . The fallbacks only apply if the tool is used outside that theme — the dark block after this one keeps those fallbacks honest. */ --src-paper: var(--sr-paper, #FBFAF6); --src-ink: var(--sr-ink, #171512); --src-ink-2: var(--sr-ink-2, #4A453C); --src-ink-3: var(--sr-ink-3, #7A7365); --src-rule: var(--sr-rule, #E2DDD1); --src-hard: var(--sr-ink, #171512); --src-raise: var(--sr-surface-2, #F2F0EA); --src-accent: var(--sr-accent, #17475F); --src-go: var(--sr-cited, #2C6B45); --src-stop: var(--sr-absent, #9B3826); --src-mono: var(--sr-font-data, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace); margin-block: 28px; color: var(--src-ink); } @media (prefers-color-scheme: dark) { .src-tool { --src-paper: var(--sr-paper, #101211); --src-ink: var(--sr-ink, #EDEBE5); --src-ink-2: var(--sr-ink-2, #B6B2A8); --src-ink-3: var(--sr-ink-3, #857F73); --src-rule: var(--sr-rule, #2A2E2C); --src-hard: var(--sr-ink, #EDEBE5); --src-raise: var(--sr-surface-2, #1E2220); --src-accent: var(--sr-accent, #83B9D3); --src-go: var(--sr-cited, #74C291); --src-stop: var(--sr-absent, #E28E79); } } /* ---------- form ---------- */ .src-form { display: flex; flex-direction: column; gap: 8px; } .src-label { font-family: var(--src-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--src-ink-3); } .src-row { display: flex; flex-wrap: wrap; align-items: stretch; border: 1.5px solid var(--src-hard); background: var(--src-raise); } .src-prefix { display: flex; align-items: center; padding: 12px 2px 12px 14px; font-family: var(--src-mono); font-size: 14px; color: var(--src-ink-3); white-space: nowrap; } #src-slug { flex: 1 1 160px; min-width: 0; border: none; background: transparent; padding: 12px 10px; font-family: var(--src-mono); font-size: 15px; color: var(--src-ink); outline: none; } #src-slug::placeholder { color: var(--src-ink-3); opacity: .7; } .src-go { border: none; border-left: 1.5px solid var(--src-hard); background: var(--src-hard); color: var(--src-paper); font-family: var(--src-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; padding: 12px 22px; cursor: pointer; } .src-go:hover { background: var(--src-accent); color: var(--src-paper); } .src-go[disabled] { opacity: .5; cursor: default; } .src-hint { font-size: 13px; color: var(--src-ink-3); margin: 0; } /* ---------- output ---------- */ .src-out { margin-top: 26px; } .src-plugin { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; padding-bottom: 12px; border-bottom: 1.5px solid var(--src-hard); } .src-plugin .nm { font-size: 19px; font-weight: 600; } .src-plugin .mt { font-family: var(--src-mono); font-size: 12px; color: var(--src-ink-3); } .src-headline { border-left: 3px solid var(--src-stop); background: var(--src-raise); padding: 14px 18px; margin-top: 18px; font-size: 15.5px; line-height: 1.55; } .src-headline.pass { border-left-color: var(--src-go); } .src-headline .lab { display: block; font-family: var(--src-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--src-ink-3); margin-bottom: 6px; } .src-scroll { overflow-x: auto; margin-top: 20px; } .src-out table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; } .src-out th { font-family: var(--src-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--src-ink-3); text-align: left; font-weight: 400; padding: 0 14px 8px 0; border-bottom: 1.5px solid var(--src-hard); white-space: nowrap; } .src-out td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--src-rule); vertical-align: top; } .src-out th:last-child, .src-out td:last-child { padding-right: 0; } .src-out td.st { font-family: var(--src-mono); white-space: nowrap; } .src-pass { color: var(--src-go); font-weight: 500; } .src-fail { color: var(--src-stop); font-weight: 500; } .src-note { color: var(--src-ink-2); font-size: 13.5px; } .src-sub { font-family: var(--src-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--src-ink-3); margin: 26px 0 8px; } .src-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--src-rule); font-size: 13.5px; color: var(--src-ink-2); line-height: 1.6; } .src-foot strong { color: var(--src-ink); } .src-msg { padding: 14px 18px; border-left: 3px solid var(--src-stop); background: var(--src-raise); font-size: 15px; } .src-busy { font-family: var(--src-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--src-ink-3); padding: 18px 0; } @media (max-width: 560px) { .src-prefix { display: none; } .src-go { flex: 1 1 100%; border-left: none; border-top: 1.5px solid var(--src-hard); } }