/* Responsive sizing belongs to each app surface, including long localized copy. */
.page-main{width:100%;min-width:0}
.page-main>*,.page-heading>*,.page-actions>*,.financial-layout>*,.financial-aside>*{min-width:0;max-width:100%}
.page-heading{flex-wrap:wrap}
.page-heading h1{overflow-wrap:anywhere}
.page-actions{max-width:100%}
.page-actions .button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.page-actions .field{min-width:0;max-width:100%}
.page-actions .compact-field{width:min(360px,100%)}
.page-actions .field select{width:100%;min-width:0;max-width:100%;min-height:44px;text-overflow:ellipsis}
.page-main .filter-pills .filter-pill{min-height:44px}
.page-main .readable{width:100%;min-width:0}
.page-main :is(.row-main,.activity-copy,.feature-card>div,.invite-heading>div){min-width:0;overflow-wrap:anywhere}
.page-main :is(.info-callout,.inline-notice)>p{min-width:0;overflow-wrap:anywhere}
.page-main .info-callout>svg{flex:none}
.page-main .field{min-width:0}
.page-main .field>input,.page-main .field>select,.page-main .field>textarea{width:100%}

/* Context and progress remain visible without crowding the page's content. */
.page-back-host{margin-block:0 6px}
.page-back.qismah-ui{display:inline-flex;align-items:center;gap:8px;min-height:44px;height:auto;padding:8px 10px;margin-inline-start:-10px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:14px;font-weight:500;box-shadow:none}
.page-back.qismah-ui:hover{background:var(--raised);color:var(--ink)}
.page-back .ui-icon svg{width:18px;height:18px}
[dir=rtl] .page-back .ui-icon svg{transform:rotate(180deg)}
.page-refresh-notice{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-block:0 20px}
.page-refresh-notice>svg{flex:none}
.page-refresh-notice>div{min-width:0;flex:1 1 200px;overflow-wrap:anywhere}
.page-refresh-notice .button{flex:none;white-space:normal}
.qismah-ui [data-refresh][aria-busy=true] .ui-icon{animation:spin .8s linear infinite}
.qismah-ui .greeting{min-height:44px}
.qismah-ui .header-right .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
.overview-activity .text-link{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}

/* Account screens expand with the available space and stay centered on tablets. */
main:is([data-page=settings],[data-page=plan],[data-page=privacy],[data-page=memory],[data-page=report],[data-page=invites]){max-width:832px}
.page-main .settings-stack{width:100%;min-width:0;max-width:none}
main[data-page=settings]>.settings-stack{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.settings-stack>*{min-width:0;max-width:100%}
.profile-card>span:nth-child(2){min-width:0;flex:1}
.profile-card :is(strong,small){white-space:normal;overflow-wrap:anywhere}
.profile-card>svg{flex:none}
.sync-status{align-items:flex-start}
.sync-status>svg{flex:none;margin-top:2px}
.sync-status>span{min-width:0;overflow-wrap:anywhere}
.plus-banner{width:100%;min-width:0;max-width:100%}
.plus-banner :is(h2,p){overflow-wrap:anywhere}
.plus-banner>div{flex-wrap:wrap;gap:12px}
.plus-banner>div>p{min-width:0;flex:1 1 230px}
.plus-banner>div>span{display:inline-flex;align-items:center;gap:6px;max-width:100%;white-space:normal}
.settings-row>span:not(.settings-icon){min-width:0;overflow-wrap:anywhere}
.settings-row>svg,.settings-row>.settings-icon{flex:none}
label.settings-row{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(110px,42%);gap:12px}
label.settings-row select.settings-value{width:100%;min-width:0;max-width:none!important;font-size:16px!important;text-align:end;text-overflow:ellipsis}
.usage-row{display:block}
.usage-row>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.usage-row strong{min-width:0;overflow-wrap:anywhere}
.usage-row span{flex:none}
.attachment-picker{flex-wrap:wrap;min-width:0}
.attachment-picker input[type=file]{flex:1 1 200px;width:100%;min-width:0}
.screenshot-preview{max-width:100%;min-width:0}
.screenshot-preview img{max-width:100%;height:auto}
.screenshot-preview p{overflow-wrap:anywhere}
.invite-heading{flex-wrap:wrap}
.invite-heading>div{flex:1}
.invite-footer,.invite-actions,.feature-meta{flex-wrap:wrap;gap:10px}
.invite-contact{overflow-wrap:anywhere}
.feature-card{min-width:0}
.feature-card .vote-button{flex:none}
.feature-card :is(h3,p,small){overflow-wrap:anywhere}

/* Financial summaries must shrink inside their columns before their text wraps. */
.financial-main,.financial-aside{min-width:0;width:100%}
.financial-main .card{min-width:0}
.totals-hero>.row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:16px}
.totals-hero .metric{min-width:0;max-width:100%}
.totals-hero .display-amount{font-size:clamp(24px,3.5vw,34px);overflow-wrap:anywhere;line-height:1.2}
.financial-main .row-main>strong,.financial-aside :is(h2,h3,p){overflow-wrap:anywhere}
.activity-amount{max-width:40%;overflow-wrap:anywhere;white-space:normal}
.activity-copy :is(strong,small){overflow-wrap:anywhere}
.import-steps{flex-wrap:wrap;gap:8px}
.import-steps>*{min-width:0}

@media(min-width:1200px){
  main[data-page=settings]{max-width:1120px}
  main[data-page=settings]>.settings-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(max-width:1100px){
  .financial-aside{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .page-main{padding-inline:16px}
  .page-heading{gap:12px}
  .page-actions{width:100%}
  main[data-page=ledger]>.page-heading>.page-actions{width:auto}
  .page-actions .compact-field{width:100%}
  .settings-row{gap:10px;padding-inline:12px}
  label.settings-row{gap:10px}
  .financial-aside{display:flex;flex-direction:column}
  .activity-row{flex-wrap:wrap}
  .activity-copy{flex:1;min-width:0}
  .activity-amount{margin-inline-start:auto;max-width:100%;text-align:end}
}
@media(max-width:480px){
  .totals-hero>.row{grid-template-columns:minmax(0,1fr);gap:16px}
  .totals-hero .share-ring{justify-self:center}
  .financial-main .list-row{flex-wrap:wrap}
  .financial-main .list-row>.row-main{flex:1}
  .financial-main .list-row>progress{width:100%}
}
@media(max-width:359px){
  label.settings-row{grid-template-columns:28px minmax(0,1fr);gap:8px 10px}
  label.settings-row>.settings-icon{grid-row:1/3;align-self:start}
  label.settings-row>span:not(.settings-icon){grid-column:2}
  label.settings-row select.settings-value{grid-column:2;text-align:start}
}