/* wikey® Universal-Reader (Task #250) — /read page styles.
   RTL-safe: flex/grid with symmetric gaps, text-align:start, no floats.
   The header entry buttons (.topbar-reader) live in base.html's global
   <style> block because that block ships on every page. */

.urd { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
.urd [hidden] { display: none !important; } /* btn classes defeat [hidden] */

.urd__head { text-align: center; margin-bottom: 1.2rem; }
.urd__title { margin: 0 0 .3rem; font-size: clamp(1.4rem, 3.4vw, 2rem); color: #fff; }
.urd__sub { margin: 0 auto; max-width: 56ch; color: #9aa7bd; font-size: .92rem; }

.urd__tabs { display: flex; gap: .4em; justify-content: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
.urd__tab {
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: #cfd8ea; border-radius: 999px; padding: .45em 1.1em;
  font-size: .9em; font-weight: 700; letter-spacing: .05em; cursor: pointer;
  overflow-wrap: break-word;
}
.urd__tab[aria-selected="true"] {
  border-color: #00ccff; color: #00ffff;
  box-shadow: 0 0 10px rgba(0,204,255,.35);
}

.urd__panel { text-align: center; }
.urd__video {
  width: 100%; max-width: 420px; border-radius: 14px;
  border: 1px solid rgba(0,255,255,.35); background: #000; display: block;
  margin: 0 auto;
}
.urd__row { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.urd__nfcicon { font-size: 64px; margin: .8rem 0; }
.urd__state { min-height: 1.4em; color: #9aa7bd; font-size: .88rem; margin: .6rem 0; }
.urd__state[data-tone="err"] { color: #ff5da2; }
.urd__state[data-tone="ok"] { color: #00ffff; }

/* ---- Preview card + embed ---------------------------------------------- */
.urd__result {
  margin-top: 1.4rem; text-align: start;
  background: linear-gradient(180deg, rgba(0,255,255,.05), rgba(255,0,170,.04));
  border: 1px solid rgba(0,204,255,.28); border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.urd__typebadge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid rgba(255,215,0,.55); color: #ffd700; border-radius: 99px;
  padding: .2em .8em; margin-bottom: .5rem; overflow-wrap: break-word;
}
.urd__ptitle { margin: 0 0 .2rem; font-size: 1.15rem; color: #fff; overflow-wrap: break-word; }
.urd__pauthor { margin: 0 0 .8rem; color: #9aa7bd; font-size: .85rem; }
.urd__pcanvas {
  display: block; margin: .6rem auto; background: #fff; border-radius: 8px;
  border: 2px solid #00ccff; image-rendering: pixelated;
  width: min(260px, 76vw); height: auto;
}
.urd__embed {
  width: 100%; height: 480px; border: 1px solid rgba(0,204,255,.35);
  border-radius: 10px; background: #fff; margin-top: .8rem;
}
.urd__rawtext {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: .7em .9em; font-size: .88rem;
  overflow-wrap: anywhere; white-space: pre-wrap; margin: .4rem 0 0;
}

/* ---- Action bar + downloads --------------------------------------------- */
.urd__bar { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin-top: .9rem; }
.urd__barlbl { font-size: .75rem; color: #9aa7bd; min-width: 5em; }
.urd__feedback { font-size: .82rem; color: #00ffff; margin-top: .4rem; min-height: 1.2em; }