/* Bevel Gear Designer's own rules, on top of the stylesheet the family
   shares (style.css, copied from Planetary/Worm/Gear Designer unedited so
   it stays diffable). Taken from Planetary Gear Designer's planetary.css:
   only the rules this page uses. */

.hidden { display: none !important; }

.warnings li.caution { color: #92400e; }
.warnings li.warn { color: #b91c1c; }
.warnings li.info { color: #334155; }
.dims-summary { display: flex; align-items: center; gap: 8px; }
.size-row { display: flex; gap: 8px; }
.size-row > div { flex: 1; min-width: 0; }
.size-row label { margin-top: 0; }
.dims td.sym { color: #64748b; white-space: nowrap; }
.dims td.val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dims th[colspan] { padding-top: 8px; color: #0078d4; text-transform: uppercase; font-size: 11px; }

.download-card .btn-download { 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; in 2D the part's drawing does (M4). */
.preview-box .viewer { position: absolute; inset: 0; }
.preview-box > .drawing { position: absolute; inset: 0; padding: 8px; background: #fff; }

/* The 3D MODE switch's icon (Gear Designer's gear.css). */
.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; }

.sheet-tabs { display: flex; gap: 4px; }
.download-links .dl-row { display: flex; gap: 10px; align-items: baseline; grid-column: span 2; }
.download-links .dl-row b { min-width: 3.5em; font-weight: 600; }
.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;
}

/* 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-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; }
.import-file-input { width: 100%; font-size: 13px; font-family: inherit; padding: 6px 4px; }
#spin_btn[aria-pressed="true"] { background: #0078d4; color: #fff; border-color: #0078d4; }

/* An unticked Hub card (the pulley app's, via Worm Gear Designer): its settings kept, dimmed. */
.hub-body.dimmed { opacity: 0.45; pointer-events: none; }
.pins-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.hub-tools { display: flex; align-items: center; gap: 8px; }

/* An ⓘ in a card's heading (Gear and Worm Designer's). */
.card h2.with-help { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sheet-tabs .btn-help { width: 22px; height: 22px; font-size: 13px; }

/* The Spline card (Worm Designer's): a ring's Make counterbore indented under it. */
.check-sub { padding-left: 22px; }

/* Hub pin strength (Worm and Gear Designer's): the button by Hub Pins, 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; }

/* Threaded screw holes (the pulley app's dialog, via Gear and Worm Designer). */
#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); }
.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; }

/* The Strength check (M8): Gear Designer's (gear.css, its ADR-025): its button at the right of
   the Dimensions label; on, it takes the dimensions' place below Results. */
.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; }
/* on, it's the section's top: Results and the dimensions step aside, as Gear's drive results do */
.results.strength-mode { max-height: 48%; }
.results.strength-mode #results-details, .results.strength-mode #dims,
.results.strength-mode #approx-note { display: none; }
.strength-head { font-size: 12px; font-weight: 600; color: #0078d4; text-transform: uppercase;
  letter-spacing: 0.6px; margin: 4px 0 6px; display: flex; align-items: center; gap: 6px; }
.strength-head .btn-help { width: 22px; height: 22px; font-size: 13px; }
.strength-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 6px 18px; margin: 6px 0 8px; font-size: 12.5px; }
.strength-inputs label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.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: 70px; }
.strength-notes { font-size: 11px; color: #555; margin: 4px 0 6px; padding-left: 18px; }
.st-us { margin-left: auto; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: #333; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.st-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 10px; }
.st-group { border: 1px solid #dbe3ec; border-radius: 4px; padding: 2px 8px 6px; margin: 0; min-width: 0; }
.st-group legend { font-size: 11px; font-weight: 600; color: #0078d4; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 0 4px; }
.st-group .strength-inputs { grid-template-columns: 1fr; margin: 2px 0 0; }
.st-mats { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.st-mats th { text-align: left; font-size: 11.5px; color: #0b5394; padding: 2px 4px; }
.st-mats td { padding: 2px 4px; }
.st-mats td:first-child { white-space: nowrap; color: #333; width: 1%; }
.st-mats select { width: 100%; }
.st-hard { display: flex; align-items: center; gap: 4px; }
.st-hard input { width: 70px; }
.st-unit { font-size: 11px; color: #555; }
#strength th.col { text-align: right; font-size: 11.5px; }
#strength td.val + td.val { border-left: 1px solid #eef2f6; }
#strength td.pass { color: #1a7f37; font-weight: 600; }
#strength td.fail { color: #b91c1c; font-weight: 600; }
.strength-warn { font-size: 12px; color: #92400e; background: #fef3c7; border-left: 3px solid #d97706;
  padding: 5px 8px; margin: 4px 0 6px; border-radius: 3px; }
.strength-dl { font-size: 12px; color: #0078d4; }
.strength-dl.disabled { pointer-events: none; color: #94a3b8; }