/* OSRS Dry Calculator — tool styles.
   Every value from a design token (§4.2). Scoped to .ftb-tool-osrs-dry.
   Tone colours reuse the success / warning / error pairs core.css already
   contrast-checks in both themes; nothing here introduces a raw colour. */

/* ---------------------------------------------------------------- inputs */

.ftb-tool-osrs-dry .ftb-od-inputs{display:grid;gap:var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.ftb-tool-osrs-dry .ftb-od-inputs > *{min-width:0}
.ftb-tool-osrs-dry .ftb-od-inputs .ftb-field{margin-bottom:0}
.ftb-tool-osrs-dry .ftb-od-inputs input{font-variant-numeric:tabular-nums}
.ftb-tool-osrs-dry input[aria-invalid=true]{border-color:var(--ftb-error)}
.ftb-tool-osrs-dry .ftb-od-ratenote{min-height:1.5em;margin:var(--ftb-space-2) 0 var(--ftb-space-4)}

.ftb-tool-osrs-dry .ftb-od-adv{margin-bottom:var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
  background:var(--ftb-surface)}
.ftb-tool-osrs-dry .ftb-od-adv summary{padding:var(--ftb-space-3) var(--ftb-space-4);
  min-height:var(--ftb-tap);display:flex;align-items:center;cursor:pointer;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi)}
.ftb-tool-osrs-dry .ftb-od-adv summary:focus-visible{outline:2px solid var(--ftb-primary);
  outline-offset:-2px}
.ftb-tool-osrs-dry .ftb-od-advbody{padding:0 var(--ftb-space-4) var(--ftb-space-4)}
.ftb-tool-osrs-dry .ftb-od-advbody .ftb-field{margin-bottom:0}
.ftb-tool-osrs-dry .ftb-od-advbody input{max-width:10rem}

/* --------------------------------------------------------------- verdict */

/* Reserved so the first calculation never shifts the page (§10, CLS). */
.ftb-tool-osrs-dry .ftb-od-results{min-height:calc(var(--ftb-space-24) * 6)}

.ftb-tool-osrs-dry .ftb-od-verdict{padding:var(--ftb-space-5);
  margin-bottom:var(--ftb-space-5);border:1px solid var(--ftb-border-strong);
  border-left-width:4px;border-radius:var(--ftb-radius-lg);
  background:var(--ftb-surface-2);color:var(--ftb-text)}
.ftb-tool-osrs-dry .ftb-od-verdict[data-tone=warn]{background:var(--ftb-warning-soft);border-color:var(--ftb-warning)}
.ftb-tool-osrs-dry .ftb-od-verdict[data-tone=bad]{background:var(--ftb-error-soft);border-color:var(--ftb-error)}
.ftb-tool-osrs-dry .ftb-od-verdict[data-tone=good]{background:var(--ftb-success-soft);border-color:var(--ftb-success)}

/* The label carries the tone colour as text on the soft background: those are
   the exact pairs core.css uses for .ftb-tool-msg, already checked in both
   themes. Body text stays --ftb-text for contrast. */
.ftb-tool-osrs-dry .ftb-od-vlabel{display:inline-block;margin-bottom:var(--ftb-space-2);
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-bold);
  letter-spacing:var(--ftb-ls-wide);text-transform:uppercase;color:var(--ftb-text-muted)}
.ftb-tool-osrs-dry .ftb-od-verdict[data-tone=warn] .ftb-od-vlabel{color:var(--ftb-warning)}
.ftb-tool-osrs-dry .ftb-od-verdict[data-tone=bad] .ftb-od-vlabel{color:var(--ftb-error)}
.ftb-tool-osrs-dry .ftb-od-verdict[data-tone=good] .ftb-od-vlabel{color:var(--ftb-success)}

.ftb-tool-osrs-dry .ftb-od-vhead{margin:0;font-size:var(--ftb-text-xl);
  font-weight:var(--ftb-fw-semi);line-height:var(--ftb-lh-tight);
  letter-spacing:var(--ftb-ls-tight)}
.ftb-tool-osrs-dry .ftb-od-vsub{margin:var(--ftb-space-2) 0 0;font-size:var(--ftb-text-base);
  line-height:var(--ftb-lh-snug);color:var(--ftb-text)}
.ftb-tool-osrs-dry .ftb-od-vsub:empty{display:none}

/* ----------------------------------------------------------------- stats */

.ftb-tool-osrs-dry .ftb-od-stats{display:grid;gap:var(--ftb-space-3);margin:0 0 var(--ftb-space-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.ftb-tool-osrs-dry .ftb-od-stats > div{min-width:0;padding:var(--ftb-space-4);
  background:var(--ftb-surface);border:1px solid var(--ftb-border);border-radius:var(--ftb-radius)}
.ftb-tool-osrs-dry .ftb-od-stats dt{font-size:var(--ftb-text-sm);color:var(--ftb-text-muted);
  line-height:var(--ftb-lh-snug)}
.ftb-tool-osrs-dry .ftb-od-stats dd{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-lg);
  font-weight:var(--ftb-fw-semi);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ----------------------------------------------------------------- chart */

.ftb-tool-osrs-dry .ftb-od-figure{margin:0 0 var(--ftb-space-6)}
.ftb-tool-osrs-dry .ftb-od-h{margin:0 0 var(--ftb-space-3);font-size:var(--ftb-text-base);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
.ftb-tool-osrs-dry .ftb-od-lead{margin:calc(var(--ftb-space-2) * -1) 0 var(--ftb-space-3)}
.ftb-tool-osrs-dry .ftb-od-chart{min-height:calc(var(--ftb-space-16) * 4);
  padding:var(--ftb-space-2) 0;background:var(--ftb-surface);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);overflow:hidden}
.ftb-tool-osrs-dry .ftb-od-svg{display:block;max-width:100%;height:auto}
/* tool.js draws a 300-unit-tall chart once the box is 640px wide. Reserve that
   height here so the first draw never pushes the page down (§10, CLS). */
@media (min-width:768px){
  .ftb-tool-osrs-dry .ftb-od-chart{min-height:calc(var(--ftb-space-20) * 4)}
}

.ftb-tool-osrs-dry .ftb-od-grid{stroke:var(--ftb-border);stroke-width:1}
.ftb-tool-osrs-dry .ftb-od-tick{stroke:var(--ftb-border-strong);stroke-width:1}
.ftb-tool-osrs-dry .ftb-od-lab,
.ftb-tool-osrs-dry .ftb-od-axis{fill:var(--ftb-text-muted);font-size:var(--ftb-text-xs);
  font-family:var(--ftb-font);font-variant-numeric:tabular-nums}
.ftb-tool-osrs-dry .ftb-od-area{fill:var(--ftb-primary);fill-opacity:.1;stroke:none}
.ftb-tool-osrs-dry .ftb-od-line{fill:none;stroke:var(--ftb-primary);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round}
.ftb-tool-osrs-dry .ftb-od-mark{stroke:var(--ftb-text-subtle);stroke-width:1;stroke-dasharray:3 3}
.ftb-tool-osrs-dry .ftb-od-markdot{fill:var(--ftb-surface);stroke:var(--ftb-primary);stroke-width:2}
.ftb-tool-osrs-dry .ftb-od-marklab{fill:var(--ftb-text-muted);font-size:var(--ftb-text-xs);
  font-family:var(--ftb-font)}
.ftb-tool-osrs-dry .ftb-od-you{stroke:var(--ftb-text);stroke-width:1.5;stroke-dasharray:5 4}
.ftb-tool-osrs-dry .ftb-od-youdot{fill:var(--ftb-text);stroke:var(--ftb-surface);stroke-width:2}
.ftb-tool-osrs-dry .ftb-od-youlab{fill:var(--ftb-text);font-size:var(--ftb-text-sm);
  font-weight:var(--ftb-fw-semi);font-family:var(--ftb-font);
  paint-order:stroke;stroke:var(--ftb-surface);stroke-width:4;stroke-linejoin:round}

/* ---------------------------------------------------------------- tables */

.ftb-tool-osrs-dry .ftb-od-table{width:100%;border-collapse:collapse;
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);font-variant-numeric:tabular-nums}
.ftb-tool-osrs-dry .ftb-od-table th,
.ftb-tool-osrs-dry .ftb-od-table td{padding:var(--ftb-space-3);text-align:left;
  border-bottom:1px solid var(--ftb-border);vertical-align:middle}
.ftb-tool-osrs-dry .ftb-od-table thead th{font-weight:var(--ftb-fw-semi);
  color:var(--ftb-text-muted);white-space:nowrap}
.ftb-tool-osrs-dry .ftb-od-table tbody th{font-weight:var(--ftb-fw-semi);white-space:nowrap}
.ftb-tool-osrs-dry .ftb-od-table tbody td{min-width:9rem}
.ftb-tool-osrs-dry .ftb-od-table tr.is-passed td:first-of-type{color:var(--ftb-text)}
.ftb-tool-osrs-dry .ftb-od-badge{display:inline-block;padding:0 var(--ftb-space-2);
  border-radius:var(--ftb-radius-full);background:var(--ftb-warning-soft);
  color:var(--ftb-warning);font-size:var(--ftb-text-xs);font-weight:var(--ftb-fw-semi);
  white-space:nowrap}

.ftb-tool-osrs-dry .ftb-od-next{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ftb-space-2) var(--ftb-space-3);margin:var(--ftb-space-5) 0 var(--ftb-space-6);
  padding:var(--ftb-space-4);background:var(--ftb-surface);border:1px solid var(--ftb-border);
  border-radius:var(--ftb-radius)}
.ftb-tool-osrs-dry .ftb-od-next label{margin:0}
.ftb-tool-osrs-dry .ftb-od-nextrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ftb-space-2)}
.ftb-tool-osrs-dry .ftb-od-next input{width:8rem;min-width:0}
.ftb-tool-osrs-dry .ftb-od-next strong{font-size:var(--ftb-text-lg);font-variant-numeric:tabular-nums}

/* The share column takes the spare width, and the bar sits inside a track
   that fills it, so bar length stays proportional to the number. The first
   version capped each bar at "cell minus the label", which drew 44.9% and
   79.2% the same length on a phone. */
.ftb-tool-osrs-dry .ftb-od-dist tbody td{width:100%}
.ftb-tool-osrs-dry .ftb-od-barwrap{display:flex;align-items:center;gap:var(--ftb-space-3)}
.ftb-tool-osrs-dry .ftb-od-track{flex:1 1 auto;min-width:3rem;height:.625rem;overflow:hidden;
  border-radius:var(--ftb-radius-full);background:var(--ftb-surface-2)}
.ftb-tool-osrs-dry .ftb-od-bar{display:block;height:100%;min-width:2px;
  border-radius:var(--ftb-radius-full);background:var(--ftb-primary);opacity:.45}
.ftb-tool-osrs-dry .ftb-od-barval{flex:0 0 auto;min-width:4.5rem;text-align:right}
.ftb-tool-osrs-dry .ftb-od-dist tr.is-mine th,
.ftb-tool-osrs-dry .ftb-od-dist tr.is-mine td{background:var(--ftb-surface-2)}
.ftb-tool-osrs-dry .ftb-od-dist tr.is-mine .ftb-od-track{background:var(--ftb-surface)}
.ftb-tool-osrs-dry .ftb-od-dist tr.is-mine .ftb-od-bar{opacity:1}

/* ------------------------------------------------------------ disclaimer */

.ftb-tool-osrs-dry .ftb-tool-disclaimer{margin:var(--ftb-space-6) 0 0;
  padding:var(--ftb-space-5);background:var(--ftb-surface-2);
  border-radius:var(--ftb-radius);font-size:var(--ftb-text-sm);
  line-height:var(--ftb-lh-snug);color:var(--ftb-text-muted)}

/* ------------------------------------------------------------- narrow UI */

@media (max-width:479px){
  .ftb-tool-osrs-dry .ftb-od-verdict{padding:var(--ftb-space-4)}
  .ftb-tool-osrs-dry .ftb-od-vhead{font-size:var(--ftb-text-lg)}
  .ftb-tool-osrs-dry .ftb-od-stats{grid-template-columns:1fr 1fr}
  .ftb-tool-osrs-dry .ftb-od-stats > div{padding:var(--ftb-space-3)}
  .ftb-tool-osrs-dry .ftb-od-stats dd{font-size:var(--ftb-text-base)}
  .ftb-tool-osrs-dry .ftb-tool-actions .ftb-btn{flex:1 1 auto}
  /* "From your kill count" is the column the tool exists for. At 360px it was
     clipped behind a horizontal scroll; tighter padding and wrapping cells
     fit all three columns instead. */
  .ftb-tool-osrs-dry .ftb-od-table th,
  .ftb-tool-osrs-dry .ftb-od-table td{padding:var(--ftb-space-2)}
  .ftb-tool-osrs-dry .ftb-od-table tbody td{min-width:0}
  .ftb-tool-osrs-dry .ftb-od-table thead th{white-space:normal}
  .ftb-tool-osrs-dry .ftb-od-dist tbody td{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .ftb-tool-osrs-dry *{scroll-behavior:auto}
}