/* Gear Designer's own rules, on top of the stylesheet copied from Sprocket
   Designer (style.css, kept unedited so it stays diffable — ADR-014). */

.hidden { display: none !important; }

.download-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.download-links .btn-download { text-align: center; text-decoration: none; margin: 0; }
.download-links .btn-download.disabled { opacity: 0.45; pointer-events: none; }

.warnings li.caution { color: #92400e; }
.warnings li.warn { color: #b91c1c; }

.drawing svg { width: 100%; height: 100%; }
.drawing svg .outline { vector-effect: non-scaling-stroke; }

#x-limits b { color: #1d2733; }

/* The 3D MODE switch's icon (Sprocket Designer's .mode3d-sprocket, renamed). */
.mode3d-gear {
  display: block;
  height: 24px;
  width: 24px;
  filter: grayscale(1) contrast(0.8);
  opacity: 0.75;
  transition: filter 0.3s, opacity 0.3s;
  pointer-events: none;
}
.mode3d input:checked ~ .mode3d-gear { filter: none; opacity: 1; }

.download-links .fb-3d { grid-column: span 2; }

/* The Strength check: its button at the right of the Dimensions label; on,
   it takes the dimensions' place under the drawing (ADR-025). */
.dims-summary { display: flex; align-items: center; gap: 8px; }
.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 { max-height: 48%; }
.results.strength-mode #dims, .results.strength-mode #drive-results,
.results.strength-mode #approx-note { display: none; }
.strength-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 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: 110px; }
.strength-inputs .pair { display: flex; gap: 4px; }
.strength-inputs .pair select { width: 150px; }
.strength-inputs .pair input { width: 60px; }
#strength-results td.pass { color: #1a7f37; font-weight: 600; }
#strength-results td.fail { color: #b91c1c; font-weight: 600; }
#strength-results th.st-head { text-align: left; color: #0078d4; padding-top: 6px; }
.strength-notes { font-size: 11px; color: #555; margin: 4px 0 0; }

/* ── 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; }

/* The Spline card: a ring's Make counterbore, indented under it (the sprocket app's). */
.check-sub { padding-left: 22px; }
.spline-dl { margin-top: 8px; }

/* The title bar's actions (.header-spacer, .header-actions, .undo-btn, .reset-btn) come from cct_theme.css. */
.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 Design (the pulley app's dialog) ── */
#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; }

.with-help { display: flex; align-items: center; gap: 6px; }
.hub-header .btn-help, .card h2 .btn-help { width: 22px; height: 22px; font-size: 13px; }
.strength-head { font-size: 12px; font-weight: 600; color: #0078d4; text-transform: uppercase;
                 letter-spacing: 0.6px; margin-bottom: 6px; }

/* 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; }

/* Num. Teeth | Outer Dia. side by side, as Sprocket Designer's Size card. */
.size-row { display: flex; gap: 8px; }
.size-row > div { flex: 1; min-width: 0; }
.size-row label { margin-top: 0; }

/* The Tooth view: the tooth design on top, then (two gears) where they mesh,
   stacked; each SVG scales into its share of the preview. */
.drawing.tooth-mode { display: flex; flex-direction: column; align-items: stretch; }
.drawing.tooth-mode > svg.tooth-view { flex: 1 1 55%; min-height: 0; width: 100%; height: auto; }
.drawing.tooth-mode > svg:not(.tooth-view) { flex: 1 1 45%; min-height: 0; width: 100%; height: auto; }
.tooth-mesh-title { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: #1e293b; text-align: center; margin: 4px 0 2px; }

/* 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; }