/* The public reference's request form (/{ka,en}/refs/request/, v0.307.0), served as
   /refs/request/form.css. The page wears vetman.app's stylesheet (refs-site.css); this adds the
   form and the app's searchable dropdown.

   The .ss-* block is the app's own (assets/css/app.css, "Searchable select" and the shared
   closed-dropdown rule), with the app's colour tokens swapped for the site's: --border/--field-bg
   -> --line/--surface, --primary* -> --blue, --danger* -> --red. When the app's dropdown CSS
   changes, copy it again (BL-074). */

.rq-form{display:grid;gap:22px;max-width:760px}
.rq-section{display:grid;gap:16px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rq-section h2{margin:0 !important;font-size:19px !important;line-height:1.3}
/* Only the chosen kind's fields show; CSS alone, so the switch works before the script loads. */
.rq-section[data-type]{display:none}
.rq-form:has(input[name=type][value=error]:checked) .rq-section[data-type=error],
.rq-form:has(input[name=type][value=addition]:checked) .rq-section[data-type=addition],
.rq-form:has(input[name=type][value=supplier]:checked) .rq-section[data-type=supplier]{display:grid}
.rq-form [data-supplier-only]{display:none}
.rq-form:has(input[name=type][value=supplier]:checked) [data-supplier-only]{display:inline}
.rq-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;border:0}
.rq-types legend{margin-bottom:10px;font-weight:700}
.rq-type{position:relative;display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.rq-type input{position:absolute;opacity:0;width:1px;height:1px}
.rq-type strong{display:block;margin-bottom:3px}
.rq-type span{display:block;color:var(--muted);font-size:13.5px;line-height:1.4}
.rq-type:hover{border-color:var(--blue)}
.rq-type:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--surface))}
.rq-type:has(input:focus-visible){outline:2px solid color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:2px}
.rq-field{display:grid;gap:6px}
.rq-field label,.rq-label{font-weight:700;font-size:14.5px}
.rq-req{color:var(--red);margin-left:2px}
.rq-hint{color:var(--muted);font-size:13px}
.rq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rq-field input[type=text],.rq-field input[type=email],.rq-field input[type=tel],.rq-field textarea,.rq-field select{width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.rq-field textarea{min-height:110px;resize:vertical;line-height:1.5}
.rq-field :is(input,textarea,select):focus{outline:2px solid color-mix(in srgb,var(--blue) 40%,transparent);border-color:var(--blue)}
.rq-field.rq-invalid :is(input,textarea,.ss-input){border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.rq-error{color:var(--red);font-size:13.5px;font-weight:700}
.rq-about{padding:10px 12px;border-radius:10px;background:var(--soft);font-size:14.5px;overflow-wrap:anywhere}
.rq-about a{color:var(--blue)}
.rq-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.rq-check input{width:18px;height:18px;margin:2px 0 0;flex:0 0 18px;accent-color:var(--blue)}
.rq-alert{padding:14px 16px;border:1px solid var(--red);border-radius:12px;background:color-mix(in srgb,var(--red) 10%,var(--surface));color:var(--ink);font-weight:700}
.rq-note{margin:0;padding-left:12px;border-left:3px solid var(--line);color:var(--muted);font-size:14px}
.rq-note p{margin:0 0 6px}
.rq-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rq-actions .button{border:0;cursor:pointer;font:inherit}
.rq-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:720px){
  .rq-types{grid-template-columns:1fr}
  .rq-row{grid-template-columns:1fr}
  .rq-section{padding:16px}
}

/* --- The app's searchable dropdown (see the top of this file) --- */
input.ss-input,.ss-plain-select{height:44px;padding:10px 30px 10px 12px;font-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;appearance:none;-webkit-appearance:none}
.ss-wrap{position:relative;min-width:0}
.ss-wrap .ss-input{border:1px solid var(--line);border-radius:10px;font-family:inherit;width:100%;min-width:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;background-color:var(--surface);color:var(--ink)}
.ss-wrap.ss-open .ss-input{border-color:var(--blue)}
.ss-wrap.ss-invalid .ss-input{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.ss-error{margin-top:4px;font-size:13px;font-weight:700;color:var(--red)}
html.js select.searchable-select:not(.ss-native),html.js select.ss-plain-select:not(.ss-native){position:absolute;opacity:0;height:0;width:0;min-width:0;padding:0;border:0;pointer-events:none}
select.ss-native{position:absolute !important;opacity:0;height:0 !important;width:0 !important;min-width:0 !important;padding:0 !important;border:0;pointer-events:none}
.ss-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden}
.ss-options{max-height:220px;overflow-y:auto}
.ss-item{padding:10px 12px;font-size:15px;cursor:pointer}
.ss-item:hover,.ss-item.ss-active{background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--ink)}
.ss-item.ss-item-blank{color:var(--muted);font-style:italic}
.ss-item.ss-picked{opacity:.62}
.ss-tick{float:right;font-weight:700;color:var(--blue)}
.ss-empty{padding:10px 12px;font-size:14px;color:var(--muted)}
.ss-group{padding:7px 12px 3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.ss-wrap .ss-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);opacity:.45;font-size:16px;line-height:1;cursor:pointer}
.ss-wrap .ss-clear:hover,.ss-wrap .ss-clear:focus-visible{opacity:1;background:var(--line)}
.ss-wrap input.ss-has-clear{padding-right:32px}
.ss-wrap .ss-clear.ss-clear-chevron{right:28px}
.ss-wrap input.ss-chevron-bg.ss-has-clear{padding-right:52px}