/* Shared building blocks for the interactive guides.
   Loaded per guide alongside styles.css; each guide picks the pieces it needs. */

/* ── Tool shell ───────────────────────────────────────────── */
.tool{background:var(--surface);border:1.5px solid var(--stroke);border-radius:18px;padding:28px;margin:28px 0;box-shadow:var(--shadow-sm)}
.tool-tag{display:inline-flex;align-items:center;gap:7px;background:var(--peach);color:var(--orange-deep);font-size:.74rem;font-weight:900;padding:5px 12px;border-radius:99px;letter-spacing:.02em;margin-bottom:14px}
.tool-tag svg{width:13px;height:13px}
.tool h3{font-size:1.3rem;margin:0 0 8px;letter-spacing:-.02em}
.tool-sub{color:var(--ink-mute);font-size:.93rem;line-height:1.6;margin:0 0 22px;font-weight:500}
.tool-note{font-size:.82rem;color:var(--ink-mute);line-height:1.55;margin-top:14px;font-weight:500}

/* ── Controls ─────────────────────────────────────────────── */
.seg{display:flex;background:var(--bg);border:1.5px solid var(--stroke);border-radius:10px;padding:3px;gap:3px;margin-bottom:6px}
.seg button{flex:1;border:0;background:transparent;font-family:inherit;font-size:.79rem;font-weight:800;color:var(--ink-mute);padding:8px 4px;border-radius:7px;cursor:pointer;transition:all .18s}
.seg button.on{background:var(--ink);color:#fff}
.tgl{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1.5px solid var(--stroke);border-radius:9px;cursor:pointer;font-size:.83rem;font-weight:700;color:var(--ink-soft);transition:all .18s;font-family:inherit;text-align:right;width:100%}
.tgl:hover{border-color:rgba(255,106,0,.4)}
.tgl-box{width:18px;height:18px;border-radius:5px;border:2px solid var(--stroke);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;transition:all .18s}
.tgl.on{background:var(--peach-soft);border-color:var(--orange);color:var(--ink)}
.tgl.on .tgl-box{background:var(--orange);border-color:var(--orange);color:#fff}
.tgl.on .tgl-box::after{content:"✓"}
.slider{width:100%;accent-color:var(--orange)}

/* ── Readout ──────────────────────────────────────────────── */
.readout{margin-top:14px;padding:14px 16px;border-radius:11px;font-size:.88rem;font-weight:800;line-height:1.5;transition:background .25s}
.readout.good{background:rgba(34,139,80,.10);color:#1c6b41}
.readout.warn{background:var(--peach-soft);color:var(--orange-deep)}
.readout.bad{background:rgba(201,68,0,.10);color:var(--orange-deep)}

/* ── Meter ────────────────────────────────────────────────── */
.meter{margin-top:18px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.meter-label{font-size:.82rem;font-weight:800;color:var(--ink-mute)}
.meter-num{font-size:1.6rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.meter-track{height:10px;background:var(--stroke);border-radius:99px;overflow:hidden}
.meter-fill{height:100%;border-radius:99px;transition:width .45s cubic-bezier(.16,1,.3,1),background .3s}

/* ── Site mock (generic-vs-distinctive preview) ───────────── */
.mock-wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:start}
@media(max-width:760px){.mock-wrap{grid-template-columns:1fr}}
.mock-stage{background:var(--bg-canvas);border-radius:14px;padding:20px;display:flex;justify-content:center}
.mock{background:#fff;border:2px solid rgba(26,20,16,.16);border-radius:14px;width:100%;max-width:360px;overflow:hidden;font-size:.78rem}
.mock-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;border-bottom:1px solid rgba(26,20,16,.08)}
.mock-dot{width:8px;height:8px;border-radius:50%;background:rgba(26,20,16,.14)}
.mock-hero{padding:26px 18px;text-align:center;transition:background .35s,color .35s}
.mock-hero h4{margin:0 0 8px;font-size:1rem;font-weight:900;line-height:1.2;transition:font-family .2s}
.mock-hero p{margin:0 0 14px;font-size:.76rem;opacity:.85;line-height:1.45}
.mock-btn{display:inline-block;padding:8px 20px;font-size:.74rem;font-weight:900;background:var(--orange);color:#fff;transition:border-radius .35s,background .35s}
.mock-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.mock-icons{display:flex;gap:14px;justify-content:center}
.mock-icons svg{width:24px;height:24px;stroke:var(--ink-soft);fill:none;stroke-width:2}
.mock-photo{height:64px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;transition:background .35s,color .35s}
.mock-quote{border-radius:9px;padding:10px 12px;font-size:.72rem;line-height:1.45;transition:background .35s}

/* ── Before / after ───────────────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.ba-grid{grid-template-columns:1fr}}
.ba-cell{border-radius:14px;padding:18px;border:1.5px solid var(--stroke)}
.ba-cell.before{background:rgba(26,20,16,.03)}
.ba-cell.after{background:var(--peach-soft);border-color:rgba(255,106,0,.3)}
.ba-label{font-size:.74rem;font-weight:900;letter-spacing:.04em;margin-bottom:12px;display:inline-block;padding:4px 11px;border-radius:99px}
.before .ba-label{background:rgba(26,20,16,.1);color:var(--ink-mute)}
.after .ba-label{background:var(--orange);color:#fff}

/* ── Checklist card ───────────────────────────────────────── */
.check-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;background:var(--bg);border:1.5px solid var(--stroke);border-radius:10px;cursor:pointer;user-select:none;transition:all .2s;width:100%;font-family:inherit;text-align:right}
.check-row-box{width:22px;height:22px;border-radius:5px;border:2px solid var(--stroke);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:.85rem;font-weight:900}
.check-row-label{font-size:.88rem;font-weight:700;color:var(--ink-soft);transition:color .2s}
.sign.checked{border-color:var(--orange);background:var(--peach-soft)}
.sign.checked .check-row{background:var(--orange);border-color:var(--orange)}
.sign.checked .check-row-box{background:#fff;border-color:#fff;color:var(--orange)}
.sign.checked .check-row-box::after{content:"✓"}
.sign.checked .check-row-label{color:#fff}

/* ── Score bar ────────────────────────────────────────────── */
.score-bar{background:rgba(255,255,255,.92);border:1.5px solid var(--stroke);border-radius:14px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:12px;margin:24px 0 8px;z-index:10;box-shadow:var(--shadow-sm);backdrop-filter:blur(8px)}
.score-bar-label{font-weight:700;color:var(--ink-soft);font-size:.95rem}
.score-bar-num{background:var(--orange);color:#fff;padding:6px 16px;border-radius:7px;font-weight:900;min-width:72px;text-align:center}
.score-progress{height:3px;background:var(--stroke);border-radius:99px;margin-top:8px;overflow:hidden}
.score-progress-fill{height:100%;background:var(--orange);width:0%;transition:width .4s cubic-bezier(.16,1,.3,1);border-radius:99px}

/* ── Verdict + action plan ────────────────────────────────── */
.verdict{background:var(--surface);border:1.5px solid var(--stroke);border-radius:18px;padding:36px 32px;margin:32px 0;text-align:center;display:none;border-top:4px solid var(--orange)}
.verdict.active{display:block;animation:toolFade .5s ease}
.verdict h2{margin-bottom:12px;font-size:1.8rem}
.verdict p{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;max-width:540px;margin:0 auto;font-weight:500}
@keyframes toolFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.plan{background:var(--surface);border:1.5px solid var(--stroke);border-top:4px solid var(--orange);border-radius:18px;padding:30px;margin:28px 0;display:none}
.plan.active{display:block;animation:toolFade .45s ease}
.plan-item{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--stroke)}
.plan-item:last-child{border-bottom:0}
.plan-rank{width:28px;height:28px;border-radius:8px;background:var(--peach);color:var(--orange-deep);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;flex-shrink:0;margin-top:2px}
.plan-item h4{margin:0 0 4px;font-size:1rem;font-weight:900;letter-spacing:-.01em}
.plan-item p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.55;font-weight:500}
.plan-time{font-size:.75rem;font-weight:900;color:var(--orange-deep);background:var(--peach-soft);padding:3px 9px;border-radius:99px;white-space:nowrap;margin-right:auto;flex-shrink:0}

@media print{
  .tool,.plan,.score-bar{break-inside:avoid}
  .seg,.slider,.tgl{display:none}
}