.recon { width:min(1440px,100% - 80px); padding-block:40px 80px; color:var(--paper-ink,#243327); }
.recon [hidden] { display:none!important; }
.recon-back { font-size:12px; color:#58664d; }
.recon-intro { display:grid; grid-template-columns:1.7fr 1fr; gap:100px; align-items:end; margin:30px 0; }
.recon h1 { font:400 clamp(38px,4.6vw,65px)/1.08 Georgia,serif; letter-spacing:-2px; margin:14px 0 20px; }
.recon h1 em { color:#62774e; font-style:normal; }
.recon p { font-size:14px; line-height:1.8; color:#53604e; }
.recon-intro>div>p:last-child { max-width:620px; font-size:16px; }
.recon-intro aside { border-left:1px solid #b8c6ac; padding-left:25px; }
.recon-intro aside p,.recon-intro aside a { font-size:12px; }
.recon-badge { display:inline-block; padding:6px 9px; border:1px solid #bbc8ae; border-radius:4px; font:10px/1.6 ui-monospace,monospace; color:#4f6441; background:#edf0e2; }
.recon-start { display:flex; align-items:center; gap:16px; padding:22px; border:1px solid #bcc9b0; background:#e9eddf; border-radius:6px; }
.recon-start>div { flex:1; }
.recon-start b { font:23px Georgia,serif; }
.recon-start p { margin:6px 0 0; font-size:12px; }
.recon button,.recon input,.recon select { font:inherit; }
.recon button { cursor:pointer; }
.recon button:disabled { opacity:.45; cursor:default; }
.recon :focus-visible { outline:3px solid #657e4d; outline-offset:3px; }
.recon .button { font-size:12px; min-height:44px; justify-content:center; }
#recon-status { min-height:24px; }
.recon-totals { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #bac5b1; border-radius:6px; margin-bottom:30px; background:#f4f3e9; }
.recon-totals>div { padding:20px 24px; border-right:1px solid #c8cebd; }
.recon-totals>div:last-child { border:0; }
.recon-totals span,.recon-totals small { display:block; font:10px/1.6 ui-monospace,monospace; color:#58694e; }
.recon-totals b { display:block; font:30px/1.4 Georgia,serif; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.recon-workspace { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:24px; align-items:start; }
.recon-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.recon h2 { font:400 30px/1.2 Georgia,serif; letter-spacing:-.6px; margin:8px 0 16px; }
.recon h3 { font:400 21px/1.3 Georgia,serif; }
.recon .overline { font:10px/1.5 ui-monospace,monospace; letter-spacing:1px; color:#5a704c; margin:0; }
.recon-sources { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0; }
.recon-sources h3 { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.recon-sources h3 small { font:10px ui-monospace,monospace; color:#65705c; }
.recon-rows { display:grid; gap:9px; }
.recon-row { width:100%; display:block; text-align:left; min-height:144px; border:1px solid #c0c9b6; background:#fffdf6; border-radius:5px; padding:13px; color:inherit; }
.recon-row:hover:enabled { border-color:#60764b; background:#f1f4e8; }
.recon-row[aria-pressed="true"] { border:2px solid #49623a; padding:12px; background:#e8eddb; }
.recon-row[data-assigned="true"] { background:#eeeee5; }
.recon-row:disabled { opacity:1; }
.recon-row-top { display:flex; align-items:center; justify-content:space-between; font:10px/1.5 ui-monospace,monospace; }
.recon-row strong { display:block; font:25px/1.3 Georgia,serif; margin:8px 0; }
.recon-row small { display:block; font-size:11px; line-height:1.7; color:#5f6d57; }
.recon-row .row-state { font-size:10px; color:#4c613e; margin-top:5px; font-weight:600; }
.recon fieldset { border:1px solid #bdc8b2; border-radius:6px; padding:20px; margin:0; }
.recon legend { font:22px Georgia,serif; padding:0 8px; }
.recon label { display:block; font-size:12px; margin:12px 0 8px; }
.recon input:not([type="range"]),.recon select { width:100%; box-sizing:border-box; min-height:44px; background:#fffdf6; border:1px solid #b9c5ad; border-radius:4px; padding:10px; color:inherit; font-size:13px; }
.recon-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.recon button:not(.button):not(.recon-row) { border:1px solid #b7c3ac; border-radius:4px; background:transparent; color:inherit; min-height:40px; padding:8px 12px; font-size:12px; }
.recon button:not(.button):not(.recon-row):hover:enabled { background:#e9eddf; }
.recon .recon-hint { font-size:11px; line-height:1.7; color:#606a58; }
.recon-rules { padding:16px 0; border-block:1px solid #c2cbb7; margin-top:24px; }
.recon-rules summary { cursor:pointer; min-height:30px; font-size:13px; }
.recon-rules li { font-size:12px; color:#53604e; line-height:1.8; margin:10px 0; }
.recon-review { position:sticky; top:100px; border:1px solid #bbc7ae; border-radius:6px; padding:22px; background:#edefe2; }
.recon-review h2 { font-size:27px; }
.recon-decision-card { border-top:1px solid #c2cbb7; padding:12px 0; }
.recon-decision-card p { margin:5px 0; font-size:11px; overflow-wrap:anywhere; }
.recon-decision-card b { font-size:12px; }
.recon-calculation>div { display:flex; justify-content:space-between; gap:10px; margin:14px 0; font-size:12px; }
.recon-calculation dd { margin:0; font-variant-numeric:tabular-nums; }
.recon-review>button { width:100%; margin-top:10px; }
.recon-replay,.recon-results { border-top:1px solid #b9c4ae; padding-top:32px; margin-top:44px; scroll-margin-top:100px; }
.recon-replay-layout { display:grid; grid-template-columns:280px minmax(0,1fr); border:1px solid #bcc7b1; border-radius:6px; margin-top:24px; overflow:hidden; }
.recon-replay-layout nav { border-right:1px solid #c2cbb7; background:#edefe3; padding:16px; max-height:420px; overflow-y:auto; }
.recon-replay-layout ol { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.recon-replay-layout li button { width:100%; text-align:left; }
.recon-replay-layout button[aria-current="step"] { background:#dce5cd!important; border-color:#6b8155!important; }
.recon-replay-layout>div { padding:24px; min-width:0; }
.recon-playback { display:flex; flex-wrap:wrap; gap:8px; }
#replay-range { width:100%; accent-color:#536d40; }
#replay-evidence { display:grid; gap:10px; }
.recon-evidence { padding:12px; border-left:3px solid #8d9e76; background:#f4f3e9; font:12px/1.8 ui-monospace,monospace; overflow-wrap:anywhere; }
.recon-components { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0; }
.recon-component { border:1px solid #bbc8ae; border-radius:5px; padding:18px; }
.recon-component b { display:block; font:30px/1.5 Georgia,serif; }
.recon-component small { font:11px ui-monospace,monospace; color:#53604e; }
.recon-explanation { padding:20px 0; border-top:1px solid #c5cbb9; }
.recon-explanation h4 { margin:0 0 8px; font-size:15px; }
.recon-explanation p,.recon-explanation li { font-size:12px; }
.recon-check[data-passed="true"] { color:#365d31; }
.recon-check[data-passed="false"] { color:#923d28; }
#grade-verdict { font:27px Georgia,serif; }
#grade-digest { overflow-wrap:anywhere; }
.recon-next { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:30px; background:#e9eddf; border:1px solid #bdc7b1; border-radius:6px; margin-top:40px; }
@media(max-width:1080px) { .recon { width:calc(100% - 40px); } .recon-intro { gap:40px; } .recon-workspace { grid-template-columns:minmax(0,1fr) 250px; gap:18px; } .recon-totals>div { padding:16px; } .recon-totals b { font-size:25px; } .recon-start { flex-wrap:wrap; } .recon-start>div { flex-basis:100%; } }
@media(max-width:820px) { .recon-workspace { grid-template-columns:1fr; } .recon-review { position:static; } .recon-intro { grid-template-columns:1fr; gap:20px; } .recon-totals { grid-template-columns:1fr 1fr; } .recon-totals>div:nth-child(2) { border-right:0; } .recon-totals>div:nth-child(-n+2) { border-bottom:1px solid #c8cebd; } .recon-replay-layout { grid-template-columns:1fr; } .recon-replay-layout nav { max-height:190px; border-right:0; border-bottom:1px solid #c2cbb7; } .recon-components { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .recon { width:calc(100% - 28px); padding-top:24px; } .recon h1 { font-size:39px; } .recon-sources { grid-template-columns:1fr; } .recon-heading { align-items:start; flex-direction:column; gap:0; } .recon-start .button { width:100%; } .recon-next { flex-direction:column; align-items:start; padding:22px; } .recon-totals b { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .recon * { scroll-behavior:auto!important; transition:none!important; } }