/* Responsive composition pass — 2026-08-25.
 * Shared alignment, whitespace, and row rhythm only. No state or interaction
 * behavior lives in this layer.
 */

/* Bounded RTL screens must sit in the visual centre of the main canvas.
   Previously their max-width pinned them to the right and left an empty
   desktop column. */
:where(
  .flow-screen,
  #result-root,
  #lg-root,
  #pr-root,
  #cv-root,
  #ce-root,
  #pf-root,
  #gr-root,
  #pv-root,
  #nf-root,
  #qa2-root,
  #ac-root,
  #cm-root,
  #bp-root,
  #dd-root,
  #scope-root,
  #idea-root
){
  width:100%;
  margin-inline:auto;
  min-inline-size:0;
}

.shell__main > :where(.stack,.flow-screen,[id$='-root']){
  min-inline-size:0;
}

/* Keep information aligned to its reading edge even when a parent screen
   centres display copy. */
:where(.panel,.account-section,.end-row,.tbl__row,.fact,.step,.mfact){
  text-align:start;
}

:where(.account-content,#qa2-root > .stack,.flow-screen,#result-root){
  min-inline-size:0;
}

.end-rows{ inline-size:100% }
.end-rows > .end-row + .end-row{ border-block-start:1px solid var(--hairline) }

/* Readable type scale. The earlier finish used 8–10px labels in core
   navigation and mission states, which made otherwise complete screens feel
   empty and forced users to work to read them. */
body{
  font-size:14px;
  line-height:1.95;
}

.eyebrow{ font-size:12px }
.meta{ font-size:12px }
.btn{ font-size:13.5px }
.btn--compact{ font-size:13px }

.side__nav a{ font-size:13px }
.side__resume-k{ font-size:11.5px }
.side__resume-t{ font-size:14px }
.side__resume-go{ font-size:11.5px }

.tabbar a span{ font-size:11.5px }

.journey-next__label{ font-size:10.5px }
.journey-next strong{ font-size:13.5px }
.journey-head .eyebrow{ font-size:12px }
.journey-phase__head small{ font-size:10.5px }
.journey-mission__body strong{ font-size:13.25px }
.journey-mission__status,.journey-mission__action{ font-size:10.5px }

.qa2-human-card__status{ font-size:10.5px }
.qa2-human-card p{ font-size:11.5px }
.qa2-empty p:last-child{ font-size:12px }

.account-section__label{ font-size:11px }
.account-hero .eyebrow{ font-size:12px }
.account-resume span{ font-size:10.5px }
.account-resume strong{ font-size:13.5px }
.account-progress__ring span,.account-progress__meta span{ font-size:10.5px }
.account-destinations{ font-size:10.5px }
.account-destinations b{ font-size:11px }

/* Account/profile: label, value, and action form one structured row. */
.account-content{ width:100% }
.account-section{ min-inline-size:0 }
.account-identity{ align-items:start; padding-block:22px }
.account-identity__avatar{ flex:none }
.account-identity__body{ min-inline-size:0; width:100% }
.account-identity .account-section__label{ margin-block-end:7px }

#ac-root .end-row{
  display:grid;
  grid-template-columns:minmax(108px,.82fr) minmax(0,1.35fr) auto;
  align-items:center;
  gap:7px 16px;
  min-block-size:58px;
  padding-block:12px;
  padding-inline:0;
}

#ac-root .end-row::before,#ac-root .end-row::after{ display:none }

#ac-root .end-row__k,#ac-root .end-row__v{
  min-inline-size:0;
  max-inline-size:100%;
}

#ac-root .end-row__k{
  min-width:0;
  color:var(--ink);
  font-size:12.5px;
  font-weight:500;
}

#ac-root .end-row__v{
  min-width:0;
  color:var(--ink-60);
  font-size:12px;
}

#ac-root .end-row > .push{
  justify-self:end;
  margin-inline-start:0;
}

#ac-root .end-row .btn{
  min-height:40px;
  font-size:12.5px;
}

.account-identity .end-row{
  min-block-size:52px;
  padding-block:10px !important;
  border:0;
}

.account-identity .end-row + .end-row{
  border-block-start:1px solid var(--hairline);
}

.account-section__head,.account-section__head > div{ min-inline-size:0 }
.account-section--danger{ padding-block:8px }

/* Long values and Arabic/Latin mixtures remain inside their own column. */
:where(
  .end-row__k,
  .end-row__v,
  .end-row__note,
  .account-resume strong,
  .account-section__head h2,
  .fact__v,
  .tbl__v,
  .mfact__v,
  .step__cmd,
  code
){
  overflow-wrap:anywhere;
  word-break:normal;
}

@media (max-width:720px){
  :where(
    .flow-screen,
    #result-root,
    #lg-root,
    #pr-root,
    #cv-root,
    #ce-root,
    #pf-root,
    #gr-root,
    #pv-root,
    #nf-root,
    #qa2-root,
    #ac-root,
    #cm-root,
    #bp-root,
    #dd-root,
    #scope-root,
    #idea-root
  ){
    max-width:100%;
  }

  .account-content{ gap:12px }
  .account-section{ width:100% }

  body{
    font-size:14px;
    line-height:1.9;
  }

  .eyebrow{ font-size:11px }
  .meta{ font-size:11.5px }
  .btn{ font-size:13px }
  .tabbar a span{ font-size:11px }

  .journey-next__label{ font-size:10px }
  .journey-next strong{ font-size:13px }
  .journey-head .eyebrow{ font-size:11px }
  .journey-phase__head small{ font-size:10px }
  .journey-mission__body strong{ font-size:13px }
  .journey-mission__status,.journey-mission__action{ font-size:10px }

  .qa2-human-card__status{ font-size:10px }
  .qa2-human-card p{ font-size:10.5px }

  .account-section__label{ font-size:10.5px }
  .account-hero .eyebrow{ font-size:11px }
  .account-resume span{ font-size:10px }
  .account-resume strong{ font-size:12.5px }
  .account-progress__ring span{ font-size:10px }
  .account-destinations{ font-size:10px }
  .account-destinations b{ font-size:10.5px }

  #ac-root .end-row .btn{
    min-height:38px;
    font-size:12px;
  }

  .account-identity{
    grid-template-columns:46px minmax(0,1fr);
    gap:13px;
    padding-block:15px;
  }

  #ac-root .end-row{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:3px 12px;
    min-block-size:0;
    padding-block:12px;
  }

  #ac-root .end-row__k{
    grid-column:1 / -1;
    min-width:0;
    font-size:12px;
    line-height:1.7;
  }

  #ac-root .end-row__v{
    grid-column:1;
    font-size:11.5px;
    line-height:1.75;
  }

  #ac-root .end-row__v:last-child{ grid-column:1 / -1 }

  #ac-root .end-row > .push{
    grid-column:2;
    grid-row:2;
    align-self:center;
    max-width:100%;
  }

  .account-identity .end-row{ padding-block:10px !important }
  .account-section--danger{ padding-block:4px }

  :where(.flow-screen,#result-root,#qa2-root,#ac-root) > .panel,
  :where(#cv-root,#ce-root,#pf-root,#gr-root,#pv-root) > .panel{
    max-width:100%;
  }
}

@media (max-width:360px){
  .account-identity{ grid-template-columns:1fr }
  .account-identity__avatar{ margin-inline-start:0 }
  #ac-root .end-row{ grid-template-columns:minmax(0,1fr) }
  #ac-root .end-row > .push{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }
}