/* AutoAssures.com, the six tools (redesign 2026-10, inner-page pass; ART-DIRECTION.md section 5 "Workbench").
   A short head band; the workbench (inputs on white, DM Mono labels and figures, 48 px fields) straddles its foot; the
   result is a sticky petrol card with the answer in DM Mono 44 px and the verdict as a chip; the explainer below is a
   white sheet on the mist dot grid. The PAGE_SCRIPTS set className to exactly "result-verdict",
   "result-verdict good" or "result-verdict warn" and write Bootstrap utility markup (tables, cards, badges): every one
   of those hooks is restyled here, none renamed. */

/* ---------- the head of a tool page: shorter, its photo stays inside the band; the workbench straddles the foot ---- */
.page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .container,
.page-head.has-photo:has(+ .section > #cqTool) .container{align-items:center;padding-bottom:clamp(120px,11vw,152px)}
.page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo,
.page-head.has-photo:has(+ .section > #cqTool) .ph-photo{grid-column:9/13;grid-row:1;align-self:center;margin:0;box-shadow:none}
.page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-text,
.page-head.has-photo:has(+ .section > #cqTool) .ph-text{grid-column:1/9;grid-row:1}
.page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo img,
.page-head.has-photo:has(+ .section > #cqTool) .ph-photo img{flex:none;min-height:0;aspect-ratio:16/10}
.page-head.has-photo + .section:has(> .container > :is(.tool,.tool-panel):first-child),
.page-head.has-photo + .section:has(> #cqTool){padding-top:0}
.page-head.has-photo + .section > .container > :is(.tool,.tool-panel):first-child,
.page-head.has-photo + .section > #cqTool > .tool-panel:first-child{position:relative;z-index:2;margin-top:calc(-1 * clamp(88px,8vw,112px))}

/* ---------- the workbench ---------- */
.tool{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
.tool-panel,.result-panel{position:relative;padding:0 clamp(20px,2.4vw,32px) clamp(22px,2.4vw,32px);border-radius:10px}
.tool-panel{background:#fff;border:1px solid var(--aa-line-soft)}
.page-head.has-photo + .section > .container > .tool:first-child>.tool-panel,
.page-head.has-photo + .section > .container > .tool-panel:first-child,
.page-head.has-photo + .section > #cqTool > .tool-panel:first-child{box-shadow:var(--aa-drop)}
/* each panel's first heading is its spec strip */
.tool-panel>:is(h2,h3):first-child,.result-panel>:is(h2,h3):first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;margin:0 calc(-1 * clamp(20px,2.4vw,32px)) 24px!important;padding:0 clamp(20px,2.4vw,32px);border-radius:9px 9px 0 0;font:500 13px/1.25 var(--aa-mono)!important;letter-spacing:.08em;text-transform:uppercase}
.tool-panel>:is(h2,h3):first-child{background:var(--aa-mist);color:var(--aa-petrol)}
.tool-panel h3:not(:first-child){font-size:19px;margin:28px 0 12px}
.tool-panel .form-text{font-size:14.5px;line-height:1.5;color:var(--aa-muted)}
.tool-panel>.form-text:first-of-type{max-width:72ch}
.tool-panel .form-label{margin-bottom:8px}
.tool-panel .form-control,.tool-panel .form-select{min-height:48px;height:48px;border-color:var(--aa-line);border-radius:4px;font-size:16.5px;background-color:#fff}
.tool-panel .form-control[inputmode],.tool-panel input[type=number],.tool-panel .input-group .form-control{font:500 17px var(--aa-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tool-panel .form-control:focus,.tool-panel .form-select:focus{border-color:var(--aa-petrol);box-shadow:0 0 0 3px rgba(15,76,92,.2)}
.tool-panel .form-control:disabled{background:#F1F6F5;color:var(--aa-muted);border-style:dashed}
.tool-panel .input-group-text{min-width:44px;justify-content:center;background:var(--aa-mist);border-color:var(--aa-line);color:var(--aa-petrol);font:500 16px var(--aa-mono)}
.tool-panel .input-group>.form-control{border-left-color:var(--aa-line)}
.tool-panel .form-check-input{width:20px;height:20px;margin-top:.15em}
.tool-panel .form-check-label{font-size:15.5px}
.tool-panel fieldset legend{font-size:15px}
/* Compare Quotes: the three quote columns are sub-sheets */
#cqTool fieldset.border{border:1px solid var(--aa-line-soft)!important;border-radius:10px!important;background:#FAFCFC;padding:18px 18px 20px!important}
#cqTool fieldset.border>legend{display:inline-flex;align-items:center;gap:10px;padding:0 10px;margin-left:-4px;font:500 13px/1.2 var(--aa-mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol);background:#fff;border:1px solid var(--aa-line-soft);border-radius:4px;height:30px}
#cqTool [data-clear]{min-height:40px;font-size:14.5px;padding:0 14px}
#cqTool .table-wrap{margin:0 0 16px}
#cqTool .bg-success-subtle{background-color:var(--aa-mist)!important}
#cqTool .bg-warning-subtle{background-color:var(--aa-warn-bg)!important}
#cqTool .text-success-emphasis{color:var(--aa-petrol)!important}
#cqTool #cq-table td,#cqTool #cq-table th{font-variant-numeric:tabular-nums}
#cqTool #cq-table tbody td:not(:first-child){font-family:var(--aa-mono);font-weight:500;font-size:15.5px}
#cqTool #cq-table thead th small,#cqTool #cq-table thead th span{font-family:var(--aa-mono)}
#cqTool #cq-table td ul{font:400 14.5px/1.45 var(--aa-sans);letter-spacing:0}

/* ---------- the result: a sticky petrol card ---------- */
.result-panel{position:sticky;top:var(--ip-stick,120px);background:var(--aa-petrol);border:0;color:var(--aa-mist)}
.result-panel>:is(h2,h3):first-child{background:var(--aa-deep);color:var(--aa-mist)}
.result-panel h2,.result-panel h3{color:#fff}
.result-big{font:500 clamp(2.25rem,1.9rem + 1vw,2.75rem)/1.05 var(--aa-mono);color:#fff;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.result-sub{margin:10px 0 22px;color:var(--aa-mist);font-size:15.5px;line-height:1.5}
.result-rows{display:block;margin:0;border-top:1px solid rgba(220,235,234,.28)}
.result-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(220,235,234,.18)}
.result-rows dt{font-weight:400;font-size:15px;color:var(--aa-mist)}
.result-rows dd{margin:0;font:500 16px var(--aa-mono);color:#fff;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-verdict{position:relative;margin-top:22px;padding:14px 16px 14px 40px;border-radius:6px;background:rgba(220,235,234,.12);color:#fff;font-size:15.5px;line-height:1.5}
.result-verdict::before{content:"";position:absolute;left:16px;top:20px;width:10px;height:10px;border-radius:2px;background:currentColor}
.result-verdict.good{background:var(--aa-mist);color:var(--aa-petrol)}
.result-verdict.warn{background:var(--aa-warn-bg);color:var(--aa-warn-ink)}
.result-panel .btn{margin-top:18px}
.result-panel .btn-ghost-light{--bs-btn-color:#fff;--bs-btn-border-color:rgba(220,235,234,.5);--bs-btn-border-width:1px;--bs-btn-hover-bg:rgba(220,235,234,.12);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#fff;min-height:44px}
.result-panel a:not(.btn){color:#fff}
.result-panel .text-white{color:#fff!important}
@media (max-width:991.98px){
  .tool{grid-template-columns:minmax(0,1fr)}
  .result-panel{position:static}
}

/* ---------- Rate Checklist: tick rows and the gauge ---------- */
.tool-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tool-list label{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid var(--aa-line-soft);border-radius:6px;cursor:pointer;background:#fff;transition:border-color .15s,background-color .15s}
.tool-list label:hover{border-color:var(--aa-petrol)}
.tool-list input{flex:none;margin-top:.2rem}
.tool-list .form-text{font-size:14px}
.progress{height:12px;border-radius:2px;background:rgba(220,235,234,.22);overflow:hidden}
.result-panel .progress{margin:4px 0 18px}
.tool-panel .progress{background:var(--aa-mist)}
.progress-bar{background:var(--aa-mist)}
.tool-panel .progress-bar{background:var(--aa-petrol)}

/* ---------- Coverage Worksheet: the cards the script writes into #w-list ---------- */
#w-list .border{border:1px solid var(--aa-line-soft)!important;border-radius:10px!important;background:#fff}
#w-list h3{font-size:18px}
#w-list .badge{font:500 11.5px/1 var(--aa-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:4px}
#w-list .text-bg-success{background:var(--aa-petrol)!important;color:#fff!important}
#w-list .text-bg-warning{background:var(--aa-warn-bg)!important;color:var(--aa-warn-ink)!important}
#w-list .text-bg-secondary{background:var(--aa-mist)!important;color:var(--aa-petrol)!important}
#w-list .text-bg-dark{background:var(--aa-ink)!important;color:#fff!important}

/* ---------- the explainer under every tool: a white sheet on the mist dot grid ---------- */
.section-alt>.container>.article-wrap.prose{max-width:calc(41rem + 2 * clamp(22px,5vw,72px));padding:clamp(28px,4vw,56px) clamp(22px,5vw,72px);background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px}
.section-alt>.container>.article-wrap.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.section-alt>.container>.article-wrap.prose>h2:first-child::before{display:none}
.section-alt>.container>.article-wrap.prose .note{background:var(--aa-mist);box-shadow:none}

@media (max-width:767.98px){
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo{grid-column:1/-1;grid-row:2;margin-top:24px}
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-text,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-text{grid-column:1/-1}
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .container,
  .page-head.has-photo:has(+ .section > #cqTool) .container{padding-bottom:96px}
  .page-head.has-photo + .section > .container > :is(.tool,.tool-panel):first-child,
  .page-head.has-photo + .section > #cqTool > .tool-panel:first-child{margin-top:-64px}
  .tool-panel>:is(h2,h3):first-child,.result-panel>:is(h2,h3):first-child{font-size:12px!important}
}
/* phones: the head photo becomes a strip, so the first input shows on the first screen */
@media (max-width:575.98px){
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo{margin-top:20px;padding:36px 8px 8px}
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo img,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo img{aspect-ratio:16/6}
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo::before,
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo::after,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo::before,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo::after{height:30px}
  .result-rows div{align-items:flex-start}
  .result-rows dt{min-width:0}
}