/* Worm Gear Designer's own rules, on top of the stylesheet the family shares
   (style.css, copied from Gear Designer unedited so it stays diffable). Rules
   marked "Gear's" are copied from its gear.css. */

.hidden { display: none !important; }

/* Gear's */
.warnings li.caution { color: #92400e; }
.warnings li.warn { color: #b91c1c; }
.dims-summary { display: flex; align-items: center; gap: 8px; }
.hub-info.hub-warn { color: #b45309; }
.size-row { display: flex; gap: 8px; }
.size-row > div { flex: 1; min-width: 0; }
.size-row label { margin-top: 0; }

/* The two dimension tables side by side when there's room. */
#dims-details { display: block; }
.dims td.sym { color: #64748b; white-space: nowrap; }
.dims td.val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#perf { margin-top: 8px; }
.perf-notes { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: #334155; }
.perf-notes li { margin-bottom: 3px; }

/* Each download is one link; disabled while the settings can't be drawn. */
.download-card .btn-download, .download-card .btn-download-p2 {
  display: block; text-align: center; text-decoration: none; }
.download-card a.disabled { opacity: 0.45; pointer-events: none; }

/* The 3D view fills the preview box (there is no 2D drawing yet). */
.preview-box .viewer { position: absolute; inset: 0; }
.building {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 12px; background: rgba(30, 58, 95, 0.85);
  color: #fff; font-size: 12px; pointer-events: none;
}
/* The Spline card (Gear's): a ring's Make counterbore indented under it. */
.check-sub { padding-left: 22px; }
.spline-dl { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.spline-dl a { display: block; text-align: center; text-decoration: none; }
.spline-dl a.disabled { opacity: 0.45; pointer-events: none; }
/* The Running check (Gear Designer's Strength check): its button at the
   right of the Dimensions label; on, it takes the dimensions' place. */
.strength-btn { margin-left: auto; width: auto; padding: 2px 10px; font-size: 12px; font-weight: 600;
  color: #0078d4; background: #fff; border: 1px solid #0078d4; border-radius: 4px; cursor: pointer; }
.strength-btn[aria-pressed="true"] { color: #fff; background: #0078d4; }
.results.strength-mode #dims { display: none; }
.strength-head { font-size: 12px; font-weight: 600; color: #0078d4; text-transform: uppercase;
                 letter-spacing: 0.6px; margin-bottom: 6px; }
.strength-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 4px 16px; margin: 4px 0 6px; }
.strength-inputs label { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0; font-size: 12px; }
.strength-inputs label > span:first-child { white-space: nowrap; }
.strength-inputs input, .strength-inputs select { width: 150px; }
.strength-notes { font-size: 11px; color: #555; margin: 4px 0 0; }
/* Import (Gear Designer's button and dialog) */
.import-btn {
  padding: 3px 10px; font-size: 12px; background: #eff6ff; border: 1px solid #93c5fd;
  border-radius: 4px; cursor: pointer; color: #1d4ed8; white-space: nowrap;
}
.import-btn:hover { background: #dbeafe; border-color: #3b82f6; }
#import-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1100;
  align-items: center; justify-content: center;
}
#import-box {
  background: #fff; border-radius: 8px; width: min(480px, 96vw); display: flex;
  flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.35); overflow: hidden;
}
.import-file-input { width: 100%; font-size: 13px; font-family: inherit; padding: 6px 4px; }
#spin_btn.active, #spin_btn[aria-pressed="true"] { background: #0078d4; color: #fff; border-color: #0078d4; }

/* ── Gear's: the Threaded screw holes dialog, the Hub card, hub pin strength ── */

/* ── Threaded screw holes dialog (the pulley app's, its ADR-013) ─────────── */
#thread-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
#thread-box {
  background: #fff;
  border-radius: 8px;
  width: min(540px, 96vw);
  max-height: 96vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #dde3ea;
  background: #eff6ff;
  flex-shrink: 0;
}
.import-title { font-size: 17px; font-weight: 700; color: #1e3a5f; }
.import-info { padding: 16px 20px 12px; border-bottom: 1px solid #e8edf3; background: #f8fafc; }
.import-info p { font-size: 13px; color: #374151; line-height: 1.55; margin: 0; }
.import-body { padding: 16px 20px 10px; display: flex; flex-direction: column; gap: 8px; }
.thread-shape { display: flex; gap: 18px; font-size: 13px; }
.thread-shape label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.thread-shape input { width: auto; margin: 0; accent-color: #0078d4; }
#thread-box input[type=number] { width: 90px; }
/* the picture at its own size (470 px) — its labels are sized to be read that way */
.thread-picture { width: 470px; max-width: 100%; height: auto; align-self: center;
                  border: 1px solid #e2e8f0; border-radius: 4px; }
.thread-default { font-size: 12px; color: #475569; }
.thread-default a { color: #0078d4; }
.thread-example {
  margin-top: 4px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 12.5px;
  color: #1e3a5f;
}
.hub-info.hub-warn { color: #b45309; }
.card h2.with-help { display: flex; align-items: center; gap: 6px; }
.with-help { display: flex; align-items: center; gap: 6px; }
.hub-header .btn-help, .card h2 .btn-help { width: 22px; height: 22px; font-size: 13px; }

/* An unticked Hub card (the pulley app's): its settings kept, dimmed. */
.hub-body.dimmed { opacity: 0.45; pointer-events: none; }

/* Card headings, as Timing Pulley Generator draws them: ⓘ just left of the
   arrow (.hub-tools); every card but Download folds to its heading. */
.hub-tools { display: flex; align-items: center; gap: 8px; }
.card > h2.card-head { cursor: pointer; user-select: none; }
.card > h2.card-head:hover { color: #005fa3; }
.card.folded > :not(h2) { display: none !important; }
.card.folded > h2 { margin-bottom: 0; }
/* Hub pin strength (ADR-033, Sprocket Designer's): the icon beside "Hub Pins", and its dialog. */
.pins-heading { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pin-calc-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  padding: 0; border: 1px solid #90b8db; border-radius: 4px; background: #eef5fc; color: #0078d4; cursor: pointer; }
.pin-calc-btn:hover { background: #dbeafb; }
#pin-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  z-index: 1100; align-items: center; justify-content: center; }
#pin-overlay.open { display: flex; }
#pin-box { background: #fff; border-radius: 8px; width: min(600px, 96vw); max-height: 94vh;
  overflow: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
#pin-box .bug-body { display: flex; flex-direction: column; gap: 8px; }
.pin-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.pin-grid .bug-label { margin: 0; }
.pin-grid select { width: 100%; }
.pin-grid input[type=number] { width: 90px; }
.pin-result { font-size: 14px; color: #1e293b; }
.pin-result b { font-size: 16px; color: #0078d4; }
.pin-result.pin-na { font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d;
  border-radius: 4px; padding: 6px 8px; }
.pin-limits { width: 100%; border-collapse: collapse; font-size: 12px; }
.pin-limits td { padding: 4px 6px; border-top: 1px solid #e2e8f0; vertical-align: top; }
.pin-limits td.num { text-align: right; white-space: nowrap; }
.pin-limits .pin-detail { color: #64748b; font-size: 11px; }
.pin-limits tr.governs td { background: #eef5fc; font-weight: 600; }