/* /phrasebook, Albanian for a trip. Loaded after static/d.css and static/read.css by templates/phrasebook.html.
   A tool for the moment of use: the Albanian is set large in Instrument Serif (what the visitor says or shows),
   the English above it is the label they look for, and the respelling beneath is how to say it. Find and the
   section chips stay in reach while scrolling; Show fills the screen with the phrase for a driver, a host or a
   shopkeeper. The emergency numbers sit near the top, one tap from a call. Strict CSP: no inline style; the
   script only toggles attributes and classes. */

.pb-hero { background:
  radial-gradient(55% 85% at 92% 0%, #E3EEFA 0%, rgba(227,238,250,0) 70%),
  radial-gradient(45% 70% at 4% 12%, #FFF1D6 0%, rgba(255,241,214,0) 70%); }
.pb-hero .rd-h1 { max-width: 10ch; }

/* ── Find, save, and the sections: one bar that stays in reach ── */
.pb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 8px 0 4px; }
.pb-find { display: grid; gap: 6px; flex: 1 1 280px; min-width: 0; }
.pb-find-label { font: 500 15px/1.3 var(--ui); color: var(--navy-2); }
.pb-find input { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: 400 18px/1 var(--ui); color: var(--navy); -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pb-find input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(27,79,168,.14); }
.pb-find input::placeholder { color: var(--c-placeholder, #5F6B7D); }   /* was 3:1 (design audit D12) */
.pb-find:has(input[hidden]) { display: none; }
.pb-save { align-self: end; min-height: 52px; padding: 0 22px; border: 1px solid var(--navy); border-radius: 999px; background: #fff;
  font: 500 16px/1 var(--ui); color: var(--navy); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.pb-save:hover { background: var(--navy); color: #fff; }
.pb-save[aria-busy="true"] { opacity: .6; cursor: progress; }
/* Woman / Man (static/voice_choice.js, base look in brand.css), sized like the bar's other controls */
.pb-tools .voice-choice { align-self: end; background: #fff; }
.pb-tools .voice-choice button { min-height: 52px; padding: 0 18px; font: 500 16px/1 var(--ui); color: var(--navy); }
.pb-tools .voice-choice button[aria-pressed="true"] { color: #fff; }
.pb-status { flex-basis: 100%; margin: 0; min-height: 1.4em; font: 400 15px/1.4 var(--ui); color: var(--navy-2); }
.pb-status:empty { min-height: 0; }

.pb-cats { position: sticky; top: 64px; z-index: 30; display: flex; gap: 8px; margin: 12px -16px 0; padding: 12px 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line); }
.pb-cats::-webkit-scrollbar { display: none; }
/* One scrolling row at every width, fading at the right edge; on a laptop a wrap left the last chip alone on a second
   row (launch audit, design L4). The end padding lets the last chip scroll clear of the fade. */
.pb-cats { padding-right: 64px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
@media (min-width: 960px) { .pb-cats { margin: 16px -48px 0; padding: 14px 112px 14px 48px; } }
.pb-cats a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--mist);
  font: 500 15px/1 var(--ui); color: var(--navy); text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.pb-cats a:hover, .pb-cats a.is-here { background: var(--navy); color: #fff; }

/* ── Emergency numbers ── */
.pb-sos { margin: 32px 0 8px; padding: 22px 22px 18px; border-radius: 22px; background: #FFF4F5; border: 1px solid #F3CCD2; }
.pb-sos h2 { margin: 0 0 12px; font: 400 30px/1.05 var(--display); letter-spacing: -0.01em; color: var(--poppy); }
.pb-sos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .pb-sos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pb-sos li a { display: flex; align-items: baseline; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: #fff;
  color: var(--navy); text-decoration: none; box-shadow: 0 1px 0 rgba(11,21,48,.06); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pb-sos li a:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(179,18,46,.12); }
.pb-sos b { font: 600 24px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--poppy); }
.pb-sos span { font: 500 15px/1.25 var(--ui); }
.pb-src { margin: 12px 0 0; font: 400 14px/1.45 var(--ui); }
.pb-src a { color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(58,71,102,.35); }

/* ── Sections and phrases ── */
.pb-none { margin: 40px 0; font: italic 400 26px/1.3 var(--display); color: var(--navy-2); }
.pb-cat { padding-top: 56px; scroll-margin-top: 128px; }
@media (min-width: 960px) { .pb-cat { padding-top: 88px; } }
.pb-cat h2 { margin: 0 0 8px; font: 400 clamp(38px, 5vw, 60px)/1 var(--display); letter-spacing: -0.024em; color: var(--navy); }
.pb-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .pb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 0; } }
.pb { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 22px 0 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
@media (min-width: 1000px) { .pb { border-top: 1px solid var(--line); border-bottom: 0; margin-top: -1px; } }
.pb > p { grid-column: 1; margin: 0; }
.pb-en { font: 500 15px/1.35 var(--ui); letter-spacing: .01em; color: var(--navy-2); }
.pb-sq { margin-top: 6px !important; font: 400 clamp(30px, 3.4vw, 40px)/1.08 var(--display); letter-spacing: -0.015em; color: var(--navy); text-wrap: balance; overflow-wrap: anywhere; }
.pb-say { margin-top: 8px !important; font: italic 400 19px/1.35 var(--display); color: var(--cobalt); overflow-wrap: anywhere; }
.pb-note { margin-top: 8px !important; max-width: 34em; font: 400 15px/1.5 var(--ui); color: var(--navy-2); }
.pb-acts { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.pb[data-status="draft"] .pb-en::after { content: " · draft"; color: var(--gold); }

.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 104px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 15px/1 var(--ui); color: var(--navy); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.pb-btn:hover { border-color: var(--navy); }
.pb-btn:active { transform: scale(.97); }
.pb-btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.pb-btn.is-playing { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.pb-ico { display: inline-block; flex: 0 0 auto; }
.pb-ico-play { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.is-playing .pb-ico-play { width: 10px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
/* Show: four corner brackets, the "full screen" sign; an empty square read as a checkbox (launch audit, design M8). */
.pb-ico-show { width: 14px; height: 14px; --c: currentColor; --w: 1.7px; --l: 5px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w), linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w), linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w), linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w), linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l);
  background-repeat: no-repeat; }
@media (max-width: 420px) { .pb-btn { min-width: 0; padding: 0 14px; } }

.pb-foot { margin: 0; padding: 56px 0 104px; font: italic 400 20px/1.4 var(--display); color: var(--navy-2); text-align: center; }
.pb[hidden], .pb-cat[hidden] { display: none !important; }

/* ── Show: the phrase, filling the screen ── */
.pb-stage { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: max(28px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  border: 0; background: #fff; color: var(--navy); }
.pb-stage[open] { display: grid; grid-template-rows: 1fr auto auto; gap: 18px; }
.pb-stage::backdrop { background: rgba(11,21,48,.5); }
.pb-stage-sq { align-self: center; margin: 0; font: 400 clamp(48px, 13vw, 168px)/1.02 var(--display); letter-spacing: -0.025em; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.pb-stage-en { margin: 0; font: italic 400 clamp(20px, 3vw, 30px)/1.3 var(--display); color: var(--navy-2); text-align: center; }
.pb-stage-acts { display: flex; justify-content: center; gap: 12px; }
.pb-stage-acts .pb-btn { min-width: 132px; min-height: 56px; font-size: 17px; }

@media (prefers-reduced-motion: no-preference) {
  .pb-stage[open] .pb-stage-sq { animation: pb-in .45s var(--ease) both; }
}
/* Movement only, never opacity: the phrase is readable even where the animation never runs. */
@keyframes pb-in { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pb-btn, .pb-sos li a, .pb-cats a { transition: none; } }