@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Lora:ital,wght@0,400;0,500;1,400&family=Nunito:wght@400;500;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{--ink:#1a1208;--ink2:#4a3a28;--ink3:#9a8a78;--paper:#faf6ef;--paper2:#f2ebe0;--paper3:#e5ddd0;--border:#ddd0b8;--border2:#c8b898;--card:#fff;--gold:#9a7020;}
.dark{--ink:#f0e8d8;--ink2:#b0987c;--ink3:#706050;--paper:#16110a;--paper2:#211810;--paper3:#2c2018;--border:#3a3020;--border2:#504030;--card:#201810;--gold:#d4a830;}
body,#wrapper{background:var(--paper);}
html.dark{background:var(--paper);}
#wrapper{position:relative;min-height:600px;}
.app{font-family:'Nunito',sans-serif;max-width:700px;margin:0 auto;padding-bottom:3rem;}
.hdr{background:var(--ink);padding:1rem 1.25rem 0.9rem;border-radius:0 0 16px 16px;margin-bottom:1rem;position:relative;overflow:hidden;}
.dark .hdr{background:var(--paper3);}
.hdr::after{content:'رحلة';position:absolute;right:-8px;top:-12px;font-family:'Playfair Display',serif;font-size:80px;color:rgba(255,255,255,0.04);pointer-events:none;line-height:1;}
.hdr-top{display:flex;align-items:center;gap:10px;}
.logo{width:34px;height:34px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:15px;color:#fff8e8;font-weight:700;flex-shrink:0;}
.app-name{font-family:'Playfair Display',serif;font-size:19px;color:#f5ede0;font-weight:700;letter-spacing:0.04em;}
.app-sub{font-size:11px;color:#c8a878;font-style:italic;margin-top:1px;}
.hright{margin-left:auto;display:flex;gap:5px;}
.hbtn{background:rgba(255,255,255,0.1);border:0.5px solid rgba(255,255,255,0.18);border-radius:99px;padding:4px 10px;cursor:pointer;font-size:11px;color:#f5ede0;font-family:'Nunito',sans-serif;font-weight:500;transition:all 0.15s;}
.hbtn:hover{background:rgba(255,255,255,0.2);}
.hbtn.on{background:var(--gold);color:#fff8e0;border-color:var(--gold);}
.today-wrap{margin:0 1.25rem 1rem;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 0.18s;}
.today-wrap:hover{transform:translateY(-2px);}
.today-inner{padding:1.1rem;position:relative;}
.today-ew{font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:3px;}
.today-hijri{font-size:10.5px;color:rgba(255,255,255,0.6);margin-bottom:5px;}
.today-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:4px;}
.today-desc{font-family:'Lora',serif;font-size:12px;color:rgba(255,255,255,0.82);line-height:1.55;}
.today-yr{position:absolute;right:10px;top:6px;font-family:'Playfair Display',serif;font-size:48px;font-weight:900;color:rgba(255,255,255,0.09);line-height:1;pointer-events:none;}
.today-cta{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;background:rgba(255,255,255,0.18);color:#fff;padding:4px 10px;border-radius:99px;border:1px solid rgba(255,255,255,0.25);margin-top:8px;}
.chron-wrap{margin:0 1.25rem 1rem;}
.chron-lbl{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px;display:flex;align-items:center;gap:6px;}
.chron-lbl::after{content:'';flex:1;height:1px;background:var(--border);}
.chron-bar{height:6px;border-radius:3px;display:flex;overflow:hidden;margin-bottom:3px;}
.chron-seg{cursor:pointer;transition:opacity 0.15s;height:100%;}
.chron-seg:hover{opacity:0.75;}
.chron-seg.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px currentColor;}
.chron-marks{display:flex;justify-content:space-between;margin-bottom:3px;}
.chron-mark{font-size:9px;color:var(--ink3);font-family:'Playfair Display',serif;font-weight:700;}
.chron-marks-h{display:flex;justify-content:space-between;margin-bottom:8px;}
.chron-mark-h{font-size:8px;color:var(--ink3);font-family:'Playfair Display',serif;font-weight:600;opacity:0.55;}
.era-pills{display:flex;gap:5px;flex-wrap:wrap;}
.era-pill{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid;transition:all 0.15s;white-space:nowrap;flex-shrink:0;}
.era-pill.on{color:#fff!important;}
.era-pill:not(.on){opacity:0.55;}
.era-pill:hover{opacity:1;}
.dyn-banner{margin:0 1.25rem 1rem;border-radius:12px;padding:0.65rem 1rem;display:flex;align-items:center;gap:10px;}
.dyn-bar{width:4px;border-radius:2px;align-self:stretch;flex-shrink:0;}
.dyn-lbl{font-size:9.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;opacity:0.6;margin-bottom:1px;}
.dyn-name{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;line-height:1.3;}
.dyn-period{font-size:11px;opacity:0.7;}
.featured{margin:0 1.25rem 1rem;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 0.18s;}
.featured:hover{transform:translateY(-2px);}
.feat-bg{padding:1.2rem;position:relative;}
.feat-ew{font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.72);margin-bottom:4px;}
.feat-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:4px;}
.feat-sub{font-size:11.5px;color:rgba(255,255,255,0.78);margin-bottom:7px;}
.feat-excerpt{font-family:'Lora',serif;font-size:12px;color:rgba(255,255,255,0.82);line-height:1.6;margin-bottom:8px;}
.feat-cta{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;background:rgba(255,255,255,0.18);color:#fff;padding:4px 10px;border-radius:99px;border:1px solid rgba(255,255,255,0.28);}
.feat-yr{position:absolute;right:10px;top:6px;font-family:'Playfair Display',serif;font-size:50px;font-weight:900;color:rgba(255,255,255,0.09);line-height:1;pointer-events:none;}
.sec-hdr{display:flex;align-items:center;gap:8px;margin-bottom:0.65rem;}
.sec-title{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);}
.sec-line{flex:1;height:1px;background:var(--border);}
.sec-cnt{font-size:10px;color:var(--ink3);}
.tl-wrap{padding:0 1.25rem;}
.fig-row{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.fig-row::-webkit-scrollbar{display:none;}
.fig-pill{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--border);border-radius:99px;padding:6px 12px 6px 6px;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0;}
.fig-pill:hover{border-color:var(--border2);transform:translateY(-1px);}
.fig-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:11px;font-weight:700;flex-shrink:0;}
.fig-pill-name{font-size:12px;font-weight:600;color:var(--ink);}
.fig-pill-role{font-size:10px;color:var(--ink3);}
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.tl-single{grid-template-columns:1fr;}
.ev-card{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:0.85rem;cursor:pointer;transition:all 0.18s;position:relative;overflow:hidden;}
.ev-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(60,40,10,0.09);}
.ev-accent{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;}
.ev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ev-badge{font-size:9px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:2px 7px;border-radius:99px;}
.ev-yr{font-family:'Playfair Display',serif;font-size:11px;font-weight:700;color:var(--ink3);}
.ev-title{font-family:'Lora',serif;font-size:13px;font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:3px;}
.ev-sub{font-size:10.5px;color:var(--ink3);margin-bottom:5px;}
.ev-excerpt{font-family:'Lora',serif;font-size:11px;color:var(--ink2);line-height:1.55;}
.ev-more{font-size:10px;font-weight:600;color:var(--gold);margin-top:5px;}
.snake-wrap{}
.snake-row{display:flex;align-items:center;gap:0;}
.snake-row.rev{flex-direction:row-reverse;}
.snake-conn{height:18px;position:relative;}
.snake-conn.r::after{content:'';position:absolute;left:calc(75% - 1px);top:0;bottom:0;width:2px;background:var(--border2);}
.snake-conn.r::before{content:'';position:absolute;left:calc(75% - 4px);bottom:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--border2);}
.snake-conn.l::after{content:'';position:absolute;left:calc(25% - 1px);top:0;bottom:0;width:2px;background:var(--border2);}
.snake-conn.l::before{content:'';position:absolute;left:calc(25% - 4px);bottom:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--border2);}
.sn-arrow{flex-shrink:0;width:18px;height:2px;background:var(--border2);position:relative;}
.sn-arrow.has-gap{width:34px;}
.sn-gap{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-size:7.5px;color:var(--ink3);white-space:nowrap;font-style:italic;font-family:'Nunito',sans-serif;}
.sn-arrow::after{content:'';position:absolute;right:-1px;top:-3px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--border2);}
.snake-row.rev .sn-arrow::after{right:auto;left:-1px;border-left:none;border-right:5px solid var(--border2);}
.sn-card{flex:1;background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:0.5rem 0.6rem;cursor:pointer;transition:all 0.18s;border-left-width:3px;z-index:1;}
.sn-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 2px 10px rgba(60,40,10,0.09);}
.sn-head{display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.sn-seq{font-size:8px;font-weight:900;color:var(--card);background:var(--ink3);border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0.5;}
.sn-badge{font-size:7px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:1px 5px;border-radius:99px;flex-shrink:0;}
.sn-yr{font-size:8.5px;font-weight:700;color:var(--ink3);font-family:'Playfair Display',serif;margin-bottom:3px;}
.dfmt-toggle{display:flex;gap:2px;background:var(--paper2);border-radius:99px;padding:2px;}
.dfmt-btn{background:none;border:none;font-size:8px;font-weight:700;padding:2px 6px;border-radius:99px;cursor:pointer;color:var(--ink3);font-family:'Nunito',sans-serif;transition:all 0.15s;letter-spacing:0.03em;}
.dfmt-btn.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.sn-title{font-family:'Lora',serif;font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:3px;}
.sn-sub{font-size:9.5px;color:var(--ink3);margin-bottom:4px;}
.sn-ex{font-family:'Lora',serif;font-size:10px;color:var(--ink2);line-height:1.5;margin-bottom:4px;}
.sn-more{font-size:9px;font-weight:600;color:var(--gold);}
#popupWrap{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;align-items:flex-end;justify-content:center;}
#popupWrap.open{display:flex;}
.pop-bg{position:absolute;inset:0;background:rgba(20,14,8,0.65);cursor:pointer;}
.pop-sheet{position:relative;z-index:1;background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:700px;max-height:82vh;overflow-y:auto;animation:slideUp 0.25s cubic-bezier(0.34,1.1,0.64,1);}
@keyframes slideUp{from{transform:translateY(60px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.pop-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:10px auto 0;}
.pop-inner{padding:1.25rem 1.25rem 2.5rem;}
.pop-close{float:right;width:28px;height:28px;border-radius:50%;background:var(--paper2);border:none;cursor:pointer;font-size:14px;color:var(--ink3);display:flex;align-items:center;justify-content:center;margin-left:8px;}
.pop-ew{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.pop-ew::after{content:'';flex:1;height:1px;background:currentColor;opacity:0.15;}
.pop-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:3px;}
.pop-period{font-size:11.5px;font-weight:600;color:var(--gold);font-family:'Playfair Display',serif;margin-bottom:10px;}
.pop-body{font-family:'Lora',serif;font-size:13.5px;color:var(--ink2);line-height:1.8;margin-bottom:12px;}
.pop-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.pop-fact{font-size:11.5px;background:var(--paper2);color:var(--ink2);padding:4px 10px;border-radius:99px;border:1px solid var(--border);}
.pop-divider{height:1px;background:var(--border);margin:12px 0;}
.ctx-lbl{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;}
.ctx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.ctx-chip{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;border:1.5px solid var(--border);background:var(--paper2);cursor:pointer;transition:all 0.13s;font-size:12px;color:var(--ink);font-weight:500;}
.ctx-chip:hover{background:var(--paper3);border-color:var(--border2);}
.ctx-pip{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ctx-pip.sq{border-radius:2px;width:12px;}

/* #1 sticky era filter */
#chronWrap{position:sticky;top:0;z-index:100;background:var(--paper);padding-bottom:0.25rem;}
.chron-wrap{padding-top:0.5rem;}

body,#wrapper{background:var(--paper);}

/* #3 fade-in animation */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.fade-in{animation:fadeIn 0.22s ease;}

/* #6 back to top button */
.back-top{position:fixed;bottom:1.5rem;right:1.5rem;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.18);opacity:0;transform:translateY(10px);transition:opacity 0.2s,transform 0.2s;pointer-events:none;z-index:150;}
.back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.dark .back-top{background:var(--paper3);color:var(--ink);}


/* #8 timeline position bar in popup */
.tl-pos{margin:8px 0 14px;}
.tl-pos-lbl{font-size:9px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;}
.tl-pos-track{height:4px;background:var(--border);border-radius:2px;position:relative;margin-bottom:4px;}
.tl-pos-marker{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);border:2px solid var(--card);}
.tl-pos-labels{display:flex;justify-content:space-between;font-size:8.5px;color:var(--ink3);font-family:'Playfair Display',serif;font-weight:600;}

/* #1 era prev/next nav + #3 surprise button */
.era-nav-row{display:flex;align-items:center;gap:6px;margin-top:6px;}
.era-nav-btn{width:26px;height:26px;border-radius:50%;background:var(--paper2);border:1.5px solid var(--border);cursor:pointer;font-size:13px;color:var(--ink2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;}
.era-nav-btn:hover:not(:disabled){background:var(--paper3);border-color:var(--border2);}
.era-nav-btn:disabled{opacity:0.25;cursor:default;}
.era-nav-pills{flex:1;display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.era-nav-pills::-webkit-scrollbar{display:none;}
.surprise-btn{padding:4px 10px;border-radius:99px;background:var(--paper2);border:1.5px solid var(--border);cursor:pointer;font-size:10px;font-weight:700;color:var(--ink3);font-family:'Nunito',sans-serif;letter-spacing:0.03em;transition:all 0.15s;white-space:nowrap;flex-shrink:0;}
.surprise-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;}

/* #2 single event full-width */
.sn-card-solo{flex:1;background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:0.65rem 0.85rem;cursor:pointer;transition:all 0.18s;border-left-width:3px;z-index:1;}
.sn-card-solo:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 2px 10px rgba(60,40,10,0.09);}
.snake-row-solo{display:flex;}
.snake-row-solo .sn-head{display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.snake-row-solo .sn-seq{font-size:8px;font-weight:900;color:var(--card);background:var(--ink3);border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0.5;}
.snake-row-solo .sn-badge{font-size:7px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:1px 5px;border-radius:99px;flex-shrink:0;}
.snake-row-solo .sn-yr{font-size:8.5px;font-weight:700;color:var(--ink3);font-family:'Playfair Display',serif;margin-bottom:3px;}
.snake-row-solo .sn-title{font-family:'Lora',serif;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:3px;}
.snake-row-solo .sn-sub{font-size:10px;color:var(--ink3);margin-bottom:4px;}
.snake-row-solo .sn-ex{font-family:'Lora',serif;font-size:11px;color:var(--ink2);line-height:1.5;margin-bottom:4px;}
.snake-row-solo .sn-more{font-size:9px;font-weight:600;color:var(--gold);}

/* #4 smooth bar segment transition */
.chron-seg{transition:opacity 0.25s,box-shadow 0.25s;}

/* era crossfade out */
@keyframes eraOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-5px);}}
.era-out{animation:eraOut 0.13s ease forwards;}

/* reading progress bar */
#progBar{position:fixed;top:0;left:0;height:3px;background:var(--gold);z-index:400;width:0%;transition:width 0.1s linear;pointer-events:none;border-radius:0 2px 2px 0;}

/* D: view tabs (replaces compact-btn) */
.view-tabs{display:flex;gap:2px;background:var(--paper2);border-radius:99px;padding:2px;}
.view-tab{background:none;border:none;font-size:8px;font-weight:700;padding:2px 7px;border-radius:99px;cursor:pointer;color:var(--ink3);font-family:'Nunito',sans-serif;transition:all 0.15s;}
.view-tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,0.1);}

/* A: type filter pills */
.type-filter{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.type-pill{display:inline-flex;align-items:center;gap:3px;background:var(--paper2);border:1.5px solid var(--border);border-radius:99px;padding:3px 10px;cursor:pointer;font-size:10px;font-weight:600;color:var(--ink3);font-family:'Nunito',sans-serif;transition:all 0.15s;}
.type-pill.on{background:var(--paper3);border-color:var(--border2);color:var(--ink);}
.type-pill:hover{border-color:var(--border2);}
.type-cnt{font-size:8.5px;font-weight:700;opacity:0.6;margin-left:1px;}

/* B: big event card emphasis */
.sn-card-big{background:var(--paper2);}
.sn-big-star{font-size:9px;margin-left:auto;opacity:0.8;}

/* C: year gap connector */
.snake-conn.c::after{content:'';position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:var(--border2);}
.snake-conn.c::before{content:'';position:absolute;left:calc(50% - 4px);bottom:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--border2);}
.snake-conn.has-gap{height:30px;}
.gap-lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:8px;color:var(--ink3);white-space:nowrap;background:var(--paper);padding:0 5px;font-style:italic;font-family:'Nunito',sans-serif;pointer-events:none;}

/* compact mode — hide excerpt and subtitle on all card types */
#tlWrap.compact .sn-ex,#tlWrap.compact .sn-sub{display:none;}

/* figure age annotation */
.fig-age{font-size:10px;opacity:0.6;}