/* mobile-v96.css — 9.6.0-r4 mobile corrections.
 *
 * This sheet is loaded LAST on every page so it wins the cascade without
 * touching the six stacked theme generations (theme-v4 .. theme-v91). Each rule
 * below fixes a defect that was verified in the shipped stylesheets, not a
 * general "make it responsive" guess.
 */

/* ------------------------------------------------------------------
 * 1. iOS auto-zoom on focus.
 *
 * Safari on iOS zooms the page in whenever a focused input has a computed
 * font-size below 16px, and it never zooms back out. theme-v7.css sets
 * input{font-size:12px} and 15px, theme-v9.css and customer-infrastructure-v93
 * do the same. Every search box and login field triggered it.
 * ------------------------------------------------------------------ */
@media (max-width: 820px) {
  input,
  select,
  textarea,
  .input,
  .field input,
  .field select,
  .pc-form input,
  .pc-form select,
  .ic-shell input,
  .ic-shell select {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------------
 * 2. Viewport units against mobile browser chrome.
 *
 * 100vh is the viewport with the URL bar hidden, so on iOS Safari and Android
 * Chrome a 100vh shell is taller than what is actually visible and the page
 * gains a phantom scroll. dvh tracks the live viewport. The vh line is kept
 * first as the fallback for browsers without dvh.
 * ------------------------------------------------------------------ */
.pc-shell {
  min-height: 100vh;
  min-height: 100dvh;
}
.ic-shell {
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 761px) {
  .pc-side {
    height: 100vh;
    height: 100dvh;
  }
}
@media (min-width: 901px) {
  .ic-shell > aside {
    height: 100vh;
    height: 100dvh;
  }
}
.pc-modal {
  max-height: 88vh;
  max-height: 88dvh;
}

/* ------------------------------------------------------------------
 * 3. Platform control-center forms stayed two-column on phones.
 *
 * platform-v92.css sets .pc-form{grid-template-columns:1fr 1fr} and its
 * max-width:760px block never overrides it, so every settings and create form
 * in the owner control centers rendered as two squeezed columns on a phone.
 * ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .pc-form {
    grid-template-columns: 1fr !important;
  }
  .pc-form .full {
    grid-column: 1 / -1;
  }
  .pc-actions {
    flex-wrap: wrap;
  }
  .pc-actions > * {
    flex: 1 1 auto;
  }
  .pc-modal {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
  }
  .pc-modal-bg {
    padding: 10px;
    align-items: flex-end;
  }
  .pc-head {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------
 * 4. Wide tables must scroll inside their own box, never widen the page.
 *
 * .pc-table has min-width:820px and .ic-table gets min-width:650px on small
 * screens. Their wrappers scroll, but any table rendered without a wrapper
 * pushed the whole document sideways.
 * ------------------------------------------------------------------ */
.table-wrap,
.pc-table-wrap,
.pc-card,
.ic-card {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
@media (max-width: 820px) {
  table {
    max-width: none;
  }
  .pc-content,
  .ic-shell main,
  .content,
  .main {
    min-width: 0;
    max-width: 100%;
  }
  /* Long unbroken values (IPv6, tokens, hashes) used to force a horizontal
     scroll on the whole page. */
  .mono,
  .pc-code,
  code,
  pre {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  pre {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ------------------------------------------------------------------
 * 5. Touch targets.
 *
 * Sidebar and top-bar controls were sized for a mouse. 44px is the minimum
 * comfortable touch target on both iOS and Android guidance.
 * ------------------------------------------------------------------ */
@media (pointer: coarse) {
  .btn,
  .iconbtn,
  .pc-btn,
  .ic-btn,
  .pc-top button,
  .pc-side nav button,
  .ic-shell nav button,
  .nav a,
  .nav button {
    min-height: 44px;
  }
  .iconbtn {
    min-width: 44px;
  }
  .btn.sm {
    min-height: 38px;
  }
}

/* ------------------------------------------------------------------
 * 6. Horizontal nav strips on phones.
 *
 * platform-v92 and infrastructure-v93 turn the sidebar into a scrolling row
 * under 760/900px. Without snap and momentum it felt broken, and the scrollbar
 * overlapped the labels.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pc-side nav,
  .ic-shell nav {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pc-side nav::-webkit-scrollbar,
  .ic-shell nav::-webkit-scrollbar {
    display: none;
  }
  .pc-side nav button,
  .ic-shell nav button {
    scroll-snap-align: start;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* ------------------------------------------------------------------
 * 7. Notch and home-indicator safe areas for the pages that lacked them.
 * theme-v6/v7/v8/v9/v91 already handle the customer portal; the control
 * centers did not.
 * ------------------------------------------------------------------ */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .pc-content,
    .ic-shell main {
      padding-left: max(15px, env(safe-area-inset-left));
      padding-right: max(15px, env(safe-area-inset-right));
      padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
    .pc-top,
    .ic-shell main > header {
      padding-left: max(15px, env(safe-area-inset-left));
      padding-right: max(15px, env(safe-area-inset-right));
    }
  }
}

/* ------------------------------------------------------------------
 * 8. Sticky headers ate too much of a short screen.
 * ------------------------------------------------------------------ */
@media (max-width: 760px) and (max-height: 720px) {
  .pc-top {
    position: static;
    min-height: 0;
  }
}

/* ------------------------------------------------------------------
 * 9. Service model that cannot currently be sold.
 *
 * The Trial model is served only by the temporary provider pool. With no trial
 * account configured it must read as clearly switched off rather than merely
 * looking clickable and failing at payment.
 * ------------------------------------------------------------------ */
.v907-service-option.v907-service-disabled,
.v907-service-option[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.85);
  pointer-events: none;
}
.v907-service-option.v907-service-disabled em,
.v907-service-option[disabled] em {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ------------------------------------------------------------------
 * 10. Respect reduced-motion. The v5 motion layer animates on every route
 * change, which is uncomfortable on a phone and drains battery.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}