/* MundaApp — brand polish for the account surfaces.
 *
 * The app ribbon and the mark belong to every screen that speaks as MundaApp,
 * not only to the front page: a profile, a shop, a settings list. This sheet
 * is loaded last, so it sets hierarchy without fighting the base styles.
 *
 * Rules here are structural only. Nothing changes a colour that carries a
 * meaning: green is growing, gold is the market, clay is money at risk.
 */

/* ---------------------------------------------------------- profile cover
 * The cover is a photograph, so the ribbon sits on its top edge and the scrim
 * does the reading at the bottom where the name lands.
 */
.profile-cover { height: 168px; }
.profile-cover:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg,
    #198A00 0 58%, #DE2010 58% 72%, #111 72% 86%, #EF7D00 86% 100%);
}
.profile-cover .scrim {
  background: linear-gradient(to top, rgba(8, 42, 28, .66) 0%, rgba(8, 42, 28, .18) 42%, transparent 72%);
}
.profile-head .av {
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .9), 0 0 0 4px var(--paper);
}
.profile-name {
  font-size: 26px; letter-spacing: -.026em; margin-top: 11px;
}
.profile-sub { font-size: 12.5px; }

/* The four numbers are one instrument, so they read as one panel rather than
 * four cells with hairlines between them. */
.stat-row {
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF6, #FFFFFF);
  box-shadow: 0 1px 2px rgba(23, 40, 30, .05);
  margin: 15px 0;
}
.stat { padding: 8px 6px 9px; }
.stat .v {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat .k {
  font-size: 8.5px; letter-spacing: .14em; color: #7C8A81; font-weight: 650;
  margin-top: 2px;
}

/* ------------------------------------------------- the small cards in Me
 * Share and app version are both "about the app", so they get the same quiet
 * card as the rest of the account screen instead of three different weights.
 */
#share-card {
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF6, #FFFFFF);
  box-shadow: 0 1px 2px rgba(23, 40, 30, .05);
}
/* Kept as its own rule: in a selector list an unsupported :has() would take
   the whole rule down with it, and the share card above must not depend on
   whether this browser knows :has(). */
.card:has([data-update-build]) {
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF6, #FFFFFF);
  box-shadow: 0 1px 2px rgba(23, 40, 30, .05);
}
.card:has([data-update-build]) { margin-top: 12px; }

/* ------------------------------------------------- posted cards on a profile
 * A profile is a shop window on a phone, so the first frame of each post keeps
 * a consistent corner and the caption gets a little more air.
 */
.post-media { border-radius: 14px; }
.post .post-body { font-size: 13px; line-height: 1.55; }

/* ------------------------------------------------------ Groups: the brand card
 * Backhaul is rewritten by js/brand-cards.js into .ba-card. The ribbon, the
 * icon tile and the serif name are the same furniture as the market hero and
 * the Community Intelligence header, so the app reads as one product.
 */
.ba-card {
  position: relative; display: block; overflow: hidden;
  margin: 0 0 13px; padding: 20px 15px 15px; border: 0; border-radius: 18px;
  background:
    radial-gradient(96% 120% at 100% 0, rgba(223, 160, 60, .22), transparent 56%),
    linear-gradient(158deg, #0C6E42, #0A4F30 70%, #083F27);
  box-shadow: 0 20px 34px -28px rgba(6, 30, 20, .95), 0 2px 6px rgba(10, 30, 20, .12);
  text-decoration: none; color: #FFFDF6;
}
.ba-card:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #198A00 0 58%, #DE2010 58% 72%, #111 72% 86%, #EF7D00 86% 100%);
}
.ba-card:active { transform: translateY(1px); }
.ba-top { display: flex; align-items: center; gap: 11px; }
.ba-ic {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #F7E6BE;
}
.ba-ic svg { width: 19px; height: 19px; }
.ba-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ba-tx b {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  letter-spacing: -.015em; color: #FFFDF6;
}
.ba-tx i {
  font-style: normal; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 650; color: #F3C97C;
}
.ba-go { flex: none; color: rgba(255, 253, 246, .6); font-size: 18px; line-height: 1; }
.ba-d {
  display: block; margin-top: 11px; font-size: 12px; line-height: 1.5;
  color: rgba(247, 240, 220, .84); max-width: 40ch;
}

/* ------------------------------------------------------------- Groups: cards
 * The letter plate is the group's identity, so it gets a real plate: the
 * letter in Fraunces, a hairline inside, and a shadow that lifts it off the
 * card rather than a flat coloured square.
 */
.group-card {
  border-radius: 16px; padding: 12px 13px; align-items: flex-start;
  background: linear-gradient(180deg, #FFFDF9, #FFFFFF);
  border-color: #E7DFC9;
  box-shadow: 0 1px 2px rgba(23, 40, 30, .05);
}
.group-card:active { transform: scale(.995); }
.group-card .cover {
  width: 56px; height: 56px; border-radius: 16px;
  font-family: var(--display); font-size: 23px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 18px -16px rgba(0, 0, 0, .9);
}
.group-card .t { font-size: 15px; font-weight: 650; font-family: var(--display); letter-spacing: -.012em; }
.group-card .m { font-size: 11px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.group-card .d { font-size: 12px; line-height: 1.42; color: #4F5F57; }
.group-card .pill {
  align-self: flex-start; flex: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #0B5C39; background: #E7F3EA; border: 1px solid #CFE6D6;
  border-radius: 999px; padding: 4px 8px;
}
.stack { display: flex; flex-direction: column; gap: 10px; }
#view .chips { gap: 7px; padding-bottom: 6px; }

/* ================================================================== posts
 * A post is a photograph with a claim attached, so it is framed the same way
 * a market unit is: the ribbon along the top edge of the card, the picture
 * inside a cream mount, and a hairline at the mount's edge so the frame reads
 * as a frame rather than a rounded image.
 */
.post {
  position: relative;
  border-radius: 18px;
  border-color: #E2D8C2;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFFDFB 100%);
  box-shadow: 0 16px 28px -26px rgba(10, 30, 20, .65), 0 1px 2px rgba(10, 30, 20, .05);
  padding-top: 4px;
}
.post:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #198A00 0 58%, #DE2010 58% 72%, #111 72% 86%, #EF7D00 86% 100%);
}
.post-head { padding: 14px 14px 0; }
.post-head .av {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 2px rgba(12, 110, 66, .18);
}
.post-body { padding: 10px 14px 12px; }
.post-media {
  margin: 0 9px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(10, 60, 34, .12);
}
.post-media img { display: block; }
.post-listing {
  margin: 0 9px 12px;
  border-radius: 12px;
  border-color: #E2D8C2;
  background: linear-gradient(180deg, #FFFDF7, #FFFEFA);
}
/* ------------------------------------------------- the foot of a post card
 * The counts and the three actions are one bar, not a line of small print
 * followed by a rule that stops at the corners. The bar is tinted a shade
 * warmer than the card, the counters sit on one line and never wrap, and the
 * card's own rounded corner clips the ends because .post hides its overflow.
 */
.post-stats {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 0 14px 10px;
  font-size: 11.5px; line-height: 1.4; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.post-stats > span { white-space: nowrap; }
.post-stats .sep-dot { margin: 0 6px; color: #C7BFA9; }
.post-stats button {
  color: var(--muted); font-size: 11.5px; padding: 0; background: none;
  border: 0; text-decoration: none;
}
.post-stats button:active { color: var(--green-700); }

/* No radius of its own: .post clips its children, so the bar follows the
   card's corner — and stays square when a comment thread opens below it. */
.post-actions {
  margin: 0; border-top: 1px solid rgba(120, 100, 70, .15);
  background: linear-gradient(180deg, #FCFAF3, #F6F1E4);
}
.post-actions .act {
  height: 47px; font-size: 12.5px; font-weight: 650; letter-spacing: .005em;
  gap: 6px; color: #55635B;
}
.post-actions .act + .act { border-left: 1px solid rgba(120, 100, 70, .12); }
.post-actions .act svg { width: 16.5px; height: 16.5px; }
.post-actions .act:active { background: rgba(223, 160, 60, .12); }
.post-actions .act.on { color: var(--clay); }
.post-actions .act.on svg { fill: currentColor; }

/* ------------------------------------------------ "Fresh at the market" row
 * At large system text the heading and "See all" both wrapped, so the link
 * broke into two lines beside a two-line title and the row looked torn.
 * The link is a fixed, single-line chip; the title takes the space left.
 */
.mu-fresh-head { gap: 10px; align-items: flex-end; }
.mu-fresh-head .h3 {
  min-width: 0; font-family: var(--display); font-size: 17.5px;
  font-weight: 600; letter-spacing: -.018em; line-height: 1.2; color: var(--ink);
}
.mu-fresh-head .linkbtn {
  flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 9px 5px 10px; border-radius: 999px;
  background: #FFFDF7; border: 1px solid #E7DFC9;
  color: var(--green-700); font-size: 11.5px; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 40, 30, .04);
}
.mu-fresh-head .linkbtn:active { background: var(--gold-soft); }
.mu-fresh-head .linkbtn i {
  font-style: normal; font-size: 13px; line-height: 1; color: #9A6C14;
  transform: translateY(-.5px);
}
/* The shelf runs off the right edge by design; a longer fade says "there is
   more" instead of slicing the third card in half. */
.hscroll.hscroll-fresh {
  scroll-snap-type: x proximity;
  padding-bottom: 5px;
  scroll-padding-left: 16px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
}

/* Each lot is a small card, not a picture with loose text under it: the shelf
   keeps the same cream mount, hairline and price tag as the market units. */
.hscroll-fresh .mini-lot {
  scroll-snap-align: start;
  width: 152px; padding: 7px 7px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF7, #FFFDFB);
  border: 1px solid #E7DFC9;
  box-shadow: 0 12px 20px -22px rgba(10, 30, 20, .9), 0 1px 2px rgba(23, 40, 30, .04);
  text-decoration: none;
}
.hscroll-fresh .mini-lot:active { transform: translateY(1px); }
.hscroll-fresh .mini-lot .lot-img { border-radius: 11px; aspect-ratio: 1.06; }
.hscroll-fresh .mini-lot .lot-img img { transition: transform .4s ease; }
.hscroll-fresh .mini-lot:active .lot-img img { transform: scale(1.03); }
.hscroll-fresh .mini-lot .lot-title {
  margin: 8px 2px 0; font-size: 12.5px; line-height: 1.3;
  min-height: 2.6em; font-weight: 600; color: var(--ink);
}
.hscroll-fresh .mini-lot .lot-price {
  margin: 5px 2px 0; font-size: 13px; font-weight: 700;
  color: var(--green-800); letter-spacing: -.01em;
}
.hscroll-fresh .mini-lot .lot-price small {
  font-size: 10px; font-weight: 600; letter-spacing: 0; color: #6B7A72;
}

/* ------------------------------------------------------------ CS AgriHub
 * One card on the account screen points at another app. It used to end in a
 * bare arrow character, which the phone drew as a blue emoji; the door now
 * says what is behind it and the action is a real button.
 */
.ah-card {
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding: 11px 12px 11px 11px;
  border: 1px solid #E2D8C2; border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF7, #FFFDFB);
  box-shadow: 0 1px 2px rgba(23, 40, 30, .05);
  text-decoration: none; color: inherit;
}
.ah-card:active { transform: translateY(1px); }
.ah-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #F0F7F1, #E6F1E9);
  border: 1px solid #D7E6DB; color: #0B5C39;
}
.ah-ic svg { width: 20px; height: 20px; }
.ah-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ah-tx b { font-size: 14px; font-weight: 650; letter-spacing: -.012em; color: var(--ink); }
.ah-tx i {
  font-style: normal; font-size: 11.5px; line-height: 1.35; color: #5C6B62;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* The action is a square, not a word: what is behind the door is a sheet of
   records and costs, so the button carries that sheet, drawn, at full weight.
   The card itself is the target; this is the sign on it. */
.ah-go {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #12704A, #0B5537);
  color: #FFFDF6;
  border: 1px solid #07402A;
  box-shadow: 0 10px 18px -14px rgba(6, 30, 20, .95), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .1s ease, background .14s ease;
}
.ah-go svg { width: 19px; height: 19px; opacity: .96; }
.ah-card:active .ah-go { background: linear-gradient(180deg, #0C5C3F, #08432B); transform: scale(.97); }

/* the same mark in the side menu, where it sits inline with the words */
.nav-out {
  margin-left: auto; display: inline-flex; align-items: center;
  color: #7C8A81;
}
.nav-out svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ Get verified
 * A ghost chip with no edge looks like a label, not something to press. Give
 * it the shelf look: hairline, cream, and a green arrow that points forward.
 */
a.btn.soft, button.btn.soft {
  background: linear-gradient(180deg, #FFFDF8, #F7F1E2);
  border: 1px solid #D9E3D6;
  color: #0A5334;
  font-weight: 700;
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: 0 1px 2px rgba(10, 40, 26, .06), inset 0 1px 0 #FFF;
}
a.btn.soft::after, button.btn.soft::after {
  content: "";
  display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
a.btn.soft:active, button.btn.soft:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #F6F1E2, #EFE8D6);
}

/* ===================================================== small crafted things
 * Four surfaces that were close but not finished: the composer, the rate
 * cards, the "How CI decides" summary, and the member button.
 */

/* 1 · Composer — one pill to type in, two round actions that differ in rank:
 *     a camera you use often, and one filled badge for starting a listing. */
.composer {
  gap: 10px; padding: 10px 11px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFDF9, #FFFBF1);
  border: 1px solid #E8DDC6;
  box-shadow: 0 14px 26px -28px rgba(10, 30, 20, .9), 0 1px 2px rgba(23, 40, 30, .05);
}
.composer .fake {
  height: 44px; border-radius: 999px;
  padding: 0 16px; font-size: 13.5px; color: #6E7C73;
  background: #F6F2E7; border: 1px solid #EDE4D0;
}
.composer .quick { gap: 7px; }
.composer .quick button {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid #D9E7DB;
  background: linear-gradient(180deg, #F2F9F3, #E9F3EB);
  color: #0B5C39;
  box-shadow: inset 0 1px 0 #FFFFFF;
}
.composer .quick button svg { width: 19px; height: 19px; }
.composer .quick button:last-child {
  background: linear-gradient(180deg, #12915A, #0A5334);
  border-color: #08472C;
  color: #FFFDF6;
  box-shadow: 0 8px 14px -12px rgba(8, 44, 27, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.composer .quick button:active { transform: translateY(1px) scale(.97); }

/* 2 · Rate cards — the lead card is the kwacha's headline, so it must read
 *     before the numbers arrive, not fade to white. */
.zm-rate {
  border-radius: 16px;
  padding: 12px 13px 13px;
  border: 1px solid #E8DFC8;
  background: linear-gradient(180deg, #FFFDF8, #FFFBF0);
  box-shadow: 0 1px 2px rgba(23, 40, 30, .04);
}
.zm-rate__cd { color: #7C8878; }
.zm-rate__v { color: #0B4A2E; font-size: 1.24rem; letter-spacing: -.01em; }
.zm-rate--hero {
  border-color: #0A4626;
  background: linear-gradient(155deg, #0F6B3E 0%, #0B4A1C 58%, #083717 100%);
  box-shadow: 0 12px 22px -22px rgba(8, 44, 27, .95), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.zm-rate--hero .zm-rate__cd { color: #A9DDB4; letter-spacing: .12em; }
.zm-rate--hero .zm-rate__v { color: #FFFDF6; }
.zm-rate--hero .zm-rate__v small { color: #B9E6C2; }

/* 3 · "How CI decides" — the kicker, the title and the chevron on a grid, so
 *     the title can never be pushed into the icon at small widths. */
.ci-method-head {
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
}
.ci-method-head .ci-method-k { grid-column: 1; grid-row: 1; margin: 0 0 1px; }
.ci-method-head h3 {
  grid-column: 1; grid-row: 2;
  margin: 0; font-size: 17.5px; line-height: 1.15;
  font-family: var(--display, Georgia, serif);
  letter-spacing: -.015em;
}
.ci-method-head .ci-method-chev { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

/* 4 · Member card action — the same seal language as the market tiles. */
.mem-verify, .member-card .btn, #view .card .btn.sm.grow {
  border-radius: 12px;
}