/* /tools/is-this-a-scam/ only (pageCss). From the approved design /workspace/tcc/design/scam-checker.html ("NEW (ships)" blocks), trimmed to what the page uses.
   Reads tokens.css only. The tool is hidden until src/assets/js/scam-checker.js adds .sc-ready; without JavaScript the plain warning-sign list shows instead. */
.btn--lg{padding:15px 22px;font-size:var(--font-size-base);min-height:52px}
.btn--tap{min-height:44px}
.tool{max-width:44rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-path);overflow:hidden}
.tool__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--mist)}
.tool__body{padding:28px}
.tool__h{font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.2}
.tool__h:focus{outline:none}
.tool__count{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--slate)}
.linkbtn{background:none;border:0;padding:10px 6px;min-height:44px;font-family:var(--font-heading);font-weight:700;font-size:var(--font-size-sm);color:var(--color-primary);cursor:pointer;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.linkbtn:hover{color:var(--color-primary-strong)}
/* Big tap-friendly choice cards (radio inputs). Meaning never by colour alone: the round mark fills and shows a tick. */
.choices{display:grid;gap:12px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label,.ans__btn{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:14px 18px;background:var(--white);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-lg);font-family:var(--font-heading);font-weight:700;font-size:var(--font-size-base);line-height:1.3;text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--motion-duration-fast) ease-out,background-color var(--motion-duration-fast) ease-out}
.choice label:hover,.ans__btn:hover{border-color:var(--color-primary);background:var(--signal-blue-tint)}
.choice input:checked+label,.ans__btn[aria-pressed="true"]{border-color:var(--color-primary);background:var(--signal-blue-tint);box-shadow:inset 0 0 0 1px var(--color-primary)}
.choice input:focus-visible+label{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}
.ans__btn:focus-visible{border-radius:var(--radius-lg)}
.mark{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--slate);display:grid;place-items:center;background:var(--white)}
.choice input:checked+label .mark,.ans__btn[aria-pressed="true"] .mark{background:var(--color-primary);border-color:var(--color-primary)}
.choice input:checked+label .mark svg,.ans__btn[aria-pressed="true"] .mark svg{opacity:1}
.choice__sub,.ans__sub{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--font-size-sm);color:var(--slate);margin-top:2px}
@media (max-width:600px){.tool__body{padding:20px}.tool{border-radius:var(--radius-lg)}}

/* ===== NEW (ships): styles for this piece ===== */

.sc-wrap{padding-bottom:var(--space-2xl)}
.sc-intro p+p{margin-top:12px}
.sc-intro .tool__h{margin-bottom:10px}
.sc-intro .checks{margin:18px 0 18px}
.sc-tip{background:var(--signal-blue-tint);border:1px solid #C7D4FA;border-radius:var(--radius-md);padding:12px 16px;color:var(--ink)}
.sc-safe{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:#8A3A00;background:var(--amber-tint);border:1px solid #E9C98A;border-radius:var(--radius-md);padding:12px 16px}
.sc-safe svg{flex:none;width:20px;height:20px;margin-top:2px}
.sc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.sc-q__step{font-family:var(--font-mono);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:var(--letter-spacing-caps);color:var(--slate);margin-bottom:8px}
.sc-q__hint{color:var(--slate);margin-top:10px}
.sc-q .ans{margin-top:22px;display:grid;gap:10px}
/* Yes / No: two big buttons side by side, even on a 390px phone. */
.sc-q .ans.ans--yn{grid-template-columns:1fr 1fr}
.ans--yn .ans__btn{justify-content:center;min-height:64px;font-size:1.125rem}
.sc-q__next{display:flex;justify-content:flex-end;margin-top:10px}
.sc-q__redo{margin-top:16px;font-weight:600;color:#8A3A00;background:var(--amber-tint);border:1px solid #E9C98A;border-radius:var(--radius-md);padding:10px 14px;font-size:var(--font-size-sm)}
.prog{display:flex;gap:4px;padding:14px 28px 0}
.prog span{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--line)}
.prog span.is-done{background:var(--color-primary)}
.prog span.is-now{background:var(--color-primary);box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--color-primary)}
.sc-guide{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--slate);border-radius:var(--radius-md);padding:14px 16px;font-weight:600;color:var(--ink);margin-top:14px}
.sc-guide svg{flex:none;width:22px;height:22px;color:var(--slate);margin-top:1px}
/* Risk result: label + icon + position on the 3-step scale carry the meaning, not colour alone. */
.risk{border:1px solid;border-left-width:6px;border-radius:var(--radius-lg);padding:18px 20px;display:grid;gap:8px}
.risk__k{font-family:var(--font-mono);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:var(--letter-spacing-caps);color:var(--ink-3)}
.risk__h{display:flex;align-items:flex-start;gap:10px;font-size:clamp(1.375rem,2.8vw,1.75rem);line-height:1.2}
.risk__h svg{flex:none;width:30px;height:30px;margin-top:1px}
.risk__p{color:var(--ink)}
.risk__x{border-top:1px solid rgba(185,28,28,.25);padding-top:10px;display:grid;gap:8px}
.risk__x p{font-weight:600;color:var(--ink);padding-left:14px;border-left:3px solid #B91C1C}
.risk--low{background:var(--mint-tint);border-color:#B7E6DE;border-left-color:var(--teal)}
.risk--low .risk__h{color:var(--teal)}
.risk--medium{background:var(--amber-tint);border-color:#E9C98A;border-left-color:#B45309}
.risk--medium .risk__h{color:#8A3A00}
.risk--high{background:#FDECEC;border-color:#F1B5B5;border-left-color:#B91C1C}
.risk--high .risk__h{color:#B91C1C}
.scale{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none;padding:0;margin-top:14px}
.scale li{display:grid;gap:6px;font-size:var(--font-size-xs);color:var(--slate);text-align:center;line-height:1.3}
.scale li::before{content:"";height:10px;border-radius:var(--radius-pill);background:var(--line)}
.scale li.is-on{color:var(--ink);font-weight:700}
.scale li.is-on.l::before{background:var(--teal)}
.scale li.is-on.m::before{background:#B45309}
.scale li.is-on.h::before{background:#B91C1C}
.sc-res h3{font-size:var(--font-size-lg);margin:28px 0 10px}
.sc-flags{list-style:none;padding:0;display:grid;gap:8px}
.sc-flags li{position:relative;padding-left:1.7em}
.sc-flags li::before{content:"!";position:absolute;left:0;top:.15em;width:1.2em;height:1.2em;border-radius:50%;background:var(--ink);color:var(--white);font-weight:800;font-size:.8em;display:grid;place-items:center;font-family:var(--font-heading)}
.sc-flags--none li::before{content:"\2713";background:var(--teal)}
.sc-next{padding-left:1.4rem;display:grid;gap:10px}
.sc-next li::marker{font-family:var(--font-heading);font-weight:800;color:var(--color-primary)}
/* Shared help boxes (every level) */
.sc-box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-top:22px;background:var(--white)}
.sc-box h3{margin:0 0 6px}
.sc-box h4{font-size:var(--font-size-base);margin:16px 0 8px}
.sc-box ul{padding-left:1.2rem;display:grid;gap:8px}
.sc-box ul ul{margin-top:6px;gap:4px}
.sc-box--paid{border-left:5px solid #B91C1C}
.sc-box--report{border-left:5px solid var(--color-primary)}
.sc-box .sc-warn{margin-top:14px;background:var(--amber-tint);border:1px solid #E9C98A;border-radius:var(--radius-md);padding:10px 14px}
.sc-box a{overflow-wrap:anywhere}
.sc-res .sc-actions{border-top:1px solid var(--line);padding-top:20px;margin-top:26px}
/* Round 3 (Webby): no side column at launch. One tool column, centered on desktop; the side content stacks under the tool. */

@media (max-width:600px){.sc-wrap .tool__bar{gap:8px}.sc-wrap .tool__count{white-space:nowrap;font-size:var(--font-size-2xs)}.sc-wrap .tool__bar .linkbtn{white-space:nowrap}.prog{padding:12px 20px 0;gap:3px}.sc-actions .btn{width:100%}.sc-actions{gap:8px}.sc-box{padding:16px}}

.mark svg{width:14px;height:14px;opacity:0}
.scale li .scale__here{font-family:var(--font-mono);font-weight:500;font-size:var(--font-size-2xs);text-transform:uppercase;letter-spacing:.04em;visibility:hidden}
.scale li.is-on .scale__here{visibility:visible}
.sc-res .scale li{align-content:start}
.sc-risk-h:focus,.tool__h:focus{outline:none}
.fld__label{display:block;padding:0}
.sc-q legend{float:none;width:100%;padding:0;margin:0}
.sc-q legend h2{margin:0}
.sc-q fieldset{border:0;padding:0;margin:0;min-width:0}
.sc-q__opt{font-family:var(--font-body);font-weight:500;font-size:var(--font-size-sm);color:var(--slate)}
.sc-noscript h2,.sc-noscript h3{margin-top:0}
.sc-noscript .sc-flags{margin-top:12px}
.sc-help{margin-top:22px}
.sc-side{display:grid;gap:16px;margin-top:24px}
.sc-side .callout__h{margin-bottom:6px}
.sc-extra{margin-top:30px;display:grid;gap:16px;max-width:44rem}
.sc-extra .help-line{font-weight:600}
/* Ready (JS) vs no-JS. The tool and its result need JavaScript; the plain list and the shared help boxes work without it. */
.sc-wrap:not(.sc-ready) .tool{display:none}
.sc-wrap.sc-ready .sc-noscript{display:none}
.sc-shared[hidden]{display:none}
.sc-wrap .btn-row{display:flex;flex-wrap:wrap;gap:12px}
.sc-actions .btn[href]{text-decoration:none}
@media (prefers-reduced-motion:reduce){.choice label,.ans__btn{transition:none}}