/* Dermatology Group of Florida — the search bar and buttons (DECISIONS G18).
 * One definition, used by the start page (/start/) and the results page (/). Labels sit above values inside one white
 * bar; the only colour is the blue "Find openings" button. Roles from tokens.css only. */
.search{display:grid;grid-template-columns:minmax(200px,1fr) minmax(260px,1.7fr) minmax(150px,.8fr) auto;gap:0;align-items:stretch;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);padding:6px;box-shadow:var(--sh-lg)}
.fld{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:9px 16px 8px;border-radius:var(--r-md);border:1px solid transparent;min-width:0;position:relative;cursor:text}
.fld + .fld::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--c-line)}
.fld:focus-within{border-color:var(--c-focus);background:var(--c-surface-accent)}
.fld .k{grid-column:1/-1;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-ink-muted);font-weight:var(--fw-strong);line-height:1.2;margin-bottom:2px}
.fld input,.fld select{min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:var(--fs-lg);font-weight:var(--fw-ui);color:var(--c-ink);outline:none;appearance:none;padding:0;height:30px;text-overflow:ellipsis;cursor:pointer}
.fld input{cursor:text}
.fld select{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23146c9e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right center;padding-right:20px}
.fld input::placeholder{color:var(--c-ink-muted);font-weight:var(--fw-body)}
.fld .geo{grid-row:2;grid-column:2;border:0;background:transparent;color:var(--c-accent);font-weight:var(--fw-strong);font-size:var(--fs-sm);padding:4px 6px;border-radius:var(--r-md);white-space:nowrap;cursor:pointer;font-family:inherit}
.fld .geo:hover{background:var(--c-surface-alt)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);padding:0 var(--sp-5);border-radius:var(--r-md);font:inherit;font-weight:var(--fw-strong);font-size:var(--fs-sm);text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer;color:inherit}
.btn.primary{background:var(--c-cta);color:var(--c-cta-ink)}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost{background:#fff;border-color:var(--c-line);color:var(--c-ink)}
.btn.ghost:hover{border-color:var(--c-accent)}
.btn.text{border:0;background:transparent;color:var(--c-link);padding:0 var(--sp-2);text-decoration:underline;text-underline-offset:3px}
.btn.sm{height:36px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
.search .btn.primary{height:auto;min-height:62px;margin-left:6px;padding:0 var(--sp-6);font-size:var(--fs-md)}
@media (max-width:1023px){
  .search{grid-template-columns:1fr 1fr} .search .btn.primary{grid-column:1/-1;margin:6px 0 0;min-height:52px}
  .fld + .fld::before{display:none} .fld{padding:8px 12px}
}
@media (max-width:640px){
  .search{grid-template-columns:1fr} .fld .geo span{display:none}
}

/* Type-ahead under the "Where, or who" box (DECISIONS G24): providers with their photo, then cities. Behaviour in /design/suggest.js. */
.sg{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;display:none;max-height:min(420px,60vh);overflow:auto}
.sg.open{display:block}
.sg h4{margin:6px 10px 4px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-ink-muted);font-weight:var(--fw-strong)}
.sg [role=option]{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:7px 10px;border-radius:var(--r-md);cursor:pointer;text-align:left}
.sg [role=option].city{grid-template-columns:24px minmax(0,1fr);padding:9px 10px}
.sg [role=option][aria-selected=true],.sg [role=option]:hover{background:var(--c-surface-alt)}
.sg .av{width:40px;height:40px;border-radius:50%;background:var(--c-ground-photo) center/cover no-repeat;display:grid;place-items:center;color:var(--c-accent);font-weight:var(--fw-strong);font-size:var(--fs-xs)}
.sg b{display:block;font-weight:var(--fw-strong);font-size:var(--fs-md);line-height:1.25;color:var(--c-ink)} .sg b mark{background:none;color:var(--c-accent)}
.sg small{display:block;font-size:var(--fs-sm);color:var(--c-ink-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg svg{color:var(--c-accent)} .sg .av.logo{background-size:contain;background-color:#fff;border:1px solid var(--c-line)}

/* The logo in the brand bar (DECISIONS G39, G41, G42): the DGOF lockup from /brand/, 40px tall, 28px on a phone.
   Every page's .bar uses it; the old text wordmark is gone. */
.wordmark{display:inline-flex;align-items:center;flex:none;line-height:0}
.wordmark img{display:block;height:40px;width:auto;max-width:100%}
@media (max-width:640px){ .wordmark img{height:28px} }