/* Trip kit panel (web/js/tripkit.js) and the printable plan (web/tripkit.html). */
.tripkit { color: #f3ebdd; background: rgba(24,20,17,.86); border: 1px solid rgba(243,235,221,.16);
  border-radius: 12px; padding: 16px; display: grid; gap: 10px; font: 15px/1.45 system-ui, sans-serif; }
.tripkit h2 { margin: 0; font-size: 18px; }
.tripkit h3 { margin: 6px 0 0; font-size: 14px; color: var(--accent, #e9a23b); }
.tripkit .tk-row, .tripkit .tk-pick { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; }
.tripkit .tk-picks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tripkit .tk-hint, .tripkit .tk-checked, .tripkit .tk-cover { color: #bfb6a6; font-size: 13px; }
.tripkit .tk-nums { margin: 0; padding-left: 18px; }
.tripkit .tk-nums li { margin: 4px 0; }
.tripkit .tk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tripkit button { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(243,235,221,.16);
  background: #15120f; color: #f3ebdd; cursor: pointer; }
.tripkit button.primary { background: #e9a23b; color: #15120f; border-color: transparent; }
.tripkit a { color: var(--accent, #e9a23b); }

/* the trip plan page (web/tripkit.html): an app page on screen, a clean light A4 sheet in print */
body.tk-page { margin: 0; background: var(--ink); color: var(--cream); font: 400 16px/1.55 var(--font-ui); display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; }
.tk-main { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 24px var(--gutter) 8px; box-sizing: border-box; }
.tk-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; }
.tk-bar .hint { flex: 1 1 260px; margin: 0; font-size: .85rem; color: var(--muted); }
.plan { color: var(--cream); font-family: var(--font-text); }
.plan h1 { margin: 0; font: 600 clamp(2rem, 1.3rem + 3vw, 3rem)/1.05 var(--f-title); letter-spacing: .04em; }
.plan h2 { margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); font: 600 1.3rem/1.15 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--saffron); }
.plan .meta { margin: 6px 0 0; color: var(--muted); font: 400 .9rem/1.5 var(--font-ui); }
.plan .lede { color: var(--muted); font-size: 1.05rem; }
.plan .place { break-inside: avoid; margin: 0 0 12px; padding: 14px 18px; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; }
.plan .place h3 { margin: 0; font: 600 1.15rem/1.3 var(--font-ui); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.plan .place .num { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--saffron); color: var(--on-saffron); font: 600 .85rem var(--font-ui); flex: none; align-self: center; }
.plan .place p { margin: 6px 0 0; }
.plan .ur { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; direction: rtl; font-size: 1.1rem; color: var(--muted); }
.plan .leg { break-inside: avoid; margin: 0 0 12px 14px; padding: 6px 0 6px 18px; border-left: 2px dashed var(--saffron); font: 400 .92rem/1.5 var(--font-ui); }
.plan .leg strong { font-weight: 600; }
.plan .leg .basis { display: block; color: var(--muted); }
.plan .totals { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--saffron); border-radius: 12px; font: 600 1.05rem/1.4 var(--font-ui); }
.plan .totals small { display: block; margin-top: 4px; font: 400 .85rem/1.45 var(--font-ui); color: var(--muted); }
.plan ul { padding-left: 1.2em; margin: 0; }
.plan li { margin: 6px 0; }
.plan a { color: var(--saffron); text-underline-offset: 3px; }
.plan a.btn-app { color: var(--on-saffron); text-decoration: none; }
.plan a.btn-app.ghost { color: var(--cream); }
.plan .sources li a, .plan .emerg a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.plan .sources { font: 400 .85rem/1.5 var(--font-ui); color: var(--muted); }
.plan .empty { padding: 20px 22px; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; }
.plan .empty ol { margin: 10px 0 16px; }
.plan .empty .row { display: flex; flex-wrap: wrap; gap: 10px; }
@media print {
  @page { size: A4; margin: 14mm; }
  html, body.tk-page { background: #fff !important; color: #15120f; display: block; min-height: 0; }
  .no-print { display: none !important; }
  .tk-main { max-width: none; padding: 0; }
  .plan { color: #15120f; font: 10.5pt/1.4 system-ui, "Segoe UI", sans-serif; }
  .plan h1 { font: 700 20pt/1.1 system-ui, sans-serif; letter-spacing: 0; margin: 0 0 2mm; }
  .plan h2 { font: 700 13pt/1.2 system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #15120f; margin: 6mm 0 2mm; border-bottom: 1px solid #999; padding-bottom: 1mm; break-after: avoid; }
  .plan .meta, .plan .lede, .plan .leg .basis, .plan .totals small { color: #444; }
  .plan .place { background: none; border: 0; border-bottom: .5pt solid #ccc; border-radius: 0; padding: 0 0 2mm; margin: 0 0 2.5mm; }
  .plan .place h3 { font-size: 12pt; }
  .plan .place .num { background: #15120f; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan .ur { color: #333; font-size: 12pt; }
  .plan .leg { border-left: 1.5pt dashed #666; margin-left: 4mm; }
  .plan .totals { border: 1.2pt solid #15120f; border-radius: 3mm; font-size: 11.5pt; }
  .plan a { color: inherit; text-decoration: none; }
  .plan .sources { color: #333; font-size: 9pt; }
  .plan .sources li a, .plan .emerg a { min-height: 0; display: inline; }
  .plan .sources a::after { content: ""; }
}
.tk-picks { max-height: 168px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; }