/*
 * Merdivan Research OS – Responsive Design Framework
 * Sprint 16 · 2026-07-29
 * Research-only presentation layer. No trading or broker functionality.
 */
:root{
  --r-page-max:1480px;
  --r-gap:clamp(10px,1.6vw,22px);
  --r-pad-x:clamp(10px,2.2vw,28px);
  --r-pad-y:clamp(12px,2vw,26px);
  --r-touch:44px;
}
html{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(12px + env(safe-area-inset-top,0px));
}
*,*::before,*::after{box-sizing:inherit}
body{
  width:100%;
  max-width:100%;
  min-height:0!important;
  overflow-x:hidden;
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
input,select,textarea,button{max-width:100%;font:inherit}
button,a,.action-button,.mini-button{touch-action:manipulation}

/* Fluid page shells */
.app,.wrap,.container,.content,.main,.app-shell{
  width:min(100%,var(--r-page-max));
  max-width:var(--r-page-max);
  min-width:0;
  margin-inline:auto;
}
main,.main,.content,.app-shell{
  min-height:0!important;
  height:auto!important;
}

/* Generic fluid grids – retain semantics, remove rigid columns */
.grid,.cards,.card-grid,.module-grid,.module-map-grid,.summary,.stats-grid,.metric-grid,.dashboard-grid{
  min-width:0;
  align-items:stretch;
}
.grid>*,.cards>*,.card-grid>*,.module-grid>*,.module-map-grid>*,.summary>*,.stats-grid>*,.metric-grid>*,.dashboard-grid>*{
  min-width:0;
  max-width:100%;
}
.card,.panel,.tile,.metric,.item,.module-map-card{
  min-width:0;
  max-width:100%;
  height:auto;
  overflow-wrap:anywhere;
}

/* Tables remain usable instead of widening the page */
.table-wrap,.table-scroll,.responsive-table,.card:has(> table){
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table{max-width:100%}
th,td{overflow-wrap:normal;word-break:normal}

/* Flexible controls */
.actions,.toolbar,.filters,.backup-actions,.demo-table-head,.review-checks,.user-area,.connection-area{
  min-width:0;
  flex-wrap:wrap;
}
.action-button,.mini-button,button,[role="button"]{min-height:var(--r-touch)}

/* Footer follows content. No artificial viewport spacer. */
footer,.footer{
  position:relative;
  inset:auto;
  min-height:0!important;
  margin-top:clamp(12px,2vw,26px)!important;
  padding-bottom:calc(clamp(12px,2vw,24px) + env(safe-area-inset-bottom,0px))!important;
}

/* Reusable Sprint-16 primitives */
.r-page{width:min(100%,var(--r-page-max));margin-inline:auto;padding:var(--r-pad-y) var(--r-pad-x) calc(var(--r-pad-y) + env(safe-area-inset-bottom,0px))}
.r-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--r-gap)}
.r-card{min-width:0;width:100%;height:auto;overflow-wrap:anywhere}
.r-stack{display:flex;flex-direction:column;gap:var(--r-gap);min-width:0}
.r-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.r-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  :root{--r-gap:12px}
  .app,.wrap,.container,.content,.main,.app-shell{width:100%;max-width:100%}
  header,.header{min-width:0;flex-wrap:wrap}
  nav{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .module-map-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
}

@media (max-width:620px){
  body{padding-top:env(safe-area-inset-top,0px)!important;padding-bottom:0!important}
  main,.main,.content,.app-shell{padding-bottom:16px!important}
  .grid,.cards,.card-grid,.module-grid,.module-map-grid,.summary,.stats-grid,.metric-grid,.dashboard-grid,
  .demo-summary-grid{grid-template-columns:minmax(0,1fr)!important}
  .grid>*,.cards>*,.card-grid>*,.module-grid>*,.module-map-grid>*,.summary>*,.stats-grid>*,.metric-grid>*,.dashboard-grid>*,
  .demo-summary-grid>*{grid-column:1/-1!important}
  .hero,.head,.demo-table-head{display:flex;flex-direction:column;align-items:stretch}
  .actions,.toolbar,.filters,.backup-actions,.r-actions{display:grid;grid-template-columns:1fr}
  .actions>*,.toolbar>*,.filters>*,.backup-actions>*,.r-actions>*{width:100%;max-width:100%}
  .module-map-card{padding:14px!important}
  .module-map-card>a{display:flex!important;width:100%;justify-content:center;min-height:var(--r-touch)}
  footer,.footer{margin-top:12px!important}
}

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

/* Sprint 16A – system-wide fluid layout hardening */
html,body{height:auto!important;min-height:0!important}
body{display:block!important}
body>.app,.app{
  min-height:0!important;
  height:auto!important;
  display:block;
}
:where(.app,.wrap,.container,.content,.main,.app-shell)>:last-child{margin-bottom:0}
:where(section,.card,.panel,.tile,.metric,.item,.module-map-card){
  min-height:0!important;
  height:auto!important;
}
:where(.grid,.cards,.card-grid,.module-grid,.module-map-grid,.summary,.stats-grid,.metric-grid,.dashboard-grid){
  width:100%;
  max-width:100%;
}
:where(.row,.section-head,.dashboard-hero,.video-stage-head,.ai-control-head){min-width:0}
:where(.row,.section-head,.dashboard-hero,.video-stage-head,.ai-control-head)>*{min-width:0;max-width:100%}
:where(p,li,dd,dt,h1,h2,h3,h4,h5,h6,.muted,.label,.notice){overflow-wrap:anywhere}
:where(input,select,textarea){width:min(100%,100%)}

/* Wide legacy tables stay inside their card and scroll locally. */
:where(.table-wrap,.table-scroll,.responsive-table){width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
:where(.table-wrap,.table-scroll,.responsive-table)>table{width:max-content;min-width:100%;max-width:none}

/* The footer always follows the real content; no viewport filler remains. */
:where(footer,.footer){
  clear:both;
  flex:none!important;
  align-self:auto!important;
  transform:none!important;
  margin-block-start:clamp(10px,1.5vw,20px)!important;
}

@media (max-width:960px){
  :where(.app,.wrap,.container,.content,.main,.app-shell){padding-inline:clamp(9px,2vw,18px)}
  :where(.span-3,.span-4){grid-column:span 6}
  :where(.span-6,.span-7,.span-8,.span-9){grid-column:1/-1}
}

@media (max-width:620px){
  html{scroll-padding-top:calc(8px + env(safe-area-inset-top,0px))}
  body{padding-top:env(safe-area-inset-top,0px)!important}
  :where(.app,.wrap,.container,.content,.main,.app-shell){
    min-height:0!important;
    height:auto!important;
    padding-inline:9px!important;
  }
  :where(.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11,.span-12){grid-column:1/-1!important}
  :where(.row,.section-head,.dashboard-hero,.video-stage-head,.ai-control-head){flex-wrap:wrap}
  :where(.hero-status,.connection-area,.qa-score){min-width:0!important;width:100%;max-width:100%}
  :where(table,.users-table,.ai-table){font-size:clamp(.76rem,3.2vw,.86rem)}
  :where(footer,.footer){
    margin-top:10px!important;
    padding-top:10px!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Sprint 16C – Mobile Safari bottom safe-area and scroll-end clearance
 * Keeps the final interactive content scrollable above Safari's floating toolbar.
 * The reserve exists only on narrow touch layouts and does not create a desktop spacer.
 */
@media (max-width:620px){
  :root{--r-mobile-browser-clearance:clamp(88px,13vh,126px)}
  html{
    scroll-padding-bottom:calc(var(--r-mobile-browser-clearance) + env(safe-area-inset-bottom,0px));
  }
  body{
    padding-bottom:calc(var(--r-mobile-browser-clearance) + env(safe-area-inset-bottom,0px))!important;
  }
  :where(main,.main,.content,.app-shell,section,.card,.panel,.tile,.module-map-card){
    scroll-margin-bottom:calc(var(--r-mobile-browser-clearance) + env(safe-area-inset-bottom,0px));
  }
  :where(footer,.footer){
    padding-bottom:12px!important;
  }
}

/* Modern dynamic viewport support: use the visible viewport only for scrolling,
 * never as a minimum content height. */
@supports (height:100dvh){
  @media (max-width:620px){
    :root{--r-mobile-browser-clearance:clamp(84px,12dvh,120px)}
  }
}

/* Sprint 16D – Mobile footer flow refinement
 * Removes the permanent browser-toolbar reserve from the document height.
 * Scroll padding remains available for focused/anchored content, while the
 * visible page ends naturally after the footer plus the real device safe-area.
 */
@media (max-width:620px){
  :root{--r-mobile-browser-clearance:72px}
  html{
    scroll-padding-bottom:calc(var(--r-mobile-browser-clearance) + env(safe-area-inset-bottom,0px));
  }
  body{
    padding-bottom:0!important;
  }
  :where(main,.main,.content,.app-shell,section,.card,.panel,.tile,.module-map-card){
    scroll-margin-bottom:calc(var(--r-mobile-browser-clearance) + env(safe-area-inset-bottom,0px));
  }
  :where(footer,.footer){
    margin-bottom:0!important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Sprint 34 – Mobile UX unification and shared component contract */
:root{
  --r-card-radius:20px;
  --r-control-radius:14px;
  --r-mobile-pad:14px;
  --r-section-space:clamp(14px,2vw,24px);
}
:where(.card,.panel,.tile,.metric,.item,.module-map-card,.ux-component-card){
  border-radius:var(--r-card-radius);
}
:where(.action-button,.mini-button,button,input,select,textarea){
  border-radius:var(--r-control-radius);
}
:where(.card,.panel,.tile,.module-map-card){
  margin-block:0 var(--r-section-space);
}
:where(.section-head,.card>h2:first-child){margin-top:0}
:where(.badge,.system-pill,.role-badge){max-width:100%;white-space:normal;text-align:center;line-height:1.25}
:where(input,select,textarea){font-size:16px;min-height:44px}
textarea{min-height:96px;resize:vertical}
:where(.action-button,.mini-button,button,[role="button"]){display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}

.ux-safety-banner{margin-top:20px;padding:16px 20px;border:1px solid #29ad72;border-radius:999px;color:#76e6ad;font-weight:800;letter-spacing:.03em;overflow-wrap:anywhere}
.ux-metric-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ux-component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--r-gap)}
.ux-component-card{min-width:0;padding:18px;border:1px solid var(--line);background:rgba(16,32,42,.72)}
.ux-component-card h3{margin:14px 0 8px}.ux-component-card p{margin:0;color:var(--muted)}
.ux-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}

@media (max-width:620px){
  :root{--r-card-radius:18px;--r-control-radius:13px}
  header{padding:16px!important;border-radius:18px!important;gap:14px}
  header>div,.connection-area,.user-area{width:100%;max-width:100%}
  .connection-area,.user-area{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .connect-button{width:100%;justify-content:center;min-height:52px}
  nav{display:flex!important;gap:8px;padding-block:10px;scroll-snap-type:x proximity}
  nav a{flex:0 0 auto;min-height:48px;display:inline-flex;align-items:center;scroll-snap-align:start}
  :where(.card,.panel,.tile,.module-map-card){padding:var(--r-mobile-pad)!important}
  :where(.metric-grid,.stats-grid,.summary,.ux-component-grid,.ux-action-grid){grid-template-columns:minmax(0,1fr)!important}
  :where(.action-button,.mini-button,button[type="submit"]){width:100%;min-height:50px;padding-inline:14px}
  :where(.badge,.system-pill,.role-badge){font-size:clamp(.78rem,3.5vw,.92rem)}
  :where(h1){font-size:clamp(1.4rem,7vw,1.85rem)}
  :where(h2){font-size:clamp(1.25rem,6vw,1.65rem);line-height:1.2}
  :where(h3){font-size:clamp(1.05rem,5vw,1.3rem)}
  .ux-safety-banner{border-radius:24px;padding:14px;font-size:.9rem}
  .table-wrap,.table-scroll,.responsive-table{border-radius:14px}
}

@media (max-width:1180px){.experience-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.experience-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.experience-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.experience-flow>i{display:none}}
@media (max-width:760px){.experience-hero{align-items:stretch;flex-direction:column;padding:20px}.experience-safety{min-width:0}.experience-kpis,.experience-two-column,.experience-module-grid,.experience-flow,.experience-safety-card{grid-template-columns:1fr}.experience-kpi{min-height:108px}.experience-instruments>div{grid-template-columns:1fr}.experience-detail{gap:10px}.experience-detail b{max-width:55%}.experience-chain-status{display:grid}.experience-chain-status span{display:flex;justify-content:space-between}.experience-flow>div{min-height:110px}}