/* Выбор автомобиля: поля Tom Select в токенах Hub Garage (ориентир — ReUI Combobox и 21st Halaska Combobox: поле с chevron,
   список со скруглением и мягкой тенью; высота поля и строк 44 px вместо 38 px), состояния и панель справочных размеров. */
.hgs{display:grid;gap:16px;min-width:0}
.hgs-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.hgs-field{position:relative;min-width:0}
.hgs-field .hg-home-step{margin-bottom:6px}
.hgs-field:not(.is-disabled) .hg-home-step b{background:var(--hg-red);color:var(--hg-white)}
.hgs-form{margin:0}

.hgs .ts-wrapper{position:relative;min-width:0}
.hgs .ts-control{align-items:center;flex-wrap:nowrap;min-height:44px;padding:0 70px 0 12px;border:1px solid var(--hg-line);border-radius:8px;background:var(--hg-white);color:var(--hg-ink);font-size:14px;line-height:1.3;cursor:pointer;overflow:hidden}
.hgs .ts-wrapper.focus .ts-control{border-color:var(--hg-ink);outline:3px solid var(--hg-red);outline-offset:2px}
/* Tom Select красит поле при вводе в #fff (.ts-wrapper.single.input-active, 0,4,0): фон берём из темы, фокус — рамкой (C2SL-5) */
.hgs .ts-wrapper.single.input-active .ts-control{background:var(--hg-white)}
.hgs .ts-control::after{position:absolute;top:50%;right:16px;width:8px;height:8px;border-right:2px solid var(--hg-muted);border-bottom:2px solid var(--hg-muted);content:'';transform:translateY(-70%) rotate(45deg);transition:transform .16s ease}
.hgs .ts-wrapper.dropdown-active .ts-control::after{transform:translateY(-25%) rotate(-135deg)}
.hgs .ts-control .item{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hgs .ts-control .item .hgs-item-group{flex:0 1 auto;min-width:0;overflow:hidden;color:var(--hg-muted);font-size:11px;text-overflow:ellipsis}
.hgs .ts-control>input{min-width:4rem;color:var(--hg-ink);font-size:14px}
.hgs .ts-control>input::placeholder{color:var(--hg-muted);opacity:1}
.hgs .ts-wrapper.disabled .ts-control{opacity:1;background:var(--hg-soft);color:var(--hg-muted);cursor:not-allowed}
.hgs .ts-wrapper.disabled .ts-control::after{border-color:var(--hg-line)}

.hgs-clear{position:absolute;top:50%;right:34px;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:none;color:var(--hg-muted);transform:translateY(-50%);cursor:pointer}
.hgs-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hgs-clear:hover{background:var(--hg-soft);color:var(--hg-ink)}
.hgs-clear:focus-visible{outline:3px solid var(--hg-red);outline-offset:0}

.hgs-field.is-loading .ts-control::before{position:absolute;top:50%;right:40px;width:16px;height:16px;margin-top:-8px;border:2px solid var(--hg-line);border-top-color:var(--hg-red);border-radius:50%;content:'';animation:hgs-spin .8s linear infinite}
.hgs-field.is-loading .hgs-clear{visibility:hidden}
@keyframes hgs-spin{to{transform:rotate(360deg)}}

.hgs .ts-dropdown{z-index:40;margin:4px 0 0;border:1px solid var(--hg-line);border-radius:10px;background:var(--hg-white);color:var(--hg-ink);box-shadow:0 8px 24px #0000001a;overflow:hidden}
.hgs .ts-wrapper.hgs-dropup .ts-dropdown{top:auto;bottom:100%;margin:0 0 4px}
.hgs .ts-dropdown .ts-dropdown-content{max-height:308px;padding:4px;overflow-y:auto;overscroll-behavior:contain}
.hgs .ts-dropdown .option{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:6px;color:var(--hg-ink);font-size:14px;line-height:1.35;cursor:pointer}
.hgs .ts-dropdown .option.active{background:var(--hg-soft);color:var(--hg-ink)}
.hgs .ts-dropdown .option.selected{font-weight:700}
.hgs .ts-dropdown .option.selected::after{margin-left:auto;padding-left:10px;color:var(--hg-red);content:'✓'}
/* Firefox и Safari не знают auto-phrase: без keep-all «旧参考データ» рвалось с одиноким «タ»; в Chrome следующее объявление auto-phrase перекрывает keep-all */
.hgs .ts-dropdown .option .hgs-option-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:keep-all;word-break:auto-phrase}
.hgs .ts-dropdown .optgroup-header{padding:10px 12px 4px;background:none;color:var(--hg-muted);font-size:11px;font-weight:700;letter-spacing:.02em;cursor:default}
.hgs .ts-dropdown .optgroup+.optgroup{margin-top:2px;padding-top:2px;border-top:1px solid var(--hg-line)}
.hgs .ts-dropdown .no-results{padding:12px;color:var(--hg-muted);font-size:13px}
.hgs .ts-dropdown .hgs-more{color:var(--hg-red);font-weight:700}
.hgs-dropdown-status{padding:0 12px;color:var(--hg-muted);font-size:12px}
.hgs-dropdown-status:not(:empty){padding:10px 12px;border-top:1px solid var(--hg-line)}

.hgs-hint{margin:6px 0 0;color:var(--hg-muted);font-size:12px;line-height:1.45}
/* hidden внутри блока всегда скрывает: display у .jp-button/.hgs-show и прочих не перебивает атрибут (K2 NATIVE hiddenCTA) */
.hgs [hidden]{display:none!important}
.hgs .hgs-field select:disabled{background:var(--hg-soft);color:var(--hg-muted);cursor:not-allowed}
.hgs-error{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;color:var(--hg-red);font-size:12px;line-height:1.45}
.hgs-error button{min-height:32px;padding:4px 10px;border:1px solid currentColor;border-radius:6px;background:none;color:inherit;font-size:12px;font-weight:700;cursor:pointer}
.hgs-status{margin:0;color:var(--hg-muted);font-size:13px}

.hgs-references{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--hg-line)}
.hgs-summary{margin:0;color:var(--hg-muted);font-size:13px;text-align:center;overflow-wrap:anywhere;text-wrap:balance}
.hgs-summary span{white-space:nowrap}
.hgs-summary:focus{outline:none}
.hgs-ref-body{display:grid;gap:14px}
.hgs-ref-group h4{margin:0 0 8px;color:var(--hg-ink);font-size:15px;text-align:center}
.hgs-ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.hgs-ref-card{display:grid;justify-items:center;gap:3px;padding:12px 14px;border:1px solid var(--hg-line);border-radius:8px;background:var(--hg-white);text-align:center}
.hgs-ref-card small{color:var(--hg-muted);font-size:11px}
.hgs-ref-card strong{color:var(--hg-ink);font-size:15px;letter-spacing:.01em;text-wrap:balance}
.hgs-ref-card strong span{white-space:nowrap}
.hgs-ref-link{display:inline-flex;align-items:center;min-height:32px;color:var(--hg-red);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.hgs-ref-link::after{margin-left:4px;content:'→'}
.hgs-ref-note{margin:0;color:var(--hg-muted);font-size:12px;line-height:1.5;text-align:center}

.hgs-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--hg-line)}
.hgs-reset{display:inline-flex;align-items:center;min-height:44px;color:var(--hg-muted);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.hgs .hgs-show{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:auto}

html[data-theme=dark] .hgs .ts-dropdown{box-shadow:0 8px 24px #00000066}

@media(max-width:1000px){.hgs-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
 .hgs-fields{grid-template-columns:1fr}
 .hgs .ts-control,.hgs .ts-control>input{font-size:16px}
 .hgs-ref-grid{grid-template-columns:1fr}
 .hgs-actions{flex-direction:column-reverse;align-items:stretch;gap:6px}
 .hgs .hgs-show{justify-content:center;width:100%;margin-left:0}
 .hgs-reset{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .hgs .ts-control::after{transition:none}
 .hgs-field.is-loading .ts-control::before{animation:none;border-top-color:var(--hg-muted)}
}