/* ============================================================
   KULTTUURI OPAS — COMPONENTS  (B04.2)
   Card (grid/row/tray) · KindLabel · LangTag · NoImageBlock ·
   Free/On-tonight badges. Built on tokens.css. Faithful to the
   Claude Design handoff component spec.
============================================================ */

/* ---- Grid ---- */
.kt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kt-s-3);
  padding: var(--kt-s-4);
}
@media (min-width: 640px) { .kt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .kt-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Card (base) ---- */
.kt-card {
  position: relative;
  background: var(--kt-card);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-3);
  box-shadow: var(--kt-shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--kt-dur) var(--kt-ease),
              border-color var(--kt-dur) var(--kt-ease),
              order var(--kt-dur-slow) var(--kt-ease);
}
.kt-card__media {
  position: relative;
  height: 140px;
  background: var(--kt-sand);
  overflow: hidden;
}
.kt-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-card__body { padding: var(--kt-s-3) var(--kt-s-3) var(--kt-s-4); display: flex; flex-direction: column; gap: var(--kt-s-1); flex: 1; }
.kt-card__title {
  font-size: var(--kt-fs-card); font-weight: 600; letter-spacing: -0.2px;
  line-height: var(--kt-lh-tight); color: var(--kt-ink-900); margin: 0;
}
.kt-card__desc {
  font-size: var(--kt-fs-small); color: var(--kt-ink-500); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kt-card__meta {
  margin-top: auto; padding-top: var(--kt-s-2);
  font-size: var(--kt-fs-meta); color: var(--kt-ink-500);
  display: flex; gap: var(--kt-s-2); flex-wrap: wrap; align-items: center;
}
.kt-card__meta .dot { color: var(--kt-ink-300); }

/* ---- Highlighted (concierge pick) ---- */
.kt-card.is-pick {
  border-color: var(--kt-berry-500);
  box-shadow: 0 0 0 3px var(--kt-berry-050), var(--kt-shadow-2);
}
.kt-card.is-new { animation: kt-pop var(--kt-dur-slow) var(--kt-ease); }
@keyframes kt-pop { from { transform: scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---- Relay (a mention, not a curated pick) — softer, labelled ---- */
.kt-card.is-relay { border-style: dashed; border-color: var(--kt-cobalt-100); }
.kt-relaytag {
  position: absolute; top: var(--kt-s-2); right: var(--kt-s-2); z-index: 2;
  font-size: var(--kt-fs-mini); padding: 2px 6px; border-radius: var(--kt-r-pill);
  background: var(--kt-cobalt-050); color: var(--kt-cobalt-700); border: 1px solid var(--kt-cobalt-100);
}

/* ---- KindLabel (mono pill, kind-coloured glyph) ---- */
.kt-kind {
  position: absolute; top: var(--kt-s-2); left: var(--kt-s-2); z-index: 2;
  font-size: var(--kt-fs-mini); padding: 2px 7px; border-radius: var(--kt-r-pill);
  background: rgba(255,255,255,.92); border: 1px solid var(--kt-line);
  display: inline-flex; align-items: center; gap: 4px;
}
.kt-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ink-300); }
.kt-kind[data-kind="event"]::before   { background: var(--kt-kind-event); }
.kt-kind[data-kind="venue"]::before   { background: var(--kt-kind-venue); }
.kt-kind[data-kind="service"]::before { background: var(--kt-kind-service); }

/* ---- Badges ---- */
.kt-badge { font-size: var(--kt-fs-micro); font-weight: 600; padding: 2px 7px; border-radius: var(--kt-r-pill); }
.kt-badge--free   { background: var(--kt-leaf-050); color: var(--kt-leaf-500); }
.kt-badge--tonight {
  position: absolute; top: var(--kt-s-2); right: var(--kt-s-2); z-index: 2;
  background: var(--kt-sun-500); color: var(--kt-ink-900);
  font-family: var(--kt-font-mono); letter-spacing: .04em;
}

/* ---- LangTag (content shown in a fallback language) ---- */
.kt-langtag {
  font-family: var(--kt-font-mono); font-size: 9px; padding: 0 5px;
  background: var(--kt-cobalt-050); color: var(--kt-cobalt-700);
  border: 1px solid var(--kt-cobalt-100); border-radius: var(--kt-r-1);
  vertical-align: middle; margin-right: 4px; text-transform: uppercase;
}

/* ---- NoImageBlock (hatched, kind-tinted) ---- */
.kt-noimg { position: absolute; inset: 0; overflow: hidden; }
.kt-noimg__hatch { position: absolute; inset: 0; opacity: .14; }
.kt-noimg__initial {
  position: absolute; left: var(--kt-s-3); bottom: var(--kt-s-2);
  font-family: var(--kt-font-mono); font-size: 40px; font-weight: 600; color: var(--kt-ink-700); opacity: .55;
}
.kt-noimg__hood {
  position: absolute; right: var(--kt-s-3); bottom: var(--kt-s-3);
  font-family: var(--kt-font-mono); font-size: var(--kt-fs-mini); color: var(--kt-ink-500);
}
.kt-noimg[data-kind="event"]   { background: #e8f1fb; }
.kt-noimg[data-kind="venue"]   { background: #efeafb; }
.kt-noimg[data-kind="service"] { background: var(--kt-leaf-050); }

/* ---- Row layout (itinerary / list) ---- */
.kt-card--row { flex-direction: row; }
.kt-card--row .kt-card__media { width: 88px; height: 88px; flex: 0 0 88px; }
.kt-card--row .kt-card__body  { padding: var(--kt-s-2) var(--kt-s-3); }
.kt-card--row .kt-card__title { font-size: 15px; }

/* ---- Tray layout (concierge picks strip) ---- */
.kt-card--tray { width: 132px; flex: 0 0 132px; }
.kt-card--tray .kt-card__media { height: 80px; }
.kt-card--tray .kt-card__title { font-size: var(--kt-fs-small); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.kt-card--tray .kt-card__desc, .kt-card--tray .kt-card__meta { display: none; }
.kt-card--tray .kt-card__hood { font-size: var(--kt-fs-mini); color: var(--kt-ink-500); }

/* ---- Empty / dimmed (unmatched during re-curation) ---- */
.kt-card.is-dimmed { opacity: .35; }
.kt-card { cursor: pointer; }

/* ============================================================
   CONCIERGE SHEET (B04.4) — Sheet + Picks Tray + Thinking phases
============================================================ */
.kt-backdrop { position: fixed; inset: 0; background: var(--kt-overlay); z-index: 25; }
.kt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--sheet-h, 62vh); max-height: 92vh; min-height: 30vh;
  background: var(--kt-card); border-radius: var(--kt-r-4) var(--kt-r-4) 0 0;
  box-shadow: var(--kt-shadow-3); display: flex; flex-direction: column;
}
.kt-sheet__handle { padding: 10px 0 6px; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.kt-sheet__handle::before { content: ""; width: 38px; height: 4px; border-radius: 2px; background: var(--kt-line); }
.kt-sheet__scroll { overflow-y: auto; padding: 0 var(--kt-s-4) var(--kt-s-4); flex: 1; }
.kt-sheet__head { display:flex; align-items:center; gap:var(--kt-s-2); padding: 0 0 var(--kt-s-2); }
.kt-sheet__avatar { width:26px; height:26px; border-radius:50%; background:var(--kt-berry-050); color:var(--kt-berry-500); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.kt-sheet__close { margin-left:auto; }

/* picks tray (pinned at top of sheet) */
.kt-tray { position: sticky; top: 0; background: var(--kt-card); padding: var(--kt-s-2) 0 var(--kt-s-3); z-index: 2; }
.kt-tray__label { font: 600 var(--kt-fs-meta)/1 var(--kt-font-mono); color: var(--kt-berry-500); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--kt-s-2); }
.kt-tray__strip { display: flex; gap: var(--kt-s-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kt-tray__strip::-webkit-scrollbar { display: none; }
.kt-tray__strip:empty::after { content: "—"; color: var(--kt-ink-300); }

/* thinking phases checklist */
.kt-phases { list-style: none; margin: 0 0 var(--kt-s-3); padding: 0; }
.kt-phases li { display: flex; align-items: center; gap: var(--kt-s-2); padding: 4px 0; color: var(--kt-ink-400); font-size: var(--kt-fs-small); }
.kt-phases .mark { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--kt-line); flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.kt-phases li.active { color: var(--kt-ink-900); font-weight: 600; }
.kt-phases li.active .mark { border-color: var(--kt-berry-500); position: relative; }
.kt-phases li.active .mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kt-berry-500); animation: kt-pulse 1s var(--kt-ease) infinite; }
.kt-phases li.done { color: var(--kt-ink-500); }
.kt-phases li.done .mark { background: var(--kt-berry-500); border-color: var(--kt-berry-500); }
@keyframes kt-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce){ .kt-phases li.active .mark::after { animation: none; } }

.kt-bubble { max-width: 94%; padding: var(--kt-s-3); border-radius: 4px var(--kt-r-4) var(--kt-r-4) var(--kt-r-4);
  background: var(--kt-card); border: 1px solid var(--kt-line); box-shadow: var(--kt-shadow-1);
  line-height: var(--kt-lh-body); white-space: pre-wrap; }
.kt-bubble strong { font-weight: 600; }

/* ============================================================
   DETAIL SHEET + PLAN (B04.5)
============================================================ */
.kt-overlay-full { position: fixed; inset: 0; z-index: 40; background: var(--kt-paper); display: flex; flex-direction: column; overflow-y: auto; }
.kt-ov__bar { position: sticky; top: 0; z-index: 2; background: var(--kt-paper); display: flex; align-items: center; gap: var(--kt-s-3); padding: var(--kt-s-3) var(--kt-s-4); border-bottom: 1px solid var(--kt-line); }
.kt-ov__bar .title { font-weight: 600; }
.kt-ov__bar .spacer { flex: 1; }
.kt-detail__hero { height: 200px; background: var(--kt-sand); position: relative; flex: 0 0 200px; }
.kt-detail__hero img { width: 100%; height: 100%; object-fit: cover; }
.kt-detail__body { padding: var(--kt-s-4); flex: 1; }
.kt-detail__title { font-size: var(--kt-fs-title); font-weight: 600; letter-spacing: -.4px; margin: 0 0 var(--kt-s-2); }
.kt-detail__desc { color: var(--kt-ink-700); line-height: var(--kt-lh-body); }
.kt-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--kt-s-2) var(--kt-s-4); margin: var(--kt-s-5) 0; font-size: var(--kt-fs-small); }
.kt-facts dt { font: 500 var(--kt-fs-micro)/1.5 var(--kt-font-mono); color: var(--kt-ink-500); text-transform: uppercase; }
.kt-facts dd { margin: 0; }
.kt-map { height: 140px; background: var(--kt-sand); border-radius: var(--kt-r-3); display: flex; align-items: flex-end; padding: var(--kt-s-3); margin: var(--kt-s-4) 0; }
.kt-cta { position: sticky; bottom: 0; display: flex; gap: var(--kt-s-2); padding: var(--kt-s-3) var(--kt-s-4) calc(var(--kt-s-4) + env(safe-area-inset-bottom)); background: var(--kt-paper); border-top: 1px solid var(--kt-line); }
.kt-btn { min-height: 48px; flex: 1; border-radius: var(--kt-r-pill); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 var(--kt-s-4); }
.kt-btn--primary { background: var(--kt-cobalt-700); color: #fff; }
.kt-btn--primary.in-plan { background: var(--kt-leaf-500); }
.kt-btn--ghost { border: 1px solid var(--kt-line); background: var(--kt-card); }

.kt-fab { width: 48px; height: 48px; border-radius: var(--kt-r-3); background: var(--kt-cobalt-700); color: #fff; position: relative; flex: 0 0 48px; box-shadow: var(--kt-shadow-2); font-size: 18px; }
.kt-fab__count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: var(--kt-r-pill); background: var(--kt-sun-500); color: var(--kt-ink-900); font: 600 var(--kt-fs-mini)/20px var(--kt-font-mono); text-align: center; padding: 0 4px; }
/* gentle "your day plan is ready" cue — replaces the old jarring auto-open */
.kt-fab.is-fresh { animation: kt-fab-pulse 1.5s var(--kt-ease) 3; }
@keyframes kt-fab-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,69,90,.55); } 50% { box-shadow: 0 0 0 7px rgba(200,69,90,0); } }
.kt-plan__group { padding: var(--kt-s-2) var(--kt-s-4); }
.kt-plan__day { font: 600 var(--kt-fs-meta)/1 var(--kt-font-mono); color: var(--kt-ink-500); text-transform: uppercase; margin: var(--kt-s-3) 0 var(--kt-s-2); }
.kt-plan__row { display: flex; align-items: center; gap: var(--kt-s-2); }
.kt-plan__row .kt-card { flex: 1; }
.kt-plan__rm { width: 36px; height: 36px; color: var(--kt-ink-400); flex: 0 0 36px; }
.kt-plan__empty { text-align: center; color: var(--kt-ink-400); padding: var(--kt-s-12) var(--kt-s-4); }

/* B05.5 — plan-my-day timeline: time rail + conflict flags */
.kt-plan__warn { margin: var(--kt-s-3) var(--kt-s-4) 0; padding: var(--kt-s-2) var(--kt-s-3);
  background: var(--kt-berry-050); color: var(--kt-berry-700);
  border-radius: var(--kt-s-2); font: 600 var(--kt-fs-meta)/1.3 var(--kt-font-mono); }
.kt-plan__time { flex: 0 0 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: 600 var(--kt-fs-meta)/1.1 var(--kt-font-mono); color: var(--kt-ink-700); }
.kt-plan__flex { color: var(--kt-ink-400); font-weight: 500; }
.kt-plan__clash { color: var(--kt-berry-700); background: var(--kt-berry-050);
  padding: 1px 5px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.kt-plan__row.is-clash { border-left: 3px solid var(--kt-berry-500); padding-left: var(--kt-s-2);
  margin-left: calc(-1 * var(--kt-s-2)); }