/* Spool Part Maker: additions to ShapeFinity's app.css (loaded first). */

/* logo: a spool seen side-on, two flanges and a wound core */
.spool-logo { background:
  linear-gradient(var(--accent), var(--accent)) 0 0/4px 20px no-repeat,
  linear-gradient(var(--accent), var(--accent)) 16px 0/4px 20px no-repeat,
  repeating-linear-gradient(var(--accent2) 0 2px, transparent 2px 4px) 5px 4px/10px 12px no-repeat; }

/* a link styled like the top bar's buttons */
.sf-app .tb-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text); text-decoration: none; white-space: nowrap; }
.sf-app .tb-link:hover { border-color: var(--accent); color: var(--text); }

.sf-app .h3-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sf-app .fields { display: flex; flex-direction: column; gap: 6px; }
.sf-app .fld.inline .unit { font-size: 11px; color: var(--muted); width: 22px; flex: none; }
.sf-app .fld.inline .inp { display: flex; align-items: center; gap: 4px; flex: none; }
.sf-app .fld.inline .inp input { width: 84px; }

/* a feature section in the right panel: its heading is the on/off switch */
.sf-app .feat { display: flex; flex-direction: column; gap: 6px; }
.sf-app .feat-hd { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sf-app .feat-hd input { margin: 0; }
.sf-app .feat.off .fields { opacity: .45; pointer-events: none; }

/* part card at the top of each right-panel tab */
.sf-app .partcard { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.sf-app .partcard .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.sf-app .partcard .nm { font-weight: 600; }
.sf-app .partcard .dm { margin-left: auto; color: var(--muted); font-size: 11.5px; text-align: right; }

#warnings:empty { display: none; }
#warnings { margin-top: 8px; padding: 6px 8px; border-left: 3px solid var(--accent); background: var(--accentSoft); border-radius: 4px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.sf-app .stats .sub { color: var(--muted); font-size: 11px; grid-column: 1 / -1; margin-top: -2px; }

/* the example list sits above the size fields at full width: its names are long */
.sf-app .ex-fld { margin-bottom: 4px; }
.sf-app .ex-fld select { width: 100%; }
/* a list option lines up with the number fields (input + unit) */
.sf-app .fld.inline.sel select { width: 128px; }