/* Kidzy Audit Studio v4.0 — responsive / mobile-first refinement
   This layer intentionally overrides v1–v3 layout rules without changing audit data. */

:root{--sidebar-w:306px;--mobile-header-bg:rgba(247,250,253,.96)}

html,body{max-width:100%;overflow-x:hidden}
.workspace,main,.view,.grid,.grid>* ,.card,.stat-card,.hero-panel,.studio-hero,.table-wrap,.screenshot-frame,.checkout-layout,.checkout-sim,.brand-lab,.home-anatomy,.architecture-morph{min-width:0;max-width:100%}
img,video,canvas,svg{max-width:100%}

/* -------------------------------------------------------------------------- */
/* Desktop shell: explicit side reservation fixes RTL overlap                  */
/* -------------------------------------------------------------------------- */
@media(min-width:901px){
  .app-shell{display:block!important;min-height:100vh}
  .sidebar{width:var(--sidebar-w)!important;left:0!important;right:auto!important;transform:none!important}
  .workspace{grid-column:auto!important;width:auto!important;margin-left:var(--sidebar-w)!important;margin-right:0!important;min-width:0}
  html[dir="rtl"] .sidebar{left:auto!important;right:0!important}
  html[dir="rtl"] .workspace{margin-left:0!important;margin-right:var(--sidebar-w)!important}
  body.presentation-mode .workspace,html[dir="rtl"] body.presentation-mode .workspace{margin-left:0!important;margin-right:0!important}
  body.presentation-mode .sidebar{transform:translateX(-105%)!important}
  html[dir="rtl"] body.presentation-mode .sidebar{transform:translateX(105%)!important}
  .sidebar-backdrop,.sidebar-close,.mobile-brand,.mobile-tools,.mobile-nav-search,.mobile-reading-progress{display:none!important}
  .workspace,.topbar,main{overflow-x:clip}
}

/* Tablet/laptop action compression without losing language */
@media(min-width:901px) and (max-width:1180px){
  .topbar{padding-inline:18px;gap:10px}
  .top-actions #tourBtn,.top-actions #presentationBtn,.top-actions #themeBtn,.top-actions #downloadDataBtn{display:none!important}
  .top-actions .language-switch,.top-actions a.btn.primary{display:inline-flex!important}
  .global-search-wrap{max-width:none}
}

/* RTL detail polish */
html[dir="rtl"] .side-nav button.active::after{right:auto;left:8px}
html[dir="rtl"] .sidebar::after{left:auto;right:22px}
html[dir="rtl"] .brand-lockup{direction:rtl}
html[dir="rtl"] .brand-lockup>div:nth-child(2){text-align:right}
html[dir="rtl"] .page-head,html[dir="rtl"] .section-title{align-items:flex-start}
html[dir="rtl"] .workspace,html[dir="rtl"] main{overflow-x:clip}

/* -------------------------------------------------------------------------- */
/* Mobile navigation drawer + premium topbar                                  */
/* -------------------------------------------------------------------------- */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(8,15,38,.48);backdrop-filter:blur(3px);z-index:48;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.sidebar-backdrop.open{opacity:1;visibility:visible}
body.nav-open{overflow:hidden;touch-action:none}
.sidebar-close{position:absolute;top:15px;right:15px;width:42px;height:42px;border:1px solid rgba(255,255,255,.17);border-radius:13px;background:rgba(255,255,255,.1);color:#fff;font-size:25px;line-height:1;place-items:center;z-index:3}
html[dir="rtl"] .sidebar-close{right:auto;left:15px}
.mobile-brand{display:none;align-items:center;gap:9px;min-width:0}
.mobile-brand .mini-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--studio-teal),var(--studio-pink));color:#fff;display:grid;place-items:center;font-weight:950;box-shadow:0 8px 20px rgba(53,184,197,.2)}
.mobile-brand strong{display:block;font-size:12.5px;color:var(--studio-navy);line-height:1.1}
.mobile-brand small{display:block;margin-top:3px;color:#748198;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.mobile-tools{display:none;margin:12px 7px 14px;padding:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);border-radius:17px}
.mobile-tools-title{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:#8ea0d4;margin:0 0 9px}
.mobile-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.mobile-tool{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);color:#edf2ff;border-radius:12px;padding:9px 8px;font-size:10px;font-weight:750;display:flex;align-items:center;gap:7px;justify-content:flex-start;text-align:left;min-width:0}
.mobile-tool:hover{background:rgba(255,255,255,.13)}
.mobile-tool .tool-icon{width:23px;height:23px;border-radius:8px;background:rgba(83,207,218,.16);color:#8fe8ef;display:grid;place-items:center;flex:0 0 auto}
html[dir="rtl"] .mobile-tool{text-align:right;direction:rtl}
.mobile-nav-search{display:none;margin:0 7px 9px;position:relative}
.mobile-nav-search input{width:100%;height:40px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;border-radius:12px;padding:0 12px;outline:0;font-size:11.5px}
.mobile-nav-search input::placeholder{color:#99a8ce}
.mobile-reading-progress{display:none;grid-column:1/-1;height:3px;background:#e9eef4;border-radius:999px;overflow:hidden}
.mobile-reading-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--studio-teal),var(--studio-pink));transition:width .12s linear}

@media(max-width:900px){
  .app-shell{display:block!important}
  .workspace{margin:0!important;width:100%!important;min-width:0!important}
  .sidebar{position:fixed!important;top:0!important;bottom:0!important;width:min(86vw,330px)!important;max-width:330px!important;height:100dvh!important;z-index:60!important;padding:18px 14px 16px!important;transition:transform .24s cubic-bezier(.2,.75,.2,1)!important;box-shadow:24px 0 70px rgba(5,12,34,.28)!important;overscroll-behavior:contain}
  html[dir="ltr"] .sidebar{left:0!important;right:auto!important;transform:translateX(-105%)!important}
  html[dir="rtl"] .sidebar{right:0!important;left:auto!important;transform:translateX(105%)!important;box-shadow:-24px 0 70px rgba(5,12,34,.28)!important}
  .sidebar.open{transform:translateX(0)!important}
  html[dir="rtl"] .sidebar.open{transform:translateX(0)!important}
  .sidebar-close{display:grid!important}
  .mobile-tools,.mobile-nav-search{display:block}
  .brand-lockup{padding-inline-end:48px!important}
  html[dir="rtl"] .brand-lockup{padding-inline-start:48px!important;padding-inline-end:10px!important}
  .side-nav{padding-bottom:6px}
  .side-nav button{min-height:42px;font-size:12.5px!important;padding:10px 11px!important}
  .nav-group-label{font-size:9px!important;padding-top:13px}
  .sidebar-foot{padding-top:13px}

  .topbar{position:sticky!important;top:0!important;height:auto!important;min-height:0!important;padding:8px 12px 9px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px 9px!important;align-items:center!important;background:var(--mobile-header-bg)!important;backdrop-filter:blur(18px) saturate(1.15)!important;box-shadow:0 6px 24px rgba(23,42,76,.06);z-index:45}
  .mobile-only{display:grid!important}
  #menuBtn{grid-column:1;grid-row:1;width:42px;height:42px;border-radius:13px;font-size:20px;box-shadow:0 7px 18px rgba(25,43,76,.06)}
  .mobile-brand{display:flex;grid-column:2;grid-row:1}
  .global-search-wrap{grid-column:1/-1;grid-row:2;width:100%;max-width:none!important;margin:0!important;padding-inline:11px!important;border-radius:13px!important;box-shadow:0 5px 15px rgba(28,48,86,.04)!important}
  .global-search-wrap input{height:42px!important;font-size:12.5px!important}
  .global-search-wrap kbd{display:none!important}
  .top-actions{grid-column:3;grid-row:1;display:flex!important;gap:0!important;min-width:0}
  .top-actions>*{display:none!important}
  .top-actions .language-switch{display:inline-flex!important;min-width:76px!important;height:42px;padding:7px 9px!important;border-radius:13px!important;font-size:10.5px!important;gap:5px!important;box-shadow:0 7px 18px rgba(25,43,76,.05)}
  .top-actions .language-switch .lang-label{display:inline!important;max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-actions .language-switch .lang-icon{width:23px;height:23px;font-size:10px}
  .mobile-reading-progress{display:block;grid-row:3}

  main{padding:20px 13px 74px!important;width:100%!important;overflow-x:clip!important}
  .view{width:100%;min-width:0;overflow-x:clip}
  .page-head{margin:0 0 18px!important;gap:10px!important;align-items:flex-start!important}
  .page-head>div{min-width:0;max-width:100%}
  .page-meta{gap:6px}
  .grid,.grid-2,.grid-3,.grid-4,.grid-auto{grid-template-columns:1fr!important;gap:13px!important}
  .card,.stat-card,.hero-panel,.screenshot-frame,.gallery-card,.source-card{max-width:100%;overflow-wrap:anywhere}
  .card{padding:17px!important;border-radius:20px!important}
  .stat-card{padding:17px!important;min-height:0!important}
  .section-title{margin:25px 0 11px!important;align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
  .section-title>div{min-width:0}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain}
  .data-table{min-width:580px!important}
  .checkout-layout{grid-template-columns:1fr!important}
  .issue-row{grid-template-columns:1fr!important;gap:8px!important}
  .issue-row>div:last-child{grid-column:auto!important}
  .roadmap{grid-template-columns:1fr!important}
  .source-list{grid-template-columns:1fr!important}
  .gallery{grid-template-columns:1fr!important}
  .brand-toolbar{align-items:stretch!important}
  .brand-toolbar .filter-input{width:100%;min-width:0!important}
  .flow{scroll-snap-type:x proximity;padding-bottom:13px}
  .flow-step{scroll-snap-align:start;flex-basis:min(72vw,220px)!important}
  .node-map{padding:16px!important}
  .node{min-width:120px}
  .home-anatomy-grid{grid-template-columns:1fr!important}
  .home-viewport{min-height:440px!important}
  .morph-canvas{min-height:0!important}
  .morph-state{min-height:0!important}
  .tour-drawer{width:100vw!important;max-width:none!important;height:100dvh!important;padding:18px!important}
  .tour-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);padding:13px 0 0!important}
  .modal{padding:12px!important}.modal-close{right:12px;top:12px}
  html[dir="rtl"] .modal-close{right:auto;left:12px}
}

/* -------------------------------------------------------------------------- */
/* Mobile typography and component density                                    */
/* -------------------------------------------------------------------------- */
@media(max-width:620px){
  body{font-size:15px!important;line-height:1.68}
  .page-head h1{font-size:clamp(1.65rem,7.4vw,2.05rem)!important;line-height:1.13!important;letter-spacing:-.025em!important;overflow-wrap:anywhere}
  html[dir="rtl"] .page-head h1{font-size:clamp(1.6rem,7vw,1.98rem)!important;line-height:1.25!important;letter-spacing:0!important}
  .page-head p{font-size:13.5px!important;line-height:1.72!important;margin-top:6px!important}
  .eyebrow{font-size:9.5px!important;letter-spacing:.09em!important;margin-bottom:6px!important}
  html[dir="rtl"] .eyebrow{letter-spacing:.02em!important}
  .section-title h2{font-size:clamp(1.28rem,5.6vw,1.55rem)!important;line-height:1.25!important;letter-spacing:-.015em!important}
  html[dir="rtl"] .section-title h2{font-size:clamp(1.25rem,5.4vw,1.5rem)!important;line-height:1.38!important;letter-spacing:0!important}
  .section-title p{font-size:13px!important;line-height:1.65!important}
  .section-kicker{font-size:9px!important;padding:5px 8px!important}
  .card h2{font-size:19px!important;line-height:1.35!important}.card h3{font-size:16.5px!important;line-height:1.4!important}.card h4{font-size:14.5px!important;line-height:1.45!important}
  .card p,.small{font-size:13px!important;line-height:1.7!important}.muted{line-height:1.7}
  .badge{font-size:9.8px!important;padding:6px 8px!important}.tag{font-size:10.7px!important;padding:6px 8px!important;line-height:1.35}
  .callout{font-size:12.5px!important;line-height:1.7!important;padding:13px 14px!important;margin:12px 0!important}
  .code{font-size:10.5px!important;word-break:break-word}

  .studio-hero{padding:19px!important;border-radius:24px!important;gap:14px!important}
  .studio-hero h2{font-size:clamp(1.75rem,7.7vw,2.2rem)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:13px 0 11px!important}
  html[dir="rtl"] .studio-hero h2{font-size:clamp(1.7rem,7.3vw,2.1rem)!important;line-height:1.28!important;letter-spacing:0!important}
  .studio-hero p{font-size:13.5px!important;line-height:1.72!important}
  .hero-kicker{font-size:9px!important;line-height:1.35!important;letter-spacing:.06em!important;padding:6px 9px!important;text-transform:none!important}
  html[dir="rtl"] .hero-kicker{letter-spacing:0!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:17px!important}
  .hero-actions .btn{width:100%!important;min-height:43px;font-size:12px!important}
  .hero-micro{margin-top:15px!important;gap:6px!important}.hero-micro span{font-size:9.7px!important;padding:6px 8px!important}
  .hero-visual{display:none!important}
  .hero-panel{padding:18px!important;border-radius:22px!important}.hero-panel h2{font-size:20px!important}.hero-panel .quote{font-size:14px!important}

  .stat-card .num{font-size:30px!important;letter-spacing:-1px!important}.stat-card .label{font-size:10px!important}.stat-card .hint{font-size:11.5px!important;line-height:1.55!important}
  .data-table{font-size:12px!important}.data-table th{font-size:9.5px!important;padding:10px!important}.data-table td{padding:10px!important;line-height:1.55!important}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.brand-chip{padding:10px!important;border-radius:13px!important;min-width:0}.brand-chip b{font-size:11.5px!important;white-space:nowrap}.brand-chip span{font-size:9.5px!important;min-width:29px}
  .segmented{width:100%;overflow-x:auto}.segmented button{flex:1;min-width:110px;font-size:10.5px!important}
  .bar-row{grid-template-columns:86px 1fr 34px!important;font-size:10.5px!important}

  /* Preserve both EN/AR bars on phones; stack them instead of hiding AR. */
  .compare-row{grid-template-columns:minmax(0,1fr) 34px!important;grid-template-rows:auto auto auto!important;gap:5px 7px!important;padding:5px 0;border-bottom:1px solid #eff3f7;font-size:10px!important}
  .compare-row .label{grid-column:1/-1;grid-row:1;white-space:normal!important;font-size:10.5px!important;margin-bottom:1px}
  .compare-row .track:not(.ar-track){grid-column:1;grid-row:2}.compare-row .val:not(.ar-val){grid-column:2;grid-row:2}
  .compare-row .ar-track{display:block!important;grid-column:1;grid-row:3}.compare-row .ar-val{display:block!important;grid-column:2;grid-row:3}
  .comparison-chart{gap:4px!important}.chart-legend{font-size:9.5px!important}

  .palette-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.swatch{min-height:105px!important;padding:11px!important;border-radius:16px!important}.swatch .swatch-name{font-size:10px!important}.swatch .swatch-code{font-size:9px!important}
  .guardrail{padding:11px!important}.guardrail h4{font-size:12px!important}.guardrail p{font-size:11.5px!important}
  .pdp-sandbox,.current-target{grid-template-columns:1fr!important}.product-mock{padding:17px!important}.product-mock h3{font-size:18px!important}.product-mock .price{font-size:25px!important}
  .scenario-tabs,.journey-tabs,.sim-presets{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:6px}.scenario-tabs button,.journey-tabs button,.sim-presets button{scroll-snap-align:start;white-space:nowrap;min-height:39px}
  .phone-shell{width:100%!important;max-width:350px!important;margin-inline:auto!important}.phone-screen{min-height:0!important}
  .journey-detail-card{padding:13px!important}.journey-detail-card h3{font-size:15px!important}
  .checkout-sim{border-radius:22px!important}.sim-head{padding:16px!important;gap:11px!important;align-items:flex-start!important}.sim-head h3{font-size:17px!important;line-height:1.35!important}.sim-head p{font-size:12.5px!important;line-height:1.65!important}.sim-body{grid-template-columns:1fr!important}.sim-controls,.sim-summary{padding:15px!important}.sim-row{font-size:12px!important;gap:8px}.sim-total b{font-size:23px!important}.control-block label{font-size:11.5px!important}.control-block select,.control-block input{min-height:42px;font-size:12px!important}
  .stepper{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;gap:7px!important;padding-bottom:4px;scroll-snap-type:x mandatory}.stepper button{flex:0 0 105px!important;scroll-snap-align:start;min-height:43px;font-size:9.8px!important}
  .option-grid{grid-template-columns:1fr 1fr!important}.option-card{font-size:11.5px!important;padding:9px!important}.price-line{font-size:12.5px!important}.price-line.total{font-size:15px!important}
  .screenshot-frame{padding:7px!important;border-radius:19px!important}.screenshot-scroll{max-height:480px!important}.screen-caption{font-size:11.5px!important;line-height:1.55!important}
  .home-viewport{min-height:360px!important;border-radius:18px!important}.home-module-list{grid-template-columns:1fr!important}.home-module-list small{display:block!important;font-size:11px!important}.home-module-list button{padding:11px!important;border-radius:14px!important}
  .morph-nodes{grid-template-columns:1fr!important}.morph-node{min-height:0!important;padding:12px!important}.morph-core strong{font-size:16px!important}.morph-core small{font-size:11.5px!important}.morph-caption{font-size:11.5px!important}
  .gallery-card .thumb{height:220px!important}.gallery-card h4{font-size:13px!important}.gallery-card p{font-size:11.5px!important}
  .source-card b{font-size:12.5px!important}.source-card small{font-size:10.5px!important}
  .report-prose{padding:17px!important;border-radius:20px!important;font-size:13.5px!important;line-height:1.8!important}.report-prose h1{font-size:25px!important;line-height:1.3!important}.report-prose h2{font-size:21px!important;line-height:1.4!important;margin-top:30px!important;padding-top:20px!important}.report-prose h3{font-size:17px!important;line-height:1.45!important}.report-prose table{font-size:10.5px!important}.report-prose pre{font-size:10.5px!important;padding:12px!important}
  html[dir="rtl"] .report-prose{font-size:14px!important;line-height:1.95!important}html[dir="rtl"] .report-prose h1{font-size:24px!important}html[dir="rtl"] .report-prose h2{font-size:20px!important}html[dir="rtl"] .report-prose h3{font-size:17px!important}
  .tour-body h3{font-size:22px!important;line-height:1.35!important}.tour-body p{font-size:13.5px!important}.tour-actions .btn{flex:1;min-height:44px}
}

@media(max-width:380px){
  main{padding-inline:10px!important}
  .topbar{padding-inline:9px!important;grid-template-columns:auto minmax(0,1fr) auto!important}
  .mobile-brand .mini-mark{display:none}.mobile-brand small{max-width:118px}
  .top-actions .language-switch{min-width:66px!important;padding-inline:7px!important}.top-actions .language-switch .lang-label{max-width:42px}
  .brand-grid{grid-template-columns:1fr!important}
  .palette-grid{grid-template-columns:1fr!important}
  .option-grid{grid-template-columns:1fr!important}
  .studio-hero h2{font-size:1.7rem!important}html[dir="rtl"] .studio-hero h2{font-size:1.62rem!important}
  .page-head h1{font-size:1.62rem!important}html[dir="rtl"] .page-head h1{font-size:1.55rem!important}
}

/* Reduced motion and touch-friendly focus */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(hover:none){.card.interactive-card:hover,.stat-card:hover,.brand-chip:hover,.flow-step:hover,.source-card:hover,.gallery-card:hover{transform:none!important}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(54,183,197,.34);outline-offset:2px}