/* IBEX Phone V21 — one shared design system for every workspace page.
   Based on V20; restores the balanced V19 margins and unifies typography. */
:root {
  --v21-workspace-max: 1350px;
  --v21-workspace-gutter: clamp(22px, 3.3vw, 52px);
  --v21-page-top: 30px;
  --v21-heading-size: 36px;
  --v21-heading-weight: 790;
  --v21-heading-tracking: -1.4px;
  --v21-subtitle-size: 14px;
}
@media(min-width:741px) {
  /* Same centered canvas for Keypad, Recents, Contacts, Voicemail, Siren, Settings, Account. */
  body .content-wrap .main,
  body:has(#page-account.page-active) .content-wrap .main {
    width:100%!important;
    max-width:var(--v21-workspace-max)!important;
    margin-inline:auto!important;
    padding-top:var(--v21-page-top)!important;
    padding-left:var(--v21-workspace-gutter)!important;
    padding-right:var(--v21-workspace-gutter)!important;
    padding-bottom:85px!important;
  }
  .content-wrap>.topbar {
    padding-left:max(var(--v21-workspace-gutter),calc((100% - var(--v21-workspace-max))/2 + var(--v21-workspace-gutter)))!important;
    padding-right:max(var(--v21-workspace-gutter),calc((100% - var(--v21-workspace-max))/2 + var(--v21-workspace-gutter)))!important;
  }
}
/* Unified page-title rhythm. Explicit selectors override V10/V16/V17 special cases. */
.content-wrap .main .page .page-intro,
.content-wrap .main #page-dialer .page-intro,
.content-wrap .main #page-settings .page-intro,
.content-wrap .main #page-account .page-intro {
  margin:0 0 20px!important;
  padding:0!important;
  align-items:flex-end;
  min-height:0;
}
.content-wrap .main .page .page-intro .kicker {
  display:block;
  color:#8b9bae;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:1.8px!important;
  line-height:1.45;
  margin:0!important;
}
.content-wrap .main .page .page-intro h1,
.content-wrap .main #page-dialer .page-intro h1,
.content-wrap .main #page-account .page-intro h1,
.content-wrap .main #page-settings .page-intro h1 {
  font-size:var(--v21-heading-size)!important;
  font-weight:var(--v21-heading-weight)!important;
  letter-spacing:var(--v21-heading-tracking)!important;
  line-height:1.13!important;
  margin:8px 0 7px!important;
}
.content-wrap .main .page .page-intro p,
.content-wrap .main #page-dialer .page-intro p {
  font-size:var(--v21-subtitle-size)!important;
  line-height:1.52!important;
  letter-spacing:-.1px!important;
  margin:0!important;
}
/* Keypad title now follows the same punctuation and typography as all other sections. */
#page-dialer .page-intro .orange-period{color:var(--orange)}
/* The V20 taller dialer and latest-calls stack are untouched. */
@media (min-width:741px) and (max-height:780px){
  :root{--v21-page-top:22px}
}
@media(max-width:740px){
  :root{
    --v21-workspace-gutter:16px;
    --v21-page-top:16px;
    --v21-heading-size:32px;
    --v21-heading-tracking:-1.15px;
    --v21-subtitle-size:12px;
  }
  body .content-wrap .main,
  body:has(#page-account.page-active) .content-wrap .main {
    width:100%!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-top:var(--v21-page-top)!important;
    padding-left:var(--v21-workspace-gutter)!important;
    padding-right:var(--v21-workspace-gutter)!important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }
  .content-wrap>.topbar{padding-inline:var(--v21-workspace-gutter)!important}
  .content-wrap .main .page .page-intro,
  .content-wrap .main #page-dialer .page-intro,
  .content-wrap .main #page-settings .page-intro,
  .content-wrap .main #page-account .page-intro {margin-bottom:16px!important}
  .content-wrap .main .page .page-intro h1,
  .content-wrap .main #page-dialer .page-intro h1,
  .content-wrap .main #page-account .page-intro h1,
  .content-wrap .main #page-settings .page-intro h1 {margin:4px 0 5px!important}
  /* Mobile uses the same simple heading style as other pages. */
  .content-wrap .main .page .page-intro .kicker{display:none!important}
}
@media(max-width:370px){
  :root{--v21-workspace-gutter:13px;--v21-heading-size:30px}
}
html[data-theme='dark'] .content-wrap .main .page .page-intro .kicker{color:#8eabc9}
/* Tablet sidebar can leave less than 650px for Siren's original two-pane inbox.
   Stack the panes rather than pushing content beyond the shared right gutter. */
@media (min-width:741px) and (max-width:1000px){
 #page-siren .siren-inbox-grid{grid-template-columns:minmax(0,1fr)!important}
 #page-siren .siren-list-panel,#page-siren .detail-panel{width:100%;min-width:0}
}