/* Najdeah Space - the members area inside My Account.
   Scoped to .njd-sp so nothing here can reach the shop. Colours come from the
   .nv custom properties in najdeah-pages.css; the fallbacks are only for the
   case where this file loads on a screen that has no .nv ancestor. */

.njd-sp{--sp-ink:var(--ink,#0F1115);--sp-mut:var(--mut,#6E7379);--sp-line:var(--line,#EAEAEC);
 --sp-or:var(--or,#FF5A1F);--sp-bg:var(--bg,#F7F7F8);
 color:var(--sp-ink);line-height:1.6}
.njd-sp *{box-sizing:border-box}
.njd-sp h2,.njd-sp h3{margin:0;letter-spacing:-.02em}
.njd-sp a{text-decoration:none;color:inherit}

/* ---- section bar ---- */
.njd-sp-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
 flex-wrap:wrap;margin:0 0 20px}
.njd-sp-eye{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:var(--sp-or);margin:0 0 5px}
.njd-sp-bar h2{font-size:21px;font-weight:800}
.njd-sp-bar-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.njd-sp-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;
 border:1px solid var(--sp-line);background:#fff;font-size:13px;font-weight:700;transition:.16s}
.njd-sp-tab:hover{border-color:var(--sp-or);color:var(--sp-or)}
.njd-sp-days{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
 background:var(--sp-bg);border:1px solid var(--sp-line);font-size:12.5px;font-weight:700;
 color:var(--sp-mut)}
.njd-sp-days.warn{background:#FFF4EC;border-color:#FFD3BC;color:#B23C0E}
.njd-sp-days-admin{background:#F0F4FF;border-color:#CBD8FF;color:#2F4BAF}

/* ---- filter chips ---- */
.njd-sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.njd-sp-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
 border:1px solid var(--sp-line);background:#fff;font-size:12.5px;font-weight:700;transition:.16s}
.njd-sp-chip span{color:var(--sp-mut);font-weight:600}
.njd-sp-chip:hover{border-color:var(--sp-or);color:var(--sp-or)}
.njd-sp-chip.on{background:var(--sp-ink);border-color:var(--sp-ink);color:#fff}
.njd-sp-chip.on span{color:rgba(255,255,255,.6)}
.njd-sp-chip.sm{padding:6px 11px;font-size:11.5px;letter-spacing:.04em}
.njd-sp-fmts{margin-top:-8px}

/* ---- workshops grid ---- */
.njd-sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.njd-sp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sp-line);
 border-radius:14px;overflow:hidden;transition:.18s}
.njd-sp-card:hover{border-color:var(--sp-or);transform:translateY(-2px);
 box-shadow:0 8px 22px rgba(15,17,21,.07)}
.njd-sp-thumb{position:relative;aspect-ratio:16/9;background:var(--sp-bg);overflow:hidden}
.njd-sp-thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.njd-sp-thumb-fb{position:absolute;inset:0;display:grid;place-items:center;color:var(--sp-mut)}
/* the progress bar sits on the thumbnail rather than under the title, so a
   half-finished workshop is visible while scanning the grid */
.njd-sp-bar-p{position:absolute;inset-inline:0;bottom:0;height:4px;background:rgba(15,17,21,.14)}
.njd-sp-bar-p i{display:block;height:100%;background:var(--sp-or)}
.njd-sp-card-b{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.njd-sp-card-b h3{font-size:14.5px;font-weight:800;line-height:1.35}
.njd-sp-card-b p{margin:0;font-size:12.5px;color:var(--sp-mut);line-height:1.55}
.njd-sp-meta{margin-top:auto;font-size:11.5px;font-weight:600;color:var(--sp-mut)}

/* ---- single workshop ---- */
.njd-sp-back{display:inline-block;font-size:12.5px;font-weight:700;color:var(--sp-mut);
 margin:0 0 10px}
.njd-sp-back:hover{color:var(--sp-or)}
.njd-sp-title{font-size:22px;font-weight:800;margin:0 0 18px}
.njd-sp-split{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:22px;align-items:start}
.njd-sp-main{min-width:0}
.njd-sp-player{position:relative;padding-top:56.25%;border-radius:13px;overflow:hidden;
 background:#0F1115}
.njd-sp-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.njd-sp-noplayer{display:grid;place-items:center;aspect-ratio:16/9;border-radius:13px;
 background:var(--sp-bg);border:1px dashed var(--sp-line);color:var(--sp-mut);
 font-size:13.5px;text-align:center;padding:20px}
.njd-sp-lhead{display:flex;align-items:center;justify-content:space-between;gap:14px;
 flex-wrap:wrap;margin:16px 0 0}
.njd-sp-lhead h3{font-size:17px;font-weight:800}
.njd-sp-donebtn{padding:9px 15px;border-radius:9px;border:1px solid var(--sp-line);background:#fff;
 font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.16s}
.njd-sp-donebtn:hover{border-color:var(--sp-or);color:var(--sp-or)}
.njd-sp-donebtn.on{background:#F0FAF2;border-color:#BCE5C6;color:#1E6B33}
.njd-sp-desc{margin:12px 0 0;font-size:14px;color:#4A5057}
.njd-sp-desc p{margin:0 0 10px}
.njd-sp-pointer{display:inline-flex;align-items:center;gap:9px;margin:16px 0 0;padding:12px 16px;
 border-radius:11px;background:var(--sp-bg);border:1px solid var(--sp-line);
 font-size:13px;font-weight:700;transition:.16s}
.njd-sp-pointer:hover{border-color:var(--sp-or);color:var(--sp-or)}

/* ---- curriculum rail ---- */
.njd-sp-rail{background:#fff;border:1px solid var(--sp-line);border-radius:14px;overflow:hidden;
 position:sticky;top:20px}
.njd-sp-rail-head{padding:13px 16px;border-bottom:1px solid var(--sp-line);
 font-size:12px;font-weight:700;color:var(--sp-mut);background:var(--sp-bg);
 display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
 list-style:none}
/* the default disclosure triangle is replaced by the chevron on the other
   side, which points the way a right-to-left reader expects */
.njd-sp-rail-head::-webkit-details-marker{display:none}
.njd-sp-rail-head .t{flex:1 1 auto;min-width:0}
.njd-sp-rail-head:hover{color:var(--sp-ink)}
.njd-sp-rail-head:focus-visible{outline:2px solid var(--sp-or);outline-offset:-2px}
.njd-sp-chev{flex:0 0 auto;display:grid;place-items:center;transition:transform .18s ease}
.njd-sp-rail[open] .njd-sp-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.njd-sp-chev{transition:none}}
/* closed, the head is the whole box, so its bottom rule would draw a line
   under nothing */
.njd-sp-rail:not([open]) .njd-sp-rail-head{border-bottom:0}
/* Module headings in the rail. Only a course draws these; a workshop's rail
   stays one unbroken list, which is the visual difference between the two. */
.njd-sp-mod+.njd-sp-mod{border-top:1px solid var(--sp-line)}
.njd-sp-mod-h{display:flex;align-items:center;gap:8px;margin:0;padding:11px 16px;
 background:var(--sp-bg);font-size:12px;font-weight:800}
.njd-sp-mod-h .n{display:grid;place-items:center;width:19px;height:19px;border-radius:5px;
 background:var(--sp-ink);color:#fff;font-size:11px;flex:0 0 auto}
.njd-sp-mod-h .t{flex:1 1 auto;min-width:0;line-height:1.35}
.njd-sp-mod-h .c{color:var(--sp-mut);font-weight:600}
.njd-sp-mod .njd-sp-rail-list{max-height:none}

/* Two passes side by side on the gate. */
.njd-sp-tiers{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
 margin:0 0 20px;text-align:start}
.njd-sp-tier{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;
 background:#1B1D22;border:1px solid #2C3036}
.njd-sp-tier.best{border-color:var(--sp-or)}
.njd-sp-tier .lb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#fff}
.njd-sp-tier .best-t{padding:2px 8px;border-radius:999px;background:var(--sp-or);color:#fff;
 font-size:10.5px;font-weight:800}
.njd-sp-tier .pr{font-size:31px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff}
.njd-sp-tier .sub{font-size:12px;color:#A8ADB4}
.njd-sp-tier .njd-sp-btn{margin-top:6px;text-align:center}
.njd-sp-tier.alt .njd-sp-btn{background:transparent;border:1px solid #3A3F46;color:#fff}
.njd-sp-tier.alt .njd-sp-btn:hover{border-color:var(--sp-or);color:var(--sp-or)}

.njd-sp-rail-list{list-style:none;margin:0;padding:0;max-height:62vh;overflow-y:auto}
.njd-sp-rail-list li+li{border-top:1px solid var(--sp-line)}
.njd-sp-rail-list a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;
 align-items:center;padding:12px 15px;font-size:13px;transition:.14s}
.njd-sp-rail-list a:hover{background:var(--sp-bg)}
.njd-sp-rail-list .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
 background:var(--sp-bg);border:1px solid var(--sp-line);font-size:11.5px;font-weight:800;
 color:var(--sp-mut)}
.njd-sp-rail-list .t{font-weight:600;line-height:1.4}
.njd-sp-rail-list .d{font-size:11px;color:var(--sp-mut);font-weight:600}
.njd-sp-rail-list li.on a{background:#FFF4EC}
.njd-sp-rail-list li.on .n{background:var(--sp-or);border-color:var(--sp-or);color:#fff}
.njd-sp-rail-list li.on .t{font-weight:800;color:var(--sp-or)}
.njd-sp-rail-list li.done .n{background:#E9F6ED;border-color:#BCE5C6;color:#1E6B33}
.njd-sp-rail-list li.done.on .n{background:var(--sp-or);border-color:var(--sp-or);color:#fff}

/* ---- questions ---- */
.njd-sp-qa{margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--sp-line)}
.njd-sp-qa h3{font-size:16px;font-weight:800;margin:0 0 14px}
.njd-sp-ask{margin:0 0 20px}
.njd-sp-ask textarea{width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--sp-line);
 font:inherit;font-size:13.5px;resize:vertical;background:#fff}
.njd-sp-ask textarea:focus{outline:none;border-color:var(--sp-or);box-shadow:0 0 0 3px #FFEDE3}
.njd-sp-ask button{margin-top:9px;padding:11px 20px;border:0;border-radius:9px;
 background:var(--sp-or);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;
 transition:.16s}
.njd-sp-ask button:hover{background:var(--sp-ink)}
.njd-sp-q{padding:16px 0;border-top:1px solid var(--sp-line)}
.njd-sp-q-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;
 color:var(--sp-mut);margin:0 0 6px}
.njd-sp-q-head strong{color:var(--sp-ink);font-size:13.5px}
.njd-sp-q-body p,.njd-sp-a p{margin:0 0 8px;font-size:13.5px;line-height:1.65}
.njd-sp-tag{padding:3px 9px;border-radius:999px;background:var(--sp-bg);border:1px solid var(--sp-line);
 font-size:10.5px;font-weight:800;letter-spacing:.04em}
.njd-sp-tag.on{background:#F0FAF2;border-color:#BCE5C6;color:#1E6B33}
/* the official answer is indented and marked, because the whole value of the
   section is being able to tell the team's answer from a guess */
.njd-sp-a{margin:12px 0 0;padding:13px 15px;border-radius:11px;background:var(--sp-bg)}
.njd-sp-a.official{background:#F7FBF8;border:1px solid #D6EBDD;
 border-inline-start:3px solid #1E6B33}

/* ---- library ---- */
.njd-sp-search{display:flex;gap:8px;margin:0 0 16px}
.njd-sp-search input{flex:1;min-width:0;padding:11px 15px;border-radius:10px;
 border:1px solid var(--sp-line);font:inherit;font-size:13.5px;background:#fff}
.njd-sp-search input:focus{outline:none;border-color:var(--sp-or);box-shadow:0 0 0 3px #FFEDE3}
.njd-sp-search button{padding:11px 20px;border:0;border-radius:10px;background:var(--sp-ink);
 color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.16s}
.njd-sp-search button:hover{background:var(--sp-or)}
.njd-sp-count{font-size:12.5px;font-weight:700;color:var(--sp-mut);margin:0 0 12px}
.njd-sp-files{display:flex;flex-direction:column;gap:10px}
.njd-sp-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
 padding:14px 16px;background:#fff;border:1px solid var(--sp-line);border-radius:12px;
 transition:.16s}
.njd-sp-file:hover{border-color:var(--sp-or)}
.njd-sp-badge{display:grid;place-items:center;min-width:58px;padding:9px 10px;border-radius:9px;
 background:var(--sp-bg);border:1px solid var(--sp-line);font-size:10.5px;font-weight:800;
 letter-spacing:.05em;color:var(--sp-mut)}
.njd-sp-file-b h3{font-size:14px;font-weight:700;line-height:1.4}
.njd-sp-file-b p{margin:3px 0 0;font-size:12.5px;color:var(--sp-mut);line-height:1.5}
.njd-sp-file .njd-sp-meta{display:block;margin-top:4px}
.njd-sp-dl{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:9px;
 background:var(--sp-ink);color:#fff!important;font-size:12.5px;font-weight:700;
 white-space:nowrap;transition:.16s}
.njd-sp-dl:hover{background:var(--sp-or)}

/* ---- empty states ---- */
.njd-sp-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
 padding:46px 24px;border:1px dashed var(--sp-line);border-radius:14px;background:var(--sp-bg);
 color:var(--sp-mut)}
.njd-sp-empty p{margin:0;font-size:13.5px;max-width:40ch}
.njd-sp-empty a{font-weight:700;color:var(--sp-or)}
.njd-sp-dim{font-size:13px;color:var(--sp-mut)}
.njd-sp-fine{font-size:12px;color:var(--sp-mut);margin:8px 0 0;line-height:1.6}

/* ---- the gate ---- */
.njd-sp-gate{max-width:720px;margin-inline:auto}
.njd-sp-gate-head{text-align:center}
.njd-sp-gate-head h2{font-size:26px;font-weight:800;margin:6px 0 10px;line-height:1.3;
 text-wrap:balance}
.njd-sp-gate-head p{margin:0 auto;max-width:52ch;font-size:14.5px;color:#4A5057;line-height:1.75}

/* The three numbers that answer "what am I actually buying". Set in a row of
   equal cells so they read as one fact, not three sentences. */
.njd-sp-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:0;
 list-style:none;margin:22px 0 0;padding:0}
.njd-sp-facts li{display:flex;flex-direction:column;align-items:center;gap:2px;
 padding:0 22px;font-size:12.5px;color:var(--sp-mut);text-align:center;line-height:1.4}
.njd-sp-facts li+li{border-inline-start:1px solid var(--sp-line)}
.njd-sp-facts b{font-size:22px;font-weight:800;color:var(--sp-ink);
 font-variant-numeric:tabular-nums}

/* The price panel. The one dark block on the screen, so the eye lands on the
   decision rather than on the feature list. */
.njd-sp-buy{margin:26px 0;padding:24px;border-radius:16px;background:var(--sp-ink);
 color:#fff;text-align:center}
.njd-sp-buy-p{display:flex;align-items:baseline;justify-content:center;gap:8px;
 flex-wrap:wrap;margin:0 0 16px}
.njd-sp-buy-p b{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums}
.njd-sp-buy-p span{font-size:13px;color:#A8ADB4}
.njd-sp-buy .njd-sp-btn{display:inline-block;min-width:230px}
.njd-sp-buy .njd-sp-fine{color:#A8ADB4;margin:14px auto 0;max-width:46ch}

.njd-sp-perks{display:grid;gap:12px;margin:0}
@media (min-width:620px){.njd-sp-perks{grid-template-columns:1fr 1fr}}
.njd-sp-perk{display:flex;align-items:flex-start;gap:13px;
 padding:16px 18px;background:#fff;border:1px solid var(--sp-line);border-radius:13px}
.njd-sp-perk-i{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
 border-radius:10px;background:#FFF4EC;color:var(--sp-or)}
.njd-sp-perk-t{min-width:0}
.njd-sp-perk h3{font-size:14.5px;font-weight:800;margin:0 0 4px}
.njd-sp-perk p{margin:0;font-size:13px;color:var(--sp-mut);line-height:1.65}

.njd-sp-btn{display:inline-block;padding:14px 30px;border-radius:9px;background:var(--sp-or);
 color:#fff!important;font-size:14.5px;font-weight:700;transition:.16s}
.njd-sp-btn:hover{background:#fff;color:var(--sp-ink)!important}
.njd-sp-gate-foot{text-align:center;margin-top:18px}
.njd-sp-gate-foot a{font-weight:700;color:var(--sp-or)}

/* The library file preview, when the format has one. */
.njd-sp-fthumb{position:relative;flex:0 0 auto;display:block;width:58px;height:58px;
 border-radius:9px;overflow:hidden;background:var(--sp-bg);border:1px solid var(--sp-line)}
.njd-sp-fthumb img{width:100%;height:100%;object-fit:cover;display:block}
.njd-sp-fthumb em{position:absolute;inset-inline-start:0;inset-block-end:0;
 padding:1px 5px;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.04em;
 background:rgba(15,17,21,.82);color:#fff;border-start-end-radius:6px}

/* ---- narrow ---- */
@media (max-width:900px){
 .njd-sp-split{grid-template-columns:minmax(0,1fr)}
 /* the video comes first on a phone: the rail used to be pulled above it with
    order:-1, which put a full screen of lesson titles between the member and
    the thing they pressed play on */
 .njd-sp-rail{position:static}
 .njd-sp-rail-list{max-height:none}
}
@media (max-width:560px){
 .njd-sp-file{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
 .njd-sp-dl{grid-column:1/-1;justify-content:center}
 .njd-sp-bar h2{font-size:19px}
}

/* ═══════════════════════════════════════════════════════════════
   Additions that bring the built space up to the prototype:
   the header meter, the sub-nav, grouped sections, richer cards,
   the questions screen and the library's discipline rail.
   ═══════════════════════════════════════════════════════════════ */

/* ---- header strip ---- */
.njd-sp-sub{margin:6px 0 0;font-size:13px;color:var(--sp-mut)}
.njd-sp-meter{flex:1 0 100%;margin:14px 0 0;max-width:380px}
.njd-sp-meter-b{height:6px;border-radius:999px;background:var(--sp-line);overflow:hidden}
.njd-sp-meter-b i{display:block;height:100%;border-radius:999px;background:var(--sp-or)}
.njd-sp-meter-l{display:flex;justify-content:space-between;gap:10px;margin:7px 0 0;
 font-size:11.5px;color:var(--sp-mut)}

/* ---- sub-navigation ---- */
.njd-sp-subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 24px;
 border-bottom:1px solid var(--sp-line)}
.njd-sp-stab{display:inline-flex;align-items:center;gap:7px;padding:11px 15px;
 font-size:13.5px;font-weight:700;color:var(--sp-mut);border-bottom:2px solid transparent;
 margin-bottom:-1px}
.njd-sp-stab:hover{color:var(--sp-ink)}
.njd-sp-stab.on{color:var(--sp-ink);border-bottom-color:var(--sp-or)}
.njd-sp-stab .c{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--sp-bg);
 border:1px solid var(--sp-line);font-size:11px;font-weight:700;text-align:center}
.njd-sp-stab.on .c{background:var(--sp-or);border-color:var(--sp-or);color:#fff}
/* an outstanding question is the one count worth colouring on an unlit tab */
.njd-sp-stab .c.open{background:#FFF6E0;border-color:#F0D79A;color:#8A5A00}

/* ---- grouped sections ---- */
/* The site's own full-bleed rule, `.nv section { margin-inline: calc(50% - 50vw) }`,
   is written for the top-level bands of a designed page, where stretching to
   the viewport is the point. Inside the account panel it is a disaster: every
   <section> in the space was pulled 274px past both edges of an 892px panel,
   rendering 1440px wide and spilling its cards outside the white box. The
   space is a panel, not a page band, so it opts out for its whole subtree. */
.njd-sp section{margin-left:0!important;margin-right:0!important;
  width:auto!important;max-width:100%!important}

.njd-sp-sec{margin:0 0 30px}
.njd-sp-sec>header{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.njd-sp-sec>header h2{font-size:15.5px;font-weight:800}
.njd-sp-sec>header span{font-size:12px;color:var(--sp-mut)}
/* the rule fills whatever the heading leaves, so the row reads as one band */
.njd-sp-sec>header::after{content:"";flex:1;height:1px;background:var(--sp-line)}
.njd-sp-grid.one{grid-template-columns:minmax(0,320px)}
.njd-sp-resume .njd-sp-card{border-color:var(--sp-or)}

/* ---- card additions ---- */
.njd-sp-play{position:absolute;inset-inline-start:50%;inset-block-start:50%;
 transform:translate(50%,-50%);width:34px;height:34px;border-radius:999px;
 display:grid;place-items:center;background:rgba(15,17,21,.62);color:#fff;
 backdrop-filter:blur(2px)}
.njd-sp-card:dir(ltr) .njd-sp-play{transform:translate(-50%,-50%)}
.njd-sp-dur{position:absolute;inset-block-end:7px;inset-inline-end:7px;
 padding:2px 7px;border-radius:5px;background:rgba(15,17,21,.72);color:#fff;
 font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.njd-sp-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.njd-sp-tag.ar{background:#fff;border-color:var(--sp-line);color:var(--sp-mut)}
.njd-sp-tag.new{background:#FFF1EB;border-color:#FFD9C9;color:var(--sp-or)}
.njd-sp-tag.done{background:#E7F4EF;border-color:#BFE3D5;color:#12805C}
.njd-sp-tag.wait{background:#FFF6E0;border-color:#F0D79A;color:#8A5A00}
.njd-sp-num{font-size:11.5px;color:var(--sp-mut);font-variant-numeric:tabular-nums}

/* ---- one workshop ---- */
.njd-sp-lhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
 flex-wrap:wrap}
.njd-sp-lhead .njd-sp-tags{margin:8px 0 0}
.njd-sp-next{display:flex;flex-direction:column;gap:2px;margin:16px 0 0;padding:12px 15px;
 border:1px solid var(--sp-line);border-radius:11px;background:var(--sp-bg)}
.njd-sp-next:hover{border-color:var(--sp-or)}
.njd-sp-next span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:var(--sp-or)}
.njd-sp-next strong{font-size:13.5px}
.njd-sp-tick{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
 background:#E7F4EF;color:#12805C;flex:none}

/* ---- questions ---- */
.njd-sp-qa-head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.njd-sp-qa-head .c{font-size:12px;color:var(--sp-mut)}
.njd-sp-av{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;
 background:var(--sp-bg);border:1px solid var(--sp-line);font-size:10.5px;font-weight:800;
 letter-spacing:.04em;color:var(--sp-mut);flex:none}
.njd-sp-av.team{background:var(--sp-or);border-color:var(--sp-or);color:#fff}
.njd-sp-q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.njd-sp-q-head time{font-size:11.5px;color:var(--sp-mut)}
.njd-sp-at{display:inline-block;margin:8px 0 0;font-size:11.5px;color:var(--sp-mut)}
a.njd-sp-at:hover{color:var(--sp-or)}
.njd-sp-threads{display:flex;flex-direction:column;gap:14px}

/* ---- library split ---- */
.njd-sp-libsplit{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start}
.njd-sp-disc{display:flex;flex-direction:column;gap:2px;position:sticky;top:20px}
.njd-sp-disc a{display:flex;align-items:center;justify-content:space-between;gap:8px;
 padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--sp-mut)}
.njd-sp-disc a:hover{background:var(--sp-bg);color:var(--sp-ink)}
.njd-sp-disc a.on{background:var(--sp-bg);color:var(--sp-ink);
 box-shadow:inset 2px 0 0 var(--sp-or)}
.njd-sp-disc a:dir(ltr).on{box-shadow:inset -2px 0 0 var(--sp-or)}
.njd-sp-disc .n{font-size:11px;color:var(--sp-mut);font-variant-numeric:tabular-nums}
.njd-sp-fsz{font-size:11.5px;color:var(--sp-mut);font-variant-numeric:tabular-nums;
 white-space:nowrap;flex:none}

@media(max-width:820px){
 .njd-sp-libsplit{grid-template-columns:1fr;gap:16px}
 /* the rail becomes a scrolling chip row rather than a tall list on top of
    the results the reader came for */
 .njd-sp-disc{position:static;flex-direction:row;overflow-x:auto;gap:6px;
  padding-bottom:4px;-webkit-overflow-scrolling:touch}
 .njd-sp-disc a{white-space:nowrap;border:1px solid var(--sp-line)}
}

/* ═══════════════════════════════════════════════════════════════
   Focus view - وضع التركيز

   Watching a forty-minute lesson inside a shop's account dashboard means
   the site header, the footer's four columns and the account sidebar all
   sit around a video the member is trying to concentrate on. The toggle
   removes them for the duration and gives the width back to the content.

   It is applied to <html> by an inline script before paint (see
   najdeah_ms_focus_boot) so a member who left it on does not watch the
   chrome appear and then vanish on every page load.
   ═══════════════════════════════════════════════════════════════ */

html.njd-focus .njd-top,
html.njd-focus .njd-nav,
html.njd-focus .njd-foot,
html.njd-focus .nv-acct .woocommerce-MyAccount-navigation,
/* The account page's own furniture: the page hero with its breadcrumb and
   lede, the three help cards below the panel, and the reassurance bar under
   them. All of it is written for someone who came to fetch a purchased file,
   and none of it belongs behind a member who is here to watch a lesson. */
html.njd-focus .nv-ph,
html.njd-focus .nv-bar,
html.njd-focus section:has(>.w>.nv-hlp){display:none!important}

/* With the hero gone the panel would otherwise start hard against the top
   of the viewport. */
html.njd-focus .nv-acct{margin-top:0}
html.njd-focus .nv>section:first-of-type{padding-top:24px}

html.njd-focus .nv-acct{padding-top:16px}
html.njd-focus .nv-acct .woocommerce:has(.woocommerce-MyAccount-navigation){
 display:block}
html.njd-focus .njd-sp{max-width:1080px;margin-inline:auto}

/* The account sidebar goes, but the space's own three tabs stay: focus is
   meant to remove the site around the space, not to trap a member on one
   screen with no way to reach the library. */
html.njd-focus .njd-sp-subnav{margin-top:10px}

/* the player earns the extra room the hidden chrome freed up */
html.njd-focus .njd-sp-split{grid-template-columns:minmax(0,1fr) 300px}

.njd-sp-focus{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
 border-radius:9px;border:1px solid var(--sp-line);background:#fff;cursor:pointer;
 font:inherit;font-size:12.5px;font-weight:700;color:var(--sp-mut)}
.njd-sp-focus:hover{border-color:var(--sp-or);color:var(--sp-ink)}
html.njd-focus .njd-sp-focus{background:var(--sp-ink);border-color:var(--sp-ink);color:#fff}
.njd-sp-focus .off{display:none}
html.njd-focus .njd-sp-focus .off{display:inline}
html.njd-focus .njd-sp-focus .on{display:none}

/* leaving is possible without a mouse, and without hunting for the toggle */
html.njd-focus .njd-sp-focus::after{content:"esc";margin-inline-start:2px;padding:1px 5px;
 border-radius:4px;background:rgba(255,255,255,.18);font-size:10px;letter-spacing:.04em}

@media(max-width:820px){
 html.njd-focus .njd-sp-split{grid-template-columns:1fr}
}
@media print{
 .njd-sp-focus{display:none}
}

/* The workshop screen's top line: the way back on one side, the way into
   focus on the other. */
.njd-sp-toprow{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px}
.njd-sp-toprow .njd-sp-back{margin-bottom:0}
.njd-sp-bar-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* The staff-only "this is switched off" strip, and the screen a customer gets
   if they reach the endpoint while it is off. */
.njd-sp-offbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:0 0 20px;padding:11px 14px;border-radius:10px;
  background:#FFF6E8;border:1px solid #F3D9A8;color:#6B4E12;font-size:14px}
.njd-sp-offbar a{color:inherit;font-weight:700;text-decoration:underline}
.njd-sp-off{text-align:center;padding:44px 20px;max-width:520px;margin-inline:auto}
.njd-sp-off h2{margin:0 0 12px;font-size:21px;color:var(--sp-ink)}
.njd-sp-off p{margin:0 0 18px;color:var(--sp-mut);line-height:1.8}

/* ── منتجات نجديه: the shop products a membership includes ──
   The card is the file card's sibling, not a shop card: no add-to-cart, no
   rating, and the price is shown struck through because the point of the
   panel is that it has already been paid. */
.njd-sp-prodgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.njd-sp-prod{display:flex;gap:14px;padding:14px;border:1px solid var(--sp-line,#E8E8EA);border-radius:14px;background:#fff}
.njd-sp-prod-art{flex:0 0 74px}
.njd-sp-prod-art img{width:74px;height:auto;border-radius:8px;display:block}
.njd-sp-prod-b{min-width:0;flex:1}
.njd-sp-prod-b h3{margin:0 0 4px;font-size:15px;line-height:1.45}
.njd-sp-prod-b p{margin:6px 0 0;font-size:13px;color:var(--sp-mut,#6E7379)}
.njd-sp-prod-price{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sp-mut,#6E7379)}
.njd-sp-prod-price bdi,.njd-sp-prod-price .amount{text-decoration:line-through}
.njd-sp-prod-price em{font-style:normal;font-weight:600;color:var(--sp-or,#FF5A1F)}
.njd-sp-prod-files{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.njd-sp-prod-files li{display:flex;align-items:center;gap:8px;font-size:13px}
.njd-sp-prod-files .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.njd-sp-badge.sm{font-size:10px;padding:2px 6px}
.njd-sp-dl.sm{padding:5px 10px;font-size:12px}
@media (max-width:600px){.njd-sp-prod{flex-direction:column}.njd-sp-prod-art{flex:none}}

/* An announced workshop that has not been filmed yet. It is not a link, so
   it must not invite a click: no lift, no pointer, and the artwork sits back. */
.njd-sp-card.soon { cursor:default; opacity:.72; }
.njd-sp-card.soon:hover { transform:none; box-shadow:none; }
.njd-sp-card.soon .njd-sp-play { display:none; }
.njd-sp-tag.soon { background:#FFF3D6; color:#8A5B00; }

/* "جديد" on the Space tab in the account menu.
   The menu label itself cannot carry markup - WooCommerce escapes it in
   navigation.php - so the badge is drawn here, on the item WooCommerce already
   classes by endpoint. It is a pointer at something new, not a permanent part
   of the design: delete these rules once the Space stops being news. */
.nv-acct .woocommerce-MyAccount-navigation-link--space > a::after{
  content:"جديد"; margin-inline-start:auto;
  font-size:11px; font-weight:700; line-height:1;
  padding:4px 7px; border-radius:999px;
  background:#FFE9DA; color:#C24E10;
}
html[lang^="en"] .nv-acct .woocommerce-MyAccount-navigation-link--space > a::after{content:"New"}
/* on the dark active row the soft chip would disappear into it */
.nv-acct .woocommerce-MyAccount-navigation-link--space.is-active > a::after{
  background:#fff; color:#111;
}

/* What the content is worth bought piece by piece, and the saving that follows
   from it. The worth line sits on the dark buy panel above the cards; the
   saving sits inside each card, under its own price. Green, not orange: orange
   is the buy button's colour here, and a saving is information rather than a
   second thing to click. */
.njd-sp-worth{margin:0 0 14px;text-align:center;font-size:13.5px;color:#A8ADB4}
.njd-sp-worth b{color:#fff;font-weight:700}
.njd-sp-tier .save{align-self:flex-start;margin-top:2px;padding:3px 9px;border-radius:999px;
  background:rgba(58,169,105,.16);color:#6FD69B;font-size:11.5px;font-weight:700;line-height:1.5}