/* How Bad Can It Get? The shared look lives in /common/common.css. */
.status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.status .tiles { margin: 0; min-width: 320px; }
.prompt { margin: 0; font-size: 15px; line-height: 1.6; }
.prompt b { font-family: var(--mono); }
.how-bad .board { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.how-bad .side { gap: 12px; }
.controls { display: grid; gap: 12px; }
.limit-out { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: -.02em;
             color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.preview { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); min-height: 3.2em; }
.preview b { color: var(--ink); font-weight: 600; }
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mini { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
        display: grid; gap: 4px; }
.mini span { font-size: 8.5px; letter-spacing: .13em; font-weight: 600; color: var(--dim); }
.mini strong { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.reveal { display: grid; gap: 12px; }
.reveal:empty { display: none; }
.big-row { display: flex; align-items: baseline; gap: 10px; }
.big-number { font-family: var(--mono); font-size: 46px; font-weight: 700; line-height: 1;
              font-variant-numeric: tabular-nums; }
.big-unit { font-size: 12px; color: var(--muted); }
.reveal-line, .reveal-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.reveal-note b, .reveal-line b { color: var(--ink); }
.reveal-line b.up-text { color: var(--up); } .reveal-line b.down-text { color: var(--down); }
.reveal-line b.warn-text { color: var(--warn); }
.dot.cautious { background: rgba(255,180,67,.16); border-color: rgba(255,180,67,.55); color: var(--warn); }
.summary { margin-top: 16px; padding: 4px 12px 8px; }
.summary td.up { color: var(--up); } .summary td.down { color: var(--down); }
.summary td.warn { color: var(--warn); }
/* the method, as in Real or Random? */
.method { padding: 12px 16px; }
.method summary { cursor: pointer; font-size: 9.5px; letter-spacing: .18em; font-weight: 600;
                  color: var(--dim); }
.method-body { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 90ch; }
.method-body p { margin: 10px 0 0; }
.method-body strong { color: var(--ink); }
/* Dash 4 slider: full width, the house accent, no number box (the big label shows it) */
.how-bad .dash-slider-container { display: block; width: 100%; }
.how-bad .dash-range-slider-input { display: none; }
.how-bad .dash-slider-wrapper { width: 100%; padding: 8px 0; }
.how-bad .dash-slider-root { position: relative; display: flex; align-items: center; width: 100%;
                             height: 20px; touch-action: none; user-select: none; }
.how-bad .dash-slider-track { position: relative; flex: 1; height: 4px; border-radius: 999px;
                              background: var(--raise); }
.how-bad .dash-slider-range { position: absolute; height: 100%; border-radius: 999px;
                              background: linear-gradient(90deg, var(--accent), var(--link)); }
.how-bad .dash-slider-thumb { display: block; width: 18px; height: 18px; border-radius: 50%;
                              background: var(--bg); border: 2px solid var(--accent); cursor: grab;
                              box-shadow: 0 0 0 4px rgba(75,123,255,.16); }
.how-bad .dash-slider-thumb:focus-visible, .how-bad .dash-slider-thumb:hover {
  outline: none; box-shadow: 0 0 0 7px rgba(75,123,255,.26); }
.how-bad .dash-slider-root[data-disabled] { opacity: .45; }
@media (max-width: 900px) { .how-bad .board { grid-template-columns: minmax(0, 1fr); } }