/* Gear Design Guide. Builds on the card, table and callout styles in nswc-reliability.css. */
.gg-wrap { max-width: 62rem; margin: 0 auto; font-family: "Roboto","Roboto Fallback", Arial, sans-serif; }
.gg-panel { background: #eef3f5; border: 2px solid rgb(67,67,67); border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,.4); padding: 12px 16px; margin: 0 0 1rem; }
.gg-panel h3 { font-size: 13px; font-weight: 700; color: #1a6475; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 8px; }
.gg-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-items: end; }
.gg-controls label { font-size: 12px; color: #444; display: block; margin-bottom: 3px; }
.gg-controls select, .gg-controls input[type="search"], .gg-controls input[type="text"] { width: 100%; height: 27px; font-size: 13px; padding: 3px 7px; border: 1.5px solid rgb(67,67,67); border-radius: 5px; background: #e2ecef; color: #000; }
@media (max-width: 640px) { .gg-controls { grid-template-columns: 1fr; } }

.gg-progress { height: 10px; background: #cfd9dc; border-radius: 6px; overflow: hidden; border: 1px solid #9aa9ad; }
.gg-progress > div { height: 100%; width: 0; background: #2e7d4f; transition: width 0.25s; }
.gg-progress-text { font-size: 12px; color: #444; margin-top: 4px; }

.gg-jumpbar { display: flex; flex-wrap: wrap; gap: 6px; }
.gg-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px 3px 4px; border: 1.5px solid #24505f; border-radius: 14px; background: #f7fafb; color: #1a3a40; text-decoration: none; }
.gg-jump span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #1d3f4b; color: #fff; font-size: 11px; font-weight: 700; }
.gg-jump:hover { background: #e2ecef; }
.gg-jump.is-done { border-color: #2e7d4f; background: #e7f4ec; }
.gg-jump.is-done span { background: #2e7d4f; }

.gg-step .ref-body { padding: 12px 16px; }
.gg-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.gg-summary { grid-column: 1 / -1; font-size: 14px; color: #1a3a40; font-weight: 500; }
.gg-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .gg-body { grid-template-columns: 1fr; } }
.gg-tick { display: none; color: #7fd69b; font-weight: 700; margin-right: 4px; }
.gg-is-done .gg-tick { display: inline; }
.gg-done { font-size: 13px; cursor: pointer; margin: 0; }
.gg-done input { margin-right: 6px; accent-color: #1a6475; }

.gg-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; background: #dfe7e9; color: #1a3a40; border: 1px solid #b8c2c2; vertical-align: middle; }
.gg-badge.fam { color: #fff; border-color: transparent; }
.gg-badge.fam-ISO { background: #1a6475; } .gg-badge.fam-AGMA { background: #7b5ea7; } .gg-badge.fam-ASME { background: #b3362b; }
.gg-badge.fam-SAE { background: #cc7700; } .gg-badge.fam-ASTM { background: #2e7d4f; } .gg-badge.fam-AMS { background: #3c2a54; }
.gg-badge.fam-DIN { background: #555; } .gg-badge.fam-ABMA { background: #3a7ab0; }
.gg-badge.legacy { background: #fff1d6; border-color: #cc7700; color: #7a4a00; }
.gg-badge.verify { background: #fff; border-color: #aab8bb; color: #5f6b70; text-transform: none; font-weight: 500; }
.gg-badge.live { background: #e7f4ec; border-color: #2e7d4f; color: #1f5a37; }
.gg-badge.planned { background: #fff8e6; border-color: #cc7700; color: #7a4a00; }
.gg-badge.need-always { background: #fdecea; border-color: #c0392b; color: #8a2a20; }
.gg-badge.need-usually { background: #fff8e6; border-color: #cc7700; color: #7a4a00; }
.gg-badge.need-optional { background: #eef3f5; }

.gg-stds, .gg-tools, .gg-items, .gg-check { list-style: none; padding: 0; margin: 0; }
.gg-stds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (max-width: 760px) { .gg-stds { grid-template-columns: 1fr; } }
.gg-std { background: #fff; border: 1px solid #c8d3d6; border-radius: 6px; padding: 6px 9px; }
.gg-std-head { font-size: 13px; } .gg-std-title { font-size: 12px; color: #333; margin-top: 2px; } .gg-std-note { font-size: 11.5px; color: #5f6b70; margin-top: 2px; }
.gg-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.gg-tool { background: #fff; border: 1px solid #c8d3d6; border-left-width: 4px; border-radius: 6px; padding: 6px 9px; font-size: 13px; }
.gg-tool.live { border-left-color: #2e7d4f; } .gg-tool.planned { border-left-color: #cc7700; border-style: dashed; border-left-style: solid; }
.gg-tool-blurb { font-size: 11.5px; color: #5f6b70; margin-top: 2px; }
.gg-items li { font-size: 13px; margin: 3px 0; }
.gg-check li { font-size: 13px; margin: 4px 0; } .gg-check label { cursor: pointer; margin: 0; } .gg-check input { margin-right: 6px; accent-color: #1a6475; }
.gg-from { font-size: 12px; margin-left: 6px; }
.gg-group { margin-bottom: 10px; }
.gg-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
@media (max-width: 760px) { .gg-checklist { grid-template-columns: 1fr; } }

.gg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.gg-table th { background: #1d3f4b; color: #eee; border: 1px solid #24505f; padding: 5px 9px; text-align: left; }
.gg-table td { border: 1px solid #ccc; padding: 4px 9px; vertical-align: top; color: #333; }
.gg-table .gg-topic-row td { background: #e2ecef; font-weight: 700; color: #1a3a40; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11.5px; }
.gg-table-wrap { overflow-x: auto; }

/* The checklist needs a little more room than the rest of the guide at normal desktop widths. */
.gg-wrap.gg-wrap-wide { max-width: 68rem; }
/* The global `ul li { list-style-type: disc }` beats list-style on the ul, so clear it on the items. */
.gg-tools > li { list-style: none; padding-left: 9px; padding-right: 9px; }