/* Bayān 14.5 — modernisation UX, densité utile et fluidité */

/* Lisibilité, focus et sensation d'application moderne. */
body.app-quran{font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
body.app-quran :where(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid color-mix(in srgb,var(--bayaan-emphasis,var(--forest,#176759)) 55%,transparent)!important;
  outline-offset:2px!important;
}
body.app-quran :where(button,summary){-webkit-tap-highlight-color:transparent}
body.app-quran :where(button,.v133-home-card,.result-card,.verse-card,.analysis-card,.v7-work-section){transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease}
body.app-quran :where(button,.v133-home-card):active{transform:translateY(1px) scale(.995)}

/* Barre supérieure : davantage d'air, statut lisible sans bloc vertical. */
body.app-quran .topbar{min-height:88px!important;padding-block:12px!important}
body.app-quran .brand{min-width:210px!important}
body.app-quran .brand .version-badge{display:inline-block!important;max-width:190px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:10px!important;opacity:.8}
body.app-quran .data-status{max-width:235px!important;min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;line-height:1.2!important}
body.app-quran .data-status>span:last-child{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.app-quran .main-nav.app-local-nav{gap:2px!important;padding:6px!important;border-radius:18px!important;box-shadow:0 10px 28px color-mix(in srgb,var(--bayaan-text,#17342d) 8%,transparent)!important}
body.app-quran .main-nav.app-local-nav .nav-button{min-height:44px!important;border-radius:13px!important;padding-inline:12px!important}

/* Contexte compact : utile, mais ne doit pas consommer une rangée entière. */
body.app-quran #v133ContextBar{margin-top:6px!important;padding-block:7px!important}

/* Recherche : l'action réelle doit être visible rapidement, pas après une bannière géante. */
body.app-quran #searchView>.hero{
  min-height:0!important;
  padding:34px clamp(28px,4vw,58px)!important;
  margin-bottom:22px!important;
  border-radius:24px!important;
  grid-template-columns:minmax(0,1fr) minmax(180px,260px)!important;
  gap:34px!important;
}
body.app-quran #searchView>.hero .hero-copy h1{font-size:clamp(2.7rem,4.7vw,4.5rem)!important;line-height:.94!important;margin:.18em 0 .28em!important;letter-spacing:-.045em}
body.app-quran #searchView>.hero .hero-copy>p:last-child{max-width:72ch!important;font-size:1rem!important;line-height:1.6!important;margin-bottom:0!important}
body.app-quran #searchView>.hero .hero-ornament{transform:scale(.78)!important;transform-origin:center!important}
body.app-quran #searchView>.search-panel{border-radius:22px!important;box-shadow:0 14px 36px color-mix(in srgb,var(--bayaan-text,#17342d) 7%,transparent)!important}
body.app-quran #searchView .search-box{gap:10px!important}
body.app-quran #searchView .search-box #searchInput{min-height:52px!important;border-radius:14px!important}
body.app-quran #searchView .search-box #searchButton{min-height:52px!important;padding-inline:24px!important;border-radius:14px!important}
body.app-quran #searchView .v133-search-launcher{margin-bottom:14px!important}

/* Analyses : même logique, plus d'information utile au-dessus de la ligne de flottaison. */
body.app-quran #analyticsView>.analytics-header{
  min-height:0!important;
  padding:34px clamp(28px,4vw,56px)!important;
  margin-bottom:18px!important;
  border-radius:24px!important;
  gap:24px!important;
}
body.app-quran #analyticsView>.analytics-header h1{font-size:clamp(2.4rem,4.5vw,4.2rem)!important;line-height:.98!important;letter-spacing:-.04em!important;margin:.18em 0 .28em!important}
body.app-quran #analyticsView>.analytics-header>div:first-child>p:last-child{max-width:68ch!important;margin-bottom:0!important}
body.app-quran #analyticsView .analysis-warning{max-width:360px!important;border-radius:14px!important}
body.app-quran #analyticsGlobalControls{border-radius:18px!important;padding:14px!important;margin-bottom:16px!important;box-shadow:0 8px 24px color-mix(in srgb,var(--bayaan-text,#17342d) 5%,transparent)!important}
body.app-quran #analyticsView .v133-analysis-nav{border-radius:20px!important}

/* Accueil : hiérarchie plus équilibrée et cartes moins lourdes. */
body.app-quran .v133-home{padding-top:24px!important}
body.app-quran .v133-home-copy,.v133-home-level{box-shadow:0 12px 34px color-mix(in srgb,var(--bayaan-text,#17342d) 7%,transparent)!important}
body.app-quran .v133-home-copy h1{letter-spacing:-.045em!important}
body.app-quran .v133-home-card{padding:16px!important;border-radius:16px!important;box-shadow:0 2px 0 color-mix(in srgb,var(--bayaan-text,#17342d) 4%,transparent)!important}
body.app-quran .v133-home-card:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--bayaan-text,#17342d) 9%,transparent)!important}

/* Mes travaux : élimine l'aspect "gros bloc vert" et unifie avec le reste de l'application. */
body.app-quran #researchWorkView .v89-work-page-header{
  background:linear-gradient(135deg,color-mix(in srgb,var(--bayaan-surface,#fff) 96%,var(--bayaan-action-bg,#176759) 4%),var(--bayaan-surface-2,#f3f1e9))!important;
  color:var(--bayaan-text,#17342d)!important;
  border:1px solid var(--bayaan-border,#d5ddd8)!important;
  box-shadow:0 12px 34px color-mix(in srgb,var(--bayaan-text,#17342d) 7%,transparent)!important;
}
body.app-quran #researchWorkView .v89-work-page-header p{color:var(--bayaan-muted,#607068)!important}
body.app-quran #researchWorkView .v89-work-page-header .eyebrow{color:var(--bayaan-emphasis,#9a6414)!important}
body.app-quran #researchWorkView .v89-work-badges :is(.v89-local-save-badge,.v89-selection-badge){background:var(--bayaan-surface,#fff)!important;color:var(--bayaan-text,#17342d)!important;border-color:var(--bayaan-border-strong,#9aaa9f)!important}
body.app-quran #researchWorkView .v7-tabs{grid-template-columns:repeat(8,minmax(0,1fr))!important;top:78px!important;padding:6px!important;border-radius:15px!important}
body.app-quran #researchWorkView .v7-tabs button{min-height:46px!important}
body.app-quran #researchWorkView .v7-work-hero{
  background:var(--bayaan-surface,#fff)!important;
  color:var(--bayaan-text,#17342d)!important;
  border:1px solid var(--bayaan-border,#d5ddd8)!important;
  border-radius:18px!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--bayaan-text,#17342d) 6%,transparent)!important;
}
body.app-quran #researchWorkView .v7-work-hero p{color:var(--bayaan-muted,#607068)!important}
body.app-quran #researchWorkView .v7-work-actions .primary-button{background:var(--bayaan-action-bg,#176759)!important;color:var(--bayaan-action-text,#fff)!important;border-color:var(--bayaan-action-bg,#176759)!important}
body.app-quran #researchWorkView .v7-work-stats article,
body.app-quran #researchWorkView .v7-work-section,
body.app-quran #researchWorkView .v7-note-editor-shell{border-radius:16px!important;box-shadow:0 8px 22px color-mix(in srgb,var(--bayaan-text,#17342d) 5%,transparent)!important}
body.app-quran #researchWorkView .v7-overview-label{padding:0 2px!important}
body.app-quran #researchWorkView .v7-overview-label textarea{border-radius:14px!important;border:1px solid var(--bayaan-border,#d5ddd8)!important}

/* Cibles tactiles et contrôles secondaires : 44 px sur mobile, 40 px ailleurs. */
body.app-quran :where(#v8QuranCite,#v8QuranProtocol,#v8QuranSources,#v7SeeAllNotes,#v1031SeeArchives){min-height:40px!important}
body.app-quran #documentationView :where(button,summary){min-height:40px!important}

/* Les longues listes sont rendues à la demande par le navigateur : scrolling plus fluide. */
body.app-quran :where(.verse-card,.result-card,.v121-favorite-card,.v7-study-item,.v142-search-capture,.v144-tool-capture,.e12-result,.v90-result-card){
  content-visibility:auto;
  contain-intrinsic-size:auto 260px;
}

/* Menus/panneaux : profondeur cohérente et jamais de débordement. */
body.app-quran :where(.theme-panel,.v89-work-options-panel,.v89-note-options-panel,.search-options-panel,.options-popover){box-shadow:0 22px 56px color-mix(in srgb,var(--bayaan-text,#17342d) 18%,transparent)!important}
body.app-quran dialog{max-width:calc(100vw - 24px)!important}

@media(max-width:900px){
  /* Le composant mobile repliable doit gagner contre les anciennes règles plus spécifiques. */
  body.app-quran #researchWorkView .v7-tabs.bayaan-mobile-tabs-list:not(.bayaan-mobile-tabs-open){display:none!important}
  body.app-quran #researchWorkView .v7-tabs.bayaan-mobile-tabs-list.bayaan-mobile-tabs-open{display:flex!important;position:relative!important;z-index:80!important}
  body.app-quran #researchWorkView .v7-tabs.bayaan-mobile-tabs-list{grid-template-columns:1fr!important;top:auto!important}
  body.app-quran :where(button,summary,.theme-trigger){min-height:44px}
  body.app-quran .data-status{display:none!important}
  body.app-quran .brand .version-badge{display:none!important}
}

@media(max-width:760px){
  body.app-quran .topbar{min-height:62px!important;padding:8px 10px!important}
  body.app-quran #v133ContextBar{display:none!important}
  body.app-quran .v133-home{padding-top:14px!important}
  body.app-quran .v133-home-copy{padding:18px!important}
  body.app-quran .v133-home-copy h1{font-size:clamp(2rem,9vw,2.85rem)!important;line-height:.98!important}
  body.app-quran .v133-home-level{padding:16px!important}

  body.app-quran #searchView>.hero{
    grid-template-columns:1fr!important;
    padding:20px 18px!important;
    margin:12px 8px 14px!important;
    border-radius:18px!important;
  }
  body.app-quran #searchView>.hero .hero-copy h1{font-size:clamp(2rem,10.5vw,3rem)!important;line-height:.98!important;margin:.15em 0 .25em!important}
  body.app-quran #searchView>.hero .hero-copy>p:last-child{font-size:.94rem!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body.app-quran #searchView>.hero .hero-ornament{display:none!important}
  body.app-quran #searchView>.search-panel{margin-inline:8px!important;padding:12px!important;border-radius:18px!important}
  body.app-quran #searchView .search-box{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important}
  body.app-quran #searchView .search-box #searchInput{grid-column:2!important;width:100%!important;min-width:0!important}
  body.app-quran #searchView .search-box #searchButton{grid-column:1/-1!important;width:100%!important}
  body.app-quran #searchView .search-box .clear-search{grid-column:1!important;grid-row:1!important}

  body.app-quran #analyticsView>.analytics-header{
    display:block!important;
    padding:20px 18px!important;
    margin:12px 8px 14px!important;
    border-radius:18px!important;
  }
  body.app-quran #analyticsView>.analytics-header h1{font-size:clamp(2rem,9.5vw,3rem)!important;line-height:1!important}
  body.app-quran #analyticsView>.analytics-header>div:first-child>p:last-child{font-size:.94rem!important;line-height:1.5!important}
  body.app-quran #analyticsView .analysis-warning{margin-top:14px!important;max-width:none!important;font-size:.82rem!important;padding:10px 12px!important}
  body.app-quran #analyticsGlobalControls{margin-inline:8px!important}

  body.app-quran #researchWorkView{padding-inline:10px!important}
  body.app-quran #researchWorkView .v89-work-page-header{padding:18px!important;border-radius:18px!important}
  body.app-quran #researchWorkView .v89-work-page-header h2{font-size:clamp(1.7rem,8vw,2.25rem)!important}
  body.app-quran #researchWorkView .v89-work-badges{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  body.app-quran #researchWorkView .v7-work-hero{padding:16px!important}
  body.app-quran #researchWorkView .v7-work-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  body.app-quran #researchWorkView .v7-work-actions>*{width:100%!important;min-width:0!important}
  body.app-quran #researchWorkView .v7-work-stats{gap:8px!important}

  body.app-quran #documentationView :where(button,summary){min-height:44px!important}
  body.app-quran :where(#v8QuranCite,#v8QuranProtocol,#v8QuranSources,#v7SeeAllNotes,#v1031SeeArchives){min-height:44px!important}
}

@media(max-width:420px){
  body.app-quran .v133-home-grid{gap:10px!important}
  body.app-quran .v133-home-card{padding:14px!important}
  body.app-quran #searchView>.hero .hero-copy>p:last-child{-webkit-line-clamp:2}
}

@media(prefers-reduced-motion:reduce){
  body.app-quran *,body.app-quran *::before,body.app-quran *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

body.app-quran #documentationView #docSearch{min-height:40px!important;padding-block:9px!important}
@media(max-width:760px){body.app-quran #documentationView #docSearch{min-height:44px!important}}

/* Recherche + : même langage visuel que le reste de Bayān. */
body.app-quran #searchView #v127SearchToolbar{
  border:1px solid var(--bayaan-border,#d5ddd8)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--bayaan-surface,#fff) 94%,var(--bayaan-action-bg,#176759) 6%)!important;
  box-shadow:none!important;
}
body.app-quran #searchView #v127SearchToolbar .v127-toolbar-actions button{
  border-radius:12px!important;
  border:1px solid var(--bayaan-border-strong,#a4b0a9)!important;
  background:var(--bayaan-surface,#fff)!important;
  color:var(--bayaan-text,#17342d)!important;
  min-height:44px!important;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease!important;
}
body.app-quran #searchView #v127SearchToolbar .v127-toolbar-actions button:hover{
  transform:translateY(-1px);border-color:var(--bayaan-action-bg,#176759)!important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--bayaan-text,#17342d) 8%,transparent)!important;
}
body.app-quran #searchView #v127SearchToolbar .v127-toolbar-actions .primary-button{
  background:var(--bayaan-action-bg,#176759)!important;color:var(--bayaan-action-text,#fff)!important;border-color:var(--bayaan-action-bg,#176759)!important;
}

@media(max-width:760px){
  body.app-quran #searchView .search-box #v133InlineVocalizer{
    grid-column:1/-1!important;width:100%!important;min-width:0!important;min-height:44px!important;
    justify-content:center!important;white-space:normal!important;border-radius:12px!important;
  }
  body.app-quran #searchView #v127SearchToolbar .v127-toolbar-actions{gap:8px!important}
}