/* Shared responsive rules for the editor and scenario comparison. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.masthead > *,.scenario-bar > *,.sc-chips,.grid > *,.kpis > *,.strip > *,.field{min-width:0;}
.btn{text-decoration:none;}
.sc-actions{flex-wrap:wrap;}
.sc-chip{max-width:100%;overflow-wrap:anywhere;text-align:left;}
.sc-chip .dot{flex:none;}
.sc-name-edit{min-width:0;max-width:100%;}
.twrap{max-width:100%;overscroll-behavior-x:contain;}
.twrap:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
.table-scroll-hint{display:none;}
.workspace-select{display:none;}
.auth-card{max-height:100%;overflow-y:auto;overscroll-behavior-y:contain;}
.auth-msg{overflow-wrap:anywhere;}

@media (max-width:900px){
  .strip{grid-template-columns:repeat(3,minmax(0,1fr));}
  .strip .cell{display:flex;flex-direction:column;justify-content:space-between;gap:4px;}
  .card > .head{gap:10px;flex-wrap:wrap;}
  .card > .head .tag{max-width:100%;white-space:normal;}
}

@media (max-width:700px), (max-width:950px) and (pointer:coarse){
  .app{
    padding:16px 12px 40px;
    padding-top:max(16px,env(safe-area-inset-top));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(40px,env(safe-area-inset-bottom));
    padding-left:max(12px,env(safe-area-inset-left));
  }
  .auth-gate{
    padding:16px;
    padding-top:max(16px,env(safe-area-inset-top));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
    height:100dvh;overflow-y:auto;
  }
  .auth-card{padding:24px 20px;flex-shrink:0;}
  .auth-card .sub{font-size:13px;line-height:1.6;}
  .auth-field{gap:6px;margin-bottom:16px;}
  .auth-field label,.field label{font-size:12px;line-height:1.5;}
  /* 16px prevents Safari from zooming the page when a field is focused. */
  .app input:not([type=checkbox]),.app select,.app textarea,.auth-field input{
    min-width:0;min-height:44px;font-size:16px;padding:10px;
  }
  .app input[type=date]{max-width:100%;}
  .app select{
    appearance:none;-webkit-appearance:none;height:44px;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-size:16px;background-position:right 10px center;
  }
  .app textarea{min-height:88px;}
  .btn,.btn.small,.sc-chip{
    min-height:44px;padding:9px 10px;font-size:12px;line-height:1.35;
    justify-content:center;touch-action:manipulation;
  }
  .auth-actions .btn{font-size:14px;}
  .auth-switch{font-size:13px;line-height:1.6;}
  .auth-switch button{min-height:44px;padding:8px 4px;}
  .masthead{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:12px;}
  .masthead > div{width:100%;}
  .masthead h1{font-size:23px;line-height:1.25;}
  .masthead textarea.mh-address-input{font-size:22px;font-weight:800;padding:6px 0;min-height:44px;max-width:none;background:transparent;border-color:transparent;}
  .masthead .byline{align-items:stretch;gap:2px;}
  .byline #in-purchasers{width:100%;text-align:left;padding:6px 0;}
  .byline .account{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;margin:0;}
  .byline .account .who{grid-column:1/-1;grid-row:2;overflow-wrap:anywhere;text-align:left;line-height:1.5;}
  .byline .account button{grid-column:2;grid-row:1;min-height:44px;padding:8px 0 8px 6px;font-size:12px;white-space:nowrap;}
  .masthead-right{align-items:stretch;gap:8px;}
  .masthead-right > div{display:grid !important;grid-template-columns:minmax(0,1fr) auto;}
  .masthead-right .who{overflow-wrap:anywhere;}
  .advice-note{padding:10px;font-size:11.5px;gap:8px;margin-bottom:14px;}

  /* Keep workspace selectors separate from their consistently sized actions. */
  .scenario-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:12px;}
  .scenario-bar > .sc-chips{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px;}
  .bar-label{margin:0;font-size:10px;}
  #cl-chips,#sc-chips{display:none;}
  .scenario-bar .workspace-select{display:block;width:100%;text-overflow:ellipsis;}
  #cl-chips.is-renaming,#sc-chips.is-renaming{display:flex;}
  .sc-chips.is-renaming + .workspace-select{display:none;}
  #cl-chips .sc-name-edit,#sc-chips .sc-name-edit{flex:0 0 100%;width:100%;}
  .sc-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
  .sc-actions > *{width:100%;min-width:0;text-align:center;}
  .sc-actions a,#sc-report{grid-column:span 2;}
  .client-bar{padding-bottom:12px;}
  .client-bar .btn{padding-inline:6px;white-space:nowrap;}

  /* A static summary leaves the phone viewport free while editing. */
  .strip{position:static;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px;}
  .strip .cell{padding:10px;gap:4px;}
  .strip label{font-size:9.5px;line-height:1.5;letter-spacing:.035em;margin:0;}
  .strip .v{font-size:17px;line-height:1.35;overflow-wrap:anywhere;}
  .tabs{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
    position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
    background:var(--bg);padding:8px 0;border:0;margin-top:-8px;margin-bottom:16px;
  }
  .panel,.app input,.app select,.app textarea{
    scroll-margin-top:calc(var(--mobile-tabs-height,126px) + env(safe-area-inset-top,0px) + 12px);
  }
  .tab,.tab.active{
    top:0;min-width:0;min-height:52px;margin:0;padding:8px 6px;
    border:1px solid var(--border);border-radius:8px;
    justify-content:center;text-align:center;line-height:1.4;font-size:12px;text-wrap:balance;
  }
  .tab{background:var(--surface);}
  .tab.active{background:var(--teal);color:var(--bg);border-color:var(--teal);}
  .card > .head{padding:12px;font-size:14px;gap:8px;}
  .card > .head .tag{font-size:10px;line-height:1.5;}
  .card .body{padding:14px 12px;}
  .card .body.pad0{padding:0;}
  .grid,.grid.g2{gap:14px 12px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .field{gap:6px;}
  .field .hint{font-size:11px;line-height:1.5;}
  .readout{min-height:44px;padding:10px;font-size:16px;overflow-wrap:anywhere;}
  .section-title{font-size:12px;line-height:1.5;}
  .kpis{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi{min-width:0;padding:12px 10px;}
  .kpi label{font-size:10px;line-height:1.5;}
  .kpi .v{font-size:18px;overflow-wrap:anywhere;}
  .foot-note,.cp-note{line-height:1.65;}
  .chart-box{padding:12px 10px;}
  .chart-box h3{font-size:13px;line-height:1.5;}
  .legend{gap:8px 12px;}
  .legend span{min-width:0;overflow-wrap:anywhere;}
  .legend i{flex:none;}
  .chart-tip{max-width:calc(100% - 4px);white-space:normal !important;overflow-wrap:anywhere;}
  .chart-tip > div{flex-wrap:wrap;}

  /* Wide financial tables scroll within the card, never the whole page. */
  .table-scroll-hint.is-visible{display:block;margin:0;padding:8px 12px;font-size:11px;color:var(--ink-soft);background:var(--surface-2);border-bottom:1px solid var(--border);}
  .twrap{scrollbar-width:thin;}
  .twrap th,.twrap td{padding:10px;font-size:12px;}
  .twrap th:first-child,.twrap td:first-child{white-space:normal;min-width:140px;max-width:180px;overflow-wrap:anywhere;}
  .twrap tr.group td{white-space:normal;}
  .table-group-label{display:inline-block;max-width:calc(100vw - 76px);}
  .twrap th:first-child,.twrap tbody tr:not(.group):not(.va-annot-row) td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);}
  .twrap thead th:first-child{background:var(--surface-2);z-index:2;}
  .twrap tr.total td:first-child{background:var(--mint);}
  .twrap td input[type=number]{width:118px;}
  .twrap td select{min-width:100px;}
  .twrap td.lmi-controls{display:flex;flex-wrap:wrap;min-width:240px;max-width:300px;}
  .lmi-controls label{min-height:44px;}
  .app input[type=checkbox]:not(.switch){width:20px;height:20px;flex:none;}
  .cp-toggle-group label{min-height:44px;}
  .cp-table{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
  .cp-table .cphead{display:none;}
  .cp-table .cpl{grid-column:1/-1;padding:12px 0 0;border-bottom:0;font-size:13px;}
  .cp-table .cpv{min-width:0;font-size:16px;text-align:left;white-space:normal;overflow-wrap:anywhere;}
  .cp-table .cpv::before{display:block;font-size:10px;font-weight:500;color:var(--ink-soft);margin-bottom:3px;}
  .cp-table .cpv:nth-child(3n+2)::before{content:"Monthly";}
  .cp-table .cpv:nth-child(3n)::before{content:"Yearly";}
  .cp-table .cp-total.cpv{border-top:0;}
  .va-grid{grid-template-columns:minmax(0,1fr);}
  .va-card .vh{flex-wrap:wrap;}
  .va-card .vh input{flex:1 1 50%;}
  .va-card .vh button{min-width:44px;min-height:44px;}
  .va-card .vb{padding:12px;gap:12px;}
  .held-prop-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px;}
  .held-prop-head .held-name{grid-column:1/-1;width:100%;}
  .held-badge{padding-left:5px;white-space:normal;}
  .held-remove{min-height:44px;padding:8px;}
  .held-prop-body{padding:12px 10px;}
  .held-refi{padding:10px;}
  .held-refi-head{flex-wrap:wrap;}
  .held-refi-head .rtitle{min-width:0;overflow-wrap:anywhere;}
  .held-summary{font-size:12px;overflow-wrap:anywhere;}
  #compare-table th:first-child,#compare-table td:first-child{min-width:130px;max-width:150px;}
  #compare-table th:not(:first-child),#compare-table td:not(:first-child){min-width:140px;max-width:200px;white-space:normal;overflow-wrap:anywhere;}
  #compare-table .scen-name{align-items:flex-start;}
  #compare-table .scen-name .dot{margin-top:3px;}
  #compare-table tr.section td{position:static;}
}

@media (max-width:480px){
  .grid,.grid.g2{grid-template-columns:minmax(0,1fr);}
  .auth-name-row{grid-template-columns:minmax(0,1fr);gap:0;}
}

/* Leave room for the content when a phone is turned sideways. */
@media (max-width:950px) and (max-height:500px) and (min-width:481px) and (pointer:coarse){
  .tabs{grid-template-columns:repeat(6,minmax(0,1fr));}
  .tab,.tab.active{min-height:44px;font-size:11.5px;padding:6px 4px;}
}

@media (max-width:380px){
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tab,.tab.active{min-height:44px;}
  .client-bar .sc-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .strip .v{font-size:16px;}
  .auth-card{padding:22px 18px;}
}

@media (prefers-reduced-motion:reduce){
  .panel{animation:none;}
  input[type=checkbox].switch,input[type=checkbox].switch::after{transition:none;}
}