/* Free search — the one-hospital, one-code lookup (2026-10-05).
   Everything shared (buttons, chips, the ruled hero, the KPI sheet)
   comes from styles.css; this file is the form, the receipt and the
   plan ladder. No coloured edge rule on a rounded box anywhere
   (BANNED-ELEMENTS.md #1). */

.lk { padding-bottom: var(--s-7); }

/* ---------- hero ---------- */
.lk-hero { padding: clamp(36px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.lk-hero .mk-title { max-width: 19ch; margin: 0 auto; }
.lk-hero .mk-lead { max-width: 52ch; margin: 16px auto 28px; }
.lk-free {
  display: inline-block; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- the form: one ruled line, four cells ---------- */
.lk-form {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, .9fr) minmax(0, .8fr) auto;
  align-items: stretch;
  max-width: 980px; margin: 0 auto; text-align: left;
  background: var(--pane-strong);
  border: 1.5px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
  /* mk-rise leaves a transform on every hero child, so the form and the
     Try row are separate stacking layers and the later row painted over
     the suggestion lists. Lift the form's layer above its siblings. */
  position: relative; z-index: 5;
}
.lk-field { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 12px 18px 10px; min-width: 0; }
.lk-field + .lk-field { border-left: 1px solid var(--line); }
.lk-field label {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lk-field input, .lk-field select {
  border: none; background: transparent; padding: 4px 0 2px; margin: 0;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink);
  width: 100%; min-width: 0;
}
.lk-field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); font-weight: 500; }
.lk-field input:focus, .lk-field select:focus { outline: none; }
.lk-field:focus-within { background: var(--wash); }
.lk-f-hosp:focus-within { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.lk-f-code input { font-family: var(--font-mono); letter-spacing: .02em; }
.lk-go { margin: 8px; border-radius: var(--r-md); padding: 0 22px; font-size: 15px; }
.lk-go.busy { opacity: .7; }

/* suggestions drop out of the line, under their own cell */
.lk-suggest {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  background: var(--pane-strong); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--elev-3); max-height: 340px; overflow-y: auto;
}
.lk-f-code .lk-suggest { min-width: 220px; }
.lk-suggest li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px;
}
.lk-suggest li b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-suggest li b.mono { font-family: var(--font-mono); }
.lk-suggest li span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lk-suggest li.on, .lk-suggest li:hover { background: var(--wash); }

.lk-try {
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: var(--s-4); font-size: 12px; color: var(--muted);
}
.lk-try > span { margin-right: 2px; }

/* ---------- the receipt ---------- */
.lk-result { max-width: 980px; margin: 0 auto var(--s-6); }
.lk-result:not([hidden]) { animation: lk-in .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes lk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lk-result:not([hidden]) { animation: none; } }

.lk-receipt {
  background: var(--pane-strong);
  border: 1.5px solid var(--ink); border-radius: var(--r-lg);
  overflow: hidden;
}
.lk-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.lk-head h2 { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.02em; margin-top: 8px; }
.lk-stamp {
  display: inline-block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--page); background: var(--ink); padding: 3px 9px; border-radius: var(--r-xs);
}
.lk-place { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.lk-band { flex: none; margin-top: 4px; }

.lk-figure { padding: var(--s-6) var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: 6px; }
.lk-big {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(3rem, 7vw, 4.8rem); letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.lk-big-locked .lockfig { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: .02em; padding: 4px 12px; }
.lk-big-locked .lockfig svg { width: 22px; height: 22px; }
.lk-sub { font-size: 14px; color: var(--text); }
.lk-none { font-size: 15px; color: var(--text); max-width: 60ch; margin-top: 6px; }
.lk-empty .lk-none { padding: var(--s-5) var(--s-6) var(--s-6); margin: 0; }
.lk-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--s-4); }
.lk-cta span { font-size: 12.5px; color: var(--muted); }

/* the range: a track, the median as an ink tick, the ends labelled */
.lk-range { margin-top: var(--s-4); max-width: 560px; }
.lk-track { position: relative; height: 6px; background: var(--wash-deep); border-radius: var(--r-pill); }
.lk-tick {
  position: absolute; top: -5px; width: 3px; height: 16px; margin-left: -1.5px;
  background: var(--ink); border-radius: 2px;
}
.lk-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.lk-ends b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.lk-source {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding: 12px var(--s-6); background: var(--wash);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.lk-source a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.lk-kpis { margin-top: var(--s-4); grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); overflow: hidden; }
/* styles.css spans an odd last tile across the row below 1080px; a
   three-tile sheet keeps its three columns until it stacks */
.lk-kpis > .kpi:last-child { grid-column: auto; }
.lk-kpis .k-value small { font-size: .5em; letter-spacing: 0; margin-left: 1px; }
a.kpi.lk-locked { text-decoration: none; transition: background .25s ease; }
a.kpi.lk-locked:hover { background: var(--wash); }
a.kpi.lk-locked .k-value { font-size: 1.6rem; }
a.kpi.lk-locked:hover .lockfig svg { color: var(--accent); }

.lk-quota { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); font-size: 12.5px; color: var(--muted); }
.lk-meter { width: 90px; height: 4px; border-radius: var(--r-pill); background: var(--wash-deep); position: relative; overflow: hidden; }
.lk-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--used); background: var(--ink); }

.lk-recent { max-width: 980px; margin: 0 auto var(--s-6); }

/* ---------- the plan ladder ---------- */
.lk-ladder { max-width: 980px; margin: clamp(30px, 5vw, 60px) auto 0; }
.lk-ladder-head { text-align: center; margin-bottom: var(--s-5); }
.lk-rungs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden;
}
.lk-rung {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s-5);
  background: var(--pane-strong); text-decoration: none; color: inherit;
  transition: background .3s ease;
}
.lk-rung:hover { background: var(--wash); }
.lk-rung-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.lk-rung-price { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.lk-rung-price i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.lk-rung-what { font-size: 12.5px; color: var(--text); line-height: 1.5; }

@media (max-width: 860px) {
  .lk-form { grid-template-columns: 1fr 1fr; }
  .lk-f-hosp { grid-column: 1 / -1; }
  .lk-field + .lk-field { border-left: none; }
  .lk-f-code { border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
  .lk-f-sys { border-top: 1px solid var(--line); }
  .lk-go { grid-column: 1 / -1; padding: 13px; }
  .lk-f-hosp:focus-within { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .lk-kpis { grid-template-columns: 1fr; }
  .lk-rungs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .lk-rungs { grid-template-columns: 1fr; }
  .lk-head { flex-direction: column; }
  .lk-figure, .lk-head, .lk-source { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* the receipt's outlier callout (2026-10-05): the flag and its reason,
   under the figure it is about; the figure itself stays, one step dimmer */
.lk-ofl {
  display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-3); max-width: 62ch;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--flag-bg);
  font-size: 13px; color: var(--text); line-height: 1.5;
}
.lk-ofl .ofl { margin-left: 0; flex: none; background: var(--page); }
.lk-big.ofl-fig { color: var(--muted); }
.lk-ends .ofl { margin-left: 4px; }