/* 21st.dev field, radio and switch patterns adapted to NHL's native HTML UI. */
.screw-helper{padding-block:96px;border-top:1px solid var(--line);scroll-margin-top:24px}
.helper-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:40px}
.helper-heading h2{margin:14px 0 16px;font-size:clamp(2rem,3vw,3rem)}
.helper-heading p{max-width:640px;margin:0;color:var(--muted);line-height:1.8}
.helper-heading .helper-unit{font:500 .875rem Manrope,sans-serif;white-space:nowrap;color:var(--muted)}
.helper-layout{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.helper-form{grid-column:1;grid-row:1;min-width:0}
.helper-preview{grid-column:2;grid-row:1;position:sticky;top:24px;min-width:0}
.helper-form fieldset{min-width:0;margin:0;padding:0;border:0}
.helper-form legend{padding:0;margin:0 0 20px;font-size:1.0625rem;font-weight:700}
.helper-form .helper-group{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.helper-form .helper-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.helper-field{min-width:0}
.helper-field>label{display:block;font-size:.875rem;font-weight:600;margin-bottom:8px}
.helper-field-wide{grid-column:1/-1}
.helper-input{display:flex;align-items:center;min-height:48px;border:1px solid #89969a;border-radius:4px;background:#fff;min-width:0}
.helper-input:focus-within{outline:2px solid var(--red);outline-offset:2px}
.helper-input input{width:100%;min-width:0;border:0;padding:11px 0 11px 12px;background:transparent;font:500 1rem Manrope,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);appearance:textfield;-moz-appearance:textfield}
.helper-input input::-webkit-inner-spin-button,.helper-input input::-webkit-outer-spin-button{appearance:none;margin:0}
.helper-input input:focus-visible{outline:0}
.helper-input .unit{font-size:.8125rem;color:var(--muted);padding:0 8px 0 5px}
.helper-input button{flex:0 0 44px;align-self:stretch;border:0;background:transparent;color:var(--navy);font-size:1.25rem;cursor:pointer;border-radius:3px}
.helper-input button+button{border-inline-start:1px solid var(--line)}
.helper-field select,.helper-field textarea{display:block;width:100%;min-height:48px;border:1px solid #89969a;border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-size:1rem;padding:11px 12px}
.helper-field textarea{resize:vertical;min-height:90px}
.helper-field select{padding-inline-end:28px}
.helper-error{display:block;color:#922331;font-size:.8125rem;line-height:1.6;margin-top:6px}
.helper-error:empty{display:none}
.helper-field:has([aria-invalid=true]) .helper-input,.helper-field [aria-invalid=true]{border-color:#922331}
.helper-hint{font-size:.8125rem;color:var(--muted);line-height:1.7;margin:8px 0 0}
.helper-presets{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 24px}
.helper-presets button,.helper-view-button{min-height:44px;padding:9px 14px;background:transparent;border:1px solid #89969a;border-radius:4px;color:var(--navy);font:600 .875rem Manrope,sans-serif;cursor:pointer}
.helper-presets button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.helper-preset-label{font-size:.8125rem;color:var(--muted);margin:0}
.helper-segments{display:flex;flex-wrap:wrap;gap:10px}
.helper-segment{position:relative;flex:1;min-width:100px;cursor:pointer}
.helper-segment input{position:absolute;opacity:0;width:1px;height:1px}
.helper-segment span{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 12px;border:1px solid #89969a;border-radius:4px;font-size:.875rem;background:#fff;font-weight:500}
.helper-segment span:before{content:'';width:12px;height:12px;border:1px solid #89969a;border-radius:50%;flex:none}
.helper-segment input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#e7ecec;color:var(--navy)}
.helper-segment input:checked+span:before{background:var(--navy);border-color:var(--navy);box-shadow:inset 0 0 0 3px #e7ecec}
.helper-segment input:focus-visible+span{outline:3px solid var(--red);outline-offset:3px}
.helper-switch-row{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;min-height:56px}
.helper-switch-row strong{display:block;font-size:1.0625rem}
.helper-switch-row small{display:block;font-size:.875rem;font-weight:400;color:var(--muted);line-height:1.6;margin-top:4px}
.helper-switch{position:relative;display:inline-flex;align-items:center;min-height:44px;flex:none}
.helper-switch input{position:absolute;opacity:0;width:1px;height:1px}
.helper-switch-track{display:block;width:46px;height:26px;border:1px solid #89969a;border-radius:20px;background:#d4d9d8;padding:3px}
.helper-switch-track:after{content:'';display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #172e3b33}
.helper-switch input:checked+.helper-switch-track{background:var(--navy);border-color:var(--navy)}
.helper-switch input:checked+.helper-switch-track:after{transform:translateX(20px)}
.helper-switch input:focus-visible+.helper-switch-track{outline:3px solid var(--red);outline-offset:4px}
#shaft-options{margin-top:24px}
#shaft-options[hidden],.helper-field[hidden],.helper-message[hidden]{display:none}
.helper-fit{font-size:.875rem;line-height:1.75;color:var(--navy);padding:14px 16px;background:var(--pale);border-radius:4px;margin:18px 0 0}
.helper-preview-frame{background:var(--pale);border-radius:8px;overflow:hidden;position:relative}
.helper-preview-top{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 24px 0;font-size:.8125rem;color:var(--muted)}
.helper-preview-top strong{color:var(--navy);font-weight:600}
.helper-canvas-wrap{position:relative;width:100%;aspect-ratio:3/2;min-height:240px}
#screw-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:pan-y;cursor:grab}
#screw-canvas:active{cursor:grabbing}
#screw-canvas:focus-visible{outline-offset:-4px}
.helper-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:36px;text-align:center;background:#edf0edf2;color:var(--navy);font-size:.9375rem;line-height:1.75;pointer-events:none}
.helper-view-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:0 20px 16px}
.helper-view-controls>div{display:flex;flex-wrap:wrap;gap:6px}
.helper-view-button{font:600 .8125rem Manrope,'Noto Sans Thai',sans-serif;padding:8px 12px;background:var(--paper);min-width:44px}
.helper-view-button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.helper-view-button:disabled{opacity:.5;cursor:default}
.helper-preview-caption{font-size:.8125rem;color:var(--muted);line-height:1.65;margin:10px 0 0}
.helper-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0 0;padding-top:20px;border-top:1px solid var(--line);gap:18px 12px;font-variant-numeric:tabular-nums}
.helper-readout div{min-width:0}.helper-readout dt{font-size:.75rem;color:var(--muted);margin-bottom:5px}.helper-readout dd{font-size:1rem;font-weight:600;margin:0;overflow-wrap:anywhere}
.helper-specification{margin-top:28px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:8px}
.helper-specification summary{cursor:pointer;min-height:36px;font-weight:600;font-size:.9375rem}
.helper-specification textarea{width:100%;resize:vertical;min-height:250px;font:400 .875rem/1.8 Manrope,'Noto Sans Thai',sans-serif;border:1px solid #89969a;border-radius:4px;padding:12px;margin-top:14px;color:var(--ink);background:var(--paper)}
.helper-submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.helper-submit-row button{cursor:pointer;border:0}
.helper-status{margin:12px 0 0;font-size:.875rem;line-height:1.7;min-height:1.7em;color:var(--navy)}
.helper-note{font-size:.8125rem;color:var(--muted);line-height:1.7;margin:18px 0 0}
@media(hover:hover){.helper-input button:hover,.helper-presets button:not([aria-pressed=true]):hover,.helper-view-button:not([aria-pressed=true]):hover{background:#dde3e1}}
@media(prefers-reduced-motion:no-preference){html:not([data-input=keyboard]) .helper-switch-track:after{transition:transform 160ms var(--ease-out)}html:not([data-input=keyboard]) .helper-switch-track{transition:background-color 160ms ease}}
@media(max-width:1100px){.helper-layout{gap:30px;grid-template-columns:minmax(300px,1fr) minmax(0,1fr)}.helper-fields{gap:18px 12px}}
@media(max-width:850px){.helper-layout{grid-template-columns:1fr}.helper-preview{grid-column:1;grid-row:1;position:static}.helper-form{grid-column:1;grid-row:2}.helper-preview-frame{max-width:660px;margin-inline:auto}.helper-canvas-wrap{aspect-ratio:16/9}.helper-heading{display:block}.helper-heading .helper-unit{display:block;margin-top:16px}.helper-specification{margin-top:20px}.helper-readout{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:500px){.screw-helper{padding-block:64px}.helper-heading{margin-bottom:28px}.helper-form .helper-fields{grid-template-columns:1fr}.helper-field-wide{grid-column:auto}.helper-preview-top{padding:16px 16px 0}.helper-view-controls{padding:0 12px 12px}.helper-canvas-wrap{min-height:220px}.helper-specification{padding:18px}.helper-readout{grid-template-columns:repeat(2,minmax(0,1fr))}.helper-segment span{padding-inline:8px}.helper-view-button{padding-inline:10px}}
@media(forced-colors:active){.helper-segment input:checked+span{outline:2px solid Highlight}.helper-switch input:checked+.helper-switch-track{background:Highlight}.helper-switch-track:after{background:CanvasText}.helper-input,.helper-field select,.helper-field textarea,.helper-presets button,.helper-view-button{border:1px solid ButtonText}}