/* Naqra R6.52 — UX stability, story controls, mobile reader and layout polish */

/* First-run guide: align with Naqra mint/teal identity instead of the older violet card. */
.nq-market-guide{
  border:1px solid #d8ebe4!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(99,189,221,.16),transparent 28%),
    radial-gradient(circle at 8% 100%,rgba(241,181,66,.11),transparent 28%),
    linear-gradient(145deg,#ffffff,#f5fbf8)!important;
  box-shadow:0 16px 42px rgba(18,72,68,.09)!important;
  color:#123047!important;
}
.nq-guide-kicker{color:#087f79!important}
.nq-market-guide h2{color:#123047!important;letter-spacing:-.01em}
.nq-guide-close{background:#edf6f3!important;color:#476760!important}
.nq-guide-steps{gap:12px!important}
.nq-guide-steps>span{
  border-color:#dfece7!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 7px 18px rgba(20,72,67,.045);
  min-height:82px;
  align-content:center;
}
.nq-guide-steps i{
  background:linear-gradient(145deg,#dff6ef,#e9f8fb)!important;
  color:#087f79!important;
  box-shadow:inset 0 0 0 1px rgba(8,127,121,.08);
}
.nq-guide-steps b{color:#173e3a!important}
.nq-guide-steps small{color:#687a76!important;line-height:1.55}
.nq-guide-actions .primary{
  background:linear-gradient(145deg,#0a9189,#08736e)!important;
  box-shadow:0 7px 16px rgba(8,127,121,.2);
}
.nq-guide-actions button:not(.primary){background:#edf4f1!important;color:#45625d!important}

/* Future-awareness tracks: balanced real grid on desktop, one column on smaller screens. */
.future-accordion{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start;
  gap:16px!important;
}
.future-track-card{min-width:0}
.future-track-card:last-child:nth-child(odd){grid-column:1/-1}
.future-track-card summary{min-width:0}
.future-track-copy{min-width:0}
.future-track-copy h2,.future-track-copy p{overflow-wrap:anywhere}
.future-track-body{min-width:0}
.future-unit-list{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Story reader: explicit settings instead of ambiguous cycle buttons. */
.r652-reader-preferences{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:10px;
  margin-top:12px;
  text-align:right;
}
.r652-pref-group{
  min-width:0;
  margin:0;
  padding:10px;
  border:1px solid #e7e4db;
  border-radius:15px;
  background:rgba(255,255,255,.78);
}
.r652-pref-group legend{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 6px;
  color:#586676;
  font-size:.67rem;
  font-weight:900;
}
.r652-pref-group legend .ui-icon{width:15px;height:15px;color:var(--story-accent)}
.r652-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.r652-rate-segments{grid-template-columns:repeat(4,minmax(0,1fr))}
.r652-segment{
  min-width:0;
  min-height:38px;
  border:1px solid #e2e7ec;
  border-radius:11px;
  background:#fff;
  color:#52647b;
  font:inherit;
  font-size:.67rem;
  font-weight:850;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.r652-segment span,.r652-segment small{display:block;line-height:1.15}
.r652-segment small{margin-top:2px;font-size:.58rem;color:#7b8795}
.r652-segment.active{
  border-color:color-mix(in srgb,var(--story-accent) 42%,#dce5ed);
  background:color-mix(in srgb,var(--story-accent) 10%,#fff);
  color:#123b64;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--story-accent) 18%,transparent),0 4px 10px rgba(23,56,87,.05);
}
.r652-segment.active small{color:var(--story-accent)}
.r652-segment:active{transform:scale(.98)}
.r652-segment:focus-visible{outline:3px solid color-mix(in srgb,var(--story-accent) 24%,transparent);outline-offset:2px}
.r615-reading-tools{display:none!important}
.r615-swipe-hint{display:block!important;margin:8px 0 0;text-align:center;color:#8a7865;font-size:.61rem;font-weight:760}

/* With no verified narrator, present navigation cleanly and hide internal provider state. */
.r69-main-controls.no-audio{grid-template-columns:1fr 1fr;max-width:520px;gap:10px}
.r69-main-controls.no-audio .r69-side-nav{border:1px solid #dde8f0;background:#fff;border-radius:14px;box-shadow:0 5px 14px rgba(23,56,87,.05)}
.r69-reader-options.visual-only-options{grid-template-columns:minmax(180px,280px);justify-content:center}
.r69-reader-options.visual-only-options .r69-option{background:#fff;border:1px solid #e4ebf1}
.r634-geffen-unavailable,#storyAudioStatus[data-narrator-verified="false"]{display:none!important}
.r623-story-reader-ready .r69-story-info:after{display:none!important;content:none!important}

/* Mobile story information: compact card instead of a long vertical pile. */
@media(max-width:900px){
  .r69-reader-shell{grid-template-columns:1fr!important;gap:12px!important}
  .r69-story-info{
    display:grid!important;
    position:static!important;
    top:auto!important;
    grid-template-columns:84px minmax(0,1fr);
    grid-template-areas:
      "cover title"
      "cover progress"
      "meta meta";
    align-items:center;
    gap:7px 12px;
    padding:11px!important;
    border-radius:18px!important;
    box-shadow:0 8px 22px rgba(23,56,87,.065)!important;
    order:2;
  }
  .r69-story-info>img{grid-area:cover;width:84px!important;height:72px!important;aspect-ratio:auto!important;border-radius:13px!important}
  .r69-story-info h2{grid-area:title;margin:0!important;font-size:.91rem!important;align-self:end}
  .r69-story-info>.reader-progress{grid-area:progress;margin:0!important;align-self:start}
  .r69-story-info>.reader-progress>span,.r69-story-info>.reader-progress>b{font-size:.62rem}
  .r69-story-info>p,.r69-story-info>.story-parent-note{display:none!important}
  .r69-story-meta{grid-area:meta;display:flex!important;flex-wrap:wrap;gap:6px!important;margin:3px 0 0!important;padding-top:7px;border-top:1px solid #eef2f5}
  .r69-story-meta span{flex:1 1 120px;justify-content:center;min-height:31px;padding:5px 7px;border-radius:10px;background:#f7f9fb;font-size:.64rem!important}
  .r620-focus-mode .r69-story-info{display:none!important}
}

@media(max-width:760px){
  .future-accordion{grid-template-columns:1fr!important}
  .future-track-card:last-child:nth-child(odd){grid-column:auto}
  .future-unit-list{grid-template-columns:1fr}
  .nq-market-guide{width:calc(100% - 18px)!important;margin:12px auto 18px!important;padding:18px 14px!important;border-radius:20px!important}
  .nq-market-guide h2{padding-inline-end:28px;font-size:1.3rem!important;line-height:1.4}
  .nq-guide-steps>span{min-height:70px;padding:11px!important}
  .r652-reader-preferences{grid-template-columns:1fr;gap:7px;margin-top:9px}
  .r652-pref-group{padding:8px}
  .r652-segment{min-height:40px;font-size:.65rem}
  .r69-reader-options{padding:6px!important;border-radius:15px!important}
  .r69-reader-options.has-audio-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r69-reader-options.visual-only-options{grid-template-columns:1fr!important}
  .r69-option{min-height:44px!important}
  .r620-focus-toggle{min-height:38px!important;padding:6px 8px!important;font-size:.68rem!important;border-radius:11px!important}
}

@media(max-width:560px){
  .r69-story-reader{margin-inline:-6px!important}
  .r69-story-topbar{grid-template-columns:42px minmax(0,1fr) auto!important;gap:7px!important;padding-inline:8px!important}
  .r69-reader-back{width:40px!important;height:40px!important}
  .r69-story-title h1{font-size:.9rem!important}
  .r69-scene-count{min-width:47px!important;font-size:.65rem!important;padding:6px!important}
  .r69-story-stage{padding-inline:5px!important}
  .r69-story-stage>.story-scene-visual{height:clamp(235px,66vw,345px)!important}
  .r69-reading-card{padding:13px 11px 11px!important}
  .r69-reading-card .story-guided-text{font-size:1.06rem!important;line-height:1.85!important}
  .r615-text-scale-1 .r69-reading-card .story-guided-text{font-size:1.22rem!important}
  .r615-text-scale-2 .r69-reading-card .story-guided-text{font-size:1.38rem!important}
  .r652-rate-segments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r69-main-controls.no-audio{grid-template-columns:1fr 1fr!important;padding:5px!important;gap:6px!important}
  .r69-main-controls.no-audio .r69-side-nav{min-height:46px!important;font-size:.72rem!important}
  .r69-story-info{grid-template-columns:68px minmax(0,1fr)!important;gap:6px 9px!important;padding:9px!important}
  .r69-story-info>img{width:68px!important;height:60px!important}
  .r69-story-meta span{flex:1 1 31%;font-size:.59rem!important;padding-inline:4px}
  .r69-scene-strip{padding-bottom:7px!important}
}

.r652-reader-refreshed{animation:r652ReaderRefresh .18s ease both}
@keyframes r652ReaderRefresh{from{opacity:.78}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.r652-reader-refreshed{animation:none}.r652-segment{transition:none}}


/* R6.52 — Future-skills stage page: each axis is one coherent responsive card. */
.r652-future-stage-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch;
  max-width:1180px!important;
  margin-inline:auto!important;
}
.r652-future-unit-card{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:9px;
  padding:11px;
  border:1px solid #e4e8ef;
  border-radius:24px;
  background:linear-gradient(180deg,#fbfefd,#fff);
  box-shadow:0 10px 26px rgba(23,56,87,.055);
}
.r652-future-unit-card>.unit-sep{
  grid-column:auto!important;
  display:grid!important;
  gap:3px!important;
  margin:0!important;
  padding:4px 5px 2px!important;
  min-height:53px;
  align-content:center;
}
.r652-future-unit-card>.unit-sep:after{display:none!important}
.r652-future-unit-card>.unit-sep span{
  font-size:.65rem!important;
  font-weight:900!important;
  color:#148b82!important;
}
.r652-future-unit-card>.unit-sep b{
  font-size:1.02rem!important;
  line-height:1.45!important;
  color:#26334c!important;
}
.r652-future-unit-card>.premium-stage{
  width:100%!important;
  margin:0!important;
  min-height:100%!important;
}
@media(max-width:980px){
  .r652-future-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .r652-future-stage-grid{grid-template-columns:1fr!important;gap:11px!important}
  .r652-future-unit-card{padding:9px;border-radius:20px}
  .r652-future-unit-card>.unit-sep{min-height:auto;padding:3px 4px!important}
  .r652-future-unit-card>.unit-sep b{font-size:.94rem!important}
}

/* R6.52 — Hero typography refinement: premium hierarchy, no decorative underline */
.nq-r10-hero .hero-copy{
  max-width:560px;
}
.nq-r10-hero .hero-copy .nq-r10-brand-chip{
  margin-bottom:2px;
  padding:7px 12px;
  border-color:rgba(8,127,121,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(242,250,247,.92));
  box-shadow:0 8px 22px rgba(21,78,73,.06);
  color:#315f5a;
  letter-spacing:0;
}
.nq-r10-hero .hero-copy h1{
  max-width:10.8ch!important;
  margin:14px 0 12px!important;
  color:#17324a!important;
  font-family:"Alexandria","Readex Pro","Tajawal",system-ui,sans-serif!important;
  font-size:clamp(3.15rem,4.55vw,4.45rem)!important;
  font-weight:900!important;
  line-height:1.075!important;
  letter-spacing:-.035em!important;
  text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.nq-r10-hero .hero-copy h1 em{
  display:inline-block;
  color:#0a9189!important;
  font-style:normal!important;
  font-weight:900!important;
  text-decoration:none!important;
  text-decoration-line:none!important;
  text-shadow:0 10px 26px rgba(10,145,137,.10);
}
.nq-r10-hero .hero-copy h1 em::before,
.nq-r10-hero .hero-copy h1 em::after{
  content:none!important;
  display:none!important;
}
.nq-r10-hero .hero-copy>p{
  max-width:430px!important;
  margin:0 0 20px!important;
  color:#60717a!important;
  font-size:.94rem!important;
  font-weight:600!important;
  line-height:1.75!important;
  letter-spacing:0!important;
}
@media(min-width:1041px){
  .nq-r10-hero .hero-copy{
    padding-inline-end:24px!important;
  }
}
@media(max-width:760px){
  .nq-r10-hero .hero-copy{
    max-width:none;
  }
  .nq-r10-hero .hero-copy h1{
    max-width:12ch!important;
    margin:9px auto 8px!important;
    font-size:clamp(2rem,8.8vw,2.75rem)!important;
    line-height:1.12!important;
    letter-spacing:-.025em!important;
  }
  .nq-r10-hero .hero-copy>p{
    max-width:31ch!important;
    margin-inline:auto!important;
    margin-bottom:14px!important;
    font-size:.82rem!important;
    line-height:1.65!important;
  }
}


/* R6.52 — Premium platform metrics: clear hierarchy, balanced cards, responsive 2×2 mobile grid. */
.r652-stats{
  position:relative;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%;
  margin:20px 0 24px!important;
  padding:0!important;
  isolation:isolate;
}
.r652-stats::before{
  content:"";
  position:absolute;
  inset:18% 4% auto;
  height:64%;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(13,148,136,.055),rgba(59,130,246,.045),rgba(245,158,11,.045));
  filter:blur(26px);
  pointer-events:none;
}
.r652-stat{
  --stat-accent:#0a9189;
  --stat-soft:#e9f8f4;
  position:relative;
  min-width:0;
  min-height:132px;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:13px!important;
  padding:17px 16px!important;
  overflow:hidden;
  border:1px solid #e4ece9!important;
  border-radius:22px!important;
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(250,253,252,.96))!important;
  box-shadow:0 10px 28px rgba(23,56,87,.065),inset 0 1px 0 rgba(255,255,255,.9)!important;
  text-align:right;
}
.r652-stat::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--stat-accent),color-mix(in srgb,var(--stat-accent) 42%,#fff));
  opacity:.9;
}
.r652-stat::after{
  content:"";
  position:absolute;
  width:88px;
  height:88px;
  left:-34px;
  bottom:-40px;
  border-radius:50%;
  background:var(--stat-soft);
  opacity:.6;
  pointer-events:none;
}
.r652-stat.emerald{--stat-accent:#0a9189;--stat-soft:#e4f7f2}
.r652-stat.amber{--stat-accent:#d89112;--stat-soft:#fff4d7}
.r652-stat.blue{--stat-accent:#3478c6;--stat-soft:#e9f2ff}
.r652-stat.teal{--stat-accent:#178d87;--stat-soft:#e6f7f4}
.r652-stat .stat-icon{
  position:relative;
  z-index:1;
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:16px!important;
  color:var(--stat-accent)!important;
  background:var(--stat-soft)!important;
  border:1px solid color-mix(in srgb,var(--stat-accent) 13%,#fff)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 16px color-mix(in srgb,var(--stat-accent) 10%,transparent)!important;
}
.r652-stat .stat-icon .ui-icon{width:23px;height:23px}
.r652-stat-copy{
  position:relative;
  z-index:1;
  min-width:0;
  display:grid!important;
  grid-template-columns:auto 1fr;
  grid-template-areas:"value title" "desc desc";
  align-items:end;
  column-gap:8px;
  row-gap:5px;
}
.r652-stat-value{
  grid-area:value;
  display:block!important;
  margin:0!important;
  color:#17324a!important;
  font-family:"Alexandria","Readex Pro","Tajawal",system-ui,sans-serif!important;
  font-size:clamp(1.48rem,2vw,2rem)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.r652-stat-copy strong{
  grid-area:title;
  min-width:0;
  padding-bottom:1px;
  color:#344958;
  font-size:.78rem;
  font-weight:900;
  line-height:1.35;
}
.r652-stat-copy small{
  grid-area:desc;
  display:block!important;
  margin:0!important;
  color:#71807e!important;
  font-size:.65rem!important;
  font-weight:650!important;
  line-height:1.55!important;
}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  .r652-stat{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .r652-stat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--stat-accent) 22%,#e4ece9)!important;box-shadow:0 15px 34px rgba(23,56,87,.09),inset 0 1px 0 rgba(255,255,255,.95)!important}
}
@media(max-width:900px){
  .r652-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:16px 0 20px!important}
  .r652-stat{min-height:118px;padding:14px!important;border-radius:19px!important}
}
@media(max-width:560px){
  .r652-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .r652-stat{grid-template-columns:40px minmax(0,1fr)!important;gap:9px!important;min-height:106px;padding:12px 10px!important;border-radius:17px!important}
  .r652-stat .stat-icon{width:40px!important;height:40px!important;border-radius:13px!important}
  .r652-stat .stat-icon .ui-icon{width:19px;height:19px}
  .r652-stat-copy{grid-template-columns:1fr;grid-template-areas:"value" "title";gap:2px;align-items:start}
  .r652-stat-value{font-size:1.35rem!important}
  .r652-stat-copy strong{font-size:.69rem;line-height:1.3}
  .r652-stat-copy small{display:none!important}
}
@media(max-width:360px){
  .r652-stat{grid-template-columns:34px minmax(0,1fr)!important;padding:10px 8px!important;gap:7px!important}
  .r652-stat .stat-icon{width:34px!important;height:34px!important}
  .r652-stat-value{font-size:1.18rem!important}
  .r652-stat-copy strong{font-size:.62rem}
}