/* ============================================================================
   ASC Payer Contract Scorecard - page-specific styles (loaded after style.css,
   which carries the shared brand tokens). Same design system as the metrics tool.
   ============================================================================ */

/* Payer identity fields */
.identity{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 20px}
.identity label{font-size:13px;font-weight:600;display:block}
.identity label .sub{display:block;color:var(--muted);font-size:11.5px;font-weight:400;margin-top:2px}
.identity input{width:100%;margin-top:6px;padding:12px;font-size:16px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;background:#fff}
.identity input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,118,189,.16);outline:none}

/* Category card header */
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 4px}
.cat-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.cat-weight{flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--crimson);white-space:nowrap}
.cat-help{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 10px}

/* Percent input row */
.pct-row{display:flex;align-items:center;gap:12px}
.pct-row .numwrap input{width:130px;text-align:right}
.pct-row .pct-note{font-size:12.5px;color:var(--muted)}

/* Tappable option cards (tiers) */
.opt-list{display:grid;gap:8px}
.opt{position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.opt:hover{border-color:#CBD4DC}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt .mark{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #CBD4DC;position:relative;transition:border-color .15s}
.opt .lab{flex:1;font-size:14px;color:var(--ink);line-height:1.35}
.opt .pts{flex:none;font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.opt.sel{border-color:var(--blue);background:#F4FAFE}
.opt.sel .mark{border-color:var(--blue)}
.opt.sel .mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)}
.opt.sel .pts{color:var(--blue)}
.opt input:focus-visible + .mark{outline:2px solid var(--blue);outline-offset:2px}

/* Bonus checkboxes */
.bonus-wrap{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.bonus-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.bonus{position:relative;display:flex;align-items:center;gap:10px;padding:9px 4px;cursor:pointer}
.bonus input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bonus .box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid #CBD4DC;position:relative;transition:all .15s}
.bonus .lab{flex:1;font-size:13.5px;color:var(--ink)}
.bonus .pts{flex:none;font-size:12px;font-weight:700;color:var(--muted)}
.bonus.sel .box{background:var(--good);border-color:var(--good)}
.bonus.sel .box::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.bonus.sel .pts{color:var(--good)}
.bonus-cap{font-size:11.5px;color:var(--faint);margin-top:6px}

/* Results: big hero gauge (reuses .report container) */
.cscore .gauge-wrap{width:300px}
.cscore .gauge-score{font-size:64px}
.rating-line{margin:8px 4px 0}
.rating-name{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.1}
.rating-rec{font-size:14px;color:var(--muted);margin-top:4px}

/* Category breakdown bars */
.catbreak{margin-top:22px}
.catbreak h3{font-family:var(--serif);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);margin:0 4px 12px;font-weight:700}
.catbar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:0 1px 2px rgba(20,32,40,.05);margin-bottom:10px;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.armed .catbar{opacity:1;transform:none}
.catbar .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.catbar .nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.catbar .val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.catbar .val .max{color:var(--faint);font-weight:600}
.catbar .chosen{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
/* Distinct class names (not .track/.fill) so the metrics stylesheet's
   `.track .fill{position:absolute;inset:0}` rule cannot bleed in here. */
.catbar .cbar-track{position:relative;height:10px;background:#EDF0F3;border-radius:6px;overflow:hidden;margin-top:9px}
.catbar .cbar-fill{height:100%;border-radius:6px;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.armed .catbar .cbar-fill{transform:scaleX(1)}
.catbar.skipped{opacity:.7}
.catbar .skip{font-size:11.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}