.jjklf {
  --jjklf-blue: #173b62;
  --jjklf-accent: #df5b27;
  --jjklf-border: #d8dee6;
  max-width: 920px;
  margin: 2rem auto;
  color: #1f2933;
  font-family: inherit;
}

.jjklf__form label { display: block; margin-bottom: .45rem; font-weight: 700; }
.jjklf__input-row { display: flex; gap: .65rem; }
.jjklf__input-row input { flex: 1; min-width: 0; padding: .8rem .9rem; border: 1px solid #9aa7b5; border-radius: 4px; font: inherit; }
.jjklf__input-row button { padding: .8rem 1.25rem; border: 0; border-radius: 4px; background: var(--jjklf-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.jjklf__input-row button:disabled { cursor: wait; opacity: .7; }
.jjklf__input-row input:focus, .jjklf__input-row button:focus { outline: 3px solid rgba(23, 59, 98, .25); outline-offset: 2px; }
.jjklf__status { min-height: 1.5em; margin: 1rem 0; font-weight: 700; }
.jjklf-map { overflow: hidden; margin: 0 0 1.25rem; border: 1px solid var(--jjklf-border); border-radius: 7px; background: #fff; box-shadow: 0 2px 8px rgba(20, 38, 55, .07); }
.jjklf-map[hidden] { display: none; }
.jjklf-map__canvas { width: 100%; height: 360px; background: #e8eef4; }
.jjklf-map__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; padding: .75rem 1rem; font-size: .88rem; }
.jjklf-map__legend div { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.jjklf-map__legend i { width: .75rem; height: .75rem; flex: 0 0 .75rem; border-radius: 50%; }
.jjklf-map__status { padding: 0 1rem .75rem; color: #8a2d0b; }
.jjklf__results { display: grid; gap: 1rem; }
.jjklf-card { position: relative; display: grid; grid-template-columns: 3rem 1fr; overflow: hidden; border: 1px solid var(--jjklf-border); border-radius: 7px; background: #fff; box-shadow: 0 2px 8px rgba(20, 38, 55, .07); }
.jjklf-card__rank { display: grid; place-items: start center; padding-top: 1.15rem; background: var(--jjklf-blue); color: #fff; font-size: 1.25rem; font-weight: 800; }
.jjklf-card__body { padding: 1rem 1.15rem 1.15rem; }
.jjklf-card__eyebrow { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.jjklf-card__eyebrow span { padding: .2rem .45rem; border-radius: 999px; background: #e8eef4; color: var(--jjklf-blue); font-size: .75rem; font-weight: 700; }
.jjklf-card h3 { margin: 0 0 .35rem; color: var(--jjklf-blue); font-size: 1.25rem; }
.jjklf-card address { margin: 0 0 .6rem; font-style: normal; }
.jjklf-card__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin: .85rem 0; }
.jjklf-card__detail strong, .jjklf-card__notes strong { display: block; margin-bottom: .12rem; color: #52616f; font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; }
.jjklf-card__contact a { overflow-wrap: anywhere; }
.jjklf-card__notes { margin: .8rem 0; padding: .65rem .75rem; border-left: 3px solid var(--jjklf-accent); background: #fff8f4; }
.jjklf-note-form textarea { box-sizing: border-box; width: 100%; margin-top: .35rem; padding: .55rem; border: 1px solid #aeb8c2; border-radius: 4px; resize: vertical; font: inherit; }
.jjklf-note-form__actions { display: flex; align-items: end; gap: .55rem; margin-top: .55rem; }
.jjklf-note-form__actions label { flex: 1; color: #52616f; font-size: .78rem; font-weight: 700; }
.jjklf-note-form__actions label span { display: block; margin-bottom: .2rem; }
.jjklf-note-form__actions input { box-sizing: border-box; width: 100%; padding: .5rem; border: 1px solid #aeb8c2; border-radius: 4px; font: inherit; }
.jjklf-note-form__actions button { padding: .55rem .8rem; border: 0; border-radius: 4px; background: var(--jjklf-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.jjklf-note-form__actions button:disabled { cursor: wait; opacity: .7; }
.jjklf-note-form__status { min-height: 1.25em; margin-top: .35rem; font-size: .85rem; font-weight: 700; }
.jjklf-card__distances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0 1rem; }
.jjklf-card__distances div { padding: .6rem; border-radius: 4px; background: #f1f4f7; }
.jjklf-card__distances dt { font-size: .78rem; color: #52616f; }
.jjklf-card__distances dd { margin: .2rem 0 0; font-weight: 800; }
.jjklf-card__directions { display: inline-block; padding: .55rem .8rem; border-radius: 4px; background: var(--jjklf-blue); color: #fff !important; text-decoration: none; font-weight: 700; }

@media (max-width: 580px) {
  .jjklf__input-row { align-items: stretch; flex-direction: column; }
	.jjklf-card__contact { grid-template-columns: 1fr; }
  .jjklf-card__distances { grid-template-columns: 1fr; }
	.jjklf-map__canvas { height: 300px; }
	.jjklf-map__legend { grid-template-columns: 1fr; }
	.jjklf-note-form__actions { align-items: stretch; flex-direction: column; }
}