/* مرافئ العربية · Arabic Harbours — "stone, wool and sea"
   Sandstone of Hegra and Dhi Ain, the woven Sadu band of the tents, the painted windows of Rijal Alma',
   and the sea of the old harbours. Light ground, large type, clear Noto Sans Arabic for headings and labels, textbook Noto Naskh for reading. */
:root{
  color-scheme:light;
  --paper:#F6EDE1;          /* Hegra sandstone, washed light */
  --card:#FFFBF5;           /* Dhi Ain white stone */
  --ink:#3B2B21;            /* walnut ink */
  --muted:#6F5B4B;
  --line:#E5D2BB;
  --stone:#EAD7BF;          /* carved rock */
  --teal:#2C7A6E;   --teal-soft:#E2F0EB;    /* Rijal Alma' window green */
  --sand:#A26F1C;   --sand-soft:#FBEFD8;    /* saffron & incense */
  --rose:#A23E2E;   --rose-soft:#F8E5DD;    /* Sadu madder red */
  --indigo:#34578A; --indigo-soft:#E6ECF6;  /* silk indigo */
  --sea:#2D6F92;    --sea-soft:#E1EFF5;
  --green:#3B7A39;  --green-soft:#E7F3E3;
  --red:#B03A2B;    --red-soft:#FBE7E2;
  --kufi:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;   /* clear sans for headings, labels and buttons */
  --ui-ar:"Noto Naskh Arabic","Segoe UI",serif;
  --text-ar:"Noto Naskh Arabic","Segoe UI",serif;      /* textbook naskh: clear letters and vowel marks */
  --ui-en:"Alegreya Sans","Segoe UI",sans-serif;
  --en-serif:"Alegreya",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect width='32' height='14' fill='%23FFF6E8'/%3E%3Crect width='32' height='2' fill='%23C2922F'/%3E%3Crect y='12' width='32' height='2' fill='%23C2922F'/%3E%3Cpath d='M0 12L8 3l8 9z' fill='%23A23E2E'/%3E%3Cpath d='M16 12l8-9 8 9z' fill='%2334578A'/%3E%3Cpath d='M8 7l2 2.5-2 2.5-2-2.5zM24 7l2 2.5-2 2.5-2-2.5z' fill='%23FFF6E8'/%3E%3C/svg%3E");
  --qatt:linear-gradient(135deg,var(--c,var(--teal)) 25%,transparent 25%) -7px 0/14px 14px,linear-gradient(225deg,var(--c,var(--teal)) 25%,transparent 25%) -7px 0/14px 14px;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-size:21px;line-height:1.75;font-family:var(--ui-en);overflow-x:hidden;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23E7D8C3' fill-opacity='.55'%3E%3Ccircle cx='13' cy='21' r='1.1'/%3E%3Ccircle cx='71' cy='9' r='.8'/%3E%3Ccircle cx='97' cy='63' r='1.2'/%3E%3Ccircle cx='38' cy='88' r='.9'/%3E%3Ccircle cx='58' cy='51' r='.7'/%3E%3Ccircle cx='108' cy='104' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html[data-lang="ar"] body{font-family:var(--ui-ar);font-size:22px}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sea);outline-offset:3px;border-radius:6px}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px 56px}
h1,h2,h3{font-family:var(--kufi);font-weight:700;color:var(--ink)}
html[data-lang="en"] h1,html[data-lang="en"] h2{font-family:var(--en-serif)}

/* bilingual switch */
html[data-lang="en"] .t-ar{display:none!important}
html[data-lang="ar"] .t-en{display:none!important}
.ar{font-family:var(--text-ar);direction:rtl}
.en{font-family:var(--ui-en);direction:ltr}

/* icons */
.ic-svg{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.3em;flex:none}
.stars-row{display:inline-flex;gap:3px;vertical-align:middle}
.ic-star{width:1.15em;height:1.15em;fill:#EBDDC8;stroke:#D9C4A6;stroke-width:1.2}
.ic-star.on{fill:#D9A43A;stroke:#B9832A}

/* the woven Sadu band */
.sadu{height:14px;background:var(--sadu) repeat-x;background-size:32px 14px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,249,240,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.topbar .in{max-width:1000px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-inline-end:auto;font-family:var(--kufi);font-weight:700;font-size:1.12rem;color:var(--rose)}
.brand .mark{width:40px;height:40px;padding:5px;border-radius:8px;background:var(--stone);color:var(--rose);stroke-width:1.7}
.pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#FFFBF5;border-radius:8px;padding:5px 14px;font-family:var(--kufi);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;min-height:42px;color:var(--indigo)}
.pill:hover{border-color:var(--indigo)}
.pill.lang{color:var(--teal)}
.pill.lang:hover{border-color:var(--teal)}
@media (max-width:440px){.brand .nm{display:none}.pill{padding:5px 10px}}

/* ---------- page head ---------- */
.phead{text-align:center;padding:30px 8px 8px}
.phead .ic-svg{width:58px;height:58px;color:var(--rose);stroke-width:1.5}
.phead h1{font-size:clamp(2rem,6.5vw,2.8rem);margin:6px 0 4px;line-height:1.3}
.phead p{margin:0 auto;color:var(--muted);max-width:34em;font-size:1.06rem}
.crumb{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-family:var(--kufi);font-weight:600;text-decoration:none;color:var(--teal);font-size:1rem}

/* ---------- stone cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{--c:var(--teal);--t:var(--teal-soft);display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:20px;position:relative}
.card:hover{border-color:var(--c)}
.niche{display:grid;place-items:center;width:62px;height:70px;flex:none;border-radius:31px 31px 6px 6px;background:var(--t,var(--teal-soft));color:var(--c,var(--teal));border:1.5px solid color-mix(in srgb,var(--c,var(--teal)) 25%,white)}
.niche .ic-svg{width:34px;height:34px;stroke-width:1.7}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:8px;padding:10px 22px;min-height:50px;font-family:var(--kufi);font-weight:600;font-size:1.05rem;cursor:pointer;background:var(--teal);color:#fff;text-decoration:none}
.btn .ic-svg{width:1.2em;height:1.2em}
.btn.soft{background:var(--teal-soft);color:var(--teal)}
.btn.ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

/* ---------- quiz pieces ---------- */
.panel{background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:22px 18px;margin-top:18px;position:relative}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;border-radius:9px 9px 0 0;background:var(--qatt);opacity:.75}
.q-progress{height:10px;background:#EFE3D2;border-radius:3px;overflow:hidden;margin:6px 0 16px}
.q-progress i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--teal) 0 14px,#3E9384 14px 28px);width:0;transition:width .35s var(--ease)}
.q-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.98rem;font-family:var(--kufi)}
.q-text{font-family:var(--text-ar);direction:rtl;text-align:right;font-size:1.75rem;line-height:2;margin:6px 0 4px}
.q-hint{color:var(--muted);font-size:1.02rem;margin:0 0 12px}
.opts{display:grid;gap:10px}
.opt{width:100%;text-align:right;direction:rtl;font-family:var(--text-ar);font-size:1.55rem;line-height:1.8;background:#FFFDF9;border:2px solid var(--line);border-radius:8px;padding:8px 18px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--teal)}
.opt.ok{background:var(--green-soft);border-color:var(--green)}
.opt.no{background:var(--red-soft);border-color:var(--red)}
.opt:disabled{cursor:default}
.why{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 14px;border-radius:8px;background:#FBF5EA;border:1px solid #EFD9B0;font-weight:400;color:var(--ink);text-align:start}
.why .ic-svg{flex:none;width:22px;height:22px;color:#B9822F;margin-top:3px}
.why > div{display:flex;flex-direction:column;gap:4px;font-family:var(--kufi);font-size:.95rem;color:#8A5A12}
.why .why-ar{font-family:var(--text-ar);font-size:1.25rem;line-height:1.9;color:var(--ink);font-weight:500}
.why .why-en{font-family:var(--en-serif);font-style:italic;font-size:1.02rem;color:var(--muted);direction:ltr;text-align:left}
.feedback{margin-top:14px;border-radius:8px;padding:12px 16px;font-family:var(--kufi);font-weight:600;display:none}
.feedback.on{display:block}
.feedback.ok{background:var(--green-soft);color:var(--green)}
.feedback.no{background:var(--red-soft);color:var(--red)}
.feedback .ar{font-family:var(--text-ar);font-weight:700;font-size:1.35rem}
.score{text-align:center;padding:18px 6px}
.score .big{font-family:var(--kufi);font-size:3rem;font-weight:700;color:var(--teal);line-height:1.2}
.score .stars-row{font-size:2rem}

/* ---------- reader pieces (stories + harbours) ---------- */
.gl{background:none;border:none;padding:0 2px;font:inherit;color:var(--sc,var(--rose));font-weight:700;cursor:pointer;border-bottom:2.5px dotted color-mix(in srgb,var(--sc,var(--rose)) 55%,white);border-radius:3px}
.gl:hover,.gl.on{background:color-mix(in srgb,var(--sc,var(--rose)) 12%,white)}
.tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 0 10px}
.tool{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:6px 16px;font-family:var(--kufi);font-weight:600;font-size:.98rem;cursor:pointer;min-height:46px}
.tool[aria-pressed="true"]{background:color-mix(in srgb,var(--sc,var(--teal)) 12%,white);border-color:var(--sc,var(--teal));color:var(--sc,var(--teal))}
.pop{position:fixed;z-index:50;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--card);border:2px solid var(--sc,var(--rose));border-radius:10px;padding:10px 20px;box-shadow:0 20px 40px -20px rgba(60,40,20,.4);display:flex;align-items:center;gap:16px;transition:all .25s var(--ease);max-width:calc(100% - 32px)}
.pop.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.pop .w{font-family:var(--text-ar);font-size:1.9rem;color:var(--sc,var(--rose));font-weight:700}
.pop .m{font-family:var(--en-serif);font-size:1.15rem;direction:ltr;white-space:nowrap}

/* ---------- footer ---------- */
footer.site{margin-top:46px;text-align:center;color:var(--muted);font-size:1.05rem;line-height:2}
footer.site .sadu{margin-bottom:16px;border-radius:2px}
footer.site b{color:var(--ink);font-family:var(--kufi);font-weight:600}
footer.site a{color:var(--indigo)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:560px){body{font-size:20px}html[data-lang="ar"] body{font-size:21px}.q-text{font-size:1.55rem}.opt{font-size:1.4rem}}

/* ---------- sea map ----------
   Sizes are multiplied by --u (map units per screen pixel) so text and dots stay the same size at every zoom. */
.mapbox{position:relative;overflow:hidden;background:var(--sea-soft)}
.mapscroll{direction:ltr;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.mapzoom{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--card);border-bottom:1.5px solid var(--line);direction:rtl}
.mapzoom button{border:1.5px solid var(--line);background:#FFFDF9;border-radius:6px;padding:4px 12px;font-family:var(--kufi);font-size:.95rem;cursor:pointer;color:var(--sea)}
.mapzoom button[aria-selected="true"]{background:var(--sea);border-color:var(--sea);color:#fff}
@media (max-width:560px){.mapzoom{display:grid;grid-template-columns:1fr 1fr}.mapzoom button:first-child{grid-column:1/-1}.mapzoom button{padding:5px 6px;font-size:.92rem;line-height:1.4}html[data-lang="en"] .mapzoom button span.t-ar{display:block!important;margin:0}}
html[data-lang="en"] .mapzoom button .t-ar{display:inline!important;margin-inline-start:.4em;font-size:.9em;opacity:.85}
.seamap{display:block;width:100%;min-width:820px;height:auto;font-family:var(--kufi);direction:ltr;--u:1}
.seamap.zoomed{min-width:0}
.seamap .land{fill:#F3E6CF}
.seamap .coast{fill:none;stroke:#B99B6E;stroke-width:calc(var(--u)*2.2px);stroke-linejoin:round}
.seamap .lane{fill:none;stroke:#3F86A0;stroke-width:calc(var(--u)*2.4px);stroke-dasharray:calc(var(--u)*1px) calc(var(--u)*9px);stroke-linecap:round}
.seamap .incense{fill:none;stroke:#B9822F;stroke-width:calc(var(--u)*3px);stroke-dasharray:calc(var(--u)*10px) calc(var(--u)*7px);stroke-linecap:round;opacity:.9}
.seamap .inc-l text{fill:#9A6418;font-size:calc(var(--u)*19px);font-weight:600;font-family:var(--kufi);paint-order:stroke;stroke:#F3E6CF;stroke-width:calc(var(--u)*5px)}
.seamap .sea-l text{fill:#2F6E88;font-size:calc(var(--u)*22px);font-family:var(--kufi);font-weight:600;paint-order:stroke;stroke:#D9EDF5;stroke-width:calc(var(--u)*4px)}
.seamap .sea-l.gulf text{font-size:calc(var(--u)*18px)}
.seamap .sea-l text.en{font-family:var(--en-serif);font-style:italic;font-size:calc(var(--u)*14px);font-weight:400}
.seamap .china{fill:#3F86A0;font-size:calc(var(--u)*18px);font-family:var(--kufi);font-weight:600}
.seamap .port{cursor:pointer}
.seamap .port .hit{fill:transparent}
.seamap .port .ring{fill:#FFFBF5;stroke-width:calc(var(--u)*3px)}
.seamap .port text{font-size:calc(var(--u)*19px);font-weight:600;paint-order:stroke;stroke:#FFF9EE;stroke-width:calc(var(--u)*5.5px);stroke-linejoin:round}
.seamap .port:hover .ring,.seamap .port:focus .ring{stroke-width:calc(var(--u)*5px)}
.seamap .port.on .ring{animation:pulse 1.6s ease-in-out infinite}
.seamap .port.legend .mist{fill:#EFE6F7;stroke:#A98BD1;stroke-width:calc(var(--u)*2px);stroke-dasharray:calc(var(--u)*5px) calc(var(--u)*6px)}
.seamap .ship{pointer-events:none}
.seamap .ship path{fill:none;stroke:#7A4A26;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seamap .ship .sail{fill:#FFF8EA}
@keyframes pulse{0%,100%{stroke-width:calc(var(--u)*3px)}50%{stroke-width:calc(var(--u)*8px)}}
.maplegend{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:10px 14px;background:var(--card);border-top:1.5px solid var(--line);font-size:.98rem;color:var(--muted)}
.maplegend i{display:inline-block;width:26px;height:0;border-top:3px dashed;vertical-align:middle;margin-inline-end:6px}
.maphint{font-size:.95rem;color:var(--muted);text-align:center;margin:8px 0 0}

/* the map framed as a rock-cut facade (Hegra) */
.facade{position:relative;margin-top:8px}
.facade .crown{display:block;width:100%;height:auto}
.facade .crown .rock{fill:var(--stone)}
.facade .crown .cut{fill:none;stroke:#D2B793;stroke-width:2}
.facade .body{background:var(--stone);padding:0 14px 14px;border-radius:0 0 6px 6px}
.facade .door{border:2px solid #D2B793;border-radius:4px;overflow:hidden;background:var(--card)}
@media (max-width:560px){.facade .body{padding:0 8px 8px}}

/* ---------- Arabic always visible in titles and labels ----------
   In English mode the learner still meets the target language: every heading, card title, button and tab
   shows its Arabic name too (stacked in headings, side by side in buttons). Running text stays in one language. */
html[data-lang="en"] :is(h1,h2,h3,.house b,.cover .lv,.btn,.tool,.crumb,.pill:not(.lang),.brand,summary,.modes a,.mbtns a,.how span,.meta span,.pn small,.strip span,.q-meta span,.stars-lbl) .t-ar{display:inline!important}
html[data-lang="en"] :is(h1,h2,h3,.house b,.cover .lv,.btn,.tool,.crumb,.pill:not(.lang),.brand,summary,.modes a,.mbtns a,.how span,.meta span,.pn small,.strip span,.q-meta span) .t-ar{font-family:var(--kufi);font-weight:600}
html[data-lang="en"] :is(.btn,.tool,.crumb,.pill:not(.lang),.brand,summary,.modes a,.how span,.meta span,.pn small,.strip span,.q-meta span,.cover .lv) .t-ar::before{content:"";display:inline-block;width:1.5px;height:.9em;background:currentColor;opacity:.35;margin:0 .45em;vertical-align:-.1em}
html[data-lang="en"] :is(.btn,.tool,.crumb,.pill:not(.lang),.modes a,.mbtns a,.meta > span,.q-meta span,.how span){flex-wrap:wrap;justify-content:center;row-gap:0}
html[data-lang="en"] .meta > span{display:inline-flex}
html[data-lang="en"] .t-ar.bi-wrap::before{display:none!important}
html[data-lang="en"] .t-ar.bi-wrap{flex-basis:100%;text-align:center}
html[data-lang="en"] .mbtns a .t-ar.bi-wrap{flex-basis:auto}
html[data-lang="en"] :is(h1,h2,.house b){display:flex;flex-direction:column-reverse;align-items:inherit}
html[data-lang="en"] .phead h1{align-items:center}
html[data-lang="en"] :is(h1,h2,.house b) .t-ar{display:block!important;direction:rtl}
html[data-lang="en"] :is(h1,h2,.house b) .t-en{font-family:var(--en-serif);font-style:italic;font-weight:400;font-size:.62em;color:var(--muted)}
html[data-lang="en"] h1 .t-ar{font-size:1.05em}
html[data-lang="en"] .mbtns a .t-ar{display:block!important}
html[data-lang="en"] .mbtns a .t-ar::before{display:none}
html[data-lang="en"] .brand .t-ar::before{display:none}
html[data-lang="en"] .brand .t-en{display:none!important}
html[data-lang="en"] .title h1{display:block}

/* listen buttons for recordings in the teacher's voice */
.aud{display:inline-flex;align-items:center;gap:6px;border:1.5px solid color-mix(in srgb,var(--sc,var(--teal)) 40%,white);background:var(--card);color:var(--sc,var(--teal));border-radius:999px;padding:4px 12px;min-height:40px;font-family:var(--kufi);font-size:.95rem;cursor:pointer;vertical-align:middle}
.aud .ic-svg{width:1.25em;height:1.25em}
.aud.round{width:44px;height:44px;padding:0;justify-content:center}
.aud.playing{background:var(--sc,var(--teal));color:#fff;animation:audpulse 1.2s ease-in-out infinite}
@keyframes audpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc,var(--teal)) 20%,transparent)}}

/* The whole site flows right to left in both languages (sections, cards, tabs, columns start at the right).
   English text keeps left-to-right inside its own box. */
html[data-lang="en"] .t-en{direction:ltr;unicode-bidi:isolate}
html[data-lang="en"] .t-ar{unicode-bidi:isolate}
html[data-lang="en"] :is(h1,h2,h3,.house b) > .t-en{text-align:match-parent}
:where(html[data-lang="en"]) :where(p,li,label,small,dd,dt,figcaption,blockquote,td,th,summary,h3,h4,div,span,a,button,b,i,em,strong):where(:has(> .t-en)){direction:ltr;text-align:match-parent}
html[data-lang="en"] :is(div,p,li,small).t-en{direction:ltr}

/* ---------- home: map tabs and the learning voyage ---------- */
.maptabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid var(--line);background:var(--sand-soft)}
.maptabs button{display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:none;padding:12px 8px;font-family:var(--kufi);font-weight:600;font-size:1.08rem;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}
.maptabs button .ic-svg{width:22px;height:22px}
.maptabs button[aria-selected="true"]{color:var(--sea);background:var(--card);border-bottom-color:var(--sea)}
html[data-lang="en"] .maptabs button{flex-wrap:wrap;row-gap:0}
.seamap.journey{min-width:0}
.jwrap .mapscroll{direction:ltr}
.journey .leg-base{fill:none;stroke:#fff;stroke-width:calc(var(--u)*9px);stroke-linecap:round;opacity:.75}
.journey .leg{fill:none;stroke-width:calc(var(--u)*4px);stroke-dasharray:calc(var(--u)*2px) calc(var(--u)*9px);stroke-linecap:round}
.journey .leg.done{stroke-dasharray:none;stroke-width:calc(var(--u)*4.5px)}
.journey .stn{cursor:pointer}
.journey .dl .lane{fill:none;stroke:#8FB7C8;stroke-width:calc(var(--u)*2px);stroke-dasharray:calc(var(--u)*2px) calc(var(--u)*7px);stroke-linecap:round;opacity:.8}
.journey .dl.ok .lane{stroke:var(--c);stroke-width:calc(var(--u)*3px);stroke-dasharray:calc(var(--u)*9px) calc(var(--u)*6px);opacity:1}
.journey .dl .caravan{fill:none;stroke:#C9A877;stroke-width:calc(var(--u)*2px);stroke-dasharray:calc(var(--u)*2px) calc(var(--u)*6px);stroke-linecap:round}
.journey .dl.ok .caravan{stroke:#B9822F;stroke-width:calc(var(--u)*3px)}
.journey .dst .dring{fill:#FFFDF8;stroke:#A99C8C;stroke-width:calc(var(--u)*1.6px);stroke-dasharray:calc(var(--u)*3px) calc(var(--u)*2.5px);opacity:.9}
.journey .dst .ddot{fill:#CFC4B6}
.journey .dst .dn{font-family:var(--kufi);font-weight:600;font-size:calc(var(--u)*13.5px);fill:#8A7D6E;paint-order:stroke;stroke:#FFFBF4;stroke-width:calc(var(--u)*3.5px)}
.journey .dst .need{font-family:var(--ui-en);font-weight:700;font-size:calc(var(--u)*11.5px);fill:#B08A2E;paint-order:stroke;stroke:#FFFBF4;stroke-width:calc(var(--u)*3px)}
.journey .dst.ok .dring{stroke:var(--c);stroke-dasharray:none;stroke-width:calc(var(--u)*2.5px)}
.journey .dst.ok .ddot{fill:var(--c)}
.journey .dst.ok .dn{fill:var(--c);font-weight:700;font-size:calc(var(--u)*15px)}
.journey .dst.ok:hover .dring{stroke-width:calc(var(--u)*4px)}
.jfar{border:1.5px solid #EFD9B0;background:var(--sand-soft);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.jf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.jf-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--kufi);font-size:1.1rem;color:#8A5A12}
.jf-st b{font-size:1.5rem;font-family:var(--ui-en)}
.jf-st .ic-svg{width:24px;height:24px;color:#C79A2B;fill:#F3D27A}
.jf-n{font-family:var(--kufi);color:var(--muted);font-size:.98rem}
.jf-bar{height:10px;background:#EFE3D2;border-radius:5px;overflow:hidden;margin:10px 0 6px}
.jf-bar i{display:block;height:100%;background:linear-gradient(90deg,#E2B64A,#C98A1E);border-radius:5px}
html[dir="rtl"] .jf-bar i{margin-inline-start:0}
.jf-next{margin:4px 0;font-size:1.05rem}
.jf-next b{font-family:var(--kufi);color:#2D6F92}
.jf-how{margin:4px 0 0;color:var(--muted);font-size:.95rem;line-height:1.7}
.jlevels .jl-far{color:#8A7D6E}
.jlevels .jl-far i{background:none;border-top:2.5px dotted #A99C8C;height:0;border-radius:0}
.journey .pass circle{fill:#fff;stroke:#8C7A66;stroke-width:calc(var(--u)*2px)}
.journey .pass text{font-family:var(--kufi);font-size:calc(var(--u)*12px);fill:#7A6A58;paint-order:stroke;stroke:#FFFBF4;stroke-width:calc(var(--u)*3px)}
.journey .stn .hit{fill:transparent}
.journey .stn .disc{fill:#fff;stroke:var(--c);stroke-width:calc(var(--u)*3px)}
.journey .stn.on .disc{fill:var(--c)}
.journey .stn .jic{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.journey .stn.on .jic{stroke:#fff}
.journey .stn .halo{fill:none;stroke:var(--c);stroke-width:calc(var(--u)*2px);opacity:.5;animation:jpulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes jpulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.journey .plate{fill:#FFFBF4;stroke:var(--c);stroke-opacity:.35;stroke-width:calc(var(--u)*1px);opacity:.94}
.journey .t1{font-family:var(--kufi);font-weight:700;font-size:calc(var(--u)*16px);fill:var(--c)}
.journey .t1 .n{font-family:var(--ui-en);font-size:calc(var(--u)*13px);opacity:.8}
.maplegend[hidden],.jpanel[hidden]{display:none!important}
.journey .badge{fill:var(--c);stroke:#fff;stroke-width:calc(var(--u)*1.5px)}
.journey .bn{font-family:var(--ui-en);font-weight:700;font-size:calc(var(--u)*10.5px);fill:#fff}
.jlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;position:relative}
.jlist li a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:8px;border:1.5px solid transparent}
.jlist li.cur a{border-color:color-mix(in srgb,var(--c) 45%,white);background:color-mix(in srgb,var(--c) 7%,white)}
.jlist .no{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--c);color:var(--c);background:#fff;font-family:var(--ui-en);font-weight:700}
.jlist li.on .no{background:var(--c);color:#fff}
.jlist .no .ic-svg{width:18px;height:18px}
.jlist .nm{display:flex;flex-direction:column;min-width:0}
.jlist .nm b{font-family:var(--kufi);font-size:1.08rem;color:var(--c)}
.jlist .nm small{color:var(--muted);font-size:.9rem}
html[data-lang="en"] .jlist .nm b .t-ar{display:block!important;font-size:.95em}
.journey.narrow .t1{font-size:calc(var(--u)*14px)}
.journey.narrow .t1 .n{font-size:calc(var(--u)*12px)}
.journey .t2{font-family:var(--ui-en);font-size:calc(var(--u)*12px);fill:var(--muted)}
html[data-lang="ar"] .journey.narrow .t1{font-size:calc(var(--u)*14px)}
.journey.narrow .t1 .n{font-size:calc(var(--u)*12px)}
.journey .t2{font-family:var(--kufi)}
.journey .stn:hover .plate,.journey .stn:focus .plate{stroke-opacity:1}
.journey .j-start{font-family:var(--kufi);font-weight:700;font-size:calc(var(--u)*14px);fill:#2C7A6E;paint-order:stroke;stroke:#fff;stroke-width:calc(var(--u)*4px)}
.journey .j-ship path{fill:#FFF8EC;stroke:#7A4A24;stroke-width:1.6;stroke-linejoin:round}
.journey .j-ship .sail{fill:#FFFDF7}
.journey .j-ship{animation:jbob 3s ease-in-out infinite}
@keyframes jbob{0%,100%{translate:0 0}50%{translate:0 calc(var(--u)*-4px)}}
@media (prefers-reduced-motion:reduce){.journey .j-ship,.journey .stn .halo{animation:none}}
.jpanel{padding:12px 14px 14px;border-top:1.5px solid var(--line);background:var(--card)}
.jnext{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--c) 40%,white);border-radius:8px;padding:12px 14px;background:color-mix(in srgb,var(--c) 7%,white)}
.jnext .jn-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--c);color:var(--c)}
.jnext .jn-ic .ic-svg{width:28px;height:28px}
.jnext .jn-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jnext small{font-family:var(--kufi);color:var(--c);font-size:.92rem}
.jnext b{font-family:var(--kufi);font-size:1.25rem;color:var(--c)}
.jnext .jn-why{color:var(--muted);font-size:1rem;line-height:1.6}
.jnext .jn-go{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--c);color:#fff;border-radius:8px;padding:10px 14px;font-family:var(--kufi);font-weight:600}
.jnext .jn-go .ic-svg{width:18px;height:18px}
html[data-lang="en"] .jnext b .t-ar{display:block!important}
.jlevels{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;margin-top:12px;font-family:var(--kufi);font-size:.98rem}
.jlevels span{display:inline-flex;align-items:center;gap:6px;color:var(--c)}
.jlevels i{display:inline-block;width:22px;height:5px;border-radius:3px;background:var(--c)}
.jlevels a{color:var(--sea);font-size:.95rem}
@media (max-width:560px){.jnext{flex-wrap:wrap}.jnext .jn-go{width:100%;justify-content:center}}

/* journey list: everything lines up on the right, like the Arabic */
.jlist .nm,.jlist .nm *{text-align:right!important}
.jlist .nm{align-items:flex-start}