/* Spectra Viewer clean mobile header patch
   Framework owns the app shell. This file only tightens Viewer-specific header/skip-link behavior. */

.sv-skipLink{
  position:absolute!important;
  z-index:1000!important;
  left:-999rem!important;
  top:var(--sp-2,.5rem)!important;
  width:auto!important;
  max-width:calc(100vw - var(--sp-4,2rem))!important;
  padding:var(--sp-2,.5rem) var(--sp-3,1rem)!important;
  border-radius:var(--sp-radius-2,.8rem)!important;
  background:var(--sp-surface-2)!important;
  color:var(--sp-text)!important;
  text-decoration:none!important;
}

.sv-skipLink:focus,
.sv-skipLink:focus-visible{
  left:var(--sp-2,.5rem)!important;
  outline:var(--sp-focus-ring-w,2px) solid var(--sv-link-accent)!important;
}

body.sp-app-shell.sv-viewer > .sp-header{
  display:block!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

body.sp-app-shell.sv-viewer > .sp-header .sp-header__inner{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  align-items:center!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer .sp-brand{
  min-width:0!important;
}

body.sp-app-shell.sv-viewer .sp-header__right{
  min-width:0!important;
}

@media/* --sp-bp-md: 52rem */
 (max-width:52rem){
  body.sp-app-shell.sv-viewer > .sp-header{
    padding:0!important;
  }

  body.sp-app-shell.sv-viewer > .sp-header .sp-header__inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand actions"!important;
    align-items:center!important;
    gap:var(--sp-2,.5rem)!important;
    padding-block:calc(var(--sp-2,.5rem) + var(--sp-1,.25rem))!important;
    padding-inline:var(--sp-3,1rem)!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__left{
    grid-area:brand!important;
    min-width:0!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__right{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:var(--sp-1,.25rem)!important;
  }

  body.sp-app-shell.sv-viewer .sp-brand{
    display:inline-flex!important;
    align-items:center!important;
    gap:var(--sp-2,.5rem)!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.sp-app-shell.sv-viewer .sp-brand__text{
    display:inline-block!important;
    max-width:54vw!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  body.sp-app-shell.sv-viewer .sp-brand .sp-badge{
    display:inline-flex!important;
    flex:0 0 auto!important;
    max-width:5.25rem!important;
    white-space:nowrap!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__right > a.sp-btn,
  body.sp-app-shell.sv-viewer #assistantTrayToggleBtn{
    display:none!important;
  }

  body.sp-app-shell.sv-viewer #navDrawerToggleBtn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:calc(var(--sp-4,1.25rem) * 2.1)!important;
    min-height:calc(var(--sp-4,1.25rem) * 2.1)!important;
    width:auto!important;
    height:auto!important;
    padding:var(--sp-1,.25rem) var(--sp-2,.5rem)!important;
    border-radius:var(--sp-radius-2,.8rem)!important;
    font-size:var(--sp-fs-1,.875rem)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.sp-app-shell.sv-viewer .sv-main{
    padding-top:var(--sp-3,1rem)!important;
  }
}

@media (max-width:420px){
  body.sp-app-shell.sv-viewer .sp-brand__text{
    max-width:48vw!important;
  }

  body.sp-app-shell.sv-viewer #navDrawerToggleBtn{
    min-width:calc(var(--sp-4,1.25rem) * 1.95)!important;
    min-height:calc(var(--sp-4,1.25rem) * 1.95)!important;
    font-size:calc(var(--sp-fs-1,.875rem) - .05rem)!important;
  }
}

/* Mobile header action row: compact visible Portal, Tools, Voxia. */
@media/* --sp-bp-md: 52rem */
 (max-width:52rem){
  body.sp-app-shell.sv-viewer > .sp-header .sp-header__inner{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "brand"
      "actions"!important;
    gap:calc(var(--sp-1,.25rem) / 2)!important;
    padding-block:calc(var(--sp-2,.5rem) + var(--sp-hairline,1px))!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__left{
    grid-area:brand!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__right{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:var(--sp-2,.5rem)!important;
    width:100%!important;
    min-width:0!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__right > a.sp-btn,
  body.sp-app-shell.sv-viewer #navDrawerToggleBtn,
  body.sp-app-shell.sv-viewer #assistantTrayToggleBtn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:calc(var(--sp-6,1.5rem) + var(--sp-1,.25rem))!important;
    padding:calc(var(--sp-1,.25rem) / 2) var(--sp-2,.5rem)!important;
    border-radius:var(--sp-radius-2,.8rem)!important;
    font-size:var(--sp-fs-2,.875rem)!important;
    line-height:var(--sp-lh-1,1.2)!important;
    font-weight:var(--sp-fw-semibold,600)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:inset 0 0 0 var(--sp-border-w-1,1px) var(--sv-line-light-soft)!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__right > a.sp-btn{
    background:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 16%)!important;
    border-color:color-mix(in srgb,var(--sp-border),var(--sv-blue) 30%)!important;
  }

  body.sp-app-shell.sv-viewer #navDrawerToggleBtn{
    background:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 12%)!important;
    border-color:color-mix(in srgb,var(--sp-border),var(--sv-blue) 26%)!important;
  }

  body.sp-app-shell.sv-viewer #assistantTrayToggleBtn{
    background:color-mix(in srgb,var(--sp-surface-2),var(--sv-violet) 9%)!important;
    border-color:color-mix(in srgb,var(--sp-border),var(--sv-violet) 22%)!important;
  }

  body.sp-app-shell.sv-viewer .sp-brand__text{
    max-width:64vw!important;
  }
}

@media (max-width:420px){
  body.sp-app-shell.sv-viewer .sp-brand__text{
    max-width:58vw!important;
  }

  body.sp-app-shell.sv-viewer .sp-header__right > a.sp-btn,
  body.sp-app-shell.sv-viewer #navDrawerToggleBtn,
  body.sp-app-shell.sv-viewer #assistantTrayToggleBtn{
    font-size:var(--sp-fs-1,.75rem)!important;
  }
}

/* Viewer orientation tokens.
   These are Viewer semantic tokens composed from Spectra framework tokens. */
body.sp-app-shell.sv-viewer{
  --sv-orientation-breakpoint-h:38rem;
  --sv-orientation-overlay-z:99998;
  --sv-orientation-card-z:99999;

  --sv-orientation-card-w:34rem;
  --sv-orientation-card-pad:var(--sp-4);
  --sv-orientation-card-radius:var(--sp-radius-3);
  --sv-orientation-card-border:var(--sp-border-1);
  --sv-orientation-card-shadow:var(--sp-shadow-4);

  --sv-orientation-message-fs:var(--sp-fs-4);
  --sv-orientation-message-lh:var(--sp-lh-2);
  --sv-orientation-message-fw:var(--sp-fw-semibold);

  --sv-orientation-card-bg:color-mix(in srgb,var(--sp-surface-2),var(--sp-bg) 12%);
  --sv-orientation-card-border-color:color-mix(in srgb,var(--sp-border),var(--sv-link-accent) 34%);
  --sv-orientation-overlay-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--sp-bg),var(--sp-surface-2) 8%),
      color-mix(in srgb,var(--sp-surface-2),var(--sp-link) 8%)
    );
  --sv-orientation-overlay-glow:
    radial-gradient(
      circle at 25% 15%,
      color-mix(in srgb,var(--sv-link-accent),transparent 84%),
      transparent 34%
    );
}

/* Phone landscape guard: Viewer is portrait-first on small touch screens. */
@media (orientation:landscape) and (max-height:38rem) and (pointer:coarse){
  body.sp-app-shell.sv-viewer{
    overflow:hidden!important;
  }

  body.sp-app-shell.sv-viewer::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:var(--sv-orientation-overlay-z);
    background:var(--sv-orientation-overlay-glow), var(--sv-orientation-overlay-bg);
    pointer-events:auto;
  }

  body.sp-app-shell.sv-viewer::after{
    content:"Portrait mode only\A Rotate your phone upright to use Spectra Viewer.";
    position:fixed;
    z-index:var(--sv-orientation-card-z);
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    width:min(var(--sv-orientation-card-w), calc(100vw - var(--sp-6)));
    box-sizing:border-box;
    padding:var(--sv-orientation-card-pad);
    border:var(--sv-orientation-card-border);
    border-color:var(--sv-orientation-card-border-color);
    border-radius:var(--sv-orientation-card-radius);
    background:var(--sv-orientation-card-bg);
    color:var(--sp-text);
    box-shadow:var(--sv-orientation-card-shadow);
    font-family:var(--sp-font);
    font-size:var(--sv-orientation-message-fs);
    line-height:var(--sv-orientation-message-lh);
    font-weight:var(--sv-orientation-message-fw);
    text-align:center;
    white-space:pre-line;
    pointer-events:auto;
  }
}