/* Reflow the existing controls; resizing never recreates a draft or session. */
html { -webkit-text-size-adjust:100%; }
main#content,.page,.glass,.metric,.list-row>div,.page-heading>div { min-width:0; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.metric strong,.list-row h3,.page-heading h1,.notice { overflow-wrap:anywhere; }
.page-heading,.section-heading,.wizard-actions { flex-wrap:wrap; }
.phone { max-width:100%; }
.top { gap:12px; }
.top>div { gap:8px;min-width:0; }
.top .header-logo { max-width:40%;height:auto;object-fit:contain; }
dialog { max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain; }
input,textarea,select { font-size:16px; }
.login,.boot,.link-card { max-width:100%; }
.table-wrap { overscroll-behavior-x:contain; }

@media (max-width:1000px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .two-col { grid-template-columns:minmax(0,1fr); }
}
@media (min-width:600px) and (max-width:850px) {
  .two-col,.card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:850px) {
  main#content {
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
    padding-bottom:calc(110px + env(safe-area-inset-bottom));
  }
  .sidebar { left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right)); }
  .steps { flex-wrap:wrap; }
  .steps li { min-width:80px;font-size:11px; }
  .product { flex-wrap:wrap; }
  .product .info { flex-basis:130px; }
  .wizard-actions button { min-height:48px;white-space:normal; }
  .login { padding:32px max(20px,env(safe-area-inset-left)) 30px; }
  .login>img { margin-bottom:24px; }
  .insight-pagination { flex-wrap:wrap; }
}

/* Short, wide windows use a trailing glass rail. Also useful in landscape on
   existing iPhones: layout depends on window geometry, never a model name. */
@media (min-width:440px) and (max-height:740px) and (max-width:1100px) {
  .sidebar {
    left:auto;right:max(10px,env(safe-area-inset-right));
    top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));
    width:82px;padding:6px;border:1px solid #fff;border-radius:27px;
    background:linear-gradient(130deg,#ffffffed,#ead3dfcf,#ffffffdb);
    box-shadow:0 12px 28px #68264028,inset 0 0 0 3px #ffffff87;
    backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
    overflow-y:auto;overscroll-behavior:contain;z-index:15;
  }
  .sidebar .logo,.sidebar-bottom { display:none!important; }
  .sidebar nav { display:flex;flex-direction:column;gap:5px;min-height:100%;justify-content:center; }
  .sidebar nav button {
    flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:44px;min-height:50px;padding:7px 2px;gap:5px;
    font-size:10px;line-height:1.2;border-radius:18px;text-align:center;
  }
  .sidebar nav .nav-create { transform:none;margin:3px 0;order:0; }
  .sidebar nav button span { width:auto; }
  .sidebar nav .create-label { font-size:10px; }
  main#content {
    margin-left:0;max-width:none;padding:0 calc(108px + env(safe-area-inset-right)) 30px max(18px,env(safe-area-inset-left));
  }
  .top { height:auto;min-height:68px;margin:0 0 12px; }
  .top .header-logo { width:120px; }
  .top #account { max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .freshness { padding-bottom:12px; }
  .page-heading { gap:14px;margin-bottom:20px; }
  .page-heading h1 { font-size:clamp(24px,3.4vw,32px); }
  .glass { padding:20px;border-radius:24px; }
  .home-hero { min-height:0; }
  .home-hero>div:not(.glass-sculpture) { max-width:100%; }
  .home-hero h1,.home-hero p:not(.eyebrow) { max-width:none; }
  .glass-sculpture { display:none; }
  .home-hero>.primary { width:100%; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .metric { padding:16px; }
  .two-col,.card-grid { grid-template-columns:minmax(0,1fr); }
  .compose-layout { grid-template-columns:minmax(0,1fr); }
  .preview-column { position:static; }
  #toast { left:18px;right:108px;bottom:16px;transform:none;width:auto;max-width:none; }
}
@media (min-width:780px) and (max-height:740px) and (max-width:1100px) {
  .two-col,.card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compose-layout { grid-template-columns:minmax(0,1fr) minmax(220px,0.7fr);gap:20px; }
  .preview-column { position:sticky;top:18px; }
  .phone { width:250px;height:460px; }
  .home-hero { flex-direction:row;align-items:center; }
  .home-hero>.primary { width:auto;flex:0 1 210px;align-self:center; }
}
@media (max-width:359px) {
  main#content { padding-left:12px;padding-right:12px; }
  .glass { padding:17px; }
  .top { flex-wrap:wrap;height:auto;min-height:80px;padding:10px 0; }
  .top .header-logo { width:100px; }
  .sidebar nav button { font-size:9px; }
  .metric strong { font-size:26px; }
}
/* Keep system accessibility preferences authoritative after the reflow rules. */
@media (prefers-reduced-transparency:reduce) {
  .sidebar { background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none; }
}
@media (prefers-contrast:more) {
  .sidebar { border-color:#805a6b; }
}