/* ================================================================
   IndianTyping.com — urdu-tool.css
   Loaded after tool.css on /urdu-typing/tool/ only.

   tool.css already provides the two-panel shell, the buttons and the
   candidate popup, and none of it assumes a script. This file adds
   only what Urdu genuinely needs: right-to-left output, a Nastaliq
   face with enough vertical room, and RTL-aware popup text.

   Uses ONLY tokens from main.css — no new colours, no new fonts
   beyond the Nastaliq face already in GOOGLE_FONTS_URL.
================================================================ */

/* ================================================================
   1. OUTPUT — right to left
================================================================ */

/* The engine emits logical order; direction is purely presentational.
   Setting it here rather than reordering characters is what keeps
   copy-paste, selection and the caret correct. */
.ut-output {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;

  /* Nastaliq descends and ascends far more than Latin. The generous
     line-height and padding are not cosmetic — at tool.css's default
     line-height the dots under ژ and the tails of ے are clipped by the
     next line and by the panel edge. */
  font-size: 22px;
  line-height: 2.5;
  padding: 20px 22px 26px;
}

.ut-output.is-empty {
  color: var(--text-3);
  font-style: normal;
}

/* Latin and digits inside Urdu text (phone numbers, English words) keep
   their own direction rather than being visually reversed. */
.ut-output :where(span[dir='ltr']) { unicode-bidi: isolate; }

/* ================================================================
   2. INPUT — stays left to right
================================================================ */

/* Explicit, not inherited. The Roman input must remain LTR even though
   the page contains RTL content; without this the caret jumps to the
   right-hand edge on some browsers once Urdu appears alongside. */
.ut-input {
  direction: ltr;
  text-align: left;
  font-size: 17px;
  line-height: 1.7;
}

/* ================================================================
   3. CANDIDATE POPUP
================================================================ */

/* FULLY SELF-CONTAINED, ON PURPOSE.
   This block originally styled only the RTL text and inherited the popup
   frame from tool.css's .suggestion-popup rules. That was wrong twice
   over: those rules are Hindi-owned (their .suggestion-text sets
   var(--font-dev), a Devanagari face), and they are not in HEAD, so a
   commit of this page alone would have shipped an unstyled, statically
   positioned popup. The Urdu page now owns every property it needs, so
   it cannot be broken by a change to the Hindi popup — which is the same
   isolation rule the JS and dataset wiring already follow. */

/* The popup is anchored to the LTR input, so the container stays LTR
   and only the Urdu word inside each row is RTL. Making the whole
   popup RTL would move the index numbers to the right of the words and
   break the visual link to the caret. */
.ut-popup {
  direction: ltr;
  position: fixed; /* viewport-relative, to match the caret math in JS */
  z-index: 1200;   /* above nav (1000) and mobile drawer (999) */
  min-width: 160px;
  max-width: 280px;
  /* Only the pre-measurement fallback: positionPopup() sets max-height
     inline from the space actually available on the side it opened. */
  max-height: 240px;
  overflow-y: auto;
  /* Keeps a scroll that reaches either end of the list from chaining to
     the page, which would move the caret the popup is anchored to. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}

.ut-popup .suggestion-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s var(--ease);
}

.ut-popup .suggestion-item:hover,
.ut-popup .suggestion-item.active {
  background: var(--brand-dim);
}

.ut-popup .suggestion-index {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.ut-popup .suggestion-item.active .suggestion-index {
  background: var(--brand);
  color: #fff;
}

.ut-popup .suggestion-text {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  font-size: 19px;
  line-height: 2.1;
  color: var(--text-1);
  direction: rtl;
  text-align: right;
  flex: 1 1 auto;
  /* Nastaliq needs vertical room inside a compact row too. */
  padding-block: 2px;
}

/* ================================================================
   4. FAILURE STATE
================================================================ */

/* Shown only when the page detects it is misconfigured — see the
   startup guard in urdu-tool.js. Deliberately loud: a silently wrong
   script is the one outcome this page must never produce. */
.ut-error {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1.5px solid var(--red);
  background: var(--red-dim);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.6;
}
.ut-error[hidden] { display: none; }
.ut-surface.is-broken { opacity: 0.55; pointer-events: none; }

/* ================================================================
   5. PAGE FURNITURE
================================================================ */
.ut-examples {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px;
}
.ut-chip {
  appearance: none; font-family: inherit;
  padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.ut-chip:hover { border-color: var(--brand); color: var(--brand); }

.ut-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-3);
}
.ut-hint kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

/* Reserved, empty, and deliberately BELOW the tool — never beside or
   above the typing surface, and never between input and output. Fixed
   height so adding a unit later cannot shift the layout. */
.ut-adslot { min-height: 90px; margin: 36px 0 0; }

.ut-content { margin-top: 44px; }
.ut-content-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px 24px;
  margin-bottom: 16px;
}
.ut-content-card h2 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800;
  color: var(--text-1);
  margin: 0 0 14px;
}
.ut-content-card h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--text-1);
  margin: 22px 0 10px;
}
.ut-content-card p,
.ut-content-card li { font-size: 15px; line-height: 1.75; color: var(--text-2); }
.ut-content-card p { margin: 0 0 14px; }
.ut-content-card ul { margin: 0 0 14px; padding-left: 20px; }
.ut-content-card a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* Urdu shown inside prose keeps its direction without flipping the
   surrounding English sentence. */
.ut-content-card .ur,
.ut-ur {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.15em;
  line-height: 2.2;
}

.ut-faq-item { border-bottom: 1px solid var(--border); }
.ut-faq-item:last-child { border-bottom: none; }
.ut-faq-q {
  appearance: none; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 0;
  background: none; border: none;
  font-size: 15px; font-weight: 600; text-align: left;
  color: var(--text-1);
  cursor: pointer;
}
.ut-faq-chev { color: var(--text-3); transition: transform 0.2s var(--ease); flex-shrink: 0; }
.ut-faq-q[aria-expanded='true'] .ut-faq-chev { transform: rotate(180deg); }
.ut-faq-a { font-size: 14px; line-height: 1.75; color: var(--text-2); padding: 0 0 15px; }
.ut-faq-a[hidden] { display: none; }

/* ================================================================
   6. RESPONSIVE — desktop is the primary experience
================================================================ */

/* Below the tool-shell breakpoint the two panels stack. Urdu output
   keeps its generous line-height because clipping is a correctness
   problem, not a density preference. */
@media (max-width: 800px) {
  .ut-output { font-size: 20px; line-height: 2.4; padding: 16px 18px 22px; }
  .ut-input  { font-size: 16px; }
}

@media (max-width: 560px) {
  .ut-output { font-size: 19px; line-height: 2.3; }
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  .ut-input  { font-size: 16px; }
  .ut-content-card { padding: 20px 16px; }
  .ut-chip { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .ut-chip, .ut-faq-chev { transition: none; }
}