:root {
  --bg: #0b1020;
  --panel: #141a30;
  --panel2: #1b2342;
  --ink: #e8ecf8;
  --dim: #9aa7c7;
  --line: #2a3560;
  --proto: #3fd0c9;
  --debris: #ffb454;
  --planetonly: #c792ea;
  --quasar: #ff5c8a;
  --evolved: #e6be2e;
  --accent: #6ea8ff;
  --err: #ff6b81;
  --sky: #070b18;
  --barbg1: rgba(11,16,32,.97);
  --barbg2: rgba(11,16,32,.88);
  --legendbg: rgba(11,16,32,.7);
}

/* light theme — toggled by the ☀/🌙 button, persisted in localStorage */
body.light {
  --bg: #f2f4fa;
  --panel: #ffffff;
  --panel2: #e6ebf6;
  --ink: #1c2438;
  --dim: #45536f;
  --line: #a9b7d2;
  --proto: #0f9e96;
  --debris: #c07514;
  --planetonly: #8a4fc8;
  --quasar: #d63b6e;
  --evolved: #a8801a;
  --accent: #2f6fd6;
  --chipon: #c4d7f5;   /* selected chips: clearly darker than the white idle chips */
  --chiprel: #e3edfb;  /* related (facility<->instrument) chips: tinted, lighter than selected */
  --err: #d64550;
  --sky: #e8ecf5;
  --barbg1: rgba(242,244,250,.97);
  --barbg2: rgba(242,244,250,.88);
  --legendbg: rgba(242,244,250,.8);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

#topbar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap; padding: 8px 14px;
  background: linear-gradient(180deg, var(--barbg1), var(--barbg2));
  border-bottom: 1px solid var(--line); }
#title .t1 { font-weight: 700; letter-spacing: .3px; }
#title .t1 code.brand { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo,
  Consolas, "Liberation Mono", monospace; font-size: .95em; }
#title .t2 { display: block; color: var(--dim); font-size: 11.5px; }
#search { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 11px; width: 240px; outline: none; }
#search:focus { border-color: var(--accent); }
#filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { cursor: pointer; user-select: none; border: 1px solid var(--line);
  background: var(--panel); color: var(--dim); padding: 4px 10px; border-radius: 999px;
  font-size: 12px; }
.chip.on { color: var(--ink); border-color: var(--accent); background: var(--chipon, var(--panel2)); }
.chip.proto.on { border-color: var(--proto); }
.chip.debris.on { border-color: var(--debris); }
.chip.evolved.on { border-color: var(--evolved); }
.chip.planet.on { border-color: var(--planetonly); }

main { position: fixed; inset: 0; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none; }
#sky.dragging { cursor: grabbing; }

#tooltip { position: fixed; z-index: 30; pointer-events: none; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.5); max-width: 260px; }
#tooltip .nm { font-weight: 700; }
#tooltip .meta { color: var(--dim); font-size: 11.5px; }

/* absolute inside the fixed #topbar (its containing block): the dropdown is
   anchored to the search box itself, so phone keyboards / focus zoom that
   shift the visual viewport move both together instead of overlapping them */
#searchlist { position: absolute; z-index: 40; top: 52px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; max-height: 55vh; overflow: auto;
  min-width: 260px; max-width: calc(100vw - 16px); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
#searchlist .row { padding: 7px 12px; cursor: pointer; display: flex; gap: 8px;
  align-items: baseline; }
#searchlist .row:hover, #searchlist .row.active { background: var(--panel2); }
#searchlist .row .meta { color: var(--dim); font-size: 11px; margin-left: auto; }
#searchlist .nores { padding: 10px 12px; color: var(--dim); }

/* pointer-events:none — the legend is a non-interactive key, so let taps/clicks
   pass straight through to the sky canvas underneath (otherwise it blocks stars
   in the bottom-left corner, especially on phones where it covers ~14% of screen) */
#legend { position: fixed; z-index: 15; left: 12px; bottom: 10px; display: flex;
  max-width: calc(100vw - 240px); pointer-events: none;
  gap: 14px; flex-wrap: wrap; align-items: center; color: var(--dim); font-size: 12px;
  background: var(--legendbg); padding: 6px 10px; border-radius: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px; }
.dot.proto { background: var(--proto); }
.dot.debris { background: var(--debris); }
.dot.planetonly { background: var(--planetonly); }
.dot.quasar { background: var(--quasar); }
.dot.evolved { background: var(--evolved); }
.chip.quasar.on { border-color: var(--quasar); }
#d_sub .tag.quasar { border-color: var(--quasar); color: var(--quasar); }
.dot.ringed { background: transparent; border: 2px solid var(--ink); width: 8px; height: 8px; }
#legend .hint { opacity: .75; }

/* GitHub badge, bottom-right (mirrors the legend's styling bottom-left) */
#ghlink { position: fixed; z-index: 15; right: 12px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--dim); font-size: 12px; text-decoration: none;
  background: var(--legendbg); padding: 6px 10px; border-radius: 10px; }
#ghlink:hover { color: var(--accent); }

#detail { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(480px, 96vw);
  background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto;
  padding: 16px 18px 28px; box-shadow: -12px 0 40px rgba(0,0,0,.5);
  /* manipulation kills iOS double-tap page zoom + the 300ms click delay, so
     rapid ‹/› taps flip images instead of zooming; scroll & pinch still work */
  touch-action: manipulation; }
/* drag handle on the panel's inner edge — position:fixed so it doesn't scroll
   with the panel; its `left` is kept in sync with the panel edge by app.js */
#d_resize { position: fixed; top: 0; bottom: 0; width: 10px; z-index: 51;
  cursor: ew-resize; touch-action: none; }
#d_resize::before { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 4px; height: 36px; border-radius: 3px;
  background: var(--line); transition: background .12s; }
#d_resize:hover::before, #d_resize.drag::before { background: var(--accent); }
#closebtn { position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--dim); font-size: 26px; cursor: pointer; line-height: 1; }
#closebtn:hover { color: var(--ink); }
#detail h2 { margin: 2px 0 2px; font-size: 22px; }
#d_sub { color: var(--dim); font-size: 12.5px; margin-bottom: 12px; }
#d_sub .tag { display: inline-block; border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 7px; margin: 2px 4px 2px 0; font-size: 11px; color: var(--ink); }
#d_sub .tag.proto { border-color: var(--proto); color: var(--proto); }
#d_sub .tag.debris { border-color: var(--debris); color: var(--debris); }
#d_sub .tag.evolved { border-color: var(--evolved); color: var(--evolved); }
#d_sub .tag.pl { border-color: var(--planetonly); color: var(--planetonly); }
#d_sub a.simlink { color: var(--accent); text-decoration: none; font-weight: 600; }
#d_sub a.simlink:hover { text-decoration: underline; }
#d_sub .src { opacity: .7; font-size: 11px; }

#d_imgwrap { display: flex; align-items: center; gap: 6px; }
/* fixed-height stage so the image box doesn't reflow as figure sizes change —
   that reflow is what made the prev/next arrows jump vertically. Images just
   center + fit inside (letterboxed on the dark stage when aspect ratios differ). */
#d_imgbox { flex: 1; height: 380px; display: flex; align-items: center;
  justify-content: center; background: #05070f; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; touch-action: pan-y; position: relative; }
/* the outgoing image during an arrow slide — overlays the stage and slides off */
#d_imgbox .d_slideout { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; will-change: transform; }
#d_imgbox img { max-width: 100%; max-height: 100%; display: block;
  image-rendering: auto; }
/* swipe carousel: [prev · current · next] slides, each the full stage width */
#d_imgbox .d_track { display: flex; height: 100%; width: 100%; will-change: transform; }
#d_imgbox .d_slide { flex: 0 0 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; }
#d_imgbox .placeholder { text-align: center; color: var(--dim); padding: 40px 18px;
  font-size: 13px; }
#d_imgbox .placeholder .big { font-size: 34px; display: block; margin-bottom: 8px;
  opacity: .8; }
.nav { background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; font-size: 20px; width: 30px; height: 56px; cursor: pointer; }
.nav:disabled { opacity: .25; cursor: default; }

#d_slider { display: flex; gap: 5px; margin: 10px 2px 4px; flex-wrap: wrap; }
#d_slider .tick { cursor: pointer; border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 8px; font-size: 11px; color: var(--dim); background: var(--panel2); }
#d_slider .tick.on { color: var(--ink); border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset; }
#d_slider .tick .wl { opacity: .8; }
#d_slider .tick .yr { font-weight: 600; }
#d_slider .tick .yr.pub { font-weight: 400; font-style: italic; opacity: .6; }

#d_caption { margin-top: 10px; font-size: 13px; }
#d_caption .row1 { color: var(--ink); font-weight: 600; }
#d_caption .row2 { color: var(--dim); font-size: 12px; margin: 2px 0 6px; }
#d_caption .cite { background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
#d_caption .cite .ttl { color: var(--dim); font-style: italic; }
#d_caption a { color: var(--accent); text-decoration: none; }
#d_caption a:hover { text-decoration: underline; }
#d_caption .links a { margin-right: 12px; font-weight: 600; }
#d_caption .pending { color: var(--err); font-size: 12px; margin-top: 6px; }

/* per-card provenance notice: figures + metadata are agent-compiled, verify via
   the source links. Persistent (static in #detail), shown on every system. */
#d_disclaimer { margin: 10px 0 2px; padding: 8px 10px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--panel2); color: var(--dim);
  font-size: 11.5px; line-height: 1.45; }
#d_disclaimer::before { content: "🤖 "; }

#d_planets { margin-top: 14px; }
#d_planets .ph { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
#d_planets .pl { border-left: 3px solid var(--planetonly); padding: 2px 8px;
  margin: 4px 0; font-size: 12.5px; color: var(--dim); }
#d_planets .pl b { color: var(--ink); }
#d_planets .st { font-size: 11px; border: 1px solid var(--line); border-radius: 5px;
  padding: 0 5px; margin-left: 6px; }
#d_planets .st.candidate { color: var(--debris); border-color: var(--debris); }
#d_planets .st.disputed, #d_planets .st.dust-cloud { color: var(--err);
  border-color: var(--err); }
#d_planets .pref { font-size: 11px; color: var(--dim); }
#d_planets .pref a { color: var(--accent); text-decoration: none; margin-left: 4px; }
#d_planets .pref a:hover { text-decoration: underline; }

#d_notes { margin-top: 12px; color: var(--dim); font-size: 12.5px; border-top: 1px dashed
  var(--line); padding-top: 8px; }

/* ---- language selector ---- */
/* classic translate/i18n glyph before the dropdown — a language-neutral cue so a
   user who lands on a script they can't read still recognises the switcher */
#langicon { display: inline-flex; align-items: center; color: var(--dim);
  cursor: pointer; margin-inline-end: -6px; }  /* logical: tight gap in LTR and RTL */
#langicon:hover { color: var(--accent); }
#lang { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 12px; cursor: pointer; }

/* ---- theme toggle: chrome follows the theme (dark bg behind the moon,
   bright bg behind the sun) instead of the browser's default button ---- */
#themetoggle { background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 12px; cursor: pointer; }
#themetoggle:hover { border-color: var(--accent); }

/* ---- shape markers (colorblind + B/W-print friendly): circle/triangle/diamond/square + ring ---- */
.mk { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.mk.proto { border-radius: 50%; background: var(--proto); }
.mk.quasar { background: var(--quasar); }
.mk.planetonly { width: 9px; height: 9px; background: var(--planetonly); transform: rotate(45deg); }
/* hollow ◆ = companion-only system whose every claim is refuted (historical record) */
.mk.planetonly.hollow { width: 7px; height: 7px; background: transparent;
  border: 1.5px solid var(--planetonly); }
.mk.debris { width: 0; height: 0; background: none; border-left: 6px solid transparent;
  border-right: 6px solid transparent; border-bottom: 11px solid var(--debris); margin-top: 1px; }
.mk.evolved { width: 11px; height: 11px; background: var(--evolved);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%); }
.mk.ring { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 2px solid var(--ink); }
.mk-star { color: var(--ink); margin-right: 6px; font-size: 14px; line-height: 1; vertical-align: -1px; }
#legend span { display: inline-flex; align-items: center; }
table.mtx td .mk { vertical-align: middle; }

/* ---- view tabs ---- */
#viewtabs { display: flex; gap: 4px; }
.vtab .ico { font-size: 13px; }
.vtab .foldchev { font-size: 13px; opacity: 1; margin-left: 3px; vertical-align: 1px; }
.vtab { cursor: pointer; background: var(--panel); color: var(--dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 11px; font-size: 12.5px; }
.vtab.on { color: var(--ink); border-color: var(--accent); background: var(--panel2); }

/* ---- facets bar (wraps to its own row inside the fixed header) ---- */
#facets { flex-basis: 100%; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line); }
#facets .fgroup { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
#facets .flabel { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.chip.sm { padding: 2px 8px; font-size: 11px; }
.chip.reset { border-style: dashed; margin-left: auto; }   /* facet clear + category clear */

/* ---- matrix + tonight overlays ----
   flex column so .mscroll (not the overlay) is the vertical scroller:
   that makes the sticky thead engage, and keeps hint/controls visible too */
#matrix, #tonight { position: fixed; inset: 0; z-index: 12; overflow: auto;
  background: var(--bg); padding: 60px 14px 48px;
  display: flex; flex-direction: column; }
#matrix[hidden], #tonight[hidden] { display: none; }
#t_out { display: flex; flex-direction: column; min-height: 0; }
.mhint { color: var(--dim); font-size: 12px; margin: 2px 2px 10px; }
.mscroll { overflow: auto; min-height: 0; border: 1px solid var(--line); border-radius: 10px; }
table.mtx { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.mtx th, table.mtx td { padding: 5px 9px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
table.mtx thead th { position: sticky; top: 0; z-index: 2; background: var(--panel2); color: var(--ink);
  cursor: default; font-weight: 600; }
table.mtx th.sortable { cursor: pointer; user-select: none; }
table.mtx th.sortable:hover { color: var(--accent); }
table.mtx th .sub { display: block; color: var(--dim); font-size: 10px; font-weight: 400; }
table.mtx th.numcol, table.mtx td.numcol { text-align: right; }
table.mtx td.sticky, table.mtx th.sticky { position: sticky; left: 0; background: var(--panel); z-index: 1; }
table.mtx thead th.sticky { z-index: 3; background: var(--panel2); }
table.mtx tbody tr:hover td { background: rgba(110,168,255,.07); }
table.mtx tbody tr:hover td.sticky { background: var(--panel2); }
table.mtx td.nm { font-weight: 600; color: var(--ink); cursor: pointer; }
table.mtx td.nm:hover { color: var(--accent); }
table.mtx td.rg { color: var(--dim); font-size: 11.5px;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.cell { text-align: center; font-variant-numeric: tabular-nums; }
td.cell.has { background: rgba(63,208,201,.20); color: var(--ink); font-weight: 700; cursor: pointer; }
td.cell.has:hover { background: rgba(63,208,201,.38); }
td.cell.meta { background: rgba(154,167,199,.14); color: var(--dim); cursor: pointer; }
td.cell.gap { color: var(--line); }
td.cell.gap::after { content: "·"; color: rgba(154,167,199,.35); }

/* ---- tonight controls ---- */
.tctl { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tctl label { color: var(--dim); font-size: 12px; display: flex; gap: 5px; align-items: center; }
.tctl select, .tctl input { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.tctl button { background: var(--panel2); color: var(--ink); border: 1px solid var(--accent);
  border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; }
.tctl button:hover { background: var(--accent); color: #071022; }

@media (max-width: 640px) {
  #search { width: 150px; font-size: 16px; }  /* >=16px stops iOS focus auto-zoom */
  #detail { width: 100vw; }
  #facets { gap: 8px; }
  #ghlink .ghtext { display: none; }   /* icon-only GitHub badge on phones */
  #legend { max-width: calc(100vw - 70px); }
  /* bigger touch targets (>= ~44px) for the image nav + close on phones */
  .nav { width: 44px; height: 68px; font-size: 24px; }
  #closebtn { font-size: 34px; top: 4px; right: 8px; padding: 4px 10px; }
}

/* ---- content links: bright + underlined in BOTH themes (colorblind-friendly) ----
   Underline gives a color-independent cue; --link is brighter than --accent so links
   read clearly on the panel backgrounds (incl. the linkified Author+Year notes).
   Selectors repeat the earlier per-widget rules so this block wins the cascade. */
:root { --link: #a5cbff; }
body.light { --link: #0d4fc4; }
#d_caption a, #d_caption .links a,
#d_planets .pref a, #d_planets .pl a, #d_planets a,
#d_notes a, #d_sub a.simlink, #d_sub a, #tooltip a, #t_out a {
  color: var(--link); text-decoration: underline; text-underline-offset: 2px;
  font-weight: 600; }
#d_planets .pl a:hover, #d_notes a:hover, #d_caption a:hover { filter: brightness(1.15); }

/* facility <-> instrument relationship highlight: bright like a selection but
   with a fainter fill than .on (--chiprel < --chipon), so selected vs related
   stay distinguishable; dark theme keeps the unfilled look via the fallback */
.chip.rel { border-color: var(--accent); color: var(--ink);
  background: var(--chiprel, var(--panel)); }

/* sortable Tonight headers */
table.mtx th.sortable { cursor: pointer; user-select: none; }
table.mtx th.sortable:hover { color: var(--accent); }

/* Tonight: spelled-out category + planet-host star */
table.mtx td.typecell { white-space: nowrap; }
table.mtx .phost { color: var(--debris); }

/* literature-exploration progress, collapsed behind an (i) icon
   (hover or click the icon to reveal the numbers + bar) */
#litbar { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#litbar .liticon { color: var(--dim); font-size: 12px; line-height: 1; cursor: help; user-select: none; }
#litbar:hover .liticon, #litbar.open .liticon { color: var(--accent); }
#litbar .litdetail { display: none; align-items: center; gap: 6px; }
#litbar:hover .litdetail, #litbar.open .litdetail { display: inline-flex; }
#litbar .litlabel { color: var(--dim); font-size: 10.5px; white-space: nowrap; }
#litbar .littrack { position: relative; width: 150px; height: 7px; border-radius: 4px;
  background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
#litbar .litseg { position: absolute; left: 0; top: 0; bottom: 0; }
#litbar .litseg.exp { background: var(--dim); opacity: .55; }
#litbar .litseg.ing { background: var(--proto); }
#facets .fhint { opacity: .7; font-style: italic; }

/* narrower name column + in-tab category down-selection chips */
table.mtx th.sticky, table.mtx td.sticky {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catsel { display: inline-flex; gap: 6px; margin-left: 14px; vertical-align: middle; }
.catsel .catchip { opacity: .55; }
.catsel .catchip.on { opacity: 1; }

/* per-system last-updated stamp in the detail panel */
#d_notes .lastupd { margin-top: 8px; font-size: 11px; color: var(--dim);
  border-top: 1px dotted var(--line); padding-top: 6px; }

/* service-worker freshness toast ("atlas updated — tap to reload"); slides up
   from the bottom edge once sw.js reports a fresher data.js in the cache */
#swtoast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 90px);
  z-index: 60; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 999px; padding: 8px 16px;
  font: inherit; font-size: 13px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: transform .25s ease; }
#swtoast.show { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #swtoast { transition: none; } }

/* ---- RTL (Arabic): mirror table alignment, sticky column, and side panels.
   The canvas sky map is pixel-drawn and direction-neutral, so it is unaffected. */
[dir="rtl"] table.mtx th, [dir="rtl"] table.mtx td { text-align: right; }
[dir="rtl"] table.mtx td.sticky, [dir="rtl"] table.mtx th.sticky { left: auto; right: 0; }
[dir="rtl"] #detail { right: auto; left: 0;
  border-left: none; border-right: 1px solid var(--line);
  box-shadow: 12px 0 40px rgba(0,0,0,.5); }
[dir="rtl"] #closebtn { right: auto; left: 12px; }
[dir="rtl"] #legend { left: auto; right: 12px; }
[dir="rtl"] #ghlink { right: auto; left: 12px; }
[dir="rtl"] #d_planets .pl { border-left: none; border-right: 3px solid var(--planetonly); }
/* Scientific data (wavelengths, instruments, coordinates, magnitudes, star names)
   is Latin/numeric and must keep left-to-right order even on RTL pages — otherwise
   a leading number like the "1.6" in "1.6 μm NICI" gets detached by the bidi
   algorithm and pushed to the far end ("μm NICI 1.6"). */
[dir="rtl"] #d_slider,
[dir="rtl"] #d_caption,
[dir="rtl"] #d_sub,
[dir="rtl"] #tooltip { direction: ltr; text-align: left; }