/* Spectra Free Editor phone orientation guard
   Phones in landscape receive a portrait-mode notice. Tablets and
   touch-enabled laptops with a hover-capable pointer remain usable. */

body.sv-freeEditor .sv-orientationGuard{display:none;}

@media (orientation:landscape) and (pointer:coarse) and (any-hover:none) and (max-height:34rem){
  html,
  body.sp-app-shell.sv-freeEditor{
    overflow:hidden;
  }

  body.sv-freeEditor .sv-orientationGuard{
    position:fixed;
    z-index:var(--sv-z-orientation-guard);
    inset:0;
    display:grid;
    place-items:center;
    padding:max(var(--sp-4,1rem),var(--sv-shell-safe-top))
            max(var(--sp-4,1rem),var(--sv-shell-safe-right))
            max(var(--sp-4,1rem),var(--sv-shell-safe-bottom))
            max(var(--sp-4,1rem),var(--sv-shell-safe-left));
    background:
      radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--sv-blue),transparent 84%),transparent 22rem),
      radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--sv-violet),transparent 84%),transparent 24rem),
      var(--sp-bg,#050812);
  }

  body.sv-freeEditor .sv-orientationGuardPanel{
    inline-size:min(var(--sv-orientation-panel-max),var(--sv-orientation-panel-inline));
    display:grid;
    justify-items:center;
    gap:var(--sp-3,.75rem);
    padding:clamp(var(--sp-4,1rem),5vh,var(--sp-7,1.75rem));
    border:var(--sp-border-w-1,1px) solid color-mix(in srgb,var(--sv-blue),transparent 62%);
    border-radius:var(--sp-radius-4,1.25rem);
    background:color-mix(in srgb,var(--sp-surface,#111827),var(--sp-bg,#050812) 14%);
    box-shadow:var(--sv-orientation-panel-shadow);
    text-align:center;
  }

  body.sv-freeEditor .sv-orientationGuardIcon{
    display:grid;
    place-items:center;
    inline-size:var(--sv-orientation-icon-size);
    block-size:var(--sv-orientation-icon-size);
    border:var(--sp-border-w-1,1px) solid color-mix(in srgb,var(--sv-blue),transparent 48%);
    border-radius:var(--sv-radius-round);
    background:color-mix(in srgb,var(--sp-surface-2,#172033),var(--sv-blue) 10%);
    color:var(--sv-blue);
    font-size:var(--sv-orientation-icon-font-size);
    line-height:1;
    transform:rotate(90deg);
  }

  body.sv-freeEditor .sv-orientationGuardTitle{
    margin:0;
    color:var(--sp-text,#f6fbff);
    font-size:clamp(1.25rem,5vw,1.65rem);
    line-height:1.15;
    letter-spacing:-.02em;
  }

  body.sv-freeEditor .sv-orientationGuardText{
    max-inline-size:var(--sv-orientation-copy-max);
    margin:0;
    color:var(--sp-muted,#9ca3af);
    font-size:clamp(.9rem,3.5vw,var(--sp-fs-3,1rem));
    line-height:1.45;
  }
}