/* OSRS Construction Calculator, tool styles.
   Scoped to .ftb-tool-cc, every value a token (section 4.2). Inputs, labels,
   buttons, messages, tables and focus rings come from core.css and the
   theme; this file only adds what is new. Kept small: core.css and
   style.css already transfer about 11,050 of the 12,288-byte page budget. */

.ftb-tool-cc .ftb-cc-set{margin:0 0 var(--ftb-space-5);padding:var(--ftb-space-4) var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);background:var(--ftb-surface);min-width:0}
.ftb-tool-cc legend{padding:0 var(--ftb-space-2);font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-bold)}
.ftb-tool-cc .ftb-field{min-width:0}
.ftb-tool-cc .ftb-cc-grid{display:grid;gap:0 var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.ftb-tool-cc [aria-invalid=true]{border-color:var(--ftb-error)}

/* One stage per row: its name, method, end level and Remove on a shared
   baseline; the row wraps to a column on a phone. */
.ftb-tool-cc .ftb-cc-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ftb-space-2) var(--ftb-space-4);
  padding-bottom:var(--ftb-space-4);margin-bottom:var(--ftb-space-4);border-bottom:1px solid var(--ftb-border)}
.ftb-tool-cc .ftb-cc-row .ftb-field{margin-bottom:0}
.ftb-tool-cc .ftb-cc-method{flex:3 1 14rem}
.ftb-tool-cc .ftb-cc-until{flex:1 1 6rem}
.ftb-tool-cc .ftb-cc-hint{flex:1 0 100%;margin:0}
/* Value plus its level/XP menu on one line. */
.ftb-tool-cc .ftb-cc-pair{display:flex;gap:var(--ftb-space-2);min-width:0}
.ftb-tool-cc .ftb-cc-pair input{min-width:0;flex:1 1 auto}
.ftb-tool-cc .ftb-cc-pair select{flex:0 0 auto;width:auto}
.ftb-tool-cc .ftb-cc-warn{margin:0 0 var(--ftb-space-4);padding:var(--ftb-space-3) var(--ftb-space-4) var(--ftb-space-3) var(--ftb-space-8);
  border-inline-start:3px solid var(--ftb-warning);background:var(--ftb-surface);font-size:var(--ftb-text-sm)}
.ftb-tool-cc .ftb-cc-rowh{flex:1 0 100%;margin:0;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi)}
.ftb-tool-cc .ftb-cc-del{flex:0 0 auto}
.ftb-tool-cc .ftb-cc-add{margin-bottom:var(--ftb-space-2)}

/* Height reserved so the first result never shifts the page (section 10). */
.ftb-tool-cc .ftb-cc-results{min-height:calc(var(--ftb-space-24) + var(--ftb-space-16))}
.ftb-tool-cc .ftb-cc-h{margin:0 0 var(--ftb-space-3);font-size:var(--ftb-text-lg);font-weight:var(--ftb-fw-semi)}
.ftb-tool-cc .ftb-cc-h3{margin:var(--ftb-space-5) 0 var(--ftb-space-2);font-size:var(--ftb-text-sm);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
.ftb-tool-cc .ftb-cc-boxes{display:grid;gap:var(--ftb-space-3);margin-top:var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.ftb-tool-cc .ftb-cc-box{padding:var(--ftb-space-4);background:var(--ftb-surface);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);min-width:0}
.ftb-tool-cc .ftb-cc-k{margin:0;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
.ftb-tool-cc .ftb-cc-v{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-xl);font-weight:var(--ftb-fw-bold);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ftb-tool-cc .ftb-cc-table{width:100%;font-size:var(--ftb-text-sm);font-variant-numeric:tabular-nums}

.ftb-tool-cc .ftb-cc-note{margin:var(--ftb-space-6) 0 0;padding:var(--ftb-space-4) var(--ftb-space-5);
  background:var(--ftb-surface-2);border-radius:var(--ftb-radius);font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}

@media (max-width:479px){
  .ftb-tool-cc .ftb-cc-set{padding:var(--ftb-space-3)}
}