/* basket.css — מדד הצלחת הישראלית (prefix: bk-)
   A fixed basket of real published dish-medians, summed into one plate
   figure — in the spirit of The Economist's Big Mac Index. Warm paper,
   one accent, hairlines. 100% computed live from DISH_IDX; nothing here
   styles invented data — partial baskets are drawn as partial on purpose. */

/* ---- header emblem (micrography medallion) ---- */
.bk-emblem{width:96px;height:96px;margin:0 auto 6px}
.bk-emblem svg{display:block;width:100%;height:100%}

/* ---- the headline plate ---- */
.bk-hero{
  text-align:center;padding:14px 0 30px;max-width:680px;margin:0 auto;
  border-bottom:1px solid var(--faint);
}
.bk-heronum{
  font-size:clamp(76px,16vw,132px);font-weight:900;line-height:1;color:var(--acc);
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
}
.bk-herolbl{font-size:16px;letter-spacing:2px;color:var(--ink);margin-top:8px}
.bk-herosub{font-size:13.5px;color:var(--soft);margin-top:10px;font-weight:300;line-height:1.8}
.bk-herosub b{color:var(--ink);font-weight:700}

/* ---- the basket breakdown: the plate, itemised ---- */
.bk-breakdown{max-width:560px;margin:26px auto 0}
.bk-brow{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;
  padding:12px 6px;border-bottom:var(--hair2);
  cursor:pointer;text-decoration:none;color:inherit;
  transition:background .2s;
}
.bk-brow:hover,
.bk-brow:focus-visible{background:var(--wash)}
.bk-bink{width:34px;height:34px;color:var(--soft2)}
.bk-bink svg{display:block;width:100%;height:100%}
.bk-bname{font-size:17px;font-weight:700;line-height:1.3}
.bk-bmeta{font-size:11.5px;color:var(--soft);font-weight:300;margin-top:1px;letter-spacing:.3px}
.bk-bprice{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.bk-btot{
  display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:14px;
  padding:16px 6px 4px;margin-top:2px;border-top:var(--rule);
}
.bk-btotlbl{grid-column:1 / 3;font-size:13px;letter-spacing:3px;font-weight:700}
.bk-btotnum{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--acc)}

/* the dropped-dish footnote — honesty: what the basket WANTED but couldn't include */
.bk-dropped{
  max-width:560px;margin:12px auto 0;font-size:12px;color:var(--soft);
  font-weight:300;line-height:1.75;text-align:center;
  border:var(--hair);border-style:dashed;padding:9px 16px;background:var(--faint2);
}
.bk-dropped b{color:var(--ink);font-weight:700}

/* ---- section headers (shared idiom with hummus) ---- */
.bk-h{font-size:14px;letter-spacing:4px;font-weight:700;margin:44px 0 8px;text-align:center;line-height:1.5}
.bk-sub{text-align:center;font-size:13px;color:var(--soft);font-weight:300;margin-bottom:20px;max-width:600px;margin-inline:auto;line-height:1.8}

/* ---- per-city ranked bars ---- */
.bk-cities{max-width:660px;margin:0 auto}
.bk-crow{
  display:grid;grid-template-columns:104px 1fr 66px auto;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px solid var(--faint2);
  cursor:pointer;text-decoration:none;color:inherit;transition:background .2s;
}
.bk-crow:hover,
.bk-crow:focus-visible{background:var(--wash)}
.bk-city{font-size:15.5px;font-weight:700;line-height:1.3;overflow-wrap:break-word}
.bk-bar{height:11px;background:var(--faint2);position:relative;border-radius:2px}
.bk-bar i{position:absolute;right:0;top:0;bottom:0;background:var(--acc);border-radius:2px;opacity:.85}
.bk-cval{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;text-align:left}
.bk-ccov{font-size:11px;color:var(--soft);white-space:nowrap;font-weight:300;letter-spacing:.3px}

/* partial baskets read as partial — muted bar + amber-honest coverage tag */
.bk-crow.bk-partial .bk-bar i{opacity:.4;background:var(--soft2)}
.bk-crow.bk-partial .bk-city{color:var(--soft)}
.bk-crow.bk-partial .bk-ccov{color:var(--bad)}

/* the sparse cities — named, but explicitly below the comparison line */
.bk-sparse{
  max-width:660px;margin:16px auto 0;text-align:center;
  font-size:12.5px;color:var(--soft);font-weight:300;line-height:1.85;
}
.bk-sparse b{color:var(--ink);font-weight:700}
.bk-sparse .bk-sparsehd{font-size:10.5px;letter-spacing:2px;color:var(--acc);margin-bottom:5px;font-weight:500}

/* ---- methodology + citation (shared idiom with hummus) ---- */
.bk-method{max-width:680px;margin:44px auto 0}
.bk-method p{font-size:15.5px;line-height:1.9;font-weight:300}
.bk-method p b{font-weight:700}
.bk-method p + p{margin-top:12px}
.bk-cite{
  background:var(--faint2);padding:16px 20px;margin-top:16px;font-size:16px;line-height:1.7;
  border-right:2px solid var(--acc);
}
.bk-citetitle{font-size:11px;letter-spacing:2px;color:var(--soft);margin-bottom:4px}

.bk-more{text-align:center;margin:30px auto 0;font-size:14px}
.bk-more a{color:var(--acc);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.bk-more a:hover{border-color:var(--acc)}

/* ---- mobile ---- */
@media(max-width:640px){
  .bk-crow{grid-template-columns:82px 1fr 56px;gap:9px}
  .bk-ccov{display:none}
  .bk-crow.bk-partial .bk-city::after{content:' ·';color:var(--bad)}
  .bk-breakdown .bk-bmeta{letter-spacing:0}
}
@media(max-width:420px){
  .bk-brow{grid-template-columns:28px 1fr auto;gap:10px}
  .bk-bink{width:28px;height:28px}
  .bk-btot{grid-template-columns:28px 1fr auto;gap:10px}
}