/* LevelQuote free tools — on top of site.css and guides.css. The quote being checked is a paper sheet on the desk;
   ticks are red pen; the result is a dark card with a stamp. Mobile first; site tokens only. */

.tool .in{padding-bottom:40px}
.tool .lead b{color:var(--ink)}

/* ---------- the sheet with the checklist ---------- */
.hpc{padding:clamp(18px, 4vw, 30px); display:flex; flex-direction:column; gap:16px; margin-top:6px}
.hpc-title{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:12px; border-bottom:2px solid var(--ink)}
.hpc-title h2{margin:0; font-size:1.3rem; font-stretch:112%}
.hpc-title .fine{color:var(--faint)}
.hpc-setup{display:flex; flex-wrap:wrap; gap:14px 30px}
.hpc fieldset{border:0; margin:0; padding:0; min-width:0}
.hpc legend{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:0; margin-bottom:8px}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg label{position:relative; display:inline-flex}
.seg input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.seg span{display:inline-block; border:1.5px solid var(--rule); border-radius:999px; padding:6px 14px; font-weight:640; font-size:.95rem; color:var(--sheet-ink); background:#FFFFFF; line-height:1.3}
.seg input:checked + span{background:var(--sheet-ink); border-color:var(--sheet-ink); color:var(--sheet)}
.seg input:focus-visible + span{outline:3px solid var(--pen); outline-offset:2px}

.items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.items li{border-top:1.5px dashed var(--line)}
.items li:first-child{border-top:0}
.item{position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 14px; padding:14px 0; cursor:pointer; align-items:start}
.item input{position:absolute; left:0; top:14px; width:28px; height:28px; opacity:0; margin:0; cursor:pointer}
.box{position:relative; width:28px; height:28px; border:2px solid var(--sheet-ink); border-radius:4px; background:#FFFFFF; margin-top:1px}
.box svg{position:absolute; left:-1px; top:-9px; width:38px; height:36px; overflow:visible; opacity:0; transform:scale(.6) rotate(-8deg); transform-origin:30% 70%; transition:opacity .12s, transform .18s var(--ease)}
.box path{fill:none; stroke:var(--pen); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.item input:checked + .box svg{opacity:1; transform:none}
.item input:focus-visible + .box{outline:3px solid var(--pen); outline-offset:3px}
.item .txt{min-width:0}
.item .txt b{display:block; color:var(--sheet-ink); font-weight:700; font-size:1.03rem; line-height:1.3}
.item .why{display:block; color:var(--faint); font-size:.93rem; line-height:1.45; margin-top:3px; max-width:62ch}
.item .must{display:inline-block; margin-left:6px; vertical-align:2px; font-size:.68rem; font-weight:760; letter-spacing:.07em; text-transform:uppercase; color:var(--pen); border:1.5px solid var(--pen); border-radius:4px; padding:0 5px; line-height:1.5}
.item:has(input:checked) .txt b{text-decoration:none}
.hpc-foot{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding-top:12px; border-top:2px solid var(--ink)}
.hpc-foot .fine{color:var(--faint)}
.hpc .textbtn{color:var(--sheet-faint); border-color:var(--rule)}
.hpc .textbtn:hover{color:var(--sheet-ink); border-color:var(--sheet-ink)}

/* ---------- result ---------- */
.result{display:flex; flex-direction:column; gap:16px; scroll-margin-top:84px; margin-top:8px}
.score{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 20px; align-items:center}
.score .num{font:820 clamp(3.2rem, 2.4rem + 4vw, 4.6rem)/.9 Archivo, Arial, sans-serif; font-stretch:118%; color:var(--t); font-variant-numeric:tabular-nums}
.score .num small{font-size:.32em; font-weight:700; color:var(--faint); margin-left:4px; letter-spacing:0}
.score .verdict{display:flex; flex-direction:column; gap:10px; align-items:flex-start; min-width:0}
.score .stamp{transform:rotate(-3deg)}
.score .stamp.mid{border-color:#B07A0C; color:#8A5E05}
.meter{grid-column:1 / -1; height:12px; border-radius:999px; background:var(--bg); border:1px solid var(--line); overflow:hidden}
.meter i{display:block; height:100%; width:0; background:var(--pen); border-radius:999px; transition:width .35s var(--ease), background-color .2s}
.meter i.mid{background:var(--tape)}
.meter i.ok{background:var(--pine)}
.result .sum{color:var(--t-body); max-width:62ch}
.must-list{background:color-mix(in srgb, var(--pen) 12%, transparent); border:1px solid color-mix(in srgb, var(--pen) 55%, transparent); border-radius:var(--r-ui); padding:12px 16px; display:flex; flex-direction:column; gap:6px}
@supports not (background:color-mix(in srgb, red 50%, blue)){ .must-list{background:var(--bg2); border-color:var(--pen)} }
.must-list b{color:var(--t)}
.must-list ul{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:4px}
.asks{display:flex; flex-direction:column; gap:10px}
.asks h3{margin:0; font-size:1.12rem}
.asks ol{margin:0; padding-left:1.35rem; display:flex; flex-direction:column; gap:6px; color:var(--t-body)}
.asks .row{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center}
.asks .copied{color:var(--ok); font-weight:640; font-size:.93rem}
.asks textarea{width:100%; min-height:160px; font:inherit; font-size:.93rem; color:var(--t); background:var(--bg); border:1.5px solid var(--rule); border-radius:var(--r-ui); padding:10px 12px}
.result .scope{font-size:.9rem; color:var(--faint); border-top:1px dashed var(--line); padding-top:12px; margin:0}

/* ---------- running score bar (phones and desktops) ---------- */
.scorebar{position:fixed; left:0; right:0; bottom:0; z-index:40; background:color-mix(in srgb, var(--graphite-deep) 94%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--line);
  padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display:flex; align-items:center; justify-content:center; gap:10px 18px; flex-wrap:wrap; font-size:.95rem; color:var(--t-body); transition:transform .2s var(--ease)}
@supports not (background:color-mix(in srgb, red 50%, blue)){ .scorebar{background:var(--graphite-deep)} }
.scorebar b{color:var(--t); font-variant-numeric:tabular-nums}
.scorebar a{color:var(--pine-text); font-weight:680; text-underline-offset:3px}
.scorebar.away{transform:translateY(110%)}
body.has-scorebar footer .in{padding-bottom:96px}
@media (prefers-reduced-motion: reduce){ .box svg,.meter i,.scorebar{transition:none} }