/* Practice tab and Travel Kit */

.page-title { font-size: var(--step-4); margin: var(--s-2) 0 var(--s-4); }

/* Segmented sections */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; margin-bottom: var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.seg__item {
  display: grid; place-items: center;
  min-height: 42px; padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 800;
}
.seg__item[aria-current="page"] { background: var(--surface); color: var(--coral-ink); box-shadow: 0 2px 0 var(--border); }

/* Filter chips */
.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding: 2px 2px var(--s-3); margin-bottom: var(--s-2); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-btn {
  --c: var(--coral);
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 14px;
  border: 2px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2);
  font-weight: 700; font-size: .92rem;
}
.chip-btn[aria-pressed="true"] { border-color: var(--c); background: color-mix(in oklab, var(--c) 14%, var(--surface)); color: color-mix(in oklab, var(--c) var(--tint), var(--text)); }

/* Search */
.search {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 50px; padding: 0 14px; margin-bottom: var(--s-3);
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.search:focus-within { border-color: var(--lagoon); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 22%, transparent); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1rem; min-height: 46px; }

/* Empty states */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); }
.empty h2 { margin: 0; font-size: var(--step-2); }
.empty p { margin: 0; max-width: 40ch; }

/* ---------- Review hub ---------- */
.review-hub {
  display: grid; justify-items: center; text-align: center;
  padding: var(--s-5); margin-bottom: var(--s-4);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--bougainvillea), color-mix(in oklab, var(--bougainvillea) 70%, var(--twilight)));
  color: #fff;
  box-shadow: 0 var(--lip) 0 color-mix(in oklab, var(--bougainvillea) 70%, black);
}
.review-hub__count { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 4rem; line-height: 1; }
.review-hub__label { margin: 0 0 var(--s-4); font-weight: 700; opacity: .92; }
.review-hub__done { margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); }
.review-hub__start { --c: #fff; --ink: #C42470; --lip-c: rgb(0 0 0 / .18); max-width: 360px; }
.practice__note { margin: var(--s-4) auto 0; text-align: center; color: var(--text-2); font-size: .92rem; max-width: 52ch; }

/* ---------- Review session ---------- */
.lp--review .lp__body { display: grid; align-content: center; }
.flash {
  display: grid; justify-items: center; text-align: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
  border: 2px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--border);
}
.flash__side { margin: 0; font-weight: 800; font-size: .8rem; color: var(--pink-ink); }
.flash__side--en { color: var(--cactus-ink); }
.flash__es { margin: 0; font-size: var(--step-4); line-height: 1.15; outline: none; }
.flash .pron { margin: 0 0 var(--s-2); }
.flash__rule { width: 60%; border: 0; border-top: 2px dashed var(--border); margin: var(--s-3) 0; }
.flash__en { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); animation: q-in 220ms var(--ease-out); }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
.grade { display: grid; gap: 0; min-height: 58px; padding: 6px 4px; }
.grade small { font-family: var(--font-body); font-weight: 600; font-size: .72rem; opacity: .9; }

/* ---------- Role-play list ---------- */
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.rp {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--border-light); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: 0 3px 0 var(--border-light);
}
.rp:hover { border-color: color-mix(in oklab, var(--c) 40%, var(--border)); }
.rp:active { transform: translateY(2px); box-shadow: none; }
.rp__icon {
  flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: var(--r-sm);
  background: var(--c); font-size: 1.6rem;
  box-shadow: 0 3px 0 color-mix(in oklab, var(--c) 70%, black);
}
.rp__text { display: grid; gap: 2px; min-width: 0; }
.rp__text strong { font-family: var(--font-display); font-size: 1.1rem; }
.rp__done { color: var(--cactus-ink); }
.rp__desc { color: var(--text-2); font-size: .92rem; }
.rp__meta { color: color-mix(in oklab, var(--c) var(--tint), var(--text)); font-weight: 700; font-size: .8rem; }

/* ---------- Phrase rows ---------- */
.phrase-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.phrase {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border: 2px solid var(--border-light); border-radius: var(--r-md);
  background: var(--surface);
}
.phrase__text { flex: 1; min-width: 0; }
.phrase__text p { margin: 0; }
.phrase__es { font-size: 1.1rem; }
.phrase__en { color: var(--text-2); font-size: .92rem; }
.phrase .pron { font-size: .78rem; }
.phrase__actions { display: flex; gap: 4px; }
.phrase__actions .icon-btn { --c: transparent; width: 40px; height: 40px; color: var(--text-muted); font-size: 1.25rem; }
.phrase__star.is-on { color: var(--sunny); }

/* ---------- Travel Kit ---------- */
.kit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.kit > .page-title { margin-bottom: 0; }
.kit-intro { display: flex; align-items: center; gap: var(--s-3); }
.kit-intro p { margin: 0; color: var(--text-2); }
.kit-intro svg { width: 18px; height: 18px; display: inline; vertical-align: -3px; }
.kit .search { margin: 0; }
[data-kit-body] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.kit-head { margin-bottom: var(--s-3); }
.kit-head h2 { margin: 0; font-size: var(--step-2); }
.kit-head p { margin: 0; color: var(--text-2); font-size: .92rem; }

.app-only { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .app-only { grid-template-columns: 1fr 1fr; } }
.app-only__card {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); padding-top: var(--s-5);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--c) var(--shade), black); color: #fff; text-decoration: none;
  box-shadow: 0 var(--lip) 0 color-mix(in oklab, var(--c) 60%, black);
}
.app-only__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: rgb(255 255 255 / .2); font-size: 2rem; }
.app-only__text { display: grid; gap: 2px; }
.app-only__text strong { font-family: var(--font-display); font-size: 1.2rem; }
.app-only__text span { font-size: .9rem; }
.app-only__badge {
  position: absolute; top: 10px; right: 12px;
  padding: 2px 10px; border-radius: var(--r-pill);
  background: rgb(0 0 0 / .22); font-weight: 800; font-size: .72rem;
}

.show-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: var(--s-3); overflow-x: auto; padding: 2px 2px var(--s-3); }
.show-tile { position: relative; min-height: 170px; }
.show-tile__main {
  display: grid; align-content: start; gap: 4px;
  width: 100%; height: 100%; padding: var(--s-4); padding-right: 44px;
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-align: left;
  box-shadow: 0 4px 0 var(--border);
}
.show-tile__main:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
.show-tile__emoji { font-size: 1.8rem; }
.show-tile__main strong { font-family: var(--font-display); font-size: 1.05rem; }
.show-tile__es { font-size: .9rem; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.show-tile__todo { font-size: .78rem; font-weight: 700; color: var(--coral-ink); }
.show-tile__edit { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; font-size: 1rem; }
.show-tile--new {
  display: grid; place-items: center; align-content: center; gap: 4px;
  border: 2px dashed color-mix(in oklab, var(--coral) 45%, var(--border)); border-radius: var(--r-md);
  background: color-mix(in oklab, var(--coral) 5%, var(--surface)); color: var(--coral-ink);
  font-size: 2rem;
}
.show-tile--new strong { font-size: 1rem; }

.situations { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
.situation {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border: 2px solid var(--border-light); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: 0 3px 0 var(--border-light);
}
.situation:hover { border-color: color-mix(in oklab, var(--c) 45%, var(--border)); }
.situation > span:last-child { display: grid; }
.situation strong { font-family: var(--font-display); }
.situation > span:last-child > span { color: var(--text-muted); font-size: .8rem; }
.situation__icon {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--c) 18%, var(--surface));
  font-size: 1.4rem;
}

.saved-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border: 2px solid color-mix(in oklab, var(--sunny) 45%, var(--border-light)); border-radius: var(--r-md);
  background: color-mix(in oklab, var(--sunny) 8%, var(--surface)); color: inherit; text-decoration: none;
}
.saved-link > span:nth-child(2) { flex: 1; display: grid; }
.saved-link > span:nth-child(2) > span { color: var(--text-2); font-size: .88rem; }
.saved-link__icon { font-size: 1.6rem; color: var(--sunny); }

.back-link { color: var(--link); font-weight: 700; text-decoration: none; }
.sit-head { display: flex; align-items: center; gap: var(--s-3); }
.sit-head h1 { margin: 0; font-size: var(--step-4); }
.sit-head p { margin: 0; }
.sit-head .situation__icon { width: 60px; height: 60px; font-size: 2rem; }

/* Card editor */
.field textarea {
  padding: 10px 14px; min-height: 0; resize: vertical;
  border-radius: var(--r-sm); border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 500;
}
.field textarea[lang="es"] { font-family: var(--font-display); font-size: 1.1rem; }
.emoji-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-pick legend { font-weight: 700; margin-bottom: 6px; }
.emoji-pick label { position: relative; }
.emoji-pick input { position: absolute; opacity: 0; }
.emoji-pick span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--border); border-radius: var(--r-sm); font-size: 1.3rem; cursor: pointer; }
.emoji-pick input:checked + span { border-color: var(--coral); background: color-mix(in oklab, var(--coral) 12%, var(--surface)); }
.emoji-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Full-screen show card ---------- */
.modal.modal--show.modal--show { max-width: 100vw; width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; }
.modal--show .modal__sheet.modal__sheet { height: 100%; max-height: none; border-radius: 0; box-shadow: none; padding-bottom: 0; }
.modal--show .modal__body { height: 100%; padding: 0; }
.showcard {
  height: 100%;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s-4);
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom));
  background: var(--surface);
}
.showcard__top { display: flex; justify-content: space-between; align-items: center; }
.showcard__title { margin: 0; font-weight: 800; color: var(--text-2); }
.showcard__es { align-self: center; margin: 0; text-align: center; font-size: clamp(2rem, 7vw, 4.5rem); line-height: 1.15; overflow-wrap: anywhere; }
.showcard__en { margin: 0; text-align: center; color: var(--text-2); font-size: var(--step-1); }
.showcard__actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.showcard__actions svg { width: 22px; height: 22px; }

@media (max-width: 420px) {
  .grades { grid-template-columns: repeat(2, 1fr); }
  .flash__es { font-size: var(--step-3); }
}