/* skins.css - whole-site looks, chosen in Settings > Appearance (html.skin-*). "classic" = site.css alone. */

/* ============ 1. MODERN: white, roomy, rounded, sticky light menu ============ */
html.skin-modern{--bg:#fff;--paper:#fff;--paper2:#f3f4f6;--ink:#111318;--ink2:#3d4249;--muted:#6b7280;--line:#eceef1;--black:#111318;--r:14px}
.skin-modern body{--fb:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;--fh:"Noto Kufi Arabic","Noto Sans Arabic",system-ui,sans-serif}
.skin-modern body.lang-en{--fb:"Inter",system-ui,sans-serif;--fh:"Inter",system-ui,sans-serif}
.skin-modern .topbar,.skin-modern .topbar .wrap{background:#f6f7f9;color:#4b5563}
.skin-modern .topbar .toplinks a:hover{color:var(--red)}.skin-modern .topbar .social a{color:#6b7280}.skin-modern .topbar .social a:hover{background:#e5e7eb;color:#111}
.skin-modern .masthead .wrap{min-height:104px}
.skin-modern .catnav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.skin-modern .catnav .wrap{background:transparent}
.skin-modern .catnav a:not(.navhome){color:#1f2329;font-weight:600}
.skin-modern .catnav a.on:not(.navhome),.skin-modern .catnav a:not(.navhome):hover{background:transparent;color:var(--red);border-color:var(--red)}
.skin-modern .catnav a.navhome{color:#fff;border-radius:99px;height:34px;line-height:34px;margin-block:6px;border-bottom:0}
.skin-modern .catnav a.navhome:hover,.skin-modern .catnav a.navhome.on{color:#fff}
.skin-modern .catnav .search{background:#f3f4f6;border-radius:99px}.skin-modern .catnav .search input{color:#111}.skin-modern .catnav .search button{border-radius:99px}
.skin-modern .ticker,.skin-modern .ticker .wrap{background:#fff}
.skin-modern .ticker .tag{margin:6px 0;border-radius:99px;padding:0 14px;font-size:13px}
.skin-modern .slider{border-radius:var(--r);overflow:hidden}
.skin-modern .slide .cap{background:linear-gradient(transparent,rgba(0,0,0,.86));padding:70px 28px 26px}
.skin-modern .slide .cap .h{font-size:28px;font-weight:800}
.skin-modern .slidebar{background:transparent;border-bottom:0;margin:8px 0 14px}
.skin-modern .slidebar .cat{border-radius:99px;height:30px;align-self:center}
.skin-modern .ov{border-radius:var(--r)}
.skin-modern .ovcap{background:linear-gradient(transparent,rgba(0,0,0,.82));padding:44px 14px 12px}
.skin-modern .btab{position:relative;border-bottom:1px solid var(--line);min-height:0;padding-bottom:12px;align-items:center;margin-bottom:18px}
.skin-modern .btab::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:56px;height:3px;border-radius:3px;background:var(--c)}
.skin-modern .btab .bt{background:transparent;color:var(--ink);padding:0;font-size:22px;font-weight:800;gap:10px}
.skin-modern .btab .bt>span{padding-block:0}
.skin-modern .btab .bt::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.skin-modern .btab .va{border:1px solid var(--line);border-radius:99px;padding:4px 12px;line-height:1.6}
.skin-modern .va{background:none;color:var(--muted);font-weight:600;font-size:13px}.skin-modern .va::before{content:none}.skin-modern .va:hover{color:var(--red)}
.skin-modern .big .img,.skin-modern .card .img{border-radius:var(--r)}
.skin-modern .li .th{border-radius:10px}
.skin-modern .big h3,.skin-modern .card h3{font-weight:700}
.skin-modern .wtab{border-bottom:1px solid var(--line);height:auto;padding-bottom:8px}
.skin-modern .wtab>*{background:transparent;color:var(--ink);padding:0;font-size:18px;font-weight:800}
.skin-modern .videos{background:#0f1115;border-radius:var(--r);margin:10px 20px 0}
.skin-modern .listhead{border-bottom:1px solid var(--line)}.skin-modern .listhead h1{font-size:32px;font-weight:800}
.skin-modern .story h1{font-size:36px;font-weight:800;line-height:1.4}
.skin-modern body.lang-en .story h1{line-height:1.2;letter-spacing:-.01em}
.skin-modern .standfirst{font-size:19px}
.skin-modern .cover img,.skin-modern .video,.skin-modern .video iframe{border-radius:var(--r)}
.skin-modern .byline{border:0;background:var(--paper2);border-radius:12px;padding:10px 14px}
.skin-modern .share a{border-radius:99px}
.skin-modern .pager a{border-radius:99px}
.skin-modern .tags a{border-radius:99px;padding:4px 12px}
.skin-modern .foot{background:#0f1115}.skin-modern .foot .wrap{background:transparent}
.skin-modern .bannerslot img{border-radius:10px}

/* ============ 2. TRICOLOUR: the logo's red / yellow / green as structure ============ */
html.skin-tricolor{--bg:#ecebe7;--black:#121212}
.skin-tricolor .topbar,.skin-tricolor .topbar .wrap{background:var(--red);color:#fff}
.skin-tricolor .topbar .toplinks .today{color:#ffe7e7}.skin-tricolor .topbar .social a{color:#fff}.skin-tricolor .topbar .social a:hover{background:rgba(0,0,0,.18)}
.skin-tricolor .catnav{background:var(--black)}
.skin-tricolor .catnav::after{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--red) 0 33.33%,var(--sun) 33.33% 66.66%,var(--green) 66.66%)}
.skin-tricolor .catnav a:not(.navhome){font-weight:700}
.skin-tricolor .catnav a.on:not(.navhome),.skin-tricolor .catnav a:not(.navhome):hover{background:transparent;color:var(--sun);border-color:var(--sun)}
.skin-tricolor .ticker .tag{background:var(--sun);color:#111}
.skin-tricolor .ticker .items a::before{background:var(--green)}
.skin-tricolor .slide .cap{background:none;padding:20px 24px 26px}
.skin-tricolor .slide .cap .h{display:inline;background:var(--black);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:3px 12px;line-height:2;font-size:26px;font-weight:800}
.skin-tricolor .slidebar{border-bottom-color:var(--sun)}.skin-tricolor .slidebar .cat{background:var(--black);color:var(--sun)}
.skin-tricolor .ovcap{background:none;padding:12px}
.skin-tricolor .ovcap .h{display:inline;background:rgba(18,18,18,.92);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:2px 8px;line-height:1.9}
.skin-tricolor .btab{border-bottom:4px solid var(--black);height:auto;padding-bottom:6px;align-items:center}
.skin-tricolor .btab .bt{position:relative;background:transparent;color:var(--black);font-size:24px;font-weight:800;padding:0;padding-inline-start:28px}
.skin-tricolor .btab .bt::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--c);border-radius:0 72% 0 72%}
.skin-tricolor .va{background:var(--black);color:#fff;border-radius:0}.skin-tricolor .va::before{color:var(--sun)}
.skin-tricolor .wtab{border-bottom:4px solid var(--black);height:auto;padding-bottom:6px}
.skin-tricolor .wtab>*{position:relative;background:transparent;color:var(--black);font-size:19px;padding:0;padding-inline-start:24px}
.skin-tricolor .wtab>*::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:15px;height:15px;margin-top:-8px;background:var(--red);border-radius:0 72% 0 72%}
.skin-tricolor .ranked li::before{color:var(--green)}
.skin-tricolor .big h3,.skin-tricolor .card h3{font-weight:700}
.skin-tricolor .listhead{border-bottom:4px solid var(--black)}.skin-tricolor .listhead h1{font-size:30px;font-weight:800}
.skin-tricolor .story h1{font-size:34px;font-weight:800}
.skin-tricolor .body blockquote{border-color:var(--sun);background:#fffbea;padding:10px 18px}
.skin-tricolor .share a{background:var(--green)}.skin-tricolor .share a:hover{background:var(--red)}
.skin-tricolor .pager a.on{background:var(--red);border-color:var(--red)}
.skin-tricolor .foot{background:#0a2a1a;border-top:6px solid transparent;border-image:linear-gradient(90deg,var(--red) 0 33.33%,var(--sun) 33.33% 66.66%,var(--green) 66.66%) 1}
.skin-tricolor .foot .wrap{background:transparent}.skin-tricolor .fcols,.skin-tricolor .copy{border-color:#1f4a33}
.skin-tricolor[data-theme=dark] .btab .bt,.skin-tricolor[data-theme=dark] .wtab>*{color:var(--ink)}
.skin-tricolor[data-theme=dark] .btab,.skin-tricolor[data-theme=dark] .wtab,.skin-tricolor[data-theme=dark] .listhead{border-color:var(--ink)}
.skin-tricolor[data-theme=dark] .body blockquote{background:#2d2717}

/* ============ 3. NIGHT: a dark newsroom with sun-yellow accents ============ */
html.skin-night{--bg:#0b0d10;--paper:#121519;--paper2:#1a1e24;--ink:#ecedef;--ink2:#c5c8cc;--muted:#8b9199;--line:#252a31;--black:#07080a;color-scheme:dark}
.skin-night main.wrap,.skin-night .masthead,.skin-night .masthead .wrap,.skin-night .ticker,.skin-night .ticker .wrap,.skin-night .belowbar,.skin-night .belowbar .wrap,.skin-night .slidebar{background:var(--paper);color:var(--ink);border-color:var(--line)}
.skin-night .topbar,.skin-night .topbar .wrap,.skin-night .catnav,.skin-night .catnav .wrap{background:var(--black)}
.skin-night .catnav{border-bottom:1px solid var(--line)}
.skin-night .catnav a.on:not(.navhome),.skin-night .catnav a:not(.navhome):hover{background:transparent;color:var(--sun);border-color:var(--sun)}
.skin-night .catnav .search{background:#15181d}
.skin-night .logo:not(.has-dark) img{background:#fff;padding:4px 6px;border-radius:6px}
.skin-night .logo.has-dark .logo-l{display:none}.skin-night .logo.has-dark .logo-d{display:block}
.skin-night .themebtn{display:none}
.skin-night .slidebar .cat{background:var(--sun);color:#111}.skin-night .slidebar{border-bottom-color:var(--sun)}
.skin-night .btab{border-bottom:1px solid var(--line);height:auto;padding-bottom:10px;align-items:center}
.skin-night .btab .bt>span,.skin-tricolor .btab .bt>span{padding-block:0}
.skin-night .btab .bt{background:transparent;color:var(--ink);padding:0;font-size:21px;font-weight:800;gap:10px}
.skin-night .btab .bt::before{content:"";width:4px;height:22px;background:var(--c);border-radius:2px;flex:none}
.skin-night .c-black{--c:var(--sun)}
.skin-night .va{background:#1f242b;color:#aab0b7}
.skin-night .wtab{border-bottom:1px solid var(--line);height:auto;padding-bottom:8px}
.skin-night .wtab>*{background:transparent;color:var(--sun);padding:0;font-size:17px}
.skin-night .big .img,.skin-night .card .img,.skin-night .ov{border-radius:8px}.skin-night .li .th{border-radius:6px}
.skin-night .card .noimg,.skin-night .big .noimg,.skin-night .li .noimg,.skin-night .ov .noimg{background:linear-gradient(135deg,#1f242b,#2a3038)}
.skin-night .big h3 a:hover,.skin-night .card h3 a:hover,.skin-night .li h4 a:hover,.skin-night .ranked li a:hover{color:var(--sun)}
.skin-night .ranked li::before{color:var(--sun)}
.skin-night .kick a{color:#ff6b6e}
.skin-night .tags a{background:var(--paper2)}.skin-night .tags a:hover{background:var(--sun);color:#111}
.skin-night .cform input,.skin-night .cform textarea,.skin-night .nlbox input,.skin-night .accform input,.skin-night .tipcard textarea,.skin-night .tipcard .row2 input{background:#1a1e24;color:var(--ink);border-color:#2c323a}
.skin-night .share a{background:#1f242b}.skin-night .share a:hover{background:var(--red)}
.skin-night .pager a{border-color:var(--line)}.skin-night .pager a.on{background:var(--sun);color:#111;border-color:var(--sun)}
.skin-night .listhead{border-bottom-color:var(--line)}
.skin-night .body a{color:#ff8486}.skin-night .body blockquote{border-color:var(--sun)}
.skin-night .foot,.skin-night .foot .wrap{background:var(--black)}
.skin-night .correction{background:#2d2717;border-color:#5c4b1a;color:#eadfbe}
.skin-night .sponsorbar{background:#2d2717;border-color:#5c4b1a;color:#eadfbe}
.skin-night .lbkeys,.skin-night .lu.pinned{background:var(--paper2)}