/* The Loadout: a picker, the gear grouped by kind, and what fits it. */
.lo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.lo h2 { font-size: 24px; margin-bottom: 14px; }
.lo-panel { background: var(--carbon-2); border: 1px solid var(--line-dark); border-radius: 18px; padding: 22px; }
.lo-note { color: var(--muted-dark); font: 400 14px/1.5 var(--font-ui); margin: 0 0 14px; }
.lo-note a { color: var(--teal-text); }
.lo-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lo-cats button { font: 500 13px/1 var(--font-ui); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: var(--text); cursor: pointer; }
.lo-cats button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--carbon); }
.lo-find { position: relative; }
.lo-find input { width: 100%; font: 400 15px/1.3 var(--font-ui); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-dark); background: var(--carbon); color: var(--text); }
.lo-find input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.lo-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow: auto; border-radius: 12px; border: 1px solid var(--line-dark); background: var(--carbon); }
.lo-results:empty { display: none; }
.lo-results li button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line-dark); background: transparent; color: var(--text); font: 400 14px/1.3 var(--font-ui); cursor: pointer; }
.lo-results li:last-child button { border-bottom: 0; }
.lo-results li button:hover, .lo-results li button:focus-visible { background: color-mix(in srgb, var(--teal) 14%, transparent); }
.lo-results small { color: var(--muted-dark); margin-left: auto; }
.lo-results .glyph, .lo-item .glyph, .lo-group h3 .glyph { width: 18px; height: 18px; flex: none; color: var(--teal-text); }
.lo-group h3 .printer-art { width: 24px; height: 24px; color: var(--text); }
.lo-results .printer-art { width: 28px; height: 28px; color: var(--text); }
.lo-custom { margin-top: 12px; font: 400 14px/1.4 var(--font-ui); }
.lo-custom summary { cursor: pointer; color: var(--teal-text); }
.lo-custom form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lo-custom select, .lo-custom input { font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line-dark); background: var(--carbon); color: var(--text); }
.lo-custom input { flex: 1 1 180px; }
.lo-groups { display: grid; gap: 16px; margin-top: 20px; }
.lo-group h3 { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); margin: 0 0 8px; }
.lo-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lo-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--carbon); border: 1px solid var(--line-dark); }
.lo-item b { font: 600 14.5px/1.3 var(--font-ui); display: block; }
.lo-item input { width: 100%; margin-top: 4px; font: 400 13px/1.3 var(--font-ui); padding: 4px 0; border: 0; border-bottom: 1px dashed var(--line-dark); background: transparent; color: var(--muted-dark); }
.lo-item small { color: var(--muted-dark); font: 400 13px/1.3 var(--font-ui); }
.lo-item button { border: 0; background: transparent; color: var(--muted-dark); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.lo-item button:hover { color: var(--danger); }
.lo-item:has(.lo-setup[open]), .lo-item:has(.lo-chips) { align-items: start; }
.lo-setup { margin-top: 8px; font: 400 13px/1.4 var(--font-ui); }
.lo-setup summary { cursor: pointer; color: var(--teal-text); }
.lo-setup-h { margin: 10px 0 6px; font: 600 11.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); }
.lo-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.lo-item .lo-chip { font: 500 12.5px/1 var(--font-ui); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: var(--text); }
.lo-item .lo-chip:hover { color: var(--text); border-color: var(--teal); }
.lo-item .lo-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--carbon); }
.lo-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lo-chips li { font: 500 12px/1 var(--font-ui); padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.lo-item .lo-chips li button { font-size: 14px; padding: 0 2px; }
.lo-nozzle { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lo-nozzle select { font: 400 13px/1.2 var(--font-ui); padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line-dark); background: var(--carbon-2); color: var(--text); }
.lo-item .lo-nozzle .btn { font-size: 13px; padding: 7px 12px; color: var(--text); }
.lo-status { font: 400 13px/1.4 var(--font-ui); color: var(--muted-dark); min-height: 1.4em; margin: 10px 0 0; }
.lo-fits { display: grid; gap: 10px; }
.lo-fit { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-dark); background: var(--carbon-2); color: inherit; text-decoration: none; transition: border-color .2s; }
.lo-fit:hover, .lo-fit:focus-visible { border-color: color-mix(in srgb, var(--teal) 60%, transparent); }
.lo-fit b { font: 600 16px/1.3 var(--font); }
.lo-fit span { color: var(--muted-dark); font: 400 14px/1.5 var(--font-ui); }
.lo-fit small { color: var(--teal-text); font: 500 12.5px/1.4 var(--font-ui); }
.lo-models { margin-top: 32px; }
.lo-models .model-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lo-community { margin-top: 32px; }
.lo-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lo-stats section { background: var(--carbon-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 14px 16px; }
.lo-stats h3 { font: 600 12px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); margin: 0 0 10px; }
.lo-stats ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lo-stats li { display: flex; justify-content: space-between; gap: 10px; font: 400 14px/1.3 var(--font-ui); }
.lo-stats li b { font: 600 13px/1.3 var(--font-mono); color: var(--teal-text); }
.lo-empty { padding: 28px; text-align: center; border: 1px dashed var(--line-dark); border-radius: 16px; color: var(--muted-dark); font: 400 15px/1.5 var(--font-ui); }
.lo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 900px) { .lo { grid-template-columns: 1fr; } }

/* A custom printer's build: photos, parts, the story and videos. */
.lo-build { display: grid; gap: 12px; margin-top: 10px; }
.lo-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lo-photos a, .lo-photos-edit span { display: block; position: relative; border-radius: 10px; overflow: hidden; background: var(--carbon-2); aspect-ratio: 4 / 3; }
.lo-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-photos[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.lo-photos[data-n="1"] a { aspect-ratio: 16 / 10; }
.lo-photos[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lo-photos-edit { margin-top: 4px; }
.lo-item .lo-photos-edit span button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgb(30 33 36 / .75); color: #f6eed9; font-size: 16px; }
.lo-add-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--line-dark); border-radius: 10px; color: var(--teal-text); font: 600 13px/1 var(--font-ui); cursor: pointer; }
.lo-add-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lo-add-photo:hover { border-color: var(--teal); }
.lo-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0; font: 400 13px/1.4 var(--font-ui); }
.lo-specs dt { font: 600 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 2px; }
.lo-specs dd { margin: 0; color: var(--text); }
.lo-story { font: 400 14px/1.55 var(--font-ui); color: var(--text); }
.lo-story p { margin: 0 0 8px; }
.lo-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.lo-video, .lo-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; overflow: hidden; background: #000; position: relative; padding: 0; cursor: pointer; }
.lo-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.lo-play { position: absolute; inset: 50% auto auto 50%; width: 56px; height: 40px; transform: translate(-50%, -50%); border-radius: 12px; background: rgb(30 33 36 / .85); }
.lo-play::after { content: ''; position: absolute; left: 22px; top: 11px; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #9ec4b5; }
.lo-video:hover .lo-play, .lo-video:focus-visible .lo-play { background: var(--teal); }
.lo-video:hover .lo-play::after { border-left-color: #1e2124; }
.lo-build-edit .lo-setup-h small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted-dark); }
.lo-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.lo-spec-grid label { display: grid; gap: 2px; font: 600 11px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-dark); }
.lo-item .lo-spec-grid input, .lo-item .lo-build-edit textarea, .lo-item .lo-video-links input { width: 100%; margin: 0; font: 400 13px/1.35 var(--font-ui); padding: 7px 9px; border: 1px solid var(--line-dark); border-radius: 8px; background: var(--carbon-2); color: var(--text); text-transform: none; letter-spacing: 0; }
.lo-item .lo-build-edit textarea { resize: vertical; min-height: 80px; font-family: var(--font-ui); }
.lo-video-links { display: grid; gap: 6px; }
.lo-build-edit .lo-note { margin: 10px 0 0; font-size: 12.5px; }

/* The profile section. */
.pf-loadout { display: grid; gap: 14px; }
/* Your own Loadout tab: gear, maintenance and spools, each folded away. */
.pf-ws { border: 1px solid var(--line-dark); border-radius: 16px; background: var(--carbon-2); scroll-margin-top: calc(var(--header-h, 64px) + 12px); }
.pf-ws > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.pf-ws > summary::-webkit-details-marker { display: none; }
.pf-ws > summary::before { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--teal-text); border-bottom: 2px solid var(--teal-text); transform: rotate(-45deg); transition: transform .15s; }
.pf-ws[open] > summary::before { transform: rotate(45deg); }
.pf-ws > summary > span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pf-ws > summary b { font: 600 17px/1.3 var(--font-ui); }
.pf-ws > summary small { color: var(--muted-dark); font: 400 13px/1.4 var(--font-ui); }
.pf-ws > summary em { font: 600 12px/1 var(--font-ui); font-style: normal; color: var(--teal-text); white-space: nowrap; }
.pf-ws > summary em.warn { color: #e0a526; }
.pf-ws > summary em:empty { display: none; }
.pf-ws-body { padding: 0 18px 18px; }
@media (prefers-reduced-motion: reduce) { .pf-ws > summary::before { transition: none; } }
.pf-loadout .lo-group ul { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pf-loadout .lo-item { grid-template-columns: auto minmax(0, 1fr); }

/* /rigs: custom printers from the whole community. */
.rig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.rig-card { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-dark); background: var(--carbon-2); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.rig-card:hover, .rig-card:focus-visible { border-color: color-mix(in srgb, var(--teal) 60%, transparent); transform: translateY(-2px); }
.rig-art { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--carbon); }
.rig-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rig-art .build-noart { display: grid; place-items: center; height: 100%; color: var(--muted-dark); font: 400 14px/1 var(--font-ui); }
.rig-tag { position: absolute; left: 10px; bottom: 10px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 8px; background: rgb(30 33 36 / .8); color: #9ec4b5; }
.rig-tag-r { left: auto; right: 10px; }
.rig-body { display: grid; gap: 8px; padding: 14px 16px 16px; align-content: start; }
.rig-body > b { font: 700 18px/1.25 var(--font); }
.rig-by { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-ui); color: var(--muted-dark); }
.rig-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.rig-specs span { font: 500 12px/1 var(--font-ui); padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, transparent); }
.rig-story { font: 400 13.5px/1.5 var(--font-ui); color: var(--muted-dark); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* A photo of the gear itself, in place of its icon. */
.lo-photo { display: block; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-dark); }
.lo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-photo-acts { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.lo-item .lo-photo-rm { font-size: 12px; padding: 0; }
@media (max-width: 560px) { .lo-item { grid-template-columns: auto minmax(0, 1fr) auto; } .lo-item > button { grid-column: 3; grid-row: 1; } .lo-photo-acts { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; } }