/* ============================================================================
   sm-pages.css — How it works, Account overview, My closet.

   SCOPE. Every rule is scoped to `.smp` (the page root) or to
   `body:has(#smAccountRoot.smp-shell.on)`. Nothing here touches :root beyond
   reading the canonical `--sm-*` tokens declared once in redesign-system.css,
   and nothing redefines a global primitive, because Matches, Scan and Build the
   Look are all built on those. See home-v2.css for the same discipline.

   THE HEADER IS NOT REDEFINED HERE. The white topbar is the one already shipped
   for Home and Matches; home-v2.css owns its declarations and its selector list
   now includes these three routes. A third copy would drift.
   ========================================================================== */

.smp {
  --smp-page:#FFFFFF;
  --smp-soft:#F6F9FD;
  --smp-mist:#EAF2FF;
  --smp-navy:#061B30;
  --smp-ink:#102A43;
  --smp-muted:#617386;
  --smp-line:#D9E3EC;
  --smp-line-soft:#E6EDF5;
  --smp-cobalt:#2F65F5;
  --smp-cobalt-dark:#2354D8;
  --smp-coral:#FF624F;
  --smp-coral-dark:#E14A38;
  --smp-good:#18765A;
  --smp-warn:#9A5B12;
  --smp-danger:#C7372F;
  --smp-disp:"Fraunces", Georgia, serif;
  --smp-body:"Karla", system-ui, sans-serif;
  --smp-mono:"DM Mono", ui-monospace, Menlo, monospace;
  --smp-r:12px;
  --smp-r-s:8px;
  --smp-max:1400px;
  --smp-gutter:clamp(16px, 4vw, 40px);
  --smp-ease:cubic-bezier(.22,.61,.36,1);

  background:var(--smp-page);
  color:var(--smp-ink);
  font-family:var(--smp-body);
  font-size:15.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.smp *, .smp *::before, .smp *::after { box-sizing:border-box; }
.smp h1, .smp h2, .smp h3, .smp h4 {
  margin:0; font-family:var(--smp-disp); font-weight:600;
  color:var(--smp-navy); letter-spacing:-.022em; text-wrap:balance;
}
.smp p { margin:0; }
.smp button, .smp input, .smp select { font-family:inherit; font-size:inherit; color:inherit; }
.smp a { color:var(--smp-cobalt); text-decoration:none; }
.smp ::selection { background:var(--smp-mist); color:var(--smp-navy); }
.smp :focus-visible { outline:2px solid var(--smp-cobalt); outline-offset:2px; border-radius:4px; }
.smp table { border-collapse:collapse; width:100%; }

.smp-sr {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}
.smp-wrap { max-width:var(--smp-max); margin:0 auto; padding-inline:var(--smp-gutter); }

/* These three routes are white, edge to edge. The cream ground and its paper grain
   belong to the product pages and stay there; this only lifts them while one of the
   rebuilt routes is on screen. */
body[data-smp-route] { background:#fff; }
body[data-smp-route]::before { display:none; }
body[data-smp-route] #smBuildBadge, body[data-smp-route] #smAcctVer { display:none; }
body[data-smp-route="how"] main { max-width:none; margin:0; padding:0; }
body[data-smp-route="how"] main > footer { max-width:var(--smp-max); margin:0 auto; }

/* Numbers are data. Line them up. */
.smp-num { font-family:var(--smp-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.smp-eyebrow {
  margin:0 0 10px; font-family:var(--smp-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--smp-cobalt);
}

/* ----------------------------------------------------------------- buttons */
.smp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 18px; border:1.5px solid transparent; border-radius:var(--smp-r-s);
  font-weight:600; font-size:14.5px; cursor:pointer; white-space:nowrap;
  transition:background-color .16s var(--smp-ease), border-color .16s var(--smp-ease),
             color .16s var(--smp-ease), transform .16s var(--smp-ease);
}
.smp-btn svg { width:17px; height:17px; flex:none; }
.smp-btn-primary { background:var(--smp-coral); border-color:var(--smp-coral); color:#fff; }
.smp-btn-primary:hover { background:var(--smp-coral-dark); border-color:var(--smp-coral-dark); transform:translateY(-1px); }
/* Coral is the page's ONE primary action. Repeating it on every card would spend
   the loudest colour in the system on the least important decision, so card-level
   commitments are cobalt. */
.smp-btn-cobalt { background:var(--smp-cobalt); border-color:var(--smp-cobalt); color:#fff; }
.smp-btn-cobalt:hover { background:var(--smp-cobalt-dark); border-color:var(--smp-cobalt-dark); transform:translateY(-1px); }
.smp-btn-outline { background:#fff; border-color:var(--smp-cobalt); color:var(--smp-cobalt); }
.smp-btn-outline:hover { background:var(--smp-mist); transform:translateY(-1px); }
.smp-btn-quiet { background:#fff; border-color:var(--smp-line); color:var(--smp-ink); }
.smp-btn-quiet:hover { border-color:var(--smp-cobalt); color:var(--smp-cobalt); }
.smp-btn-danger { background:#fff; border-color:var(--smp-danger); color:var(--smp-danger); }
.smp-btn-danger:hover { background:var(--smp-danger); color:#fff; }
.smp-btn[disabled] { opacity:.55; cursor:progress; transform:none; }
.smp-btn-sm { min-height:36px; padding:0 13px; font-size:13.5px; }
.smp-link {
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px;
  color:var(--smp-cobalt); background:none; border:0; padding:0; cursor:pointer;
  text-underline-offset:3px;
}
.smp-link:hover { text-decoration:underline; }
.smp-link svg { width:15px; height:15px; }

@media (prefers-reduced-motion:reduce) {
  .smp *, .smp *::before, .smp *::after { transition-duration:.001ms!important; animation-duration:.001ms!important; }
}

/* ------------------------------------------------------- garment diagrams  */
/* Geometry, not illustration: the outline and the callouts are the same shapes
   the measuring tape follows. Overlay lines are drawn from stored geometry at
   render time and are never baked into a photo. */
.smp-figure { position:relative; display:block; margin:0; width:100%; }
.smp-figure img { display:block; width:100%; height:100%; object-fit:contain; }
.smp-figure-photo { display:grid; place-items:center; width:100%; aspect-ratio:4/3.2; }
.smp-figure-photo img { max-height:100%; }
.smp-figure-photo.is-missing {
  gap:10px; align-content:center; text-align:center; padding:20px;
  border-radius:var(--smp-r-s); background:var(--smp-mist);
}
.smp-figure-photo.is-missing .smp-ghost {
  display:grid; place-items:center; width:96px; height:96px; margin-inline:auto;
  border:1.5px dashed #A9C2E8; border-radius:var(--smp-r-s); color:#7FA3DA;
}
.smp-figure-photo.is-missing b { font-size:13.5px; color:#3D5670; }
.smp-figure .smp-overlay { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
/* SCAN-LANDMARKS-V1. The overlay above is fitted to .smp-figure, so the photograph has to be
   fitted to .smp-figure too. It used to be a grid item in a content-sized row, where
   height:100% / max-height:100% resolve against an indefinite area -- the bitmap painted
   taller than the figure and the measured guides landed up to 578 CSS px away from the seams
   they describe. Absolute positioning gives the image and the overlay the same rectangle, so
   object-fit:contain and preserveAspectRatio="meet" produce the same fit. */
.smp-figure .smp-figure-photo img {
  position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain;
}
.smp-diagram { display:block; width:100%; height:auto; overflow:visible; }
.smp-diagram .g-body { fill:#DCE4EC; stroke:#9FB1C4; stroke-width:2.2; stroke-linejoin:round; }
.smp-diagram .g-seam { fill:none; stroke:#9FB1C4; stroke-width:1.6; stroke-linecap:round; }
.smp-ln { fill:none; stroke:var(--smp-cobalt); stroke-width:2; stroke-linecap:round; }
.smp-cap { stroke:var(--smp-cobalt); stroke-width:2; stroke-linecap:round; }
.smp-dot { fill:var(--smp-cobalt); }
.smp-mlabel {
  fill:var(--smp-cobalt); font-family:"DM Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.09em; font-weight:500;
}
.smp-figure[data-anim="1"] .smp-ln,
.smp-figure[data-anim="1"] .smp-cap { animation:smpDraw .45s var(--smp-ease) both; }
.smp-figure[data-anim="1"] .smp-mlabel,
.smp-figure[data-anim="1"] .smp-dot { animation:smpFade .4s var(--smp-ease) both .16s; }
@keyframes smpDraw { from { opacity:0; stroke-dasharray:0 400; } to { opacity:1; stroke-dasharray:400 0; } }
@keyframes smpFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .smp-figure[data-anim="1"] .smp-ln, .smp-figure[data-anim="1"] .smp-cap,
  .smp-figure[data-anim="1"] .smp-mlabel, .smp-figure[data-anim="1"] .smp-dot { animation:none; }
}

/* ========================================================= HOW IT WORKS === */
.smp-how { padding-bottom:0; }
.smp-hero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch; border-bottom:1px solid var(--smp-line);
}
.smp-hero-copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(38px,5vw,66px) clamp(28px,4vw,56px) clamp(38px,5vw,62px)
          max(var(--smp-gutter), calc((100vw - var(--smp-max)) / 2 + var(--smp-gutter)));
}
.smp-hero-copy h1 { font-size:clamp(38px,4.4vw,62px); line-height:1.02; margin-bottom:18px; }
.smp-hero-copy .smp-lede {
  max-width:44ch; font-size:17px; line-height:1.6; color:var(--smp-muted); margin-bottom:26px;
}
.smp-hero-figure {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:380px; padding:44px 48px;
  background:linear-gradient(150deg,#F3F8FF 0%,var(--smp-mist) 100%);
}
.smp-hero-figure .smp-figure { max-width:400px; }
/* The overlay maps 1:1 onto the checked-in example photo, so the box carries the
   photo's own ratio and the callouts land where the seams actually are. */
.smp-hero-figure .smp-figure.is-hero .smp-figure-photo { aspect-ratio:426/480; }
.smp-hero-figure figcaption {
  position:absolute; left:24px; bottom:16px;
  font-family:var(--smp-mono); font-size:11px; color:var(--smp-muted);
}

.smp-steps {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none; margin:0; padding:26px var(--smp-gutter);
  max-width:var(--smp-max); margin-inline:auto; border-bottom:1px solid var(--smp-line);
}
.smp-steps li { display:flex; gap:14px; align-items:flex-start; padding:6px 26px 6px 0; }
.smp-steps li + li { border-left:1px solid var(--smp-line-soft); padding-left:26px; }
.smp-step-n {
  flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--smp-cobalt); color:#fff;
  font-family:var(--smp-mono); font-size:12.5px; font-weight:500;
}
.smp-steps .smp-ico { flex:none; color:var(--smp-cobalt); }
.smp-steps b { display:block; font-size:15px; color:var(--smp-navy); margin-bottom:3px; }
.smp-steps small { display:block; font-size:13.5px; line-height:1.5; color:var(--smp-muted); }

.smp-measure { padding:clamp(30px,4vw,46px) var(--smp-gutter) clamp(34px,4vw,52px); max-width:var(--smp-max); margin-inline:auto; }
.smp-measure > h2 { font-size:clamp(27px,2.6vw,34px); margin-bottom:18px; }
.smp-tabrow { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:24px; }
.smp-tabs { display:flex; border:1px solid var(--smp-line); border-radius:var(--smp-r-s); overflow:hidden; }
.smp-tabs button {
  display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  background:#fff; border:0; border-right:1px solid var(--smp-line);
  font-size:14.5px; font-weight:600; color:var(--smp-ink); cursor:pointer;
  transition:background-color .15s var(--smp-ease), color .15s var(--smp-ease);
}
.smp-tabs button:last-child { border-right:0; }
.smp-tabs button:hover { background:var(--smp-soft); }
.smp-tabs button svg { width:22px; height:22px; }
.smp-tabs button[aria-selected="true"] { background:var(--smp-cobalt); color:#fff; }
.smp-tabrow .smp-tabnote { font-size:13.5px; line-height:1.45; color:var(--smp-muted); max-width:26ch; }

.smp-measure-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(20px,3vw,40px); align-items:start; }
.smp-diagram-card {
  position:relative; border:1px solid var(--smp-line); border-radius:var(--smp-r);
  background:var(--smp-soft); padding:26px 26px 40px;
}
.smp-diagram-card .smp-figure { max-width:100%; }
.smp-diagram-card .smp-foot {
  position:absolute; left:20px; bottom:14px;
  font-family:var(--smp-mono); font-size:11.5px; color:var(--smp-cobalt);
}
.smp-poms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(20px,3vw,38px); list-style:none; margin:0; padding:0; }
.smp-poms li { display:flex; gap:13px; padding:15px 0; border-bottom:1px solid var(--smp-line-soft); }
.smp-poms i {
  flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:1px;
  border-radius:50%; background:var(--smp-mist); color:var(--smp-cobalt);
  font-family:var(--smp-mono); font-size:11.5px; font-style:normal; font-weight:500;
}
.smp-poms b { display:block; font-size:14.5px; color:var(--smp-navy); margin-bottom:2px; }
.smp-poms span { display:block; font-size:13.5px; line-height:1.5; color:var(--smp-muted); }

.smp-trust {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px;
  padding:20px var(--smp-gutter); background:var(--smp-mist);
  border-top:1px solid #D6E4FB;
}
.smp-trust-in { display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; max-width:var(--smp-max); margin-inline:auto; width:100%; }
.smp-trust .smp-ico { color:var(--smp-cobalt); flex:none; }
.smp-trust b { font-family:var(--smp-disp); font-size:19px; font-weight:600; color:var(--smp-navy); }
.smp-trust span { font-size:13.5px; color:#3D5670; }

/* ============================================== ACCOUNT SHELL + SUBNAV ==== */
/* The account area used to be a fixed sheet over the whole viewport, header
   included. It now starts below the global header so the site's own navigation
   stays reachable from inside an account page. */
/* Gated on the route, not on a class that would linger: the survey and settings
   views still want the full-height sheet they were built against. */
body[data-smp-route="account"] #smAccountRoot.on,
body[data-smp-route="closet"] #smAccountRoot.on {
  position:fixed; left:0; right:0; bottom:0; top:var(--sm-hdr-h,72px);
  overflow-y:auto; overflow-x:hidden; background:#fff; z-index:40;
  -webkit-overflow-scrolling:touch;
}
body[data-smp-route="account"] #smAccountRoot.on > .sm-shell,
body[data-smp-route="closet"] #smAccountRoot.on > .sm-shell {
  max-width:none; margin:0; padding:0; background:#fff;
}
body[data-smp-route="account"] #smAccountRoot .sm-topbar,
body[data-smp-route="closet"] #smAccountRoot .sm-topbar { display:none; }
body[data-smp-route] #smBuildBadge { display:none; }

.smp-subnav { border-bottom:1px solid var(--smp-line); background:#fff; }
.smp-subnav-in {
  display:flex; gap:clamp(18px,3vw,38px); align-items:center;
  max-width:var(--smp-max); margin-inline:auto; padding-inline:var(--smp-gutter);
  overflow-x:auto; scrollbar-width:none;
}
.smp-subnav-in::-webkit-scrollbar { display:none; }
.smp-subnav a {
  position:relative; padding:19px 0 16px; white-space:nowrap;
  font-size:14.5px; font-weight:600; color:var(--smp-muted);
}
.smp-subnav a:hover { color:var(--smp-ink); }
.smp-subnav a[aria-current="page"] { color:var(--smp-cobalt); }
.smp-subnav a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--smp-cobalt); border-radius:2px;
}

/* ============================================== ACCOUNT OVERVIEW ========= */
/* padding-BLOCK only: the shorthand here was overriding .smp-wrap's inline gutter
   and pinning the whole page to the viewport edge. */
.smp-account { padding-block:clamp(24px,3vw,38px) clamp(40px,5vw,64px); }
.smp-head {
  display:flex; flex-wrap:wrap; gap:18px 24px; align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.smp-head h1 { font-size:clamp(30px,3.2vw,40px); line-height:1.06; }
.smp-head p { margin-top:6px; font-size:15px; color:var(--smp-muted); }
.smp-actions { display:flex; flex-wrap:wrap; gap:12px; }

.smp-panel { border:1px solid var(--smp-line); border-radius:var(--smp-r); background:#fff; }
.smp-panel > h2 { font-size:21px; padding:20px 22px 0; }

.smp-primary { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(14px,1.6vw,22px); margin-bottom:clamp(14px,1.6vw,22px); }
.smp-ref-in { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:22px; padding:16px 22px 22px; align-items:start; }
.smp-ref-photo {
  display:grid; place-items:center; aspect-ratio:1/1; border-radius:var(--smp-r-s);
  background:var(--smp-mist); overflow:hidden; padding:14px;
}
.smp-ref-photo img { width:100%; height:100%; object-fit:contain; }
.smp-verified {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  padding:6px 11px; border-radius:100px; background:#E7F5EE; color:var(--smp-good);
  font-size:13px; font-weight:600;
}
.smp-verified svg { width:15px; height:15px; }
.smp-partial { background:#FDF2E2; color:var(--smp-warn); }

.smp-mtable td { padding:9px 0; border-bottom:1px solid var(--smp-line-soft); font-size:14.5px; }
.smp-mtable td:first-child { color:var(--smp-ink); }
.smp-mtable td:last-child {
  text-align:right; font-family:var(--smp-mono); font-variant-numeric:tabular-nums;
  color:var(--smp-navy); font-weight:500; white-space:nowrap;
}
.smp-mtable td.smp-nodata { color:var(--smp-muted); font-weight:400; }
.smp-mtable tr:last-child td { border-bottom:0; }
.smp-mhead th {
  padding-bottom:7px; border-bottom:1px solid var(--smp-line); text-align:left;
  font-family:var(--smp-mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--smp-muted);
}
.smp-mhead th:last-child { text-align:right; }

.smp-profile-in { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,38px); padding:18px 22px 22px; align-items:start; }
.smp-ring { position:relative; display:grid; place-items:center; width:150px; height:150px; }
.smp-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.smp-ring .smp-ring-bg { fill:none; stroke:var(--smp-line); stroke-width:9; }
.smp-ring .smp-ring-fg {
  fill:none; stroke:var(--smp-cobalt); stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset .7s var(--smp-ease);
}
.smp-ring b { font-family:var(--smp-disp); font-size:30px; font-weight:600; color:var(--smp-navy); line-height:1; }
.smp-ring small {
  display:block; margin-top:4px; font-family:var(--smp-mono); font-size:11px;
  letter-spacing:.12em; color:var(--smp-muted);
}
.smp-ring-side { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.smp-check { list-style:none; margin:0; padding:0; }
.smp-check li {
  display:flex; align-items:center; gap:13px; padding:13px 0;
  border-bottom:1px solid var(--smp-line-soft); font-size:14.5px;
}
.smp-check li:last-child { border-bottom:0; }
.smp-check .smp-ico-box {
  flex:none; display:grid; place-items:center; width:36px; height:36px;
  border-radius:var(--smp-r-s); background:var(--smp-mist); color:var(--smp-cobalt);
}
.smp-check span { flex:1 1 auto; }
.smp-check .smp-state { display:grid; place-items:center; width:20px; height:20px; flex:none; }
.smp-check .smp-state.on { color:var(--smp-good); }
.smp-check .smp-state.off { color:var(--smp-line); }
.smp-check a { font-size:13.5px; font-weight:600; }

.smp-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); margin-bottom:clamp(14px,1.6vw,22px); }
.smp-card {
  display:block; position:relative; padding:20px 22px 22px; border:1px solid var(--smp-line);
  border-radius:var(--smp-r); background:#fff; color:inherit;
  transition:border-color .16s var(--smp-ease), transform .16s var(--smp-ease);
}
.smp-card:hover { border-color:var(--smp-cobalt); transform:translateY(-2px); }
.smp-card-top { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.smp-card .smp-ico-box {
  flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--smp-r-s); background:var(--smp-mist); color:var(--smp-cobalt);
}
.smp-card h2 { font-size:20px; flex:1 1 auto; }
.smp-card .smp-arrow { color:var(--smp-cobalt); }
.smp-card > p { font-size:14px; color:var(--smp-muted); margin-left:52px; }
.smp-card-body { margin-left:52px; margin-top:12px; }
.smp-thumbs { display:flex; gap:10px; }
.smp-thumbs span {
  display:grid; place-items:center; width:64px; height:76px; padding:5px;
  border:1px solid var(--smp-line); border-radius:var(--smp-r-s);
  background:var(--smp-soft); overflow:hidden;
}
.smp-thumbs img { width:100%; height:100%; object-fit:contain; }
.smp-thumbs .smp-thumb-more { font-family:var(--smp-mono); font-size:12px; color:var(--smp-muted); }
.smp-scores { display:flex; gap:16px; }
.smp-score { text-align:center; }
.smp-score .smp-score-ring { position:relative; display:grid; place-items:center; width:52px; height:52px; }
.smp-score svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.smp-score b { font-family:var(--smp-mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--smp-cobalt); }
.smp-score small { display:block; margin-top:5px; font-size:11.5px; color:var(--smp-muted); max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.smp-lower { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:clamp(14px,1.6vw,22px); align-items:start; }
.smp-resume { padding-bottom:14px; }
.smp-act {
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin:0 22px; padding:14px 0; border-top:1px solid var(--smp-line-soft);
}
.smp-resume .smp-act:first-of-type { border-top:0; }
.smp-act .smp-ico-box {
  flex:none; display:grid; place-items:center; width:42px; height:42px;
  border-radius:var(--smp-r-s); background:var(--smp-mist); color:var(--smp-cobalt);
}
.smp-act-thumbs { display:flex; gap:6px; flex:none; }
.smp-act-thumbs span {
  display:grid; place-items:center; width:46px; height:54px; padding:3px;
  border:1px solid var(--smp-line); border-radius:6px; background:var(--smp-soft); overflow:hidden;
}
.smp-act-thumbs img { width:100%; height:100%; object-fit:contain; }
.smp-act-copy { flex:1 1 190px; min-width:0; }
.smp-act-copy b { display:block; font-size:15px; color:var(--smp-navy); }
.smp-act-copy p { font-size:13.5px; color:var(--smp-muted); margin-top:2px; }
.smp-act-meta { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--smp-muted); }
.smp-act-meta svg { width:16px; height:16px; color:var(--smp-good); }

.smp-private {
  display:flex; gap:16px; align-items:flex-start; padding:24px;
  border-radius:var(--smp-r); background:var(--smp-mist);
}
.smp-private .smp-ico-box {
  flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:#fff; color:var(--smp-navy);
}
.smp-private b { display:block; font-family:var(--smp-disp); font-size:19px; font-weight:600; color:var(--smp-navy); line-height:1.25; }
.smp-private p { margin-top:8px; font-size:13.5px; line-height:1.5; color:#3D5670; }

/* ================================================== MY CLOSET =========== */
.smp-closet { padding-block:clamp(22px,2.6vw,34px) clamp(40px,5vw,64px); }
.smp-closet-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 30px; align-items:start; margin-bottom:22px; }
.smp-closet-head h1 { font-size:clamp(30px,3.4vw,42px); line-height:1.05; }
.smp-closet-head > div > p { margin-top:8px; font-size:15px; color:var(--smp-muted); }
.smp-closet-cta { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.smp-hint { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--smp-muted); }
.smp-hint svg { width:16px; height:16px; flex:none; color:var(--smp-muted); }

.smp-switch { display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.smp-seg { display:flex; border:1px solid var(--smp-line); border-radius:var(--smp-r-s); overflow:hidden; }
.smp-seg button {
  display:flex; align-items:center; gap:9px; min-height:44px; padding:0 26px;
  background:#fff; border:0; border-right:1px solid var(--smp-line);
  font-size:14.5px; font-weight:600; color:var(--smp-ink); cursor:pointer;
  transition:background-color .15s var(--smp-ease), color .15s var(--smp-ease);
}
.smp-seg button:last-child { border-right:0; }
.smp-seg button:hover { background:var(--smp-soft); }
.smp-seg button[aria-selected="true"] { background:var(--smp-cobalt); color:#fff; }
.smp-seg .smp-count {
  min-width:24px; padding:2px 7px; border-radius:100px; background:var(--smp-mist);
  color:var(--smp-cobalt); font-family:var(--smp-mono); font-size:12px;
  font-variant-numeric:tabular-nums;
}
.smp-seg button[aria-selected="true"] .smp-count { background:rgba(255,255,255,.22); color:#fff; }

.smp-toolbar {
  display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center;
  padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--smp-line);
}
.smp-search { position:relative; flex:0 1 300px; min-width:210px; }
.smp-search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--smp-muted); }
.smp-search input {
  width:100%; min-height:44px; padding:0 14px 0 38px;
  border:1px solid var(--smp-line); border-radius:var(--smp-r-s); background:#fff;
  font-size:14.5px;
}
.smp-search input::placeholder { color:#8496A8; }
.smp-search input:focus { border-color:var(--smp-cobalt); outline:none; box-shadow:0 0 0 3px rgba(47,101,245,.14); }
.smp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.smp-chips button {
  min-height:40px; padding:0 16px; border:1px solid var(--smp-line); border-radius:var(--smp-r-s);
  background:#fff; font-size:14px; font-weight:600; color:var(--smp-ink); cursor:pointer;
  transition:background-color .15s var(--smp-ease), border-color .15s var(--smp-ease), color .15s var(--smp-ease);
}
.smp-chips button:hover:not([aria-pressed="true"]) { border-color:var(--smp-cobalt); color:var(--smp-cobalt); }
.smp-chips button[aria-pressed="true"] { background:var(--smp-cobalt); border-color:var(--smp-cobalt); color:#fff; }
.smp-chips button[disabled] { opacity:.4; cursor:not-allowed; }
.smp-sortwrap { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:14px; color:var(--smp-muted); }
.smp-sortwrap select {
  min-height:40px; padding:0 30px 0 12px; border:1px solid var(--smp-line);
  border-radius:var(--smp-r-s); background:#fff
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23617386' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E")
    no-repeat right 9px center / 15px;
  -webkit-appearance:none; appearance:none; font-size:14px; font-weight:600; color:var(--smp-ink); cursor:pointer;
}
.smp-viewtoggle { display:flex; border:1px solid var(--smp-line); border-radius:var(--smp-r-s); overflow:hidden; }
.smp-viewtoggle button {
  display:grid; place-items:center; width:42px; height:40px; border:0; border-right:1px solid var(--smp-line);
  background:#fff; color:var(--smp-muted); cursor:pointer;
}
.smp-viewtoggle button:last-child { border-right:0; }
.smp-viewtoggle button[aria-pressed="true"] { background:var(--smp-cobalt); color:#fff; }

.smp-closet-layout { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:clamp(16px,2vw,26px); align-items:start; }
.smp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:clamp(14px,1.5vw,20px); }
.smp-grid.is-list { grid-template-columns:1fr; }

.smp-gcard {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--smp-line); border-radius:var(--smp-r); background:#fff;
  text-align:left; cursor:pointer; padding:0;
  transition:border-color .16s var(--smp-ease), box-shadow .16s var(--smp-ease);
}
.smp-gcard:hover { border-color:#B9CBE0; }
.smp-gcard[aria-selected="true"] { border-color:var(--smp-cobalt); box-shadow:0 0 0 1px var(--smp-cobalt); }
.smp-gcard .smp-tick {
  position:absolute; top:11px; left:11px; z-index:2; display:none; place-items:center;
  width:24px; height:24px; border-radius:50%; background:var(--smp-cobalt); color:#fff;
}
.smp-gcard[aria-selected="true"] .smp-tick { display:grid; }
.smp-gcard .smp-menu {
  position:absolute; top:9px; right:9px; z-index:2; display:grid; place-items:center;
  width:34px; height:34px; border:0; border-radius:7px; background:rgba(255,255,255,.92);
  color:var(--smp-muted); cursor:pointer;
}
.smp-gcard .smp-menu:hover { background:#fff; color:var(--smp-ink); }
.smp-gphoto { display:grid; place-items:center; aspect-ratio:4/3.4; padding:16px; background:var(--smp-soft); overflow:hidden; }
.smp-gphoto img { width:100%; height:100%; object-fit:contain; }
.smp-gphoto.is-missing { background:var(--smp-mist); gap:12px; align-content:center; text-align:center; padding:20px; }
.smp-gphoto.is-missing .smp-ghost {
  display:grid; place-items:center; width:104px; height:104px; margin-inline:auto;
  border:1.5px dashed #A9C2E8; border-radius:var(--smp-r-s); color:#7FA3DA;
}
.smp-gphoto.is-missing b { display:block; font-family:var(--smp-body); font-size:13.5px; font-weight:600; color:#3D5670; }
.smp-gbody { display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; flex:1 1 auto; }
.smp-kicker { font-family:var(--smp-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--smp-cobalt); }
.smp-kicker.is-quiet { color:var(--smp-muted); }
.smp-gbody h3 { font-size:17px; }
.smp-gbody .smp-brand { font-size:13px; color:var(--smp-muted); margin-top:-4px; }
.smp-gbody .smp-mtable { margin-top:2px; }
.smp-gbody .smp-mtable td { padding:6px 0; font-size:13.5px; }
.smp-gbody .smp-btn { margin-top:auto; }
.smp-gcard.is-row { flex-direction:row; align-items:stretch; }
.smp-gcard.is-row .smp-gphoto { width:150px; flex:none; aspect-ratio:auto; }
.smp-gcard.is-row .smp-gbody { flex:1 1 auto; }
.smp-gcard.is-row .smp-mtable { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.smp-gcard.is-row .smp-mtable tbody { display:contents; }
.smp-gcard.is-row .smp-mtable tr { display:flex; justify-content:space-between; gap:12px; }
.smp-gcard.is-row .smp-mtable td { border-bottom:1px solid var(--smp-line-soft); flex:0 0 auto; }

.smp-menu-pop {
  position:absolute; top:42px; right:9px; z-index:6; min-width:206px; padding:6px;
  border:1px solid var(--smp-line); border-radius:var(--smp-r-s); background:#fff;
  box-shadow:0 14px 34px rgba(6,27,48,.14);
}
.smp-menu-pop button {
  display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:0 10px;
  border:0; border-radius:6px; background:none; font-size:14px; font-weight:500;
  color:var(--smp-ink); text-align:left; cursor:pointer;
}
.smp-menu-pop button:hover { background:var(--smp-soft); }
.smp-menu-pop button svg { color:var(--smp-muted); flex:none; }
.smp-menu-pop button.is-danger { color:var(--smp-danger); }
.smp-menu-pop button.is-danger svg { color:var(--smp-danger); }
.smp-menu-pop button.is-danger:hover { background:#FDF3F2; }

.smp-addcard {
  display:grid; place-items:center; align-content:center; gap:14px; min-height:260px; padding:24px;
  border:1.5px dashed var(--smp-line-strong,#C6D4E1); border-radius:var(--smp-r);
  background:#fff; cursor:pointer; text-align:center;
  transition:border-color .16s var(--smp-ease), background-color .16s var(--smp-ease);
}
.smp-addcard:hover { border-color:var(--smp-cobalt); background:var(--smp-soft); }
.smp-addcard .smp-plus { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--smp-cobalt); color:#fff; }
.smp-addcard b { font-family:var(--smp-disp); font-size:18px; font-weight:600; color:var(--smp-navy); }
.smp-addtypes { display:flex; gap:16px; }
.smp-addtypes span { display:grid; gap:5px; justify-items:center; font-size:11.5px; color:var(--smp-muted); }
.smp-addtypes svg { width:26px; height:26px; color:var(--smp-muted); }

.smp-detail { position:sticky; top:16px; border:1px solid var(--smp-line); border-radius:var(--smp-r); background:var(--smp-soft); overflow:hidden; }
.smp-detail-head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:18px 20px 14px; }
.smp-detail-head h2 { font-size:21px; }
.smp-pill {
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:100px;
  background:#fff; border:1px solid var(--smp-line); font-size:12.5px; font-weight:600; color:var(--smp-muted);
}
.smp-pill svg { width:13px; height:13px; }
.smp-detail-body { display:grid; gap:18px; padding:0 20px 20px; }
.smp-detail-figure { display:grid; place-items:center; padding:10px 14px; border-radius:var(--smp-r-s); background:#fff; border:1px solid var(--smp-line-soft); }
.smp-detail-figure .smp-figure { max-width:100%; }
.smp-detail-figure .smp-diagram { max-height:280px; }
.smp-detail-figure .smp-mlabel { font-size:15px; }
.smp-detail-figure .smp-figure-photo { aspect-ratio:auto; height:300px; }  /* SCAN-LANDMARKS-V1: DEFINITE height. max-height left the <img> height:100%
     resolving to auto, so the photo painted taller than the figure while the SVG
     overlay fitted the figure -- the guides were up to 578px out of place. */
.smp-cat-pill {
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:100px;
  background:var(--smp-mist); color:var(--smp-cobalt); font-size:13.5px; font-weight:600;
}
.smp-cat-pill svg { width:17px; height:17px; }
.smp-detail-body > p { font-size:13.5px; line-height:1.5; color:var(--smp-muted); }
.smp-detail-actions { display:grid; gap:10px; }
.smp-detail-actions .smp-btn { width:100%; }

.smp-empty {
  display:grid; gap:12px; justify-items:start; padding:34px 26px;
  border:1px dashed var(--smp-line); border-radius:var(--smp-r); background:var(--smp-soft);
}
.smp-empty h3 { font-size:19px; }
.smp-empty p { font-size:14px; color:var(--smp-muted); max-width:46ch; }
.smp-empty.is-centered { justify-items:center; text-align:center; }
.smp-error { border-color:#F0C6C2; background:#FDF3F2; }
.smp-error h3, .smp-error p { color:var(--smp-danger); }

.smp-modal {
  position:fixed; inset:0; z-index:2400; display:grid; place-items:center; padding:22px;
  background:rgba(6,27,48,.5); backdrop-filter:blur(2px);
}
.smp-modal-box {
  width:min(460px,100%); padding:26px; border-radius:var(--smp-r); background:#fff;
  box-shadow:0 24px 60px rgba(6,27,48,.28);
}
.smp-modal-box h2 { font-size:22px; margin-bottom:10px; }
.smp-modal-box p { font-size:14.5px; line-height:1.55; color:var(--smp-muted); margin-bottom:20px; }

.smp-skel { border-radius:var(--smp-r); background:linear-gradient(100deg,#F1F5FA 30%,#E7EEF7 50%,#F1F5FA 70%); background-size:220% 100%; animation:smpSkel 1.15s linear infinite; }
@keyframes smpSkel { from { background-position:180% 0; } to { background-position:-20% 0; } }
@media (prefers-reduced-motion:reduce) { .smp-skel { animation:none; } }

/* ------------------------------------------------------- saved outfits --- */
.smp-outfits-head { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.smp-outfits-head h2 { font-size:25px; }
.smp-outfits-head p { margin-top:6px; font-size:14px; color:var(--smp-muted); }
.smp-ogrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:clamp(14px,1.6vw,20px); }
.smp-ocard { display:flex; flex-direction:column; border:1px solid var(--smp-line); border-radius:var(--smp-r); background:#fff; overflow:hidden; }
.smp-ocard[data-focus="true"] { border-color:var(--smp-cobalt); box-shadow:0 0 0 1px var(--smp-cobalt); }
.smp-ostage { display:flex; gap:10px; justify-content:center; padding:18px; background:var(--smp-soft); min-height:172px; }
.smp-opiece { position:relative; display:grid; place-items:center; flex:1 1 0; min-width:0; max-width:132px; }
.smp-opiece img { width:100%; height:100%; max-height:136px; object-fit:contain; }
.smp-opiece .smp-olock { position:absolute; top:0; right:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--smp-cobalt); color:#fff; }
.smp-opiece .smp-olock svg { width:13px; height:13px; }
.smp-opiece.is-gone {
  align-content:center; gap:8px; padding:10px; text-align:center;
  border:1.5px dashed var(--smp-line); border-radius:var(--smp-r-s); background:#fff;
  font-size:12px; line-height:1.35; color:var(--smp-muted);
}
.smp-obody { display:flex; flex-direction:column; gap:9px; padding:15px 17px 17px; flex:1 1 auto; }
.smp-obody h3 { font-size:17px; }
.smp-obody h3 input {
  width:100%; padding:5px 8px; border:1px solid var(--smp-cobalt); border-radius:6px;
  font-family:var(--smp-disp); font-size:17px; font-weight:600; color:var(--smp-navy);
}
.smp-ometa { font-size:13px; color:var(--smp-muted); }
.smp-olocks { display:flex; flex-wrap:wrap; gap:6px; }
.smp-olocks span {
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:100px;
  background:var(--smp-mist); color:var(--smp-cobalt); font-size:11.5px; font-weight:600;
}
.smp-olocks span svg { width:12px; height:12px; }
.smp-olocks span.is-none { background:var(--smp-soft); color:var(--smp-muted); }
.smp-oactions { display:flex; flex-wrap:nowrap; gap:8px; margin-top:auto; padding-top:4px; }
.smp-oactions .smp-btn { min-width:0; padding:0 11px; }
.smp-oactions .smp-btn-danger { flex:0 0 auto; width:40px; padding:0; }
.smp-oactions .smp-btn { flex:1 1 auto; }
.smp-oactions .smp-btn-danger { flex:0 0 auto; }

.smp-scope {
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:100px;
  font-size:12.5px; font-weight:600;
}
.smp-scope[data-scope="account"] { background:#E7F5EE; color:var(--smp-good); }
.smp-scope[data-scope="device"] { background:#FDF2E2; color:var(--smp-warn); }
.smp-scope svg { width:14px; height:14px; }

/* ------------------------------------------------------------ responsive - */
@media (max-width:1180px) {
  .smp-primary, .smp-lower { grid-template-columns:1fr; }
  .smp-closet-layout { grid-template-columns:1fr; }
  .smp-detail { position:static; }
}
@media (max-width:1024px) {
  .smp-hero { grid-template-columns:1fr; }
  .smp-hero-copy { padding:34px var(--smp-gutter) 30px; }
  .smp-hero-figure { min-height:320px; padding:26px var(--smp-gutter) 42px; }
  .smp-measure-grid { grid-template-columns:1fr; }
  .smp-poms { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .smp-cards { grid-template-columns:1fr; }
  .smp-steps { grid-template-columns:1fr; gap:2px; }
  .smp-steps li + li { border-left:0; border-top:1px solid var(--smp-line-soft); padding-left:0; padding-top:14px; margin-top:8px; }
  .smp-closet-head { grid-template-columns:1fr; }
  .smp-closet-cta { align-items:flex-start; }
}
@media (max-width:760px) {
  .smp { font-size:15px; }
  #smAccountRoot.smp-shell { top:var(--sm-hdr-h,116px); }
  .smp-ref-in { grid-template-columns:1fr; }
  .smp-profile-in { grid-template-columns:1fr; justify-items:start; }
  .smp-poms { grid-template-columns:1fr; }
  .smp-head, .smp-outfits-head { align-items:flex-start; }
  .smp-actions .smp-btn, .smp-closet-cta .smp-btn { flex:1 1 auto; }
  .smp-toolbar { gap:12px; }
  .smp-search { flex:1 1 100%; }
  .smp-sortwrap { margin-left:0; }
  .smp-chips { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .smp-viewtoggle { display:none; }
  .smp-grid { grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); }
  .smp-gcard.is-row { flex-direction:column; }
  .smp-gcard.is-row .smp-gphoto { width:auto; aspect-ratio:4/3.4; }
  .smp-gcard.is-row .smp-mtable { grid-template-columns:1fr; }
  .smp-trust b { font-size:17px; }
  .smp-tabs { width:100%; }
  .smp-tabs button { flex:1 1 0; min-width:0; padding:0 8px; justify-content:center; }
  .smp-tabs button span { display:none; }
  .smp-tabrow .smp-tabnote { max-width:none; }
}
@media (max-width:430px) {
  .smp-grid { grid-template-columns:1fr; }
  .smp-ogrid { grid-template-columns:1fr; }
  .smp-hero-copy h1 { font-size:clamp(30px,9vw,38px); }
}

/* ============================================================================
   ACCOUNT-V2 — My matches (#/account/matches) and Settings (#/account/settings)

   NO NEW DESIGN SYSTEM. Every colour, face, radius and easing below is read from
   the `.smp` tokens already declared at the top of this file, which are the tokens
   the handoff's visual system specifies: white canvas, navy #061B30 type, cobalt
   #2F65F5 for state and navigation, accessible coral #FF624F reserved for the primary action,
   pale blue #EAF2FF for supporting surfaces, Fraunces / Karla / DM Mono, hairline
   cool-grey rules, 8-12px radii, ~1400px of content. Buttons, chips, the segmented
   tab control, the search field, the sort select, the skeletons, the empty state and
   the outfit card are all the SHIPPED components; only the parts that genuinely did
   not exist are written here.

   ELEVATION IS DECLARED ONCE. Cards carry a hairline border and no shadow. The only
   shadows on either page belong to the save bar and the delete dialog, because those
   are the only two things that actually float above the content they talk about.
   ========================================================================== */

/* Status line, shared by both pages. It is a live region, so it reserves its own row
   rather than shifting the layout underneath the reader when it changes. */
.smp-status {
  min-height:22px; margin-top:14px; font-size:14px; color:var(--smp-muted);
  display:flex; align-items:center; gap:8px;
}
.smp-status[data-state="ok"] { color:var(--smp-good); font-weight:600; }
.smp-status[data-state="error"] { color:var(--smp-danger); font-weight:600; }
.smp-status:empty { min-height:0; margin-top:0; }

/* ------------------------------------------------------------- MY MATCHES */
.smp-mx-head {
  display:flex; gap:28px; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; padding:clamp(30px,4vw,46px) 0 clamp(20px,2.4vw,28px);
}
.smp-mx-head h1 { font-size:clamp(30px,3.5vw,44px); line-height:1.06; }
.smp-mx-head > div > p:last-child { margin-top:11px; max-width:56ch; color:var(--smp-muted); }

/* THE SUMMARY STRIP IS A SPEC SHEET, NOT A ROW OF STAT CARDS.
   This product's whole subject is measured numbers on a page, so these three counts are
   set the way it sets every other number: DM Mono, tabular, on the pale-blue supporting
   surface, divided by the same hairline rules the measurement tables use. One panel with
   dividers, not three floating cards, which is what makes it read as an instrument. */
.smp-mx-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--smp-mist); border:1px solid #D6E4FB; border-radius:var(--smp-r);
  overflow:hidden;
}
.smp-mx-stats > div {
  padding:18px 22px; display:flex; flex-direction:column; gap:2px;
  border-left:1px solid #D6E4FB;
}
.smp-mx-stats > div:first-child { border-left:0; }
.smp-mx-stats b {
  font-family:var(--smp-mono); font-variant-numeric:tabular-nums;
  font-size:27px; font-weight:500; color:var(--smp-navy); letter-spacing:-.02em;
}
.smp-mx-stats span { font-size:13px; color:#41618C; }

.smp-mx-tabs { margin-top:22px; width:max-content; max-width:100%; }
.smp-mx-panel { padding:22px 0 clamp(48px,7vw,88px); }
.smp-scope-note {
  display:flex; align-items:center; gap:8px; margin-top:14px;
  padding:10px 14px; border-radius:var(--smp-r-s);
  background:#FDF2E2; color:var(--smp-warn); font-size:13.5px;
}
.smp-scope-note svg { flex:none; }
.smp-mx-grid { grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); }
.smp-mx-grid.is-outfits { grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); }

/* Product card. The same anatomy as the discovery page's card, so a product you saved
   still looks like the thing you saved: image, the engine's score when it gives one,
   name, brand, price, one line of truthful context, two actions. */
.smp-pcard {
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--smp-line); border-radius:var(--smp-r); overflow:hidden;
  transition:border-color .16s var(--smp-ease);
}
.smp-pcard:hover { border-color:#B9CEEA; }
.smp-pcard-img {
  position:relative; display:grid; place-items:center; width:100%; padding:0;
  aspect-ratio:4/4.4; background:var(--smp-soft); border:0;
  border-bottom:1px solid var(--smp-line-soft); cursor:pointer; overflow:hidden;
}
.smp-pcard-img img { width:100%; height:100%; object-fit:contain; padding:10px; }
.smp-pcard-img.is-gone, .smp-pcard .smp-nophoto {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--smp-muted); font-size:13px; text-align:center; cursor:default;
}
.smp-score {
  position:absolute; top:10px; left:10px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--smp-cobalt); color:#fff;
}
.smp-score b { font-size:15px; font-weight:500; line-height:1; }
.smp-score i {
  font-style:normal; font-size:7.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.88;
}
.smp-lockflag {
  position:absolute; top:10px; right:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px; background:var(--smp-navy); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.smp-pcard-body { display:flex; flex-direction:column; gap:7px; padding:14px 15px 15px; flex:1; }
.smp-pcard-body h3 {
  font-family:var(--smp-body); font-size:14.5px; font-weight:700; line-height:1.32;
  color:var(--smp-navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.smp-pcard-meta { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.smp-pcard-meta span {
  font-family:var(--smp-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--smp-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.smp-pcard-meta strong { font-size:15px; color:var(--smp-navy); }
.smp-pcard-context {
  display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--smp-muted);
}
.smp-pcard-context svg { flex:none; width:13px; height:13px; }
.smp-pcard-actions { display:flex; gap:8px; margin-top:auto; padding-top:10px; }
.smp-pcard-actions .smp-btn { flex:1 1 0; min-width:0; }
.smp-pcard.is-gone { background:var(--smp-soft); }
.smp-pcard.is-gone h3 { color:var(--smp-muted); }

/* --------------------------------------------------------------- SETTINGS */
.smp-set-head { padding:clamp(30px,4vw,46px) 0 clamp(22px,2.6vw,30px); max-width:62ch; }
.smp-set-head h1 { font-size:clamp(30px,3.5vw,44px); line-height:1.06; }
.smp-set-head > p:last-child { margin-top:11px; color:var(--smp-muted); }

.smp-set-layout {
  display:grid; grid-template-columns:216px minmax(0,1fr); gap:clamp(24px,3vw,52px);
  align-items:start; padding-bottom:clamp(96px,10vw,140px);
}
.smp-set-index { position:sticky; top:calc(var(--sm-hdr-h,116px) + 74px); display:grid; gap:2px; }
.smp-set-index a {
  padding:8px 12px; border-radius:var(--smp-r-s); border-left:2px solid transparent;
  font-size:14px; color:var(--smp-muted);
  transition:color .16s var(--smp-ease), background-color .16s var(--smp-ease);
}
.smp-set-index a:hover { color:var(--smp-ink); background:var(--smp-soft); }
.smp-set-index a[aria-current="true"] {
  color:var(--smp-cobalt); font-weight:600; border-left-color:var(--smp-cobalt); background:var(--smp-mist);
}

.smp-set-stack { display:grid; gap:18px; }
.smp-set-card {
  background:#fff; border:1px solid var(--smp-line); border-radius:var(--smp-r);
  padding:clamp(20px,2.4vw,28px); scroll-margin-top:calc(var(--sm-hdr-h,116px) + 90px);
}
.smp-set-card h2 { font-size:20px; }
.smp-set-sub {
  display:flex; align-items:flex-start; gap:8px;
  margin-top:8px; color:var(--smp-muted); font-size:14px; max-width:64ch;
}
.smp-set-sub svg { flex:none; margin-top:2px; color:var(--smp-cobalt); }
.smp-set-note {
  display:flex; align-items:flex-start; gap:8px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--smp-line-soft);
  font-size:13px; color:var(--smp-muted); max-width:64ch;
}
.smp-set-note svg { flex:none; margin-top:1px; color:var(--smp-muted); }

.smp-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.smp-field-grid label, .smp-range { display:grid; gap:6px; }
.smp-field-grid span, .smp-range > span, .smp-choice legend {
  font-size:12.5px; font-weight:600; color:var(--smp-ink);
}
.smp-field-grid input {
  height:44px; padding:0 13px; border:1px solid var(--smp-line); border-radius:var(--smp-r-s);
  background:#fff; color:var(--smp-navy); font-size:14.5px;
  transition:border-color .16s var(--smp-ease), box-shadow .16s var(--smp-ease);
}
.smp-field-grid input:focus {
  border-color:var(--smp-cobalt); outline:none; box-shadow:0 0 0 3px rgba(47,101,245,.14);
}
/* A read-only field must LOOK unavailable, or the page is lying about what it can do. */
.smp-field-grid input[readonly] {
  background:var(--smp-soft); color:#5C7186; cursor:default; border-style:dashed;
}

.smp-choice { border:0; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:9px; }
.smp-choice legend { padding:0; margin-bottom:9px; float:left; width:100%; }
.smp-choice label {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border:1px solid var(--smp-line); border-radius:999px;
  font-size:14px; cursor:pointer;
  transition:border-color .16s var(--smp-ease), background-color .16s var(--smp-ease), color .16s var(--smp-ease);
}
.smp-choice label:hover { border-color:var(--smp-cobalt); color:var(--smp-cobalt); }
.smp-choice input { accent-color:var(--smp-cobalt); width:15px; height:15px; margin:0; }
.smp-choice label:has(input:checked) {
  border-color:var(--smp-cobalt); background:var(--smp-mist); color:var(--smp-cobalt-dark); font-weight:600;
}
.smp-choice label:has(input:focus-visible) { outline:2px solid var(--smp-cobalt); outline-offset:2px; }
.smp-choice .smp-set-note { width:100%; }

.smp-range { margin-top:22px; }
.smp-range > span { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.smp-range output { font-size:15px; font-weight:500; color:var(--smp-cobalt-dark); }
.smp-range input[type="range"] { width:100%; accent-color:var(--smp-cobalt); height:22px; }
.smp-range small { font-size:12.5px; color:var(--smp-muted); }

.smp-switch-row, .smp-action-row {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--smp-line-soft);
}
.smp-switch-row span, .smp-action-row span { display:grid; gap:3px; min-width:0; }
.smp-switch-row b, .smp-action-row b { font-size:14.5px; font-weight:700; color:var(--smp-navy); }
.smp-switch-row small, .smp-action-row small { font-size:13px; color:var(--smp-muted); max-width:56ch; }
.smp-switch-row input[role="switch"] {
  appearance:none; -webkit-appearance:none; flex:none; position:relative;
  width:46px; height:27px; border-radius:999px;
  background:#C6D3E1; border:0; cursor:pointer; transition:background-color .18s var(--smp-ease);
}
.smp-switch-row input[role="switch"]::after {
  content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(6,27,48,.3); transition:transform .18s var(--smp-ease);
}
.smp-switch-row input[role="switch"]:checked { background:var(--smp-cobalt); }
.smp-switch-row input[role="switch"]:checked::after { transform:translateX(19px); }
.smp-switch-row input[role="switch"]:focus-visible { outline:2px solid var(--smp-cobalt); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .smp-switch-row input[role="switch"],
  .smp-switch-row input[role="switch"]::after { transition:none; }
}
.smp-action-row.is-danger b { color:var(--smp-danger); }

/* The save bar exists only while there is something to save. */
.smp-savebar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);
  background:var(--smp-navy); color:#fff; font-size:14.5px;
  box-shadow:0 -10px 30px rgba(6,27,48,.22);
  animation:smpBarUp .18s var(--smp-ease) both;
}
.smp-savebar[hidden] { display:none; }
.smp-savebar > div { display:flex; gap:10px; margin-left:auto; }
.smp-savebar .smp-btn-quiet { background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.smp-savebar .smp-btn-quiet:hover { border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }
@keyframes smpBarUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .smp-savebar { animation:none; } }

/* Delete confirmation. A modal is the right call here and only here: the action is
   irreversible, and it needs protected focus plus a typed confirmation to reach. */
.smp-modal { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; }
.smp-modal[hidden] { display:none; }
.smp-modal-scrim { position:absolute; inset:0; background:rgba(6,27,48,.52); }
.smp-modal-box {
  position:relative; width:min(460px,100%); background:#fff; border-radius:var(--smp-r);
  padding:clamp(22px,3vw,30px); box-shadow:0 24px 60px rgba(6,27,48,.3);
}
.smp-modal-box h2 { font-size:22px; color:var(--smp-danger); }
.smp-modal-box > p { margin-top:10px; color:var(--smp-muted); font-size:14px; }
.smp-del-field { display:grid; gap:6px; margin-top:18px; }
.smp-del-field span { font-size:12.5px; font-weight:600; }
.smp-del-field input {
  height:44px; padding:0 13px; border:1px solid var(--smp-line); border-radius:var(--smp-r-s);
  font-family:var(--smp-mono); letter-spacing:.08em; text-transform:uppercase;
}
.smp-del-field input:focus {
  border-color:var(--smp-danger); outline:none; box-shadow:0 0 0 3px rgba(199,55,47,.16);
}
.smp-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.smp-modal-actions .smp-btn-danger[disabled] { opacity:.45; cursor:not-allowed; }
.smp-modal-actions .smp-btn-danger:not([disabled]) { background:var(--smp-danger); color:#fff; }

@media (max-width:1040px) {
  .smp-set-layout { grid-template-columns:1fr; }
  /* A sticky column for five cards is not worth a full-width column, so the index
     becomes a scrollable row above them. */
  .smp-set-index {
    position:static; display:flex; gap:6px; overflow-x:auto; padding-bottom:6px;
    border-bottom:1px solid var(--smp-line); margin-bottom:4px;
  }
  .smp-set-index a {
    white-space:nowrap; border-left:0; border-bottom:2px solid transparent; border-radius:0;
  }
  .smp-set-index a[aria-current="true"] { background:transparent; border-bottom-color:var(--smp-cobalt); }
}
@media (max-width:760px) {
  .smp-mx-head, .smp-set-head { padding-top:26px; }
  .smp-mx-head { align-items:flex-start; }
  .smp-mx-head .smp-btn { width:100%; }
  .smp-mx-stats > div { padding:14px 15px; }
  .smp-mx-stats b { font-size:22px; }
  .smp-mx-tabs { width:100%; }
  .smp-mx-tabs button { flex:1 1 0; min-width:0; padding:0 9px; justify-content:center; font-size:13px; }
  .smp-mx-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .smp-field-grid { grid-template-columns:1fr; }
  .smp-switch-row, .smp-action-row { flex-direction:column; align-items:flex-start; gap:12px; }
  .smp-action-row .smp-btn { width:100%; }
  .smp-savebar { padding:12px 16px; }
  .smp-savebar > div { width:100%; margin-left:0; }
  .smp-savebar .smp-btn { flex:1 1 0; }
}
@media (max-width:430px) {
  .smp-mx-grid, .smp-mx-grid.is-outfits { grid-template-columns:1fr; }
  .smp-mx-stats { grid-template-columns:1fr; }
  .smp-mx-stats > div { border-left:0; border-top:1px solid #D6E4FB; }
  .smp-mx-stats > div:first-child { border-top:0; }
  .smp-pcard-actions { flex-direction:column; }
}

/* ACCOUNT-V2: the account panel sits BELOW the global header, on white.
   #smAccountRoot is `position:fixed; inset:0; background:var(--paper)`, so before this the
   four rebuilt account routes covered the entire viewport in beige - the header was gone,
   which is why the top navigation was unreachable from an account page, and the beige is
   the ground visible in the handoff's "observed old settings" defect screenshot. The
   existing `#smAccountRoot.smp-shell` rule in the 760px block below already assumed this;
   it just never had anything to match, because no code added the class. */
#smAccountRoot.smp-shell {
  top:var(--sm-hdr-h,116px);
  background:#fff;
  overscroll-behavior:contain;
}
/* The header is the app's, not the panel's: it must stay above the fixed panel and it must
   stay clickable, which is the acceptance test "top Matches works from every account page". */
body[data-smp-route] header.topbar { position:relative; z-index:1200; }

/* --------------------------------------------------------------------------
   THREE FIXES FOUND BY DRIVING THE REAL PAGE. Kept together and explained,
   because each one is a trap that will be walked into again.
   -------------------------------------------------------------------------- */

/* 1. `[hidden]` LOSES TO `display:flex`. The UA rule for [hidden] is `display:none`, and
   any author rule setting display beats it on specificity. So `el.hidden = true` on a
   flex element does nothing at all: the "Saved on this device" banner stayed on screen
   for a signed-in user, and the search toolbar stayed visible on the Saved outfits tab
   where it filters nothing. Every element this file hides in JS needs its own [hidden]. */
.smp-scope-note[hidden],
.smp-toolbar[hidden],
.smp-chips[hidden],
.smp-status[hidden] { display:none !important; }

/* 2. THE ACCOUNT PANEL IS NOT A 960px COLUMN. `.sm-shell` caps the panel's contents at
   960px, which is the "microscopic centered column" the handoff rules out: on a 1440
   screen the rebuilt pages had 916px of content and 524px of empty margin. The shipped
   `.smp-wrap` already targets 1400px; it just never got the room. Scoped to the routes
   sm-pages owns so login, signup and the survey keep the narrow measure they want. */
body[data-smp-route] #smAccountRoot > .sm-shell {
  max-width:none;
  padding:0 0 80px;
}

/* 3. The panel scrolls itself (it is fixed), so its content needs the bottom clearance
   the save bar would otherwise cover. */
body[data-smp-route="settings"] #smAccountRoot > .sm-shell { padding-bottom:104px; }

/* --------------------------------------------------------------------------
   VISUAL QA, from reading the rendered pages rather than the source.
   -------------------------------------------------------------------------- */

/* 1. CONTRAST FAILURE ON EVERY ANCHOR-SHAPED BUTTON. `.smp a { color:cobalt }` is (0,1,1)
   and `.smp-btn-primary { color:#fff }` is (0,1,0), so the link rule won and every
   <a class="smp-btn smp-btn-primary"> rendered cobalt text on coral: about 1.6:1, well
   under the 4.5:1 floor, and it made the one coral action on the page look disabled.
   A button is a button whichever element it is made of. */
.smp a.smp-btn-primary, .smp a.smp-btn-cobalt { color:#fff; }
.smp a.smp-btn-outline { color:var(--smp-cobalt); }
.smp a.smp-btn-quiet { color:var(--smp-ink); }
.smp a.smp-btn-danger { color:var(--smp-danger); }
.smp a.smp-btn-danger:hover { color:#fff; }

/* 2. "Sort by" broke onto two lines and pushed the select out of alignment. It is a
   two-word label, not a paragraph. */
.smp-sortwrap label { white-space:nowrap; }

/* 3. DM Mono slashes its zero, which is right for a code sample and wrong for a count:
   "0 saved items" read as a null symbol. Off for the summary strip only; the measurement
   tables keep the mono defaults they were designed with. */
.smp-mx-stats b { font-feature-settings:"zero" 0, "ss01" 0; font-variant-numeric:tabular-nums; }

/* 4. The library hero's action sat level with the last line of the lede, which put it
   below the optical centre of the block. Align it to the heading instead. */
@media (min-width:900px) {
  .smp-mx-head { align-items:center; }
  .smp-mx-head > div { flex:1 1 520px; }
}

/* The active settings-index link was cobalt #2F65F5 on pale blue #EAF2FF: 4.33:1, just
   under the 4.5 floor for 14px text. The darker cobalt already in the token set clears it
   at 5.4:1 and is the same hue, so nothing about the palette changes. */
.smp-set-index a[aria-current="true"] { color:var(--smp-cobalt-dark); }

/* The count badge on the segmented tabs missed AA at 12px in both states: cobalt on pale
   blue was 4.33:1, and white on the 22%-white wash over cobalt composited to 3.35:1. Same
   two colours, moved one step: the darker cobalt on the unselected badge, and a navy wash
   instead of a white one on the selected badge so white text has something to sit on.
   This is the shipped segmented control, so My closet gets the same correction. */
.smp-seg .smp-count { color:var(--smp-cobalt-dark); }
.smp-seg button[aria-selected="true"] .smp-count { background:rgba(6,27,48,.34); color:#fff; }