/* Filament runway strip on the Summary page.
   One inline strip, three tones. Calm by default so it reads as a quiet note;
   it only turns loud when the runway is genuinely short. Themed entirely from
   the app's variables. */

.filamentRunway{
  display:flex; align-items:center; gap:13px;
  margin:0 0 18px; padding:13px 15px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface-input, var(--panel));
  border-left-width:4px;
}
.filamentRunway[hidden]{ display:none; }

.frIcon{
  flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  color:var(--muted); border:1px solid var(--line);
  background:color-mix(in srgb, var(--line) 24%, transparent);
}
.frIcon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.frBody{ min-width:0; flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
.frMsg{ margin:0; font-size:.86rem; line-height:1.45; color:var(--text); flex:1 1 220px; min-width:0; }
.frMsg b{ font-weight:800; }

/* colour dot for the constraining filament */
.frDot{
  display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px;
  vertical-align:baseline; background:var(--dot,#94a3b8);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--dot,#94a3b8) 55%, transparent);
}
/* becomes the tinted SMSpool icon once the spool helper runs */
.frDot.filSpoolIcon{ width:24px !important; height:22px !important; margin-right:8px; vertical-align:middle; }

/* threshold control -- always reachable so "x" is user-owned */
.frThresholdLabel{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:700; color:var(--muted); white-space:nowrap;
}
/* A plain text field (inputmode numeric) — no native number spinners to fight,
   so the value is always visible. Validation/clamping happens in JS.
   The spinner-suppression below is belt-and-suspenders: harmless for a text
   field, but it also kills the native arrows if a stale cached build ever serves
   this control as type=number. */
.frThreshold{
  width:50px; padding:3px 6px; text-align:center;
  font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--text); background:var(--panel);
  border:1px solid var(--line); border-radius:7px;
  -moz-appearance:textfield; appearance:textfield;
}
.frThreshold::-webkit-outer-spin-button,
.frThreshold::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
.frThreshold:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

.frMinimize{
  flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; padding:0;
  color:var(--muted); background:transparent; border:1px solid transparent; border-radius:8px;
  cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.frMinimize:hover{ color:var(--text); border-color:var(--line); background:color-mix(in srgb, var(--line) 22%, transparent); }
.frMinimize[hidden]{ display:none; }
.frMinimize svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.frMinimize:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---- minimised pill ----
   The X minimises rather than hides: the strip collapses to a small clickable
   pill so it is always obvious how to bring it back -- you click it. */
.frMinLabel, .frExpandHint{ display:none; }
.filamentRunway.isMin{ width:fit-content; max-width:100%; padding:8px 13px; gap:9px; cursor:pointer; }
.filamentRunway.isMin .frBody, .filamentRunway.isMin .frMinimize{ display:none; }
.filamentRunway.isMin .frIcon{ width:30px; height:30px; border-radius:9px; }
.filamentRunway.isMin .frIcon svg{ width:17px; height:17px; }
.filamentRunway.isMin .frMinLabel{ display:inline; font-size:.82rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.filamentRunway.isMin .frExpandHint{
  display:inline-flex; align-items:center; margin-left:5px;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.filamentRunway.isMin:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.filamentRunway.isMin:hover .frExpandHint{ color:var(--accent2, var(--accent)); }

/* ---- tones ---- */
/* calm: a plain, quiet note */
.filamentRunway.isOk{ border-left-color:color-mix(in srgb, var(--good,#16a34a) 55%, var(--line)); }
.filamentRunway.isOk .frIcon{ color:var(--good,#16a34a); border-color:color-mix(in srgb, var(--good,#16a34a) 34%, var(--line)); background:color-mix(in srgb, var(--good,#16a34a) 12%, transparent); }

/* low: reorder soon */
.filamentRunway.isLow{
  border-color:color-mix(in srgb, var(--warn,#f59e0b) 42%, var(--line));
  border-left-color:var(--warn,#f59e0b);
  background:color-mix(in srgb, var(--warn,#f59e0b) 8%, var(--panel));
}
.filamentRunway.isLow .frIcon{ color:var(--warn,#f59e0b); border-color:color-mix(in srgb, var(--warn,#f59e0b) 40%, var(--line)); background:color-mix(in srgb, var(--warn,#f59e0b) 15%, transparent); }

/* out: cannot print another one */
.filamentRunway.isOut{
  border-color:color-mix(in srgb, var(--bad,#ef4444) 45%, var(--line));
  border-left-color:var(--bad,#ef4444);
  background:color-mix(in srgb, var(--bad,#ef4444) 9%, var(--panel));
}
.filamentRunway.isOut .frIcon{ color:var(--bad,#ef4444); border-color:color-mix(in srgb, var(--bad,#ef4444) 42%, var(--line)); background:color-mix(in srgb, var(--bad,#ef4444) 15%, transparent); }

@media (max-width:640px){
  .frBody{ gap:8px 12px; }
  .frThresholdLabel{ order:2; }
}