/* DPI Analyzer Pro — tool-cluster styles.
   Complements assets/css/main.css (chrome, buttons, cards, forms, tables).
   Only tool-specific components live here. No external requests. */

/* ---------- Status text ---------- */
.tool-status{margin:.75rem 0;font-size:.95rem;min-height:1.5em}
.text-muted{color:var(--muted)}
.text-success{color:var(--ok)}
.text-warning{color:var(--warn)}
.text-danger{color:var(--bad)}

/* ---------- Status badges ---------- */
.status-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;font-weight:600;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:.35rem .8rem;margin:.15rem .25rem .15rem 0;
}
.status-badge .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--faint);flex:none}
.status-badge.ok{color:var(--ok);border-color:var(--ok)}
.status-badge.ok .dot{background:var(--ok)}
.status-badge.warn{color:var(--warn);border-color:var(--warn)}
.status-badge.warn .dot{background:var(--warn)}

/* ---------- Test area ---------- */
.test-area{
  position:relative;min-height:22rem;border:2px dashed var(--border);
  border-radius:var(--radius);background:var(--bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  margin:1rem 0;touch-action:none;user-select:none;-webkit-user-select:none;
}
.test-area.active{border-color:var(--accent);border-style:solid}
.test-area .placeholder{text-align:center;color:var(--muted);padding:2rem;pointer-events:none}
.test-area .placeholder .big{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.test-area .placeholder .sub{font-size:.92rem}
.test-area canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- Live stats ---------- */
.live-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1rem 0}
@media(min-width:40rem){.live-stats{grid-template-columns:repeat(4,1fr)}}
.stat-box{background:var(--bg);border:1px solid var(--border);border-radius:.6rem;padding:.6rem .8rem;text-align:center}
.stat-box .label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat-box .value{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Result stat items (inside .stats-grid) ---------- */
.stat-item{background:var(--bg);border:1px solid var(--border);border-radius:.6rem;padding:.7rem .9rem;text-align:center}
.stat-item .s-label{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.stat-item .s-value{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.result-value{font-size:2.6rem;font-weight:800;color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}

/* ---------- Gauge ---------- */
.gauge-container{margin:1.25rem 0 .5rem}
.gauge-bar{position:relative;height:.7rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}
.gauge-marker{
  position:absolute;top:50%;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--accent);border:2px solid var(--on-accent);
  transform:translate(-50%,-50%);transition:left .3s ease;
}
.gauge-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.4rem}

/* ---------- Forms ---------- */
.form-row{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:40rem){.form-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.form-row.cols-3{grid-template-columns:repeat(3,1fr)}.form-row.cols-4{grid-template-columns:repeat(4,1fr)}}
.form-hint{font-size:.82rem;color:var(--muted);margin-top:.3rem}
.form-error{font-size:.85rem;color:var(--bad);margin-top:.3rem;min-height:1.2em}
input.invalid{border-color:var(--bad)}
.preset-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.preset-btn{
  background:var(--surface-2);border:1px solid var(--border);border-radius:.5rem;
  padding:.45rem .9rem;font-size:.88rem;color:var(--text);cursor:pointer;font-family:inherit;
}
.preset-btn:hover{border-color:var(--accent)}
.preset-btn.active{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.checklist{list-style:none;padding:0;margin:.75rem 0;font-size:.92rem;color:var(--muted)}
.checklist li{margin-bottom:.35rem;padding-left:1.6rem;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}

/* ---------- Info / touch notices ---------- */
.info-box{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:.85rem 1.1rem;margin:0 0 1.25rem;font-size:.93rem;color:var(--muted)}
.info-box.warn{border-left-color:var(--warn)}
.info-box strong{color:var(--text)}
.touch-notice{display:none}
.touch-notice.show{display:block}

/* ---------- Deviation ---------- */
.dev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1rem 0}
@media(min-width:40rem){.dev-grid{grid-template-columns:repeat(4,1fr)}}
.verdict{border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 .5rem .5rem 0;padding:.8rem 1rem;margin-top:1rem;font-size:.94rem}
.outlier-row td{background:color-mix(in srgb,var(--warn) 8%,transparent)}

/* ---------- Shared result card ---------- */
.shared-card{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:1.1rem 1.25rem;margin:0 0 1.5rem;font-size:.95rem}
.shared-dpi{font-size:1.6rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

/* ---------- Model suggestions ---------- */
.suggest-list{list-style:none;padding:0;margin:.75rem 0}
.suggest-list li{background:var(--surface-2);border:1px solid var(--border);border-radius:.6rem;padding:.7rem 1rem;margin-bottom:.5rem;font-size:.93rem}

/* ---------- Session history ---------- */
.session-list{display:flex;flex-direction:column;gap:.5rem}
.session-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--bg);border:1px solid var(--border);border-radius:.6rem;padding:.6rem .9rem;font-size:.85rem}
.si-main{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline}
.si-date{color:var(--muted)}
.si-stats{font-variant-numeric:tabular-nums}

/* ---------- Progress bars ---------- */
.progress{height:.6rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:.75rem 0}
.progress-fill{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}

/* ---------- Click test areas ---------- */
.click-area{
  min-height:14rem;border:2px dashed var(--border);border-radius:var(--radius);
  background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;margin:1rem 0;cursor:pointer;user-select:none;-webkit-user-select:none;text-align:center;padding:2rem;
}
.click-area:hover{border-color:var(--accent)}
.click-area.active{border-style:solid;border-color:var(--accent)}
.click-area.flash{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.click-area .big{font-size:1.3rem;font-weight:700}
.click-area .sub{color:var(--muted);font-size:.9rem}

/* ---------- Tool page misc ---------- */
.formula{display:block;background:var(--bg);border:1px solid var(--border);border-radius:.6rem;padding:.9rem 1.1rem;font-family:var(--mono);font-size:1rem;margin:.75rem 0;overflow-x:auto;white-space:nowrap}
.tool-lede{font-size:1.08rem;color:var(--muted);max-width:60ch}
.honest{font-size:.9rem;color:var(--muted)}
.big-result{font-size:2rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.result-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:baseline;margin:.5rem 0}
.result-row .k{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.faq-block details.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:.6rem;margin-bottom:.6rem}
.faq-block summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-block summary::-webkit-details-marker{display:none}
.faq-block summary::after{content:"+";font-size:1.3rem;color:var(--accent);flex:none}
.faq-block details[open] summary::after{content:"–"}
.faq-block .faq-a{padding:0 1.1rem 1rem;color:var(--muted)}
.faq-block .faq-a p:last-child{margin-bottom:0}