/* V7 phone layer (28 Labs). Everything here applies under 760px only, on top of the page's own styles.
   Roger edits copy in index.html; phone behaviour lives in this file and mobile.js. */
@media (max-width:760px){
  /* Review bar: the collapsed pill is the default on phones (mobile.js); expanded it keeps its own layout. */
  .review-bar.rb-collapsed{max-width:128px}
  .rb-collapse{width:44px;height:44px}
  /* Tap targets: 44px for anything a thumb hits. */
  .th-dots{gap:0;margin-right:-17px}
  .th-dots button{width:44px;height:44px;border-radius:50%;background:transparent;position:relative}
  .th-dots button::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:rgba(255,255,255,.28)}
  .th-dots button[aria-current="true"]{background:transparent}
  .th-dots button[aria-current="true"]::after{background:#ff6a72}
  .aud-switch button{min-height:44px}
  .btn-sm{padding-top:10px;padding-bottom:10px}
  #demo select,#demo input{min-height:44px}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  .nav-burger{min-width:44px;min-height:44px}
  .m-menu a{min-height:44px;display:flex;align-items:center}
  .chg-dot,.cmv-item{min-height:28px}
  .qs-dots{gap:0}
  .qs-dots button{width:44px;height:44px;background:transparent;position:relative}
  .qs-dots button::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:999px;background:var(--line-strong)}
  .qs-dots button[aria-selected="true"]{background:transparent}
  .qs-dots button[aria-selected="true"]::after{background:var(--scarlet)}
  .qs-btn{width:44px;height:44px}
  .qs-nav{height:auto}
  summary{min-height:44px;display:flex;align-items:center}
  #changes a[href="#corridors"]{min-height:44px;display:inline-flex!important;align-items:center}
  footer a{padding:10px 0;display:inline-block}
  /* Readable minimums. */
  .rt dt{font-size:12px}
  .chip,.chip.chip-live,.proof-commodities span,#changes .idx,#value .idx,#chain .tag,.pc-where{font-size:12px}
  .store-badge small{font-size:11.5px}
  /* Long lists fold on phones; mobile.js adds the "Show all" control. */
  .steps.m-fold li:nth-child(n+4){display:none}
  .sec-list.m-fold li:nth-child(n+5){display:none}
  .m-more{appearance:none;border:1px solid var(--ink-line, rgba(255,255,255,.18));background:transparent;color:inherit;font:600 14px/1 var(--f-sub, inherit);padding:12px 14px;border-radius:6px;margin-top:10px;min-height:44px;width:100%;cursor:pointer}
  .m-more:hover{border-color:var(--on-ink-soft, #b6b0d8)}
  #security .m-more{color:var(--text, inherit);border-color:var(--line-strong, rgba(0,0,0,.2))}
  /* Footer: one column on phones (logo, links in a row, the app with its two badges, then the legal line). */
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-bottom:30px}
  .foot-grid h4,.foot-grid .foot-h{margin-bottom:10px}
  .foot-grid ul{flex-direction:column;gap:0}
  .foot-grid li a{display:block;padding:10px 0}
  .foot-grid > div > p{font-size:15px!important;max-width:none}
  .store{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:stretch}
  .store-badge{min-height:44px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-bottom a{padding:11px 0}
  footer .logo-img{height:28px}
  /* The in-page comment and change popovers never exceed the screen. */
  .cm-form,.chg-pop{max-width:calc(100vw - 24px)}
}
/* Quotes slider arrows: the page's own ink chevron on its light ground (the dark ground seen on 8 Oct was a dark-mode artefact); only the chevron size is set here. */
@media (max-width:760px){
  #quotes .qs-btn svg{width:18px;height:18px}
}

/* 14 Oct phone feedback (Roger): "Where: All SADC countries" on its own row; "Who it's for" tabs as an even 2x2 grid. */
@media (max-width:760px){
  .proof-commodities .pc-br{display:block}
  .proof-commodities .pc-where{margin-left:0;margin-top:12px}
  #value .aud-switch.aud-switch-light{display:grid;grid-template-columns:1fr 1fr;width:100%}
  #value .aud-switch.aud-switch-light button{white-space:normal;text-align:center;padding:8px 6px;font-size:12px;letter-spacing:.03em;line-height:1.2}
}
/* 14 Oct phone feedback (Roger, V8 only): the four hero role tabs on one row. */
@media (max-width:760px){
  .hero .aud-switch.hero-roles{flex-wrap:nowrap}
  .hero .aud-switch.hero-roles button{flex:1 1 0;min-width:0;padding:9px 2px;font-size:11px;letter-spacing:.02em;white-space:nowrap}
}
/* 14 Oct phone feedback (Roger): space between the Book / Execute / Settle cards. The page sets display:block under 820px, which drops the grid gap. */
@media (max-width:820px){
  .phases.phases-cards{display:flex;flex-direction:column;gap:18px}
}