/* /udhetim, "Për udhëtim". Loaded after static/phrasebook.css, whose rows, buttons, emergency box and Show stage it
   reuses. Here the Albanian (what the traveller means) is the large line and the other person's language sits
   beneath it; the language switch sits above the tools; the reply board is a grid of large cards the other person
   taps. Strict CSP: no inline style; the script only toggles attributes and classes. */

/* ── The other person's language ── */
.ud-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 4px; }
.ud-langs-label { font: 500 15px/1.3 var(--ui); color: var(--navy-2); }
.ud-langs-opts { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mist); }
.ud-langs-opts button { min-height: 48px; min-width: 104px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
  font: 600 16px/1 var(--ui); color: var(--navy); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.ud-langs-opts button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.ud-langs[hidden] { display: none; }

/* ── A sentence: the Albanian first and large, the other language beneath ── */
.ud .ud-sq { font: 400 clamp(26px, 3vw, 34px)/1.12 var(--display); letter-spacing: -0.012em; color: var(--navy); text-wrap: balance; overflow-wrap: anywhere; }
.ud .ud-tx { margin-top: 8px !important; font: 500 17px/1.4 var(--ui); color: var(--cobalt); overflow-wrap: anywhere; }
.ud[data-status="draft"] .ud-sq::after { content: " · draft"; font: 500 14px var(--ui); color: var(--gold); }

.ud-sos-where { margin: 0 0 10px; font: 500 15px/1.4 var(--ui); color: var(--navy-2); }

/* Without script: each section's replies as a list */
.ud-replies { margin: 18px 0 0; font: 400 16px/1.5 var(--ui); color: var(--navy-2); }
.ud-replies summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--navy); }
.ud-replies ul { margin: 6px 0 0; padding-left: 20px; }
.ud-answer { margin-top: 18px; }

/* ── Show: the other language large, the Albanian beneath ── */
.ud-stage-tx { color: var(--navy); }
.ud-stage-sq { font-style: normal; }

/* ── The reply board: large cards the other person taps; then the answer, in Albanian, for the traveller ── */
.ud-board[open] { grid-template-rows: 1fr auto; }
.ud-board-pick, .ud-board-ans { align-self: center; overflow: auto; max-height: 100%; }
.ud-board-pick[hidden], .ud-board-ans[hidden] { display: none; }
.ud-board-head { margin: 0 0 18px; font: 500 clamp(19px, 2.4vw, 24px)/1.35 var(--ui); color: var(--navy-2); text-align: center; text-wrap: balance; }
.ud-board-head[hidden] { display: none; }
.ud-board-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ud-reply { width: 100%; min-height: 64px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff;
  font: 500 clamp(18px, 2.2vw, 22px)/1.3 var(--ui); color: var(--navy); text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); }
.ud-reply:hover { border-color: var(--navy); }
.ud-reply:active { transform: scale(.98); background: var(--mist); }
.ud-ans-label { margin: 0 0 6px; font: 600 15px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-align: center; }
.ud-ans-sq { margin: 0; }
.ud-ans-tx { margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) { .ud-langs-opts button, .ud-reply { transition: none; } }