/* Repair Shop Alerts — focused national reference directory design.
   Intentionally separate from legacy site.css: independently cache-busted and
   scoped to the two directories, leaving Shop Check and other pages untouched. */

.reference-hero{
  padding:42px 0 32px;
  background:linear-gradient(165deg,#fff 0%,#f1f6fb 100%);
  border-bottom:1px solid #e1e9f1;
}
.reference-hero .record-breadcrumb{margin-bottom:20px}
.reference-hero .kicker{font-size:11px;letter-spacing:.095em}
.reference-hero h1{
  max-width:840px;
  margin:11px 0 14px;
  font-size:clamp(36px,4.7vw,54px);
  letter-spacing:-.044em;
  line-height:1.075;
}
.reference-hero>div>p{max-width:760px;font-size:15.5px;line-height:1.68;color:#53657a}
.reference-hero .reference-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:23px 0 8px}
.reference-hero .reference-metrics span{
  display:inline-flex;align-items:baseline;gap:6px;
  min-height:35px;padding:7px 11px;
  background:#fff;border:1px solid #dfe8f0;border-radius:9px;
  color:#607186;font-size:12px;font-weight:600;
}
.reference-hero .reference-metrics strong{font-size:14px;line-height:1;color:#1a3048}
.reference-hero .state-hub-actions{gap:10px;margin-top:21px}
.reference-hero .state-hub-actions .button{min-height:42px;font-size:12px}
.reference-hub{padding-top:25px;padding-bottom:76px}
.reference-controls{
  display:block;padding:0;
  overflow:hidden;border:1px solid #dbe4ed;
  border-radius:15px;background:#fff;
  box-shadow:0 9px 24px rgba(26,47,70,.045);
}
.reference-toolbar-heading{padding:20px 22px 0}
.reference-toolbar-heading strong{
  display:block;font-size:19px;font-weight:760;line-height:1.2;
  letter-spacing:-.027em;color:#1b2b3d;
}
.reference-toolbar-heading p{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:#63748a}
.reference-controls-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  align-items:end;gap:13px;padding:18px 22px 19px;
}
.reference-field{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
.reference-field>span:first-child{font-size:12px;font-weight:750;color:#384a60;line-height:1.3}
.reference-field input,.reference-field select{
  display:block;width:100%;height:47px;min-width:0;
  border:1px solid #cedae6;border-radius:9px;
  background-color:#fff;color:#24364b;
  box-shadow:0 1px 2px rgba(30,56,78,.025);
  padding:0 13px;font:inherit;font-size:13px;line-height:1.35;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.reference-field input::placeholder{color:#8a99a9}
.reference-field input:hover,.reference-field select:hover{border-color:#9eb9d2}
.reference-field input:focus,.reference-field select:focus{
  outline:none;border-color:#347bad;box-shadow:0 0 0 3px rgba(48,123,174,.13);
}
.reference-field select{
  appearance:none;-webkit-appearance:none;
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23586e85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 11px center;background-repeat:no-repeat;
}
.reference-search-wrap{position:relative;display:block}
.reference-search-wrap svg{
  position:absolute;top:50%;left:14px;transform:translateY(-50%);
  width:17px;height:17px;color:#6e8399;pointer-events:none;
}
.reference-field .reference-search-wrap input{padding-left:42px}
.reference-toolbar-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:39px;padding:9px 22px;background:#f8fafc;
  border-top:1px solid #edf1f5;
}
.reference-toolbar-footer span{font-size:11.5px;color:#738296}
.reference-clear{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:auto;height:auto;min-height:30px;padding:3px 8px;border:0;border-radius:6px;
  background:transparent;color:#2166a7;font-size:12px;font-weight:740;
}
.reference-clear:hover{background:#e6f0f9}
.reference-clear:focus-visible,.reference-alphabet a:focus-visible,.reference-directory-status button:focus-visible,.reference-card a:focus-visible,
.reference-card summary:focus-visible{
  outline:3px solid #9ac6e9;outline-offset:2px;
}
.reference-alphabet{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  padding:20px 0 16px;border-bottom:1px solid #e2eaf1;
  scroll-margin-top:92px;
}
.reference-alphabet::before{
  content:"A–Z";display:inline-flex;align-items:center;
  margin-right:10px;color:#6e7f92;font-size:11px;font-weight:780;letter-spacing:.06em;
}
.reference-alphabet a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:32px;padding:4px 9px;
  background:transparent;color:#356c9e;
  border:1px solid transparent;border-radius:7px;
  font-weight:750;font-size:12px;line-height:1;
  text-decoration:none;
}
.reference-alphabet a:hover{color:#174b7a;border-color:#ccdce9;background:#eaf3fb}
.reference-alphabet a.reference-letter-muted{color:#b3c0cc;background:transparent}
.reference-directory-status{
  display:flex;align-items:center;justify-content:space-between;
  min-height:48px;gap:12px;padding:12px 0 4px;
  color:#66778b;font-size:12px;font-weight:600;
}
.reference-directory-status button{
  border:0;background:transparent;color:#4b6f91;
  font-size:12px;font-weight:670;text-decoration:none;
}
.reference-directory-status button:hover{color:#185990;text-decoration:underline}
.reference-letter-group{scroll-margin-top:92px}
.reference-letter-group>h2{
  display:flex;align-items:center;gap:12px;
  padding:17px 0 11px;margin:12px 0 0;
  border:0;color:#354c61;font-size:18px;font-weight:770;letter-spacing:-.025em;
}
.reference-letter-group>h2:after{
  content:"";height:1px;min-width:0;flex:1;background:#dfe7ee;
}
.reference-directory-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;gap:12px;
}
.reference-card{
  min-width:0;display:flex;flex-direction:column;scroll-margin-top:94px;
  border:1px solid #dde6ee;border-radius:12px;background:#fff;
  box-shadow:none;padding:19px 20px 16px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.reference-card:hover{border-color:#b9cbdb;box-shadow:0 5px 17px rgba(37,62,90,.052)}
.reference-card:target{border-color:#2166a7;box-shadow:0 0 0 3px rgba(33,102,167,.12)}
.reference-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.reference-card .reference-state{font-size:13px;line-height:1.3;font-weight:780;color:#263b50}
.reference-card .reference-type{
  display:inline-block;max-width:100%;padding:4px 8px;
  border:0;border-radius:6px;background:#edf4fa;
  color:#426887;font-size:10.5px;font-weight:680;line-height:1.35;
}
.reference-card[data-reference-type="manual"] .reference-type,
.reference-card[data-reference-type="fee"] .reference-type{background:#e8f5ef;color:#267153}
.reference-card[data-reference-type="transition"] .reference-type{background:#fff2da;color:#8a6320}
.reference-card[data-reference-type="agency"] .reference-type{background:#f0f2f5;color:#667587}
.reference-card h3{
  margin:12px 0 8px;color:#172e44;
  font-size:17px;letter-spacing:-.025em;line-height:1.3;font-weight:745;
}
.reference-card p{margin:0 0 14px;color:#536479;font-size:13px;line-height:1.65}
.reference-card .reference-honesty{font-size:11.5px;color:#7c6b50}
.reference-card-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:11px 18px;
  margin-top:auto;padding-top:13px;border-top:1px solid #eef2f5;
}
.reference-card-links .reference-primary{
  display:inline-flex;align-items:center;gap:5px;
  color:#1764a1;font-size:12.5px;font-weight:750;text-decoration:none;
}
.reference-card-links .reference-primary:hover{text-decoration:underline}
.reference-card-links>.reference-state-link{
  color:#77869a;font-size:11.5px;font-weight:600;text-decoration:none;
}
.reference-card-links>.reference-state-link:hover{color:#2166a7;text-decoration:underline}
.reference-extras{flex-basis:100%;margin:0;font-size:11.5px;color:#526d85}
.reference-extras summary{display:inline-flex;cursor:pointer;font-weight:680;color:#436f98}
.reference-extras summary:hover{text-decoration:underline}
.reference-extras-links{display:flex;flex-direction:column;align-items:start;gap:7px;margin-top:10px}
.reference-extras-links a{font-size:12px;font-weight:600;line-height:1.45}
.reference-card[hidden],.reference-letter-group[hidden],[data-ref-empty][hidden]{display:none!important}
.reference-hub [data-ref-empty]{
  margin:25px 0 0;padding:26px 20px;text-align:center;
  border:1px dashed #b9cddd;border-radius:12px;background:#fff;
}
.reference-hub [data-ref-empty] strong{display:block;color:#344b61;font-size:15px}
.reference-hub [data-ref-empty] span{display:block;margin-top:5px;color:#718295;font-size:12.5px}
.reference-hub>.record-disclaimer{max-width:820px;margin:34px auto 0;text-align:center;color:#7b8796;font-size:11px;line-height:1.7}
@media(max-width:960px){
  .reference-controls-grid{grid-template-columns:1fr 1fr}
  .reference-search-field{grid-column:1/-1}
}
@media(max-width:720px){
  .reference-hero{padding:31px 0 27px}
  .reference-hero h1{font-size:clamp(32px,8vw,42px)}
  .reference-hero>div>p{font-size:14px}
  .reference-hub{padding-top:16px}
  .reference-directory-grid{grid-template-columns:1fr}
  .reference-alphabet{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    padding:14px 0 12px;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .reference-alphabet::before{position:sticky;left:0;z-index:1;padding:5px 9px 5px 0;background:#f6f8fb;flex:0 0 auto}
  .reference-alphabet a{flex:0 0 auto}
}
@media(max-width:490px){
  .reference-hero .reference-metrics{gap:6px}
  .reference-hero .reference-metrics span{font-size:11px;padding:6px 9px}
  .reference-controls-grid{grid-template-columns:1fr;padding:15px 16px 16px;gap:14px}
  .reference-search-field{grid-column:auto}
  .reference-toolbar-heading{padding:18px 16px 0}
  .reference-toolbar-footer{padding:8px 12px 8px 16px}
  .reference-controls{border-radius:12px}
  .reference-card{padding:17px 17px 15px}
  .reference-card h3{font-size:16px}
  .reference-letter-group>h2{font-size:16px}
}
@media print{
  .reference-hero{padding:12px 0;background:#fff}
  .reference-hub{padding-top:6px}
  .reference-controls,.reference-alphabet,.reference-directory-status,.state-hub-actions,.reference-extras,.reference-card-links,.reference-hub>.record-disclaimer{display:none!important}
  .reference-directory-grid{grid-template-columns:1fr}
  .reference-card{padding:11px;break-inside:avoid;box-shadow:none}
  .reference-letter-group>h2{margin:6px 0}
}