/* Terry.ism v30 — immediate frame/ratio choices and unclipped editor flow */

/* The page owns vertical scrolling. The editor is never cropped to the viewport. */
body.has-media .editor-card,
body.has-media.is-media-portrait .editor-card,
body.has-media.is-media-landscape .editor-card{
  position:static!important;
  top:auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  scrollbar-gutter:auto!important;
}
body.has-media .editor-content,
body.has-media .editor-panel,
body.has-media .editor-panel.active{
  max-height:none!important;
  overflow:visible!important;
}
body.has-media .editor-tabs{
  position:static!important;
  top:auto!important;
}
body.has-media .editor-panel.active{
  padding-bottom:24px!important;
}
body.has-media .customise-drawer-inner{
  padding-bottom:4px;
}
body.has-media .details-card,
body.has-media .creator-signature-group{
  scroll-margin-block:84px;
}

/* Final output ratio is a primary choice, directly after the frame picker. */
.quick-ratio-section{
  margin-top:14px;
  padding:12px;
  border:1px solid #dde2e7;
  border-radius:14px;
  background:linear-gradient(145deg,#fbfbfa,#f6f7f7);
}
.quick-ratio-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.quick-ratio-heading>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
}
.quick-ratio-heading>div>span{
  display:grid;
  width:24px;
  height:24px;
  flex:0 0 24px;
  place-items:center;
  border-radius:7px;
  background:#171c24;
  color:#fff;
  font-size:8px;
  font-weight:850;
  letter-spacing:.04em;
}
.quick-ratio-heading strong{
  overflow:hidden;
  color:#20262d;
  font-size:13px;
  line-height:1.2;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.quick-ratio-heading small{
  min-width:0;
  overflow:hidden;
  color:#737c86;
  font-size:9px;
  line-height:1.35;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.quick-ratio-section .ratio-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
.quick-ratio-section .ratio-btn{
  position:relative;
  display:flex;
  min-width:0;
  min-height:52px!important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:8px 9px!important;
  overflow:hidden;
  border:1px solid #dce1e6!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#20262d!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.1;
  text-align:left;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.quick-ratio-section .ratio-btn:hover{
  border-color:#9fa8b2!important;
  transform:translateY(-1px);
}
.quick-ratio-section .ratio-btn:focus-visible{
  outline:2px solid #c86b3d;
  outline-offset:2px;
}
.quick-ratio-section .ratio-btn small{
  display:block;
  width:100%;
  margin-top:4px!important;
  overflow:hidden;
  color:#7e8791!important;
  font-size:8px!important;
  font-weight:600!important;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.quick-ratio-section .ratio-btn.active{
  border-color:#171c24!important;
  background:#171c24!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(17,22,30,.16)!important;
}
.quick-ratio-section .ratio-btn.active::after{
  content:"";
  position:absolute;
  top:8px;
  right:8px;
  width:6px;
  height:6px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:#d67842;
}
.quick-ratio-section .ratio-btn.active small{color:rgba(255,255,255,.66)!important}

/* Keep the secondary controls quiet and clearly collapsible. */
.drawer-toggle-pill{
  min-height:42px!important;
  margin:9px 0 0!important;
  padding:0 12px!important;
  border:1px solid #dfe3e7!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#343b44!important;
  font-size:10.5px!important;
}
.drawer-toggle-pill:hover{
  border-color:#b9c0c8!important;
  background:#fafafa!important;
  color:#171c24!important;
}
.customise-drawer:not(.is-collapsed){
  margin-top:10px;
  padding-top:2px;
  border-top:1px solid #e7e9ec;
}

/* Creator mark is intentionally fixed to the quiet Terry.ism wordmark. */
.creator-signature-text-only{
  padding:11px 12px!important;
  background:#fafafa!important;
}
.creator-signature-text-only .creator-signature-static{
  display:flex;
  min-height:42px;
  align-items:center;
  margin-top:2px;
  padding:0 11px;
  border:1px solid #dfe3e7;
  border-radius:9px;
  background:#fff;
}
.creator-signature-text-only .signature-preview{
  min-height:0!important;
  justify-content:flex-start!important;
  gap:7px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#171c24!important;
  box-shadow:none!important;
}
.creator-signature-text-only .signature-wordmark{
  flex-direction:row!important;
}
.creator-signature-text-only .signature-wordmark b{
  font-size:11px!important;
  letter-spacing:.07em!important;
}
.creator-signature-text-only .signature-wordmark small{
  padding:3px 6px;
  border-radius:999px;
  background:#eef0f2;
  color:#737b84;
  font-size:7px!important;
  font-weight:750;
  letter-spacing:.08em!important;
  white-space:nowrap;
}

@media(max-width:900px){
  .mobile-frame-browser-head b::before{
    content:"01";
    display:inline-grid;
    width:22px;
    height:22px;
    margin-right:6px;
    place-items:center;
    border-radius:6px;
    background:#171c24;
    color:#fff;
    font-size:7px;
    letter-spacing:.04em;
    vertical-align:middle;
  }
  .quick-ratio-section{
    margin-top:0;
    padding:10px;
    border-radius:12px;
  }
  .quick-ratio-heading{margin-bottom:8px}
  .quick-ratio-heading small{
    max-width:54%;
    font-size:8.5px;
  }
  .quick-ratio-section .ratio-grid{
    display:flex!important;
    gap:7px!important;
    padding:2px 1px 5px;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-padding-inline:1px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
  }
  .quick-ratio-section .ratio-grid::-webkit-scrollbar{display:none}
  .quick-ratio-section .ratio-btn{
    flex:0 0 92px!important;
    min-height:54px!important;
    scroll-snap-align:start;
  }
  body.has-media .editor-panel.active{padding-bottom:20px!important}
}

@media(max-width:720px){
  .quick-ratio-section{margin-inline:-2px}
  .quick-ratio-heading strong{font-size:12px}
  .quick-ratio-heading small{font-size:8px}
  .quick-ratio-section .ratio-btn{flex-basis:88px!important}
  .customise-drawer:not(.is-collapsed){padding-top:4px}
}

@media(max-width:360px){
  .quick-ratio-heading small{display:none}
  .quick-ratio-section .ratio-btn{flex-basis:84px!important}
}

@media(max-height:560px) and (orientation:landscape){
  body.has-media .editor-card,
  body.has-media .editor-panel.active{max-height:none!important;overflow:visible!important}
}