/* VOLIQA V451 — PUBLIC UI TEMPLATE
 * Single source of truth for public section geometry and typography.
 * Reference heading: MOST IMPORTANT MOVE.
 * Reference data surface: LIVE PATTERN LAB.
 * New public modules should consume these variables/classes instead of adding local sizes.
 */
:root{
  --vlq-ui-max:1280px;
  --vlq-ui-gutter:20px;
  --vlq-ui-section-gap:32px;
  --vlq-ui-panel-pad:26px;
  --vlq-ui-inner-gap:14px;
  --vlq-ui-radius:20px;
  --vlq-ui-inner-radius:16px;
  --vlq-ui-border:rgba(61,190,224,.22);
  --vlq-ui-panel:rgba(2,20,29,.38);
  --vlq-ui-panel-2:rgba(4,25,35,.48);
  --vlq-ui-title:clamp(34px,3.15vw,50px);
  --vlq-ui-title-mobile:clamp(30px,8.5vw,40px);
  --vlq-ui-kicker:12px;
  --vlq-ui-kicker-mobile:11px;
  --vlq-ui-copy:15px;
  --vlq-ui-copy-mobile:14px;
}

/* Canonical public width axis. */
body.v13 .v253-home{box-sizing:border-box!important}
body.v13 .v253-home>.wrap.v253-wrap,
body.v13 .v403-restored-surface{width:100%!important;max-width:var(--vlq-ui-max)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
body.v13 :is(.v306-move-placement,.v403-restored-surface,#pattern-lab,.v256-status-section,.v353-howto,.v255-roadmap,.v318-scanner-roadmap,#experiment-lab-preview){width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body.v13 :is(.v253-scanner-shell,.v256-results,.v272-public-pattern,.v303-move,.v398-live-candidates,.v255-roadmap,.v318-scanner-roadmap,#experiment-lab-preview){width:100%!important;max-width:100%!important;box-sizing:border-box!important;border-radius:var(--vlq-ui-radius)!important}

/* One heading contract: white title first, cyan descriptor second. */
body.v13 :is(.v291-move-top,.v253-scanner-top>div:first-child,.v254-section-head>div,.v388-live-candidates-heading,.v255-roadmap-head,.v318-scanner-roadmap-head,#experiment-lab-preview .v439-el-head>div){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important}
body.v13 :is(.v291-move-top h2,.v253-scanner-top h2,.v254-section-head h2,.v388-live-candidates-heading h3,.v255-roadmap h2,.v318-scanner-roadmap h2,#experiment-lab-preview .v437-el-title){font-size:var(--vlq-ui-title)!important;line-height:1.01!important;letter-spacing:-.025em!important;font-weight:950!important;margin:0 0 7px!important;color:#f1fbff!important}
body.v13 :is(.v291-move-top small,.v253-scanner-top small,.v254-section-head small,.v388-live-candidates-heading small,.v255-roadmap-head>small,.v318-scanner-roadmap-head>small,#experiment-lab-preview .v437-el-kicker){font-size:var(--vlq-ui-kicker)!important;line-height:1.25!important;letter-spacing:1.8px!important;font-weight:900!important;margin:0 0 12px!important;color:#39dcff!important}
body.v13 .v254-section-head>div>h2,body.v13 .v388-live-candidates-heading>h3{order:1!important}
body.v13 .v254-section-head>div>small,body.v13 .v388-live-candidates-heading>small{order:2!important}
body.v13 .v388-live-candidates-heading>p{order:3!important}

/* Canonical panel/table shell. */
body.v13 :is(.v253-table,.v256-results-shell,.v341-case-study-table){width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;border:1px solid var(--vlq-ui-border)!important;border-radius:var(--vlq-ui-inner-radius)!important;background:var(--vlq-ui-panel)!important}
body.v13 :is(.v253-table-head,.v256-results-head,.v341-case-head){background:rgba(9,35,45,.34)!important;color:#8fa6b4!important;font-weight:900!important;letter-spacing:1.15px!important}
body.v13 :is(.v253-data-row,.v256-result-row,.v341-case-row){border-bottom:1px solid rgba(82,151,180,.14)!important}
body.v13 :is(.v253-scanner-shell,.v256-results,#pattern-lab,.v303-move,.v398-live-candidates) :is(.v409-text-note,.v410-status-note,.v282-pattern-note,.v253-disclaimer,.v256-method-note){width:100%!important;max-width:100%!important;box-sizing:border-box!important;border-radius:var(--vlq-ui-inner-radius)!important}

/* Experiment Lab is a normal canonical public surface, not a special typography island. */
body.v13 #experiment-lab-preview{margin-top:var(--vlq-ui-section-gap)!important;padding-top:0!important}
body.v13 #experiment-lab-preview>.wrap{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
body.v13 #experiment-lab-preview .v437-el-panel{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding:var(--vlq-ui-panel-pad)!important;border-radius:var(--vlq-ui-radius)!important}
body.v13 #experiment-lab-preview .v449-el-overview{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body.v13 #experiment-lab-preview :is(.v437-el-lead,.v449-el-data,.v449-el-method){font-size:var(--vlq-ui-copy)!important;line-height:1.58!important}
body.v13 #experiment-lab-preview .v449-el-models{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body.v13 #experiment-lab-preview .v450-el-token-card{width:100%!important;max-width:100%!important;box-sizing:border-box!important}

/* Reusable classes for every NEW public module from V451 onward. */
body.v13 .vlq-ui-section{width:100%;max-width:100%;box-sizing:border-box;margin:0 0 var(--vlq-ui-section-gap)}
body.v13 .vlq-ui-panel{width:100%;max-width:100%;box-sizing:border-box;padding:var(--vlq-ui-panel-pad);border:1px solid var(--vlq-ui-border);border-radius:var(--vlq-ui-radius);background:var(--vlq-ui-panel)}
body.v13 .vlq-ui-head{display:flex;flex-direction:column;align-items:flex-start;gap:0}
body.v13 .vlq-ui-title{font-size:var(--vlq-ui-title);line-height:1.01;letter-spacing:-.025em;font-weight:950;margin:0 0 7px;color:#f1fbff}
body.v13 .vlq-ui-kicker{font-size:var(--vlq-ui-kicker);line-height:1.25;letter-spacing:1.8px;font-weight:900;margin:0 0 12px;color:#39dcff}
body.v13 .vlq-ui-copy{font-size:var(--vlq-ui-copy);line-height:1.58;color:#8fa6b3}
body.v13 .vlq-ui-inner{width:100%;max-width:100%;box-sizing:border-box;border:1px solid var(--vlq-ui-border);border-radius:var(--vlq-ui-inner-radius);background:var(--vlq-ui-panel-2)}

@media(max-width:760px){
  :root{--vlq-ui-gutter:12px;--vlq-ui-section-gap:28px;--vlq-ui-panel-pad:12px;--vlq-ui-inner-gap:12px}
  body.v13 .v253-home{padding-left:var(--vlq-ui-gutter)!important;padding-right:var(--vlq-ui-gutter)!important}
  body.v13 .v253-home>.wrap.v253-wrap,body.v13 .v403-restored-surface{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
  body.v13 :is(.v306-move-placement,.v403-restored-surface,#pattern-lab,.v256-status-section,.v353-howto,.v255-roadmap,.v318-scanner-roadmap,#experiment-lab-preview){margin-left:0!important;margin-right:0!important}
  body.v13 :is(.v291-move-top h2,.v253-scanner-top h2,.v254-section-head h2,.v388-live-candidates-heading h3,.v255-roadmap h2,.v318-scanner-roadmap h2,#experiment-lab-preview .v437-el-title,.vlq-ui-title){font-size:var(--vlq-ui-title-mobile)!important;line-height:1.02!important;margin:0 0 7px!important}
  body.v13 :is(.v291-move-top small,.v253-scanner-top small,.v254-section-head small,.v388-live-candidates-heading small,.v255-roadmap-head>small,.v318-scanner-roadmap-head>small,#experiment-lab-preview .v437-el-kicker,.vlq-ui-kicker){font-size:var(--vlq-ui-kicker-mobile)!important;line-height:1.25!important;letter-spacing:1.6px!important;margin:0 0 12px!important}
  body.v13 #experiment-lab-preview{margin-top:var(--vlq-ui-section-gap)!important;padding-left:0!important;padding-right:0!important}
  body.v13 #experiment-lab-preview .v437-el-panel{padding:var(--vlq-ui-panel-pad)!important}
  body.v13 #experiment-lab-preview :is(.v437-el-lead,.v449-el-data,.v449-el-method){font-size:var(--vlq-ui-copy-mobile)!important;line-height:1.55!important}

  /* Results: reserve real width for STATUS/PATTERN and forbid badge overlap. */
  body.v13 .v256-results-head,body.v13 .v256-result-row{display:grid!important;grid-template-columns:minmax(48px,.92fr) minmax(38px,.58fr) minmax(40px,.62fr) minmax(84px,1.25fr) minmax(88px,1.32fr)!important;gap:4px!important;padding:0 6px!important;box-sizing:border-box!important}
  body.v13 .v256-results-head>*,body.v13 .v256-result-row>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.v13 .v256-results-head>span{font-size:8px!important;line-height:1.05!important;letter-spacing:.75px!important;word-break:normal!important;overflow-wrap:normal!important}
  body.v13 .v256-result-row :is(.v256-status,.v256-pattern,.v253-status,[class*="status"],[class*="pattern"]){width:100%!important;min-width:0!important;max-width:100%!important;padding:7px 3px!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;text-align:center!important;font-size:9px!important;line-height:1.08!important;letter-spacing:.45px!important}
  body.v13 .v256-result-row>b:first-child{white-space:nowrap!important;font-size:10px!important;letter-spacing:-.15px!important}
}
@media(max-width:390px){
  :root{--vlq-ui-gutter:10px;--vlq-ui-section-gap:24px;--vlq-ui-panel-pad:10px}
  body.v13 .v256-results-head,body.v13 .v256-result-row{grid-template-columns:minmax(45px,.9fr) 36px 38px minmax(78px,1.22fr) minmax(82px,1.28fr)!important;gap:3px!important;padding:0 5px!important}
}

/* V452 — mobile action affordance cleanup.
   The MOST IMPORTANT MOVE table now fits the canonical mobile width, so the
   legacy SWIPE hint is suppressed. DETAIL is a real button and receives the
   canonical minimum touch target. */
@media(max-width:760px){
  body.v13 .v339-move-table:after{content:none!important;display:none!important}
  body.v13 .v339-move-table .v339-analysis-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    justify-self:end!important;
    width:auto!important;
    min-width:64px!important;
    min-height:36px!important;
    padding:8px 10px!important;
    border-radius:10px!important;
    box-sizing:border-box!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.8px!important;
    white-space:nowrap!important;
  }
}
@media(max-width:390px){
  body.v13 .v339-move-table .v339-analysis-btn{min-width:62px!important;min-height:36px!important;padding:8px 8px!important;font-size:8.8px!important}
}
