/* AI Website Budget Calculator: page styles (uses the tokens from ../style.css) */

.ab-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);margin:28px 0 0;}
.ab-back .icon-svg{transform:rotate(180deg);width:14px;height:14px;}
.ab-hero{padding-top:20px;}

.ab-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;}
.ab-controls{display:flex;flex-direction:column;gap:20px;}
.ab-result{position:sticky;top:84px;}

.ab-step{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:24px;margin:0;min-width:0;}
.ab-step > legend{padding:0;}
.ab-step-title{display:flex;align-items:center;gap:12px;margin-bottom:6px;font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-0.02em;}
.ab-num{flex:none;width:30px;height:30px;border-radius:6px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:14px;}
.ab-hint{color:var(--ink-soft);font-size:14px;margin:0 0 16px;}

/* selectable cards (radio + checkbox) */
.ab-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ab-opt{position:relative;display:block;cursor:pointer;}
.ab-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.ab-opt > span{display:block;height:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);transition:border-color .15s,background .15s;}
.ab-opt b{display:block;font-weight:500;font-size:14px;}
.ab-opt small{display:block;margin-top:2px;color:var(--ink-soft);font-size:12px;line-height:1.35;}
.ab-opt:hover > span{border-color:var(--ink);}
.ab-opt input:checked + span{border-color:var(--ink);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--ink);}
.ab-opt input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px;}

/* sliders */
.ab-range-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
.ab-range-val{font-family:var(--font-display);font-size:34px;letter-spacing:-0.02em;line-height:1;}
.ab-range-note{font-size:13px;color:var(--ink-soft);}
input[type="range"].ab-range{width:100%;accent-color:var(--ink);margin:6px 0 4px;}
.ab-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.ab-chip{font:inherit;font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--bg);cursor:pointer;}
.ab-chip:hover{border-color:var(--ink);}
.ab-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.ab-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.ab-inline{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:var(--ink-soft);}
.ab-inline select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);}

/* quiz */
.ab-q{padding:18px 0;border-top:1px solid var(--border);}
.ab-q:first-of-type{border-top:0;padding-top:4px;}
.ab-q fieldset{border:0;padding:0;margin:0;min-width:0;}
.ab-q legend{padding:0;}
.ab-q-topic{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.ab-q h4{font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:0;line-height:1.45;margin:6px 0 12px;}
.ab-q .ab-options{grid-template-columns:1fr;}
.ab-q-note{margin-top:10px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--surface-2);font-size:13px;color:var(--ink-soft);}
.ab-progress{font-size:13px;color:var(--ink-soft);margin-top:4px;}

/* result panel */
.ab-panel{border:1px solid var(--ink);border-radius:var(--radius-lg);background:var(--ink);color:#fff;padding:28px;}
.ab-panel h2,.ab-panel h3{color:#fff;}
.ab-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.ab-budget{display:flex;align-items:baseline;gap:10px;margin:6px 0 2px;}
.ab-budget strong{font-family:var(--font-display);font-size:48px;font-weight:500;letter-spacing:-0.03em;line-height:1;}
.ab-budget span{font-size:14px;color:rgba(255,255,255,.6);}
.ab-buys{font-size:14px;color:rgba(255,255,255,.7);}
.ab-meter{margin:20px 0 6px;height:14px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;}
.ab-meter i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .35s ease;}
.ab-meter-label{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.65);}
.ab-verdict{margin:22px 0 4px;font-size:22px;line-height:1.25;color:#fff;}
.ab-verdict-sub{font-size:14px;color:rgba(255,255,255,.7);}
.ab-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0;}
.ab-stat{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);padding:12px 14px;}
.ab-stat dt{font-size:12px;color:rgba(255,255,255,.55);margin:0 0 4px;}
.ab-stat dd{margin:0;font-family:var(--font-display);font-size:19px;letter-spacing:-0.01em;}
.ab-stat small{display:block;font-family:var(--font-body);font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.ab-panel h3{font-size:15px;margin:26px 0 10px;font-family:var(--font-body);font-weight:500;letter-spacing:0;}
.ab-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.ab-list li{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.ab-list li:last-child{border-bottom:0;}
.ab-mark{flex:none;width:18px;text-align:center;font-weight:600;}
.ab-list .yes .ab-mark{color:#5fd39a;}
.ab-list .part .ab-mark{color:var(--accent);}
.ab-list .no{color:rgba(255,255,255,.5);}
.ab-list .no .ab-mark{color:#ff8a8a;}
.ab-list .ab-h{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;}
.ab-tip{margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(246,190,0,.12);border:1px solid rgba(246,190,0,.35);font-size:13px;color:#fff;}
.ab-diy{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);}
.ab-diy-title{font-family:var(--font-display);font-size:20px;color:var(--accent);margin:4px 0 8px;}
.ab-diy p{font-size:13px;color:rgba(255,255,255,.7);}
.ab-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.ab-actions .btn{font-size:13px;padding:10px 18px;}
.ab-actions .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}
.ab-actions .btn-ghost:hover{border-color:#fff;}
.ab-copied{font-size:12px;color:#5fd39a;align-self:center;}

/* how it is calculated */
.ab-how{max-width:760px;}
.ab-how details{border-top:1px solid var(--border);padding:14px 0;}
.ab-how details:last-of-type{border-bottom:1px solid var(--border);}
.ab-how summary{cursor:pointer;font-weight:500;}
.ab-how p,.ab-how li{color:var(--ink-soft);font-size:14px;margin-top:10px;}
.ab-how ul{margin:0;padding-left:20px;}

/* mobile mini bar */
.ab-mini{display:none;}
@media (max-width:900px){
  .ab-layout{grid-template-columns:1fr;}
  .ab-result{position:static;}
  .ab-mini{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;font-size:13px;}
  .ab-mini .ab-meter{flex:1;margin:0;height:10px;}
  .ab-mini a{color:var(--accent);font-weight:500;white-space:nowrap;}
  .ab-mini b{font-family:var(--font-display);font-weight:500;font-size:16px;}
  body{padding-bottom:56px;}
}
@media (max-width:520px){
  .ab-options{grid-template-columns:1fr;}
  .ab-step{padding:18px;}
  .ab-panel{padding:22px;}
  .ab-budget strong{font-size:40px;}
}
@media (prefers-reduced-motion:reduce){
  .ab-meter i,.ab-opt > span{transition:none;}
}

.ab-flush{margin:0;}
.ab-pages-box{margin-top:22px;}
.ab-link{text-decoration:underline;}

.ab-step > legend{float:left;width:100%;}
.ab-step > legend + *{clear:both;}