/* ─────────────────────────────────────────────────────────────────────────────
   max-rebuild.css — Home, Closet and Profile, rebuilt from Max's mockups.

   Max, 19 Aug: "Treat this as a completely new build from the ground up. The
   mockups are now the source of truth... Do not compromise the new design in
   order to preserve remnants of the old implementation."

   So this file is not a patch on design-upgrade.css. It is the new foundation
   for the three rebuilt tabs, written from the frames rather than from what the
   app happened to be doing. It loads last and owns those screens outright.

   Two rules from the brief drive most of the decisions here:

     * Placeholders are first-class. "Use placeholder boxes and placeholder text
       wherever real content does not yet exist. The lack of real content should
       never prevent the intended layout from being clearly represented." So
       every shelf, card and grid has a drawn empty form, not a message where
       content should be.

     * Proportion and hierarchy over cleverness. Section titles are large, bold
       and condensed; everything else is quiet by comparison.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --mx-gap: 16px;              /* page gutter, both edges */
  --mx-ph: #EDEDED;            /* placeholder fill — a drawn shape, not a gap */
  --mx-ph-line: #E4E4E4;       /* placeholder text bars */
  --mx-radius: 12px;
  --mx-radius-sm: 8px;
}

/* ── Section scaffolding ──────────────────────────────────────────────────── */

.mx-sec { padding: 22px 0 4px; }
.mx-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 0 var(--mx-gap) 10px;
}
/* The board's defining move: section titles are big, black and condensed. */
.mx-h1 {
  font-family: var(--font-display); font-stretch: condensed;
  font-size: 26px; font-weight: 700; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--text); line-height: 1;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mx-more {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.mx-more .chev { font-size: 15px; line-height: 1; }

/* Horizontal shelves. Scroll, no visible bar, and the last card can reach the
   right edge — the gutter is padding on the rail, not a margin on the card. */
.mx-rail {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--mx-gap) 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Without this the snap port starts at the border edge, so snapping the first
     card to "start" scrolls the gutter away and the card ends up left of the
     heading above it — 14px out on Featured, 6px on Following, which is the
     misalignment Max spotted. scroll-padding tells snapping about the gutter. */
  scroll-padding-inline: var(--mx-gap);
}
.mx-rail::-webkit-scrollbar { display: none; }
.mx-rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* ── Placeholders ─────────────────────────────────────────────────────────── */

.mx-ph      { background: var(--mx-ph); border-radius: var(--mx-radius-sm); }
/* Wins over component backgrounds — a placeholder that renders white is not a
   placeholder, it is a gap with a border. */
.mx-item .pic.mx-ph, .mx-look .pic.mx-ph { background: var(--mx-ph); }
.mx-ph-bar  { background: var(--mx-ph-line); border-radius: 3px; height: 9px; }
.mx-ph-bar.tall { height: 12px; }
.mx-ph-dot  { background: var(--mx-ph-line); border-radius: 50%; }

/* ── Home ─────────────────────────────────────────────────────────────────── */

.mx-home-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px var(--mx-gap) 10px; gap: 12px;
}
.mx-wordmark { height: 26px; width: auto; display: block; }
.mx-top-actions { display: flex; align-items: center; gap: 16px; }
.mx-top-actions button {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--text);
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
}
.mx-top-actions .dot {
  position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green, #40C830);
}

/* The one saturated block in a near-white UI. Background-only, per the board. */
.mx-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 var(--mx-gap); padding: 0 14px; height: 46px;
  background: var(--green, #40C830); border-radius: 10px;
  color: #000; cursor: pointer; border: none; width: calc(100% - var(--mx-gap) * 2);
  font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; text-align: left;
}
.mx-banner .txt { flex: 1; }
.mx-banner .chev { font-size: 20px; line-height: 1; }

/* Featured — the collection's own title sits under the section title, with the
   strapline under that, then the shelf. */
.mx-feat-title {
  font-family: var(--font-display); font-stretch: condensed;
  font-size: 24px; font-weight: 700; text-transform: uppercase;
  line-height: 1.05; margin: 0; color: var(--text);
}
.mx-feat-sub { font-size: 13px; color: var(--text2); margin: 4px 0 0; }
.mx-feat-head { padding: 0 var(--mx-gap) 10px; }
.mx-feat-head .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}

/* Featured tiles: tall portrait crops in a row. */
.mx-feat-tile {
  width: 74px; height: 102px; border-radius: var(--mx-radius-sm);
  overflow: hidden; background: var(--mx-ph); cursor: pointer;
  border: none; padding: 0; display: block;
}
.mx-feat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Following cards: a coloured card, avatar strip on top, cutout in the middle,
   timestamp at the foot. The colour is the card's own, not the image's. */
.mx-fol-card {
  width: 92px; border-radius: var(--mx-radius); overflow: hidden;
  cursor: pointer; border: none; padding: 0; text-align: left;
  display: flex; flex-direction: column; height: 198px;
  font-family: inherit;
}
.mx-fol-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 3px; }
.mx-fol-head .av {
  width: 16px; height: 16px; border-radius: 50%; object-fit: cover;
  background: rgba(0,0,0,0.10); flex: 0 0 auto;
}
.mx-fol-head .name {
  font-size: 8px; font-weight: 600; color: #111; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.mx-fol-head .tick { width: 11px; height: 11px; flex: 0 0 auto; }
.mx-fol-body { flex: 1; position: relative; overflow: hidden; min-height: 0; }
/* Absolutely positioned, not height:100%. As a flex child the body's height is
   resolved by the flex algorithm, and a percentage height against it does not
   resolve — the image rendered 240px tall inside a 154px box and got clipped,
   which is why the figures lost their legs.
   `contain`, not `cover`: these are cutouts on a coloured card, and the board
   shows the whole figure. `cover` on a 92px column crops a standing person to a
   sliver and beheads them. Anchored to the bottom so the figure stands on the
   card's base rather than floating. */
.mx-fol-body img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center; display: block;
}
.mx-fol-foot { padding: 4px 6px 6px; font-size: 8px; color: rgba(0,0,0,0.55); }

/* Closet cards: cover image, title block top-left, three item chips at the foot,
   and the poster credited underneath the card. */
.mx-clo-wrap { width: 120px; }
.mx-clo-card {
  width: 120px; height: 128px; border-radius: var(--mx-radius); overflow: hidden;
  position: relative; background: #202020; cursor: pointer; display: block;
  border: none; padding: 0;
}
.mx-clo-card .cover { position: absolute; inset: 0; }
.mx-clo-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Legibility for white type over an unknown photo, without dimming the whole
   image — the board keeps the covers rich. */
.mx-clo-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 45%,
              rgba(0,0,0,0.55) 100%);
}
/* Left-aligned (Max, 22 Aug). The title wraps to two lines now, and a centred
   second line reads as a caption rather than a name. */
.mx-clo-txt { position: absolute; top: 7px; left: 8px; right: 8px; text-align: left; }
.mx-clo-txt .ttl {
  font-family: var(--font-display); font-stretch: condensed; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: #fff; line-height: 1.05;
  display: flex; align-items: center; gap: 4px;
}
/* Vlad, 22 Aug: the two-line allowance belongs to the CLOSET titles, not the
   section heading. "Stranger Things Season 5" and "Gucci by Harry Styles" were
   being cut to "STRANGER THINGS S…" — the name of the thing is the one piece of
   text on the card that must survive. Two lines, then ellipsis. */
.mx-clo-txt .ttl { align-items: flex-start; }
.mx-clo-txt .ttl span {
  overflow: hidden; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* The tick sits on the first line rather than centring against a two-line name. */
.mx-clo-txt .ttl svg { margin-top: 1px; flex: 0 0 auto; }
/* Slightly larger for readability; still clearly secondary to the title. */
.mx-clo-txt .sub { font-size: 9.5px; color: rgba(255,255,255,0.88); margin-top: 3px;
  line-height: 1.25; text-align: left; }
.mx-clo-items {
  position: absolute; left: 8px; right: 8px; bottom: 7px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.mx-clo-items .it {
  aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,0.92);
  overflow: hidden;
}
.mx-clo-items .it img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mx-clo-by {
  display: flex; align-items: center; gap: 5px; padding: 6px 1px 0;
  font-size: 8px; color: var(--text2);
}
.mx-clo-by .av {
  width: 14px; height: 14px; border-radius: 50%; object-fit: cover;
  background: var(--mx-ph); flex: 0 0 auto;
}
.mx-clo-by .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Closet tab ───────────────────────────────────────────────────────────── */

/* The board gives this tab no topbar — ITEMS / LOOKS is the header, so the
   safe-area inset has to be paid here instead. */
.mx-seg-wrap {
  background: var(--bg); flex: 0 0 auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}

/* ITEMS / LOOKS. Two large condensed words, centred, the active one underscored
   with a heavy rule. This is the whole navigation for the tab. */
.mx-seg { display: flex; justify-content: center; gap: 42px; padding: 8px 0 0; }
.mx-seg button {
  background: none; border: none; cursor: pointer; padding: 0 2px 7px;
  font-family: var(--font-display); font-stretch: condensed; font-size: 23px; font-weight: 700;
  letter-spacing: 0.01em; text-transform: uppercase; color: #BDBDBD;
  position: relative;
}
.mx-seg button.on { color: var(--text); }
.mx-seg button.on::after {
  content: ''; position: absolute; left: -6px; right: -6px; bottom: 0;
  height: 3px; background: var(--text); border-radius: 2px;
}

/* The two primary actions, side by side and equal. */
.mx-acts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px var(--mx-gap) 0;
}
.mx-act {
  height: 40px; border-radius: 9px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-display); font-stretch: condensed; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: #fff;
  background: var(--text); padding: 0 10px;
}
.mx-act .ic { font-size: 17px; line-height: 1; }
/* Gradients mean AI, and the two AI surfaces have different ones: warm for
   making a garment, cool for styling a person. Straight off the frames. */
.mx-act.ai-garment { background: linear-gradient(90deg, #FF7A18 0%, #F72585 52%, #7B2FF7 100%); }
.mx-act.ai-stylist { background: linear-gradient(90deg, #1D4ED8 0%, #2E9BE6 55%, #3FCF6B 100%); }

.mx-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--mx-gap) 0;
  scrollbar-width: none;
}
.mx-chips::-webkit-scrollbar { display: none; }
.mx-chip {
  flex: 0 0 auto; height: 28px; padding: 0 11px; border-radius: 50px;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text);
  display: inline-flex; align-items: center; gap: 5px;
}
.mx-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.mx-chip.add { width: 28px; padding: 0; justify-content: center; font-size: 16px; }

.mx-search {
  display: flex; align-items: center; gap: 8px; margin: 12px var(--mx-gap) 0;
  height: 36px; padding: 0 11px; border-radius: 9px; background: #F2F2F2;
  /* A flex child defaults to min-width:auto and refuses to shrink below its
     content, which pushed My Avatars off the right edge of the Looks row. */
  min-width: 0;
}
.mx-search input {
  flex: 1; border: none; background: none; outline: none; font-family: inherit;
  font-size: 13px; color: var(--text); min-width: 0;
}
.mx-search input::placeholder { color: #A8A8A8; }

/* Category strip: line icon over a small caption, active one marked by a dot. */
.mx-cats {
  display: flex; gap: 2px; overflow-x: auto; padding: 12px 10px 0;
  scrollbar-width: none;
}
.mx-cats::-webkit-scrollbar { display: none; }
.mx-cat {
  flex: 0 0 auto; width: 45px; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 0 6px; color: var(--text); font-family: inherit; position: relative;
}
.mx-cat .cap { font-size: 8.5px; color: var(--text2); line-height: 1.1; text-align: center; }
.mx-cat.on .cap { color: var(--text); font-weight: 600; }
.mx-cat.on::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #C026D3;
}

.mx-count {
  padding: 12px var(--mx-gap) 7px; font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text3);
}

/* Items: four to a row, as drawn. */
.mx-items {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 0 var(--mx-gap) 20px;
}
.mx-item {
  border: 1px solid var(--border); border-radius: var(--mx-radius-sm);
  background: var(--surface); overflow: hidden; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; position: relative; font-family: inherit;
}
.mx-item .pic {
  aspect-ratio: 1; background: var(--surface); display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.mx-item .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mx-item .cap {
  font-size: 7.5px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); text-align: center; padding: 4px 3px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-item .dots {
  position: absolute; top: 3px; right: 4px; font-size: 10px; color: var(--text3);
  line-height: 1;
}

/* Looks: three to a row, taller cards with a name and an item count. */
.mx-looks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px var(--mx-gap) 20px;
}
.mx-look {
  border: 1px solid var(--border); border-radius: var(--mx-radius-sm);
  background: var(--surface); overflow: hidden; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; position: relative; text-align: left;
  font-family: inherit;
}
.mx-look .pic {
  aspect-ratio: 0.72; background: var(--surface); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mx-look .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mx-look .nm {
  font-family: var(--font-display); font-stretch: condensed; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: var(--text); padding: 6px 7px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-look .ct {
  font-size: 9px; color: var(--text2); padding: 3px 7px 8px;
  display: flex; align-items: center; gap: 4px;
}
.mx-look .dots {
  position: absolute; top: 5px; right: 6px; font-size: 11px; color: var(--text3);
  line-height: 1;
}

.mx-avatars {
  flex: 0 0 auto; height: 36px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Profile ──────────────────────────────────────────────────────────────── */

.mx-prof-top {
  display: flex; align-items: center; gap: 14px;
  padding: 6px var(--mx-gap) 12px;
}
.mx-prof-handle {
  flex: 1; text-align: center; font-size: 15px; font-weight: 600;
  color: var(--text); display: flex; align-items: center; justify-content: center;
  gap: 5px; overflow: hidden;
}
.mx-prof-handle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avatar left, identity right — not the centred column the old profile used. */
.mx-prof-id { display: flex; gap: 16px; padding: 0 var(--mx-gap); align-items: flex-start; }
.mx-ring {
  width: 92px; height: 92px; border-radius: 50%; padding: 3px; flex: 0 0 auto;
  background: conic-gradient(from 200deg, #F72585, #FF8A3D, #FFC24B, #F72585);
  cursor: pointer;
}
.mx-ring .inner {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--bg); box-sizing: border-box; background: #F0EFEE;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-stretch: condensed; font-size: 30px; font-weight: 700;
  color: var(--text);
}
.mx-ring .inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-prof-meta { flex: 1; min-width: 0; padding-top: 2px; }
.mx-prof-name {
  font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.15;
  display: flex; align-items: center; gap: 5px;
}
.mx-prof-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-prof-bio { font-size: 13px; color: var(--text); line-height: 1.35; margin-top: 5px; }
.mx-prof-loc { font-size: 13px; color: var(--text); margin-top: 4px; }
.mx-prof-link {
  font-size: 13px; color: #2557E0; margin-top: 4px; display: inline-flex;
  align-items: center; gap: 4px; text-decoration: none; word-break: break-all;
}

.mx-stats { display: flex; padding: 16px var(--mx-gap) 0; }
.mx-stat { flex: 1; text-align: center; cursor: pointer; }
.mx-stat .n { font-size: 17px; font-weight: 700; color: var(--text); }
.mx-stat .l { font-size: 12px; color: var(--text2); margin-top: 1px; }

.mx-identity {
  display: flex; align-items: center; gap: 10px; width: calc(100% - var(--mx-gap) * 2);
  margin: 16px var(--mx-gap) 0; padding: 10px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--mx-radius);
  background: var(--surface); cursor: pointer; font-family: inherit;
}
.mx-identity .lab {
  font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text3); display: block; margin-bottom: 2px;
}
.mx-identity .val {
  font-family: var(--font-display); font-stretch: condensed; font-size: 17px; font-weight: 700;
  text-transform: uppercase; color: var(--text); display: flex;
  align-items: center; gap: 7px;
}
.mx-identity .val.unset { color: var(--text3); }
.mx-identity .go { margin-left: auto; font-size: 12px; color: var(--text2); white-space: nowrap; }

.mx-hls {
  display: flex; gap: 15px; overflow-x: auto; padding: 16px var(--mx-gap) 4px;
  scrollbar-width: none;
}
.mx-hls::-webkit-scrollbar { display: none; }
.mx-hl {
  flex: 0 0 auto; width: 66px; background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit; display: flex; flex-direction: column;
  align-items: center; gap: 7px;
}
.mx-hl .ring {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--border);
  overflow: hidden; background: #F0EFEE; display: flex; align-items: center;
  justify-content: center;
}
.mx-hl .ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-hl .ring b {
  font-family: var(--font-display); font-stretch: condensed; font-size: 21px; color: var(--text2);
}
.mx-hl .cap {
  font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); max-width: 66px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-hl.ghost .ring { border-style: dashed; background: transparent; }
.mx-hl.ghost .cap { color: var(--text3); }
.mx-hl.add .ring { border-style: dashed; background: transparent; font-size: 22px; color: var(--text2); }

.mx-subtabs {
  display: flex; margin-top: 16px; border-bottom: 1px solid var(--border);
}
.mx-subtab {
  flex: 1; background: none; border: none; cursor: pointer; padding: 10px 0 9px;
  color: #B5B5B5; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mx-subtab.on { color: var(--text); }
/* The board's rule sits under the icon, inset from the column edges. */
.mx-subtab.on::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px;
  background: var(--text);
}

/* The grid is edge to edge with hairline gaps, as on the board. */
.mx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-bottom: 20px; }
.mx-grid .cell {
  /* Tall, and the image is CONTAINed in it.

     This went wrong twice. Square cells cropped a standing figure to its torso.
     Then 9:16 cells with cover looked right only while the images were padded
     out to 9:16 — once framing cropped them tight to the subject (~0.35), a
     cover fit scaled by width and overflowed vertically, taking the head and
     the shoes again. Measured at 62% of the image visible on Edward's grid.

     0.45 sits inside the range the real looks occupy (0.32-0.52), so contain
     leaves only a modest margin either way and nothing is ever cut. */
  aspect-ratio: 0.45; background: var(--mx-ph); overflow: hidden; cursor: pointer;
  border: none; padding: 0; display: block; position: relative;
}
.mx-grid .cell img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Wide screens ─────────────────────────────────────────────────────────── */
/* The phone column is already constrained by .phone on tablets and the Fold's
   inner screen; these only stop the shelves looking sparse when it is not. */
@media (min-width: 620px) {
  .mx-feat-tile { width: 92px; height: 126px; }
  .mx-fol-card  { width: 116px; height: 248px; }
  .mx-clo-wrap, .mx-clo-card { width: 150px; }
  .mx-clo-card  { height: 160px; }
}

/* The ALL pill when it sits inline with search on the Looks tab. */
.mx-search-row { min-width: 0; }
.mx-search-row > .mx-chip { height: 36px; padding: 0 12px; }
.mx-avatars { padding: 0 11px; }

/* Narrow screens — the Fold's cover panel is 344pt, not the 393 the board is
   drawn at. "Latest in your following" cannot fit beside its View feed link at
   26px, and truncating a section title to "LATEST IN YOUR FOLL..." is worse
   than setting it a little smaller. */
@media (max-width: 430px) {
  .mx-h1 { font-size: 22px; }
  .mx-feat-title { font-size: 21px; }
  .mx-more { font-size: 10px; }
}
/* The Fold's cover panel is 344pt. "Latest in your following" needs another
   step down there or it still clips. */
@media (max-width: 360px) {
  .mx-h1 { font-size: 19px; }
  .mx-feat-title { font-size: 19px; }
}

/* ── Following feed (frame 0B) ────────────────────────────────────────────────
   Max, 20 Aug: the feed "does not currently match the mockups and requires the
   most attention... Pay close attention to typography color usage, especially
   in feed metadata, labels, and secondary text elements."

   The board's feed is near-black for everything that carries meaning — the
   handle, the item names, the counts — with a single mid-grey reserved for the
   caption. We were rendering most of that in --text2/--text3, which washed the
   hierarchy out and made every row look secondary.
   ─────────────────────────────────────────────────────────────────────────── */

.mxf { padding: 14px 0 6px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.mxf-head { display: flex; align-items: center; gap: 9px; padding: 0 var(--mx-gap) 10px; }
.mxf-ring {
  width: 34px; height: 34px; border-radius: 50%; padding: 2px; flex: 0 0 auto;
  background: conic-gradient(from 200deg, #F72585, #FF8A3D, #FFC24B, #F72585);
}
.mxf-ring span {
  display: flex; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--bg); box-sizing: border-box; background: #F0EFEE;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  color: var(--text);
}
.mxf-ring img { width: 100%; height: 100%; object-fit: cover; }
/* Near-black, not grey: this is the primary identity on the card. */
.mxf-name { font-size: 13px; font-weight: 600; color: #111; display: flex; align-items: center; gap: 4px; }
.mxf-more { margin-left: auto; background: none; border: none; cursor: pointer;
  color: #111; font-size: 17px; line-height: 1; padding: 4px 2px; letter-spacing: 1px; }

/* The headline is the loudest thing on the board — display face, tight leading. */
.mxf-title {
  font-family: var(--font-display); font-stretch: condensed;
  font-size: 30px;
  /* 0.96 set the line box shorter than the capitals, so clamping to two lines
     sliced the second one through the middle of the glyphs. */
  line-height: 1.04; letter-spacing: 0.005em;
  text-transform: uppercase; color: #0A0A0A; margin: 0;
  /* overflow:hidden clips at the padding edge, and this face's capitals sit
     lower than their line box, so the clamped second line lost its feet
     without a few px of room underneath. */
  padding: 0 var(--mx-gap) 6px;
  word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* The one genuinely secondary line, and the only grey. */
.mxf-cap { font-size: 12.5px; line-height: 1.45; color: #4A4A4A; margin: 8px 0 0; padding: 0 var(--mx-gap); }

.mxf-body { display: flex; gap: 12px; padding: 12px var(--mx-gap) 0; align-items: flex-start; }
.mxf-shot {
  flex: 1 1 48%; min-width: 0; aspect-ratio: 0.62; border-radius: 8px; overflow: hidden;
  background: var(--mx-ph); cursor: pointer; position: relative;
}
/* Outfit images are 9:16 (1080x1920) from here on, and Max wants them to FILL
   the post's visual area rather than sit inside it with dead space. cover does
   that; the question is only what gets cropped.

   --mxf-shot-pos is the fine-tune knob: it decides which part survives the crop.
   Default favours the upper body, because a full-length figure in a narrower
   column loses its edges either way and a cropped head is far worse than
   cropped shoes. Max wants to tune this once the real content exists — that is
   one value here, not a hunt through rules. */
.mxf-shot { --mxf-shot-pos: center center; }
.mxf-shot img, .mxf-shot video {
  /* Absolute fill rather than height:100%. In the snapping feed the shot's
     height comes from being stretched by its flex row, and a percentage height
     against a flex-determined height is exactly what already collapsed this
     image to 242px in a 553px row once. inset:0 does not care where the height
     came from. */
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  /* contain, not cover (Vlad, 22 Aug): "important parts of the look are never
     cut off just to fill the container." The images are framed around the
     subject at ingest, so contain leaves very little empty space — and unlike
     cover it cannot take the head or the shoes when the column is narrower
     than 9:16. */
  object-fit: contain; object-position: var(--mxf-shot-pos);
}
.mxf-break { flex: 1 1 52%; min-width: 0; }
.mxf-break-h {
  font-family: var(--font-display); font-stretch: condensed; font-size: 13px;
  text-transform: uppercase; color: #0A0A0A; letter-spacing: 0.02em; margin-bottom: 8px;
}
.mxf-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-top: 1px solid rgba(0,0,0,0.07); cursor: pointer; width: 100%;
  background: none; border-left: none; border-right: none; border-bottom: none;
  text-align: left; font-family: inherit;
}
.mxf-row:first-of-type { border-top: none; }
.mxf-thumb { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 5px; overflow: hidden; background: var(--mx-ph); }
.mxf-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mxf-meta { flex: 1; min-width: 0; }
/* Item names read as near-black caps on the board, not grey. */
.mxf-item { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: #111; line-height: 1.25; }
.mxf-brand { display: block; font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #111; margin-top: 3px; }
/* The one accent colour in the feed, and it means "made, not bought". */
.mxf-orig { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #E5342A; margin-top: 3px; }
.mxf-row .chev { color: #111; font-size: 15px; flex: 0 0 auto; }

.mxf-cta { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.mxf-cta button {
  height: 38px; border-radius: 7px; font-family: var(--font-ui); font-size: 11px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mxf-cta .add { background: #0A0A0A; color: #fff; border: none; }
.mxf-cta .try { background: transparent; color: #0A0A0A; border: 1px solid rgba(0,0,0,0.35); }

.mxf-comment { display: flex; gap: 9px; padding: 12px var(--mx-gap) 0; align-items: flex-start; }
.mxf-comment .av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--mx-ph); flex: 0 0 auto; }
.mxf-comment .who { font-size: 12px; font-weight: 600; color: #111; display: flex; align-items: center; gap: 4px; }
.mxf-comment .txt { font-size: 12px; color: #1A1A1A; margin-top: 2px; line-height: 1.35; }
.mxf-comment .when { font-size: 11px; color: #8A8A8A; margin-top: 4px; display: flex; gap: 12px; }
.mxf-comment .likes { margin-left: auto; font-size: 11px; color: #111; display: flex; align-items: center; gap: 4px; white-space: nowrap; }

.mxf-actions { display: flex; padding: 12px var(--mx-gap) 4px; }
.mxf-actions button {
  flex: 1; display: flex; align-items: center; gap: 7px; background: none; border: none;
  cursor: pointer; color: #111; font-size: 12px; font-family: var(--font-ui); padding: 4px 0;
}
.mxf-actions button:last-child { flex: 0 0 auto; }
.mxf-actions .on { color: #E5342A; }

/* ── Dressing Room toolbar ───────────────────────────────────────────────────
   Replaces two full-width chip rails with one row of dropdowns. The screen's
   job is showing you the try-on; controls should not out-weigh it.
   ─────────────────────────────────────────────────────────────────────────── */
.dr-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px var(--mx-gap);
  flex: 0 0 auto; min-width: 0;
}
.dr-tool {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 50px; border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 46%;
}
.dr-tool[disabled] { opacity: 0.55; }
.dr-tool .cv { font-size: 9px; color: var(--text3); }
.dr-tool .em { font-size: 13px; }
.dr-tool .sp {
  width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block;
}

.dr-pick-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 46vh; overflow-y: auto; }
.dr-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-ui); font-size: 14px; color: var(--text); cursor: pointer;
  text-align: left; min-height: 48px;
}
.dr-pick.on { border-color: var(--text); }
.dr-pick .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-pick .em { font-size: 17px; }
.dr-pick .nt { font-size: 10px; color: var(--green, #40C830); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dr-pick .tk { color: var(--text); font-weight: 700; }

/* app.html reserves a minimum height for feed images to stop layout jump while
   they load:  #homeFeed img { min-height: 240px }.  It predates the rebuild and
   catches every image in the rebuilt shelves too — a 240px floor inside a 154px
   card, which is why the following cards were showing heads and no legs.
   The rebuilt components size their own media, so opt them out explicitly. */
/* The 240px floor is set with an ID selector (#homeFeed img), so a class
   selector cannot override it however late this file loads — specificity, not
   order. These carry the id too.

   Namespaced rather than enumerated, because enumerating is how this bit twice:
   the first pass listed .mx-fol-body img and missed the little avatar in the
   card header, which then rendered 240px tall, made the header 249px, and
   crushed the card body to ZERO inside a 198px card. It was invisible locally
   because seeded test posts have no avatar, so the header image did not exist.
   Every image inside an mx- component sizes itself; none of them want a floor. */
#homeFeed [class^="mx-"] img, #homeFeed [class*=" mx-"] img,
#homeFeed [class^="mxf-"] img, #homeFeed [class*=" mxf-"] img,
#homeFeed [class^="mx-"] video, #homeFeed [class*=" mx-"] video,
#exploreFeedList [class^="mx-"] img, #exploreFeedList [class*=" mx-"] img,
#postDetailContent [class^="mx-"] img, #postDetailContent [class*=" mx-"] img,
/* Post detail renders the feed card now, so the mxf- components are here too —
   and `mxf-shot` does NOT match [class^="mx-"]. Missing these put the 240px
   floor back under the outfit image on exactly the screen Max asked to be
   full-screen. */
#postDetailContent [class^="mxf-"] img, #postDetailContent [class*=" mxf-"] img,
#postDetailContent [class^="mx-"] video, #postDetailContent [class*=" mx-"] video,
#postDetailContent [class^="mxf-"] video, #postDetailContent [class*=" mxf-"] video,
.mx-grid .cell img, .mx-item .pic img, .mx-look .pic img,
.mx-hl .ring img, .mx-ring .inner img { min-height: 0; }

/* Featured is a label, not a heading — the collection's own name is the
   headline. Max, 21 Aug: "smaller, lighter, and more clearly secondary subtext
   rather than a prominent heading." */
.mx-sec.mx-sec-featured .mx-h1 {
  font-family: var(--font-ui); font-stretch: normal;
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em;
  color: var(--text3); line-height: 1.2;
}
.mx-sec.mx-sec-featured .mx-sec-head { padding-bottom: 2px; }

/* ─── Following feed: one post per screen ────────────────────────────────────
   Max: each post "always settles into a complete full-screen view".

   mandatory (not proximity) so a swipe always lands on a post rather than
   halfway between two, and scroll-snap-stop:always so a fast flick advances one
   post instead of skipping several — a feed you cannot stop on is worse than
   one that does not snap.

   The card becomes a column that fills the screen exactly, with the look/
   breakdown row absorbing whatever height is left over, so no post is ever part
   of another.
   ─────────────────────────────────────────────────────────────────────────── */
/* NOTE: this file is linked in <head> BEFORE app.html's inline <style>, so at
   equal specificity the inline rules win regardless of load order. Anything
   overriding .scroll etc. has to out-specify it, not just come later. */
.scroll.mx-feed-snap {
  scroll-snap-type: y mandatory; scroll-padding-top: 0;
  /* .scroll carries a 64px bottom padding so ordinary content clears the
     floating category bar. A full-screen post must not be 64px short of the
     screen, and the feed has no floating bar, so the snap container drops it. */
  padding-bottom: 0;
}
/* The card's min-height:100% needs something to be a percentage OF. The list
   is height:auto, so the percentage was ignored and posts came out 434px tall
   in a 684px scroller — snapping correctly to cards that were not full screen.
   Giving the list the scroller's height resolves it; its content still
   overflows and scrolls, which is the point. */
.scroll.mx-feed-snap > #homeFeed { height: 100%; }

.mx-feed-snap .mxf {
  /* Exactly one screen, not "at least" one. With min-height alone a tall post
     grew past the viewport and the action bar — which is pinned to the card's
     bottom — went with it, so the counts were never visible and the snap landed
     on a post whose foot you could not see. */
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column;
  border-bottom: none;
  padding: 12px 0 8px;
}
/* The media row takes the slack, so the card is exactly one screen tall. */
.mx-feed-snap .mxf-body { flex: 1 1 auto; min-height: 0; align-items: stretch; }
/* height:100% cannot resolve against a flex-determined height, so it fell back
   to the image's intrinsic ratio and the look sat at 242px in a 553px row.
   align-items:stretch already does the right thing — the explicit height was
   what stopped it. */
.scroll.mx-feed-snap .mxf-shot { aspect-ratio: auto; height: auto; min-height: 0; align-self: stretch; }
/* The breakdown is the one part that can genuinely need more room than a short
   phone has (four pieces plus two buttons). Let it scroll inside its own column
   rather than pushing the comment and the counts off the screen. */
.mx-feed-snap .mxf-break { overflow: hidden; display: flex; flex-direction: column; }
.mx-feed-snap .mxf-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.mx-feed-snap .mxf-rows::-webkit-scrollbar { display: none; }
/* The two buttons are the point of the column — they never scroll away. */
.mx-feed-snap .mxf-cta { flex: 0 0 auto; }
/* Comments and the count bar sit at the foot of the screen, not wherever the
   content happens to end. */
.mx-feed-snap .mxf-actions { margin-top: auto; }

/* Max, 21 Aug: outfit images are full-screen in BOTH the Following Feed and a
   tapped profile outfit. The feed gets its screen-height from the snap
   container; the detail overlay needs its own, so the card is stretched to the
   overlay instead of ending wherever the text happens to stop.

   The overlay has a definite height (it is inset top/bottom), so min-height:100%
   on this block child resolves — no dvh guesswork, and it stays correct inside
   the centred tablet frame. */
#postDetailContent.mx-detail-full { min-height: 100%; display: flex; flex-direction: column; }
.mx-detail-full .mx-detail-post { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.mx-detail-full .mx-detail-post .mxf { flex: 1 1 auto; display: flex; flex-direction: column; }
.mx-detail-full .mxf-body { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.mx-detail-full .mxf-shot { aspect-ratio: auto; height: auto; min-height: 0; align-self: stretch; }
.mx-detail-full .mxf-break { overflow: hidden; }
.mx-detail-full .mxf-actions { margin-top: auto; }

/* Post detail = the feed card, so a post looks the same wherever it is opened. */
.mx-detail-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--mx-gap); position: sticky; top: 0; z-index: 2;
  background: var(--bg); border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mx-detail-bar button {
  background: none; border: none; cursor: pointer; color: var(--text);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  min-height: 44px; display: flex; align-items: center; gap: 4px; padding: 0;
}
.mx-detail-post .mxf { border-bottom: none; }

/* Frame 0B has no app topbar: the post begins under the status bar. Hiding it
   in the feed gives the post the height the frame gives it. The bottom nav
   stays — the frame omits it, but a screen with no way out is the dead end we
   already had to fix once for competitions. */
#screenHome.mx-feed-mode .mx-home-top { display: none; }

/* Line icons sit inline with the label at text size. */
.mxf-cta button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mxf-actions button svg { width: 21px; height: 21px; }
.mxf-actions button { display: flex; align-items: center; gap: 6px; }