/* =========================================
   Sizing V2 – Apple HIG Design System
   ========================================= */

.sizing-v2 {
  --u-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --u-text: #1c1c1e;
  --u-text-secondary: rgba(60, 60, 67, 0.6);
  --u-text-tertiary: rgba(60, 60, 67, 0.4);
  --u-accent: #00d1b2;
  --u-accent-hover: #00b89c;
  /* The accent's own hue, dark enough to be text. The accent itself is 1.8:1 on --u-bg and
     cannot carry a word; this is 4.9:1 there and 5.3:1 on --u-surface, so the recommended size
     can wear one colour everywhere: as the pill's fill on a row, as this in the panel. */
  --u-accent-deep: #007a67;
  --u-bg: #f5f5f7;
  --u-surface: #fff;
  --u-separator: rgba(60, 60, 67, 0.12);
  --u-separator-light: rgba(60, 60, 67, 0.06);
  --u-success: #248a3d;
  --u-success-bg: rgba(52, 199, 89, 0.15);
  --u-radius: 12px;
  --u-radius-sm: 10px;
  --u-transition: 150ms ease;
  --u-spacing-xs: 0.25rem;
  --u-spacing-sm: 0.5rem;
  --u-spacing-md: 1rem;
  --u-spacing-lg: 1.5rem;
  --u-spacing-xl: 2rem;
  font-family: var(--u-font);
  color: var(--u-text);
  line-height: 1.5;
}

.sizing-v2 *, .sizing-v2 *::before, .sizing-v2 *::after { box-sizing: border-box; }

/* === Page layout === */
.u-widget {
  max-width: 600px;
  margin: 0 auto;
}

/* === Card === */
.u-card {
  background: var(--u-surface);
  border-radius: var(--u-radius);
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.04),
    0 1px 2px rgba(0,0,0,0.02),
    0 4px 12px rgba(0,0,0,0.04),
    0 16px 40px rgba(0,0,0,0.06);
  overflow: hidden;
}

.u-section {
  padding: var(--u-spacing-xl) var(--u-spacing-xl);
}

.u-section.u-section-flush {
  padding-top: 0;
  padding-bottom: var(--u-spacing-md);
}

.u-divider {
  height: 1px;
  background: var(--u-separator);
}

.u-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u-text-secondary);
  margin-bottom: var(--u-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--u-spacing-sm);
}

.u-badge-official {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--u-success);
  background: var(--u-success-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

/*
 * A brand-wide chart is still the brand's own, so it keeps a badge. It is the less specific of
 * the two, so it is muted rather than green.
 */
.u-badge-official.is-brandwide {
  color: var(--u-text-secondary);
  background: var(--u-surface-alt, rgba(60, 60, 67, 0.08));
}

/* A badge you can press to find out what it means. */
.u-badge-btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  margin-left: 4px;
}

.u-badge-btn:hover,
.u-badge-btn:focus-visible {
  filter: brightness(0.94);
}

.u-badge-guide {
  display: flex;
  flex-direction: column;
  gap: var(--u-spacing-md);
  padding: var(--u-spacing-md) 0;
}

.u-badge-guide-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--u-spacing-sm);
  border-radius: 8px;
}

/* The badge that was pressed, so the reader lands on the one they asked about. */
.u-badge-guide-row.is-active {
  background: rgba(60, 60, 67, 0.05);
}

.u-badge-guide-text {
  font-size: 0.8125rem;
  color: var(--u-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Chart summary (Apple: summarize the main takeaway) */
.u-chart-summary {
  font-size: 0.75rem;
  color: var(--u-text-secondary);
  margin-top: var(--u-spacing-md);
  margin-bottom: var(--u-spacing-md);
  line-height: 1.4;
  text-align: center;
}

/* === Chips (your shoes) === */
.u-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--u-bg);
  border: none;
  border-radius: 980px;
  padding: 8px 10px 8px 16px;
  font-size: 0.9375rem;
  transition: background var(--u-transition);
  /* A chip never runs past the row; the name gives way first, see .u-chip-size. */
  max-width: 100%;
}

.u-chip:hover { background: #ebebf0; }

.u-chip-name {
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-chip-size {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  /* The size is the answer, so it keeps its width and stays on one line when the chip is tight. */
  flex-shrink: 0;
  white-space: nowrap;
}

.u-chip-remove {
  background: none;
  border: none;
  color: rgba(60, 60, 67, 0.3);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--u-transition);
}

.u-chip-remove:hover { color: rgba(60, 60, 67, 0.8); }
.u-chip-foot { background: #fef7ed; }
.u-chip-foot:hover { background: #fdf0db; }

/* "+ Shoe" and "+ Foot" wrap together, never one without the other. */
.u-rack-adds {
  display: flex;
  gap: 8px;
}

.u-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px dashed rgba(60, 60, 67, 0.2);
  border-radius: 980px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #1c1c1e;
  cursor: pointer;
  transition: all var(--u-transition);
}

.u-add-btn {
  position: relative;
  overflow: hidden;
}

.u-add-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0, 209, 178, 0.06) 45%,
    rgba(0, 209, 178, 0.12) 50%,
    rgba(0, 209, 178, 0.06) 55%,
    transparent 70%
  );
  transition: none;
  pointer-events: none;
}

.u-add-btn:hover::after {
  animation: u-sweep 0.6s linear;
}

@keyframes u-sweep {
  from { left: -100%; }
  to { left: 200%; }
}

/* Particles */
.u-particle {
  position: fixed;
  border-radius: 50%;
  background: #00d1b2;
  opacity: 0.7;
  pointer-events: none;
  z-index: 9999;
  animation: u-particle-fly 0.6s ease-out forwards;
}

@keyframes u-particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* === The follow-up ===
   Asked once, above the rack, and dismissible in a press. It has to be noticeable enough to
   answer and quiet enough not to be the first thing anyone sees. */
.u-followup {
  position: relative;
  margin: var(--u-spacing-md) var(--u-spacing-lg) 0;
  padding: var(--u-spacing-lg);
  background: var(--u-bg);
  border-radius: var(--u-radius);
}

.u-followup-question {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-text);
}

.u-followup-shoe {
  font-size: 0.8125rem;
  color: var(--u-text-secondary);
  margin-top: 2px;
}

.u-followup-actions {
  display: flex;
  gap: var(--u-spacing-sm);
  margin-top: var(--u-spacing-md);
}

.u-followup-yes,
.u-followup-no {
  flex: 1;
  border: 1px solid var(--u-separator);
  background: var(--u-surface);
  font-family: var(--u-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  padding: 9px 12px;
  border-radius: var(--u-radius-sm);
  cursor: pointer;
}

/* The affirmative is the one worth making easy to hit, since it is the one that carries data. */
.u-followup-yes {
  border-color: transparent;
  background: var(--u-accent);
  color: #fff;
}

.u-followup-yes:hover { filter: brightness(0.96); }
.u-followup-no:hover { border-color: rgba(60, 60, 67, 0.24); }

/* Waving it away has to be as easy as answering, or the next one gets ignored instead. */
.u-followup-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: none;
  color: var(--u-text-tertiary);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 6px;
}

.u-followup-dismiss:hover,
.u-followup-dismiss:focus-visible {
  color: var(--u-text-secondary);
  background: rgba(60, 60, 67, 0.08);
}

/* The happy one. Buying the shoe is the moment the tool was for, so it gets confetti rather
   than the six mint dots that mark saving something: several colours, squares as well as
   circles, thrown up and allowed to fall with a spin. */
.u-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  border-radius: 2px;
  animation: u-confetti-fly 1.1s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}

.u-confetti.is-round {
  border-radius: 50%;
}

@keyframes u-confetti-fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.6);
    opacity: 1;
  }
  35% {
    transform: translate(calc(var(--dx) * 0.7), var(--dy)) rotate(calc(var(--rot) * 0.4)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + var(--fall))) rotate(var(--rot)) scale(0.9);
    opacity: 0;
  }
}

/* Nobody needs a shower of paper to be told their answer landed. */
@media (prefers-reduced-motion: reduce) {
  .u-confetti { animation: u-particle-fly 0.4s ease-out forwards; }
}

/* The two thumbs sit in the bar above the name, small and quiet, because everything in this
   panel is ours to get wrong: the size, the chart under it, the colourway in the title. They are
   an entry point rather than the answer: either one opens the view where the real questions are. */
.u-verdict {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Keeps them off the bin, which is the one irreversible button in this bar. */
.u-details-bar-divider {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--u-separator);
}

.u-verdict-btn {
  border: 0;
  background: none;
  color: var(--u-text-tertiary);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.u-verdict-btn:hover,
.u-verdict-btn:focus-visible {
  color: var(--u-text);
  background: var(--u-bg);
}

/* An open question, said the same way the row says it: the row carries an orange dot, and these
   are what answers it. Without this the dot pointed at a panel that gave no sign of where the
   question had gone, since it lives under these two now.

   The glow is on the glyph, not on the button. A box-shadow lit the button's rectangle, which
   drew a box nobody had asked about; a drop-shadow follows the drawn edge of the thumb itself. */
.u-verdict.is-asking .u-verdict-btn {
  color: #ff9500;
}

.u-verdict.is-asking .u-verdict-btn svg {
  animation: u-verdict-glow 1.8s ease-in-out infinite;
}

.u-verdict.is-asking .u-verdict-btn:hover svg,
.u-verdict.is-asking .u-verdict-btn:focus-visible svg {
  animation: none;
  filter: drop-shadow(0 0 3px rgba(255, 149, 0, 0.9));
}

@keyframes u-verdict-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 149, 0, 0)); }
  50% { filter: drop-shadow(0 0 4px rgba(255, 149, 0, 0.95)); }
}

/* Once answered, the thumbs give way to what they said, which is still a way back in. */
.u-verdict-answered {
  border: 0;
  background: var(--u-bg);
  color: var(--u-text-secondary);
  font-family: var(--u-font);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-verdict-answered:hover { color: var(--u-text); }

/* Reasons stack rather than sit in a row: they are sentences, not sizes, and a reader picks the
   one that is theirs by reading down. */
.u-reasons {
  display: flex;
  flex-direction: column;
  gap: var(--u-spacing-sm);
  margin-top: var(--u-spacing-sm);
}

.u-reason {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--u-separator);
  border-radius: var(--u-radius-sm);
  background: var(--u-surface);
  font-family: var(--u-font);
  font-size: 0.9375rem;
  color: var(--u-text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.u-reason:hover { border-color: rgba(60, 60, 67, 0.24); }

.u-reason.is-active {
  border-color: var(--u-accent);
  color: var(--u-text);
  font-weight: 600;
}

.u-reason-note {
  width: 100%;
  margin-top: var(--u-spacing-sm);
  padding: 11px 14px;
  border: 1px solid var(--u-separator);
  border-radius: var(--u-radius-sm);
  background: var(--u-surface);
  font-family: var(--u-font);
  font-size: 0.9375rem;
  color: var(--u-text);
  resize: vertical;
}

.u-reason-note:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 1px; }

/* The size they own, asked where they said they own it. Chips rather than a dropdown, because
   this is a shoe's own size run and there are rarely more than a dozen. */
.u-reason-label {
  margin-top: var(--u-spacing-lg);
  color: var(--u-text-secondary);
  font-size: 0.9375rem;
}

.u-size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u-spacing-sm);
  margin-top: var(--u-spacing-sm);
}

.u-size-chip {
  padding: 8px 14px;
  border: 1px solid var(--u-separator);
  border-radius: 999px;
  background: var(--u-surface);
  font-family: var(--u-font);
  font-size: 0.875rem;
  color: var(--u-text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.u-size-chip:hover { border-color: rgba(60, 60, 67, 0.24); }

.u-size-chip.is-active {
  border-color: var(--u-accent);
  color: var(--u-text);
  font-weight: 600;
}

.u-success-message {
  max-width: 28ch;
  text-align: center;
  color: var(--u-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* The panel clips rather than scrolls, so this view carries its own scroll and keeps the
   button where a thumb can reach it on a phone. */
.u-feedback-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.u-feedback-foot {
  padding: var(--u-spacing-md) var(--u-spacing-lg) var(--u-spacing-lg);
  border-top: 1px solid var(--u-separator-light);
  background: var(--u-bg);
}

.u-feedback-submit {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--u-radius-sm);
  background: var(--u-accent);
  color: #fff;
  font-family: var(--u-font);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.u-feedback-submit:disabled {
  background: var(--u-separator);
  color: var(--u-text-tertiary);
  cursor: default;
}

.u-feedback-submit:not(:disabled):hover { filter: brightness(0.96); }

.u-fit-error {
  margin-top: var(--u-spacing-sm);
  color: #d7263d;
  font-size: 0.8125rem;
  text-align: center;
}

/* Saying a shoe was bought sits with removing it: the two things you can say about a shoe you
   were shown, one kept and one not. */
.u-details-bought {
  border: 0;
  background: none;
  color: var(--u-text-secondary);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 8px;
}

.u-details-bought:hover,
.u-details-bought:focus-visible {
  color: var(--u-success);
  background: var(--u-success-bg);
}

.u-particle-red {
  background: #ff3b30;
  animation: u-particle-fly 0.4s ease-out forwards;
}

.u-add-btn:hover {
  border-color: rgba(60, 60, 67, 0.35);
  color: var(--u-text);
}

.u-add-btn.u-pulse {
  animation: u-breathe 3s ease-in-out infinite;
}

.u-add-btn.u-pulse:hover { animation: none; }

@keyframes u-breathe {
  0%, 100% { border-color: rgba(60, 60, 67, 0.12); box-shadow: 0 0 0 0 rgba(0, 209, 178, 0); }
  50% { border-color: rgba(0, 209, 178, 0.4); box-shadow: 0 0 12px 2px rgba(0, 209, 178, 0.15); }
}

.u-empty-hint {
  font-size: 1rem;
  color: var(--u-text-tertiary);
  width: 100%;
}

/* === Target rows === */
.u-target-row {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  border-bottom: 1px solid var(--u-separator-light);
}

.u-target-row:last-of-type { border-bottom: none; }

.u-target-row-info { flex: 1; min-width: 0; }

.u-target-row-name {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The brand and the model are two facts, not one long one. The brand is set back so the model,
   which is what tells one row from the next, is what the eye lands on. */
.u-shoe-brand {
  font-weight: 500;
  color: var(--u-text-secondary);
}

/* Unless it is all we have, in which case it is the name. */
.u-shoe-brand.is-alone {
  font-weight: 600;
  color: inherit;
}

.u-shoe-model {
  font-weight: 600;
  color: inherit;
}

.u-target-row-variant {
  font-size: 0.8125rem;
  color: rgba(60, 60, 67, 0.5);
}

/* What the size rests on, so the row answers "why" without opening anything. */
.u-target-row-basis {
  font-size: 0.75rem;
  color: rgba(60, 60, 67, 0.45);
  margin-top: 2px;
}

/* The orange dot in words, as small as the line above it. The dot's own orange is too light to
   read as text on white, so the words take a darker shade of it. The padding makes it a 24px
   tap target on a phone, and the negative margins take it back out of the layout, so a slightly
   missed tap still opens the question rather than the row's ordinary panel. */
.u-target-row-ask {
  display: block;
  margin-block: -2px -4px;
  padding: 4px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: #a85a00;
  text-align: left;
  cursor: pointer;
}

.u-target-row-ask:hover,
.u-target-row-ask:focus-visible {
  text-decoration: underline;
}

.u-target-row-size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 56px;
  justify-content: center;
  background: var(--u-accent);
  color: #fff;
  border-radius: 980px;
  padding: 4px 12px;
  transition: background var(--u-transition);
}

.u-target-row-expand:hover .u-target-row-size { background: var(--u-accent-hover); }

/* The blue of the offers dot, so the bag and the Offers tab it opens read as the same thing. */
.u-buy-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 5px;
  border-radius: 50%;
  font: inherit;
  font-size: 0.75rem;
  color: #007aff;
  cursor: pointer;
  transition: color var(--u-transition), background var(--u-transition), transform var(--u-transition);
}

/* The same bag on the Offers tab, so the tab the bag opens is recognisably the one it promised. */
.u-tab-bag {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 5px;
  color: #007aff;
}

/* Inside the size pill, where the offers dot used to be. Pulled into the pill's padding so the
   pill keeps its height. */
.u-target-row-size .u-buy-link { position: relative; margin: -5px 0 -5px -6px; }

/* The bag is drawn at 24px, too small to hit with a thumb, so an invisible area around it takes
   the tap: 44px square, the size Apple asks for. It grows up, down and to the left, into the
   pill's padding, the row's padding and the empty gap before the pill, and to the right only as
   far as the gap before the size. The size is the answer and a tap on it opens Sizing, so the
   bag may not take any of it, even at the cost of a target that sits off-centre on the bag.
   On phones the left 16px are 8px of pill padding and the row's whole 8px gap, so the area ends
   exactly where the shoe name begins. Less pill padding, a smaller bag margin or a narrower
   mobile gap would let the bag take taps meant for the name. */
.u-target-row-size .u-buy-link::before {
  content: '';
  position: absolute;
  inset: -10px -4px -10px -16px;
}

/* On the pill a white circle, since a tint of blue disappears into the green. */
.u-target-row-size .u-buy-link:hover,
.u-target-row-size .u-buy-link:focus-visible { background: #fff; }

/* Hovering the bag is not hovering the row: the row stays still, so only the bag answers. */
.u-target-row-expand:has(.u-buy-link:hover) { background: transparent; }
.u-target-row-expand:has(.u-buy-link:hover) .u-target-row-size { background: var(--u-accent); }
.u-target-row-expand:has(.u-buy-link:hover) .u-row-chevron { color: rgba(60, 60, 67, 0.3); }

/* A tinted circle behind the bag, so it reads as a button of its own and not as part of the row. */
.u-buy-link:hover,
.u-buy-link:focus-visible {
  color: #0062cc;
  background: rgba(0, 122, 255, 0.12);
  transform: scale(1.1);
  outline: none;
}

/* Quiet on purpose: the size is the answer, the shops come after it. */
.u-fade-in { animation: u-fade-in 200ms ease-out; }
@keyframes u-fade-in { from { opacity: 0; } to { opacity: 1; } }

/*
 * The disclosure chevron sits on the row, not inside the size pill. Inside the pill it read as
 * part of the size; on the row it says the row opens, which is what it is for.
 */
.u-row-chevron {
  flex-shrink: 0;
  color: rgba(60, 60, 67, 0.3);
}

.u-target-row-expand { cursor: pointer; }
.u-target-row-expand:hover .u-row-chevron { color: rgba(60, 60, 67, 0.55); }

.u-target-row-size.pending { background: rgba(60, 60, 67, 0.08); color: rgba(60, 60, 67, 0.2); }
.u-target-row-size.u-recalc { opacity: 0.55; }
.u-pill-spinner { width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: u-spin 0.6s linear infinite; }

.u-target-row-price {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  flex-shrink: 0;
}

/* iOS disclosure chevron */
.u-chevron {
  color: rgba(60, 60, 67, 0.25);
  font-size: 1.25rem;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
  transition: color var(--u-transition);
}

.u-target-row-expand:hover .u-chevron { color: rgba(60, 60, 67, 0.5); }

.u-target-row-expand {
  cursor: pointer;
  padding: var(--u-spacing-md) var(--u-spacing-xl);
  margin: 0 calc(-1 * var(--u-spacing-xl));
  transition: background var(--u-transition);
}

.u-target-row-expand:hover { background: rgba(60, 60, 67, 0.06); }

.u-target-row.u-glint {
  position: relative;
  overflow: hidden;
}

.u-target-row.u-glint::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0, 209, 178, 0.06) 45%,
    rgba(0, 209, 178, 0.12) 50%,
    rgba(0, 209, 178, 0.06) 55%,
    transparent 70%
  );
  pointer-events: none;
  animation: u-sweep 0.6s linear;
}

/* Expanded detail */
.u-target-detail {
  padding: var(--u-spacing-md) 0 var(--u-spacing-sm);
  border-bottom: 1px solid var(--u-separator-light);
}

.u-target-detail-offers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.u-mini-offer {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  padding: 6px 10px;
  background: var(--u-bg);
  border-radius: var(--u-radius-sm);
  font-size: 0.8125rem;
}

.u-mini-offer-retailer { flex: 1; font-weight: 500; }
.u-mini-offer-price { font-weight: 600; }

.u-mini-offer-sizes { display: flex; gap: 3px; }

.u-mini-offer-size {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(60, 60, 67, 0.08);
  color: rgba(60, 60, 67, 0.5);
}

.u-mini-offer-size.match {
  background: var(--u-success-bg);
  color: var(--u-success);
}

/* === Buttons === */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 980px;
  padding: 0 1.5rem;
  height: 2.5em;
  cursor: pointer;
  transition: all var(--u-transition);
}

.u-btn:hover { opacity: 0.8; }
.u-btn-primary { background: var(--u-accent); color: #fff; }
.u-btn-primary:hover { opacity: 1; background: var(--u-accent-hover); }

.u-btn-secondary {
  background: rgba(60, 60, 67, 0.06);
  color: var(--u-text);
  border: 1px solid rgba(60, 60, 67, 0.15);
}

.u-btn-secondary:hover { opacity: 1; border-color: rgba(60, 60, 67, 0.3); }
.u-btn-sm { height: 32px; font-size: 0.8125rem; padding: 0 1rem; }

/* === Disclosure toggles === */
.u-more-offers-toggle,
.u-details-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(60, 60, 67, 0.5);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--u-transition);
}

.u-more-offers-toggle:hover,
.u-details-toggle:hover { color: var(--u-text); }

.u-more-arrow,
.u-details-arrow {
  font-size: 0.625rem;
  transition: transform 200ms ease;
}

.u-more-offers-toggle.open .u-more-arrow,
.u-details-toggle.open .u-details-arrow { transform: rotate(180deg); }

.u-offers-list,
.u-details-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
  overflow: hidden;
}

.u-offers-list.open,
.u-details-panel.open { grid-template-rows: 1fr; }

.u-offers-inner,
.u-details-inner { overflow: hidden; }

.u-details-content { padding-top: var(--u-spacing-lg); }

.u-offer-row {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  padding: var(--u-spacing-sm) 0;
  border-top: 1px solid var(--u-separator);
}

.u-offer-name { flex: 1; min-width: 0; }

.u-offer-name-text {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-offer-retailer-text {
  font-size: 0.75rem;
  color: rgba(60, 60, 67, 0.5);
}

.u-offer-price {
  font-size: 0.9375rem;
  font-weight: 700;
  flex-shrink: 0;
}

.u-offer-sizes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }

.u-offer-size {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(60, 60, 67, 0.08);
  color: rgba(60, 60, 67, 0.5);
}

.u-offer-size.match {
  background: var(--u-success-bg);
  color: var(--u-success);
}

/* === Timeline / Heatmap === */
/* Chart card (Apple Health/Fitness style) */
.u-timeline-wrapper {
  background: var(--u-surface);
  border-radius: var(--u-radius);
  padding: var(--u-spacing-md);
  margin-bottom: var(--u-spacing-md);
}

.u-timeline-viewport {
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* Anything half in view reads as half in view. The strip pans, so the size at either edge is
     cut somewhere through its own label, and "EU 44" cut in half reads as EU 4. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.u-timeline-viewport.u-grabbing { cursor: grabbing; }
.u-timeline-slider { position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* Grid lines — Apple: minimal, light, ~4 lines max */
.u-tick-marks {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 20px;
  z-index: 2;
  pointer-events: none;
}

.u-tick {
  position: absolute;
  width: 1px;
  background: rgba(60, 60, 67, 0.08);
  top: 0; bottom: 0;
}

/* Size labels — clean, muted, recommended stands out */
.u-size-labels { position: relative; height: 32px; display: flex; }

.u-size-label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(60, 60, 67, 0.35);
  /* A label never spills past its own band. One bad row in a chart squeezes every other size
     into a sliver, and text that overflowed printed straight through its neighbours. */
  overflow: hidden;
  white-space: nowrap;
}

/* The recommended size wears the accent, as it does on the row. Green here means a brand's own
   chart (see .u-badge-official, right above this timeline), and this size is our answer, not
   the brand's. */
.u-size-label.recommended {
  color: var(--u-accent-deep);
  font-weight: 700;
  font-size: 0.875rem;
}

/* Track line */
.u-track-area { position: relative; height: 1px; }
.u-track { position: absolute; top: 0; height: 1px; background: rgba(60, 60, 67, 0.12); }
.u-track-ext { position: absolute; top: 0; height: 0; border-top: 1.5px dashed rgba(255, 59, 48, 0.25); }
.u-mm-ext { color: rgba(255, 59, 48, 0.4); }

/* Heatmap — taller bars, softer radius (Apple bar chart style) */
.u-heatmap { position: relative; height: 16px; margin: var(--u-spacing-xs) 0; }

.u-heat-seg {
  position: absolute;
  height: 100%;
  background: var(--u-accent);
  border-radius: 6px;
  transition: opacity var(--u-transition);
}

.u-heat-zone {
  position: absolute;
  height: 100%;
  z-index: 3;
  cursor: pointer;
}

.u-heat-zone-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: var(--u-accent);
  border-radius: 6px;
  opacity: 0;
  transition: opacity var(--u-transition);
}

.u-heat-zone:hover .u-heat-zone-bar,
.u-heat-zone.active .u-heat-zone-bar { opacity: 0.8; }

/* Tooltip — Apple-style pill */
.u-heat-zone-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--u-text);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--u-transition);
}

.u-heat-zone:hover .u-heat-zone-label,
.u-heat-zone.active .u-heat-zone-label { opacity: 1; }

.u-heatmap.highlighting .u-heat-seg { opacity: 0.12 !important; }

/* Axis labels — Apple: minimal, only key values, muted */
.u-mm-labels {
  position: relative;
  height: 20px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--u-text-tertiary);
}

.u-mm-label {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Foot marker */
.u-foot-marker {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  bottom: 32px;
  transform: translate(-50%, 50%);
}

.u-foot-dot {
  width: 10px;
  height: 10px;
  background: var(--u-text);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--u-surface);
}

.u-foot-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--u-text);
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity var(--u-transition);
  pointer-events: none;
}

.u-foot-marker:hover .u-foot-label,
.u-foot-marker.hovered .u-foot-label { opacity: 1; }

/* Data points */
.u-chart-divider {
  height: 1px;
  background: var(--u-separator-light);
  margin: var(--u-spacing-md) calc(-1 * var(--u-spacing-md)) 0;
}

.u-datapoints {
  margin: 0 calc(-1 * var(--u-spacing-md));
  margin-bottom: calc(-1 * var(--u-spacing-md));
}

.u-datapoint:last-child { border-bottom: none; }

.u-datapoint {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  padding: var(--u-spacing-md);
  font-size: 1rem;
  border-bottom: 1px solid var(--u-separator-light);
  cursor: pointer;
  transition: background var(--u-transition);
}

.u-datapoint:last-child { border-bottom: none; }
.u-datapoint:hover,
.u-datapoint.highlighted { background: rgba(60, 60, 67, 0.06); }
.u-dp-active { background: rgba(0, 199, 164, 0.08); }
.u-dp-active .u-dp-name { color: var(--u-accent); }

.u-dp-name { font-weight: 500; flex: 1; }
.u-dp-range { font-size: 0.8125rem; color: rgba(60, 60, 67, 0.5); }

/* Recently viewed */
.u-recent { padding: var(--u-spacing-sm) var(--u-spacing-xl) var(--u-spacing-md); }

.u-recent-label {
  font-size: 0.75rem;
  color: var(--u-text-tertiary);
  margin-bottom: var(--u-spacing-sm);
}

.u-recent-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.u-recent-chip {
  background: none;
  border: 1px solid rgba(60, 60, 67, 0.15);
  border-radius: 980px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--u-text-secondary);
  cursor: pointer;
  transition: all var(--u-transition);
}

.u-recent-chip:hover {
  border-color: rgba(60, 60, 67, 0.4);
  color: var(--u-text);
}

/* === Modal === */
/* The page stays put behind an open panel, however the wheel or a thumb lands: on a panel too
   short to scroll, or on the backdrop, nothing else would stop it. The gutter keeps the page from
   shifting sideways as its scrollbar goes. */
html:has(.u-modal-overlay.active) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.u-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.u-modal-overlay.active { display: flex; }

.u-modal {
  background: var(--u-bg);
  border-radius: var(--u-radius);
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.04),
    0 8px 40px rgba(0,0,0,0.15),
    0 24px 60px rgba(0,0,0,0.1);
  width: 90%;
  max-width: 600px;
  height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.u-modal.u-modal-auto { height: auto; }

/*
 * The shoe panel, opened wide. See #984.
 *
 * 600px is the right column on a phone and a fifth of a laptop, and the timeline shows literally
 * less in it: it draws a fixed number of pixels per millimetre, so a narrower panel is a shorter
 * stretch of the size chart. Off by default, so nobody's layout changes without them asking.
 */
.u-modal.is-wide {
  max-width: min(1080px, 94vw);
  height: min(88vh, 960px);
}

/*
 * Width is for the chart, not for the prose.
 *
 * The timeline and the offers list have more to show the wider they get. A paragraph does not:
 * at 1080px the explanation under the chart runs to about 150 characters a line, which is past
 * the point where the eye loses its place coming back to the left edge.
 */
.u-modal.is-wide .u-chart-summary,
.u-modal.is-wide .u-community-summary,
.u-modal.is-wide .p-proj-off {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

.u-details-wide {
  background: none;
  border: none;
  padding: 4px;
  /* Sits in the cluster on the right, so it needs air between it and the thumbs beside it. */
  margin-right: var(--u-spacing-sm);
  cursor: pointer;
  color: var(--u-text-tertiary);
  display: flex;
  align-items: center;
  transition: color var(--u-transition);
}

.u-details-wide:hover { color: var(--u-text-secondary); }

/*
 * Hidden where there is nothing to grow into. Below this the panel is already as wide as the
 * screen, and a control that promises more room and delivers none is worse than no control.
 */
@media (max-width: 900px) {
  .u-details-wide { display: none; }
  .u-modal.is-wide { max-width: 600px; height: 70vh; }
}

.u-modal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--u-separator);
  flex-shrink: 0;
}

.u-modal-bar-title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.u-modal-back {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-accent);
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--u-transition);
}

.u-modal-back:hover { opacity: 0.7; }

.u-modal-back-icon {
  background: none;
  border: none;
  color: rgba(60, 60, 67, 0.35);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--u-transition);
}

.u-modal-back-icon:hover { color: rgba(60, 60, 67, 0.6); }

.u-modal-search {
  flex: 1;
  font-family: var(--u-font);
  border: none;
  background: var(--u-surface);
  border-radius: var(--u-radius-sm);
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--u-text);
}

.u-modal-search:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.4);
}

.u-modal-search::placeholder { color: rgba(60, 60, 67, 0.35); }

.u-modal-close {
  background: rgba(60, 60, 67, 0.08);
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.875rem;
  color: rgba(60, 60, 67, 0.6);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--u-transition);
}

.u-modal-close:hover { background: rgba(60, 60, 67, 0.15); }

.u-modal-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
  scrollbar-width: none;
}

.u-modal-list::-webkit-scrollbar { display: none; }

.u-modal-option {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--u-separator-light);
  padding: var(--u-spacing-md) 16px;
  text-align: left;
  font-family: var(--u-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--u-text);
  cursor: pointer;
  transition: background var(--u-transition);
}

.u-modal-option .u-chevron { margin-left: auto; }
.u-add-icon {
  color: rgba(60, 60, 67, 0.35);
  font-size: 1.125rem;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1;
}

.u-modal-option .u-add-icon { margin-left: auto; }

.u-modal-option:last-child { border-bottom: none; }
.u-modal-option:hover { background: rgba(60, 60, 67, 0.06); }

.u-modal-option-idk {
  color: var(--u-text-secondary);
  font-style: italic;
  font-weight: 400;
}

/* Request brand/model empty state */
.u-request-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 3rem var(--u-spacing-xl);
  text-align: center;
  gap: var(--u-spacing-sm);
}

.u-request-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-text);
}

.u-request-subtext {
  font-size: 0.875rem;
  color: var(--u-text-secondary);
  margin-bottom: var(--u-spacing-sm);
}

.u-request-comment {
  font-family: var(--u-font);
  font-size: 0.875rem;
  color: var(--u-text);
  background: var(--u-bg);
  border: 1px solid var(--u-separator);
  border-radius: var(--u-radius-sm);
  padding: 10px 12px;
  width: 100%;
  max-width: 280px;
  resize: none;
  transition: border-color var(--u-transition), box-shadow var(--u-transition);
  line-height: 1.4;
}

.u-request-comment:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.2);
}

.u-request-comment::placeholder {
  color: var(--u-text-tertiary);
}

.u-request-btn {
  font-family: var(--u-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--u-accent);
  border: none;
  border-radius: 980px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background var(--u-transition);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-spacing-sm);
}

.u-request-btn:hover { background: var(--u-accent-hover); }

.u-missing-size {
  text-align: center;
  margin-top: var(--u-spacing-md);
  padding-top: var(--u-spacing-lg);
}

.u-no-matches {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-spacing-md);
  padding: 2.5rem var(--u-spacing-lg) var(--u-spacing-lg);
  text-align: center;
}

.u-no-matches-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--u-text);
}

.u-no-matches-sub {
  font-size: 0.8125rem;
  color: var(--u-text-tertiary);
  max-width: 280px;
  line-height: 1.4;
}

.u-no-matches-btn {
  margin-top: var(--u-spacing-xs);
}

.u-missing-size-link {
  font-family: var(--u-font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--u-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--u-transition);
}

.u-missing-size-link:hover {
  color: var(--u-accent);
}

.u-request-note {
  font-size: 0.8125rem;
  color: var(--u-text-tertiary);
  max-width: 260px;
  line-height: 1.4;
}
.u-request-btn:disabled { opacity: 0.7; cursor: default; }

.u-request-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-spacing-md);
  max-width: 280px;
}

.u-request-success .u-request-subtext {
  margin-bottom: var(--u-spacing-sm);
}

.u-request-done {
  font-family: var(--u-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 24px;
  border-radius: 980px;
  transition: background var(--u-transition);
}

.u-request-done:hover {
  background: rgba(0, 209, 178, 0.08);
}

.u-spinner-sm {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: u-spin 0.6s linear infinite;
}

/* Size selector (inside modal) */
.u-size-tabs {
  display: flex;
  background: var(--u-bg);
  border-radius: var(--u-radius-sm);
  padding: 3px;
  margin-bottom: var(--u-spacing-lg);
}

.u-size-tab {
  flex: 1;
  border: none;
  border-radius: 8px;
  font-family: var(--u-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  padding: 6px 12px;
  background: none;
  cursor: pointer;
  transition: all var(--u-transition);
}

.u-size-tab.active {
  background: var(--u-surface);
  color: var(--u-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.u-size-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.u-size-btn {
  font-family: var(--u-font);
  border: none;
  background: var(--u-bg);
  border-radius: var(--u-radius-sm);
  padding: 12px 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--u-text);
  cursor: pointer;
  transition: background var(--u-transition);
}

.u-size-btn:hover { background: rgba(0, 209, 178, 0.08); }

/* Foot measurement modal (Apple alert style) */
.u-foot-modal { max-width: 340px; text-align: center; }

.u-foot-header {
  padding: var(--u-spacing-lg) var(--u-spacing-xl) var(--u-spacing-sm);
}

.u-foot-title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.u-foot-subtitle {
  font-size: 0.8125rem;
  color: var(--u-text-secondary);
  margin-top: 4px;
}

.u-foot-form {
  padding: var(--u-spacing-sm) var(--u-spacing-xl) var(--u-spacing-md);
}

.u-foot-input-group {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-sm);
}

.u-foot-input {
  font-family: var(--u-font);
  border: none;
  background: var(--u-surface);
  border-radius: var(--u-radius-sm);
  font-size: 1.25rem;
  font-weight: 500;
  padding: 12px 16px;
  flex: 1;
  color: var(--u-text);
  text-align: center;
}

.u-foot-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.3);
}

.u-foot-unit {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--u-text-secondary);
}

.u-foot-help {
  padding: 0 var(--u-spacing-lg) var(--u-spacing-md);
}

.u-foot-help-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--u-text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--u-transition);
}

.u-foot-help-link:hover {
  color: var(--u-accent);
}

.u-foot-actions {
  border-top: 1px solid var(--u-separator-light);
}

.u-foot-save {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-bottom: 1px solid var(--u-separator-light);
  background: none;
  font-family: var(--u-font);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--u-accent);
  cursor: pointer;
  transition: background var(--u-transition);
}

.u-foot-save:hover { background: rgba(60, 60, 67, 0.06); }

.u-foot-cancel {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  background: none;
  font-family: var(--u-font);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--u-accent);
  cursor: pointer;
  transition: background var(--u-transition);
  border-radius: 0 0 var(--u-radius) var(--u-radius);
}

.u-foot-cancel:hover { background: rgba(60, 60, 67, 0.06); }

/* Size selector (shared.js class names) */
.selector-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  margin-bottom: var(--u-spacing-sm);
}

.size-tabs {
  display: flex;
  background: rgba(60, 60, 67, 0.08);
  border-radius: var(--u-radius-sm);
  padding: 3px;
  margin-bottom: var(--u-spacing-lg);
}

.size-tab {
  flex: 1;
  border: none;
  border-radius: 8px;
  font-family: var(--u-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  padding: 6px 12px;
  background: none;
  cursor: pointer;
  transition: all var(--u-transition);
}

.size-tab.active {
  background: var(--u-surface);
  color: var(--u-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--u-font);
  border: none;
  background: var(--u-surface);
  border-radius: var(--u-radius-sm);
  padding: 12px 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--u-text);
  cursor: pointer;
  transition: background var(--u-transition);
}

.size-btn:hover {
  background: rgba(0, 209, 178, 0.08);
}

/* Details modal */
/* Shoe header with close button */
/* Details navigation bar */
.u-details-bar {
  display: flex;
  align-items: center;
  padding: var(--u-spacing-sm) var(--u-spacing-md);
  flex-shrink: 0;
}

.u-details-back {
  background: none;
  border: none;
  color: rgba(60, 60, 67, 0.35);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--u-transition);
}

.u-details-back:hover { opacity: 0.7; }

.u-details-delete {
  background: none;
  border: none;
  color: #ff3b30;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--u-transition);
}

.u-details-delete:hover { opacity: 0.7; }

/* Details title */
.u-details-header {
  padding: 0 var(--u-spacing-xl) var(--u-spacing-md);
  text-align: center;
  flex-shrink: 0;
}

/* Segmented control bar */
.u-details-tabs {
  padding: 0 var(--u-spacing-xl) var(--u-spacing-md);
  flex-shrink: 0;
}

.u-segmented {
  display: flex;
  background: rgba(60, 60, 67, 0.08);
  border-radius: var(--u-radius-sm);
  padding: 3px;
}

.u-segmented-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 8px;
  font-family: var(--u-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  padding: 7px 12px;
  background: none;
  cursor: pointer;
  transition: all var(--u-transition);
}

.u-segmented-btn.active {
  background: var(--u-surface);
  color: var(--u-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.u-details-header-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.u-details-header-variant {
  font-size: 0.875rem;
  color: var(--u-text-secondary);
  margin-top: 2px;
}

.u-details-header-size {
  display: inline-block;
  margin-top: var(--u-spacing-sm);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--u-accent-deep);
}

/* Details tab content */
.u-details-tab {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--u-spacing-xl) var(--u-spacing-xl);
  scrollbar-width: none;
}

.u-details-tab::-webkit-scrollbar { display: none; }

/* Offer rows in details */
.u-detail-offer {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  padding: var(--u-spacing-md) var(--u-spacing-xl);
  margin: 0 calc(-1 * var(--u-spacing-xl));
  border-bottom: 1px solid var(--u-separator-light);
  text-decoration: none;
  color: var(--u-text);
  cursor: pointer;
  transition: background var(--u-transition);
}

.u-detail-offer:last-child { border-bottom: none; }
.u-detail-offer:hover { background: rgba(60, 60, 67, 0.06); }

.u-detail-offer-info {
  flex: 1;
  min-width: 0;
}

/*
 * Two lines before it gives up. The colourway is what tells one offer from the next and it comes
 * last in the name, so a single line cut exactly that off on a phone.
 */
.u-detail-offer-product {
  font-size: 0.9375rem;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.u-detail-offer-retailer {
  font-size: 0.8125rem;
  color: var(--u-text-secondary);
}

/* Teal like the price beside it rather than green, which already means the size fits. */
.u-detail-offer-colour {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #00796b;
  background: rgba(0, 209, 178, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: var(--u-spacing-xs);
  vertical-align: 1px;
}

.u-detail-offer-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.u-detail-offer-size {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(60, 60, 67, 0.08);
  color: rgba(60, 60, 67, 0.5);
}

.u-detail-offer-size.match {
  background: var(--u-success-bg);
  color: var(--u-success);
}

.u-detail-offer-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--u-accent);
  color: #fff;
  border-radius: 980px;
  padding: 4px 12px;
  transition: background var(--u-transition);
}

.u-external-icon { flex-shrink: 0; }

.u-detail-offer:hover .u-detail-offer-price { background: var(--u-accent-hover); }

.u-detail-offer.unavailable { opacity: 0.55; }

.u-detail-offer-miss {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--u-text-tertiary);
  margin-left: var(--u-spacing-sm);
}

/* The affiliate disclosure under the offers: a footnote in the quiet secondary style, with the
   link told apart by its underline like .u-chart-open-link. The last offer keeps its separator
   (it is no longer :last-child), which sets the footnote off from the list. */
.u-detail-offer-disclosure {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--u-text-secondary);
  margin-top: var(--u-spacing-md);
}

.u-detail-offer-disclosure a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(60, 60, 67, 0.25);
}

.u-detail-offer-disclosure a:hover {
  color: var(--u-text);
  text-decoration-color: currentColor;
}

/* Loading */
.u-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.u-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(60, 60, 67, 0.12);
  border-top-color: rgba(60, 60, 67, 0.5);
  border-radius: 50%;
  animation: u-spin 0.6s linear infinite;
}

@keyframes u-spin { to { transform: rotate(360deg); } }

/* The note that says a chart was left out, and what decided it */
.u-chart-audience-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: var(--u-spacing-md) var(--u-spacing-md) 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--u-text-secondary);
}

.u-chart-audience-switch {
  font-family: var(--u-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Error state */
.u-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--u-spacing-xl);
  text-align: center;
  gap: var(--u-spacing-md);
}

.u-error-message {
  font-size: 0.9375rem;
  color: var(--u-text-secondary);
}

.u-error-retry {
  font-family: var(--u-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 980px;
  transition: background var(--u-transition);
}

.u-error-retry:hover {
  background: rgba(0, 209, 178, 0.08);
}

/* Community section */
/*
 * The community's own row in the size chart, under the reader's shoes. See #964.
 *
 * Blue, where the reader's own shoes are green: whose foot a mark belongs to is the whole point of
 * drawing both on one axis, and the teal already means "the brand published this".
 */
.u-community-row {
  position: relative;
  height: 12px;
  margin-top: 4px;
}

/*
 * One band per size, covering the span that size occupies, so a mark sits under its own size label
 * and lines up with the reader's shoe above it. A size is a span, and drawing it as a point left a
 * reader working out which column a dot belonged to.
 *
 * The shade carries the count: a band is drawn at what that many translucent layers would have
 * composited to, so a popular size is dark and the extremes stay pale. The alpha is set inline
 * because only the script knows how many owners there are.
 */
.u-community-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: rgba(47, 111, 237, 0.22);
}

.u-community-section {
  margin-bottom: var(--u-spacing-lg);
}

.u-community-card {
  background: var(--u-surface);
  border-radius: var(--u-radius);
  padding: var(--u-spacing-md);
}

.u-community-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-community-rec-label {
  font-size: 0.875rem;
  color: var(--u-text-secondary);
}

.u-community-rec-size {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--u-success);
}

/*
 * What the community size rests on, said under it. See #918.
 *
 * Quiet on purpose: the sample size is context for the number above, not a second number
 * competing with it.
 */
.u-community-rest {
  font-size: 0.75rem;
  color: var(--u-text-secondary);
  margin-top: var(--u-spacing-xs);
  line-height: 1.4;
}

.u-community-weight {
  white-space: nowrap;
  color: var(--u-text-tertiary);
}

.u-community-weight::before {
  content: "\00b7";
  margin: 0 0.35em;
}


/*
 * Community-reported sizes must never wear the colour reserved for a brand's own chart. Stated
 * after .u-badge-official so it wins when a badge carries both, which it does now that the badge
 * is a button and shares the button styling.
 */
.u-badge-official.u-badge-crowd {
  color: #007aff;
  background: rgba(0, 122, 255, 0.1);
}

.u-badge-crowdsourced {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #007aff;
  background: rgba(0, 122, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.u-community-summary {
  font-size: 0.75rem;
  color: var(--u-text-secondary);
  margin-top: var(--u-spacing-md);
  line-height: 1.4;
  text-align: center;
}

/* Skeleton loading placeholder */
.u-skeleton {
  padding: var(--u-spacing-xl);
}

.u-skeleton-line {
  height: 14px;
  background: rgba(60, 60, 67, 0.06);
  border-radius: 7px;
  margin-bottom: var(--u-spacing-md);
  animation: u-shimmer-bg 1.5s ease-in-out infinite;
}

.u-skeleton-chips {
  display: flex;
  gap: 8px;
  margin-bottom: var(--u-spacing-lg);
}

.u-skeleton-chip {
  width: 140px;
  height: 36px;
  background: rgba(60, 60, 67, 0.06);
  border-radius: 980px;
  animation: u-shimmer-bg 1.5s ease-in-out infinite;
}

.u-skeleton-divider {
  height: 1px;
  background: rgba(60, 60, 67, 0.06);
  margin-bottom: var(--u-spacing-lg);
}

.u-skeleton-row {
  height: 48px;
  background: rgba(60, 60, 67, 0.04);
  border-radius: var(--u-radius-sm);
  animation: u-shimmer-bg 1.5s ease-in-out infinite;
}

@keyframes u-shimmer-bg {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Success tick animation */
.u-success-tick {
  width: 52px;
  height: 52px;
}

.u-success-tick svg {
  width: 100%;
  height: 100%;
}

.u-tick-circle {
  fill: none;
  stroke: var(--u-accent);
  stroke-width: 2.5;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: u-tick-circle-draw 0.4s ease-out forwards;
}

.u-tick-check {
  fill: none;
  stroke: var(--u-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: u-tick-check-draw 0.3s ease-out 0.3s forwards;
}

@keyframes u-tick-circle-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes u-tick-check-draw {
  to { stroke-dashoffset: 0; }
}


/* Mobile */
@media (max-width: 600px) {
  .sizing-v2 { padding: 0; }

  /* Card goes edge-to-edge */
  .u-widget { max-width: 100%; }

  .u-card { border-radius: var(--u-radius-sm); }

  .u-section { padding: var(--u-spacing-lg) var(--u-spacing-lg); }

  .u-divider { margin: 0; }

  /* Target rows stack price below name */
  .u-target-row {
    flex-wrap: wrap;
    gap: var(--u-spacing-sm);
  }

  .u-target-row-expand {
    padding: var(--u-spacing-md) var(--u-spacing-lg);
    margin: 0 calc(-1 * var(--u-spacing-lg));
  }

  .u-target-row-size { min-width: 56px; font-size: 0.9375rem; padding: 6px 14px; }

  /* Modals become bottom sheets */
  .u-modal-overlay { align-items: flex-end; }

  .u-modal {
    width: 100%;
    max-width: 100%;
    height: 85vh;
    border-radius: var(--u-radius) var(--u-radius) 0 0;
    animation: u-sheet-up 250ms ease-out;
    transition: transform 200ms ease-in;
  }

  .u-modal.u-modal-auto {
    height: auto;
    max-height: 85vh;
  }

  .u-modal-overlay.dismissing .u-modal {
    transform: translateY(100%);
  }

  .u-modal-overlay.dismissing {
    opacity: 0;
    transition: opacity 200ms ease-in;
  }

  @keyframes u-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Larger touch targets */
  .u-modal-option {
    padding: var(--u-spacing-md) 16px;
    min-height: 48px;
  }

  .u-modal-bar { padding: 12px 16px; }

  .u-modal-close {
    width: 32px;
    height: 32px;
  }

  .u-modal-search {
    padding: 10px 14px;
    font-size: 1rem;
  }

  .size-btn {
    padding: 14px 8px;
    min-height: 44px;
  }

  .size-tab { padding: 8px 12px; }

  /* Chips */
  .u-chips { gap: 8px; }

  .u-chip { padding: 8px 8px 8px 14px; font-size: 0.875rem; }

  /* A phone row holds about one chip, so a fixed cap only cut names short beside empty space.
     The name takes what the row leaves and is cut at its edge instead. */
  .u-chip-name { max-width: none; }

  /* The add buttons get a line of their own under the chips, so they sit in the same place
     however many shoes there are, instead of trailing after whichever chip came last. */
  .u-rack-adds { flex-basis: 100%; }

  .u-add-btn { padding: 8px 16px; font-size: 0.875rem; }

  /* Details modal */
  .u-details-header { padding: 0 var(--u-spacing-lg) var(--u-spacing-sm); }

  .u-details-tabs { padding: 0 var(--u-spacing-lg) var(--u-spacing-md); }

  .u-details-tab { padding: 0 var(--u-spacing-lg) var(--u-spacing-lg); }

  .u-detail-offer {
    flex-wrap: wrap;
    gap: var(--u-spacing-sm);
    padding: var(--u-spacing-md) var(--u-spacing-lg);
    margin: 0 calc(-1 * var(--u-spacing-lg));
  }

  /* Foot modal */
  .u-foot-modal { max-width: 100%; }

  /* Recently viewed */
  .u-recent { padding: var(--u-spacing-sm) var(--u-spacing-lg) var(--u-spacing-md); }

}

/* =========================================
   Profiles: the profile bar, the profile sheet and the foot growth projector.
   Uses the same u-* tokens as the rest of this stylesheet.
   ========================================= */

/* === Avatars === */
/* The avatar disc lives in styles.css, which every page loads: one definition, no second rule
   here to fight it over load order. The widget picks a size with .gs-avatar-md where it wants
   the larger one. */

/* === Profile bar on the card === */
.p-bar {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  width: 100%;
  background: none;
  border: none;
  padding: var(--u-spacing-md) var(--u-spacing-xl);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--u-transition);
}

.p-bar:hover { background: var(--u-bg); }

.p-bar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.p-bar-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--u-text);
}

.p-bar-meta {
  font-size: 0.8125rem;
  color: var(--u-text-secondary);
}

.p-bar-switch {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-accent);
}

.p-bar-chevron { color: var(--u-text-tertiary); flex-shrink: 0; }

/* === Read-only note on a shared rack === */
.p-readonly {
  margin-top: var(--u-spacing-md);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--u-text-secondary);
  background: var(--u-bg);
  border-radius: var(--u-radius-sm);
  padding: 10px 12px;
}

/* === Foot growth projector, in the details modal's sizing tab === */
.p-proj-off {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--u-text-secondary);
  background: var(--u-bg);
  border-radius: var(--u-radius-sm);
  padding: 14px 16px;
}

.p-proj-off-title {
  font-weight: 600;
  color: var(--u-text);
  margin-bottom: 4px;
}

.p-proj {
  display: flex;
  flex-direction: column;
  gap: var(--u-spacing-md);
}

.p-proj-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-spacing-md);
}

.p-proj-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.p-proj-key {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--u-text);
}

.p-proj-val { font-size: 0.9375rem; }

.p-proj-src {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--u-text-tertiary);
}

.p-proj-segmented { width: 100%; }

.p-proj-slider {
  width: 100%;
  accent-color: var(--u-accent);
  cursor: pointer;
}

.p-proj-go { align-self: flex-start; }

/* --- result --- */
.p-proj-result {
  margin-top: var(--u-spacing-lg);
  padding-top: var(--u-spacing-lg);
  border-top: 1px solid var(--u-separator);
}

.p-proj-headline {
  display: flex;
  align-items: baseline;
  gap: var(--u-spacing-sm);
}

.p-proj-size {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--u-text);
}

.p-proj-when { font-size: 0.875rem; color: var(--u-text-secondary); }

/* Growth chart, copied from pages/foot-growth-predictor.jte. */
.pred-figure {
  margin: var(--u-spacing-sm) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--u-spacing-sm);
  flex-wrap: wrap;
}

.pred-figure strong {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pred-muted { font-size: 0.8125rem; color: var(--u-text-secondary); }

.pred-chart { width: 100%; height: auto; display: block; margin: var(--u-spacing-sm) 0; }
.pred-band { fill: var(--u-accent); fill-opacity: 0.15; stroke: none; }
.pred-median { fill: none; stroke: var(--u-accent); stroke-width: 2; }
.pred-axis, .pred-tick { stroke: var(--u-separator); stroke-width: 1; }
.pred-dot { fill: var(--u-accent); }
.pred-tick-label, .pred-end-label { fill: var(--u-text-secondary); font-size: 11px; font-family: var(--u-font); }
.pred-point-label { fill: var(--u-text-secondary); font-size: 10px; font-family: var(--u-font); }
.pred-median-label { fill: var(--u-accent); font-size: 13px; font-weight: 700; font-family: var(--u-font); }

.p-proj-note {
  margin-top: var(--u-spacing-md);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--u-text-secondary);
}

/* === Profile sheet === */
.p-sheet { padding-bottom: var(--u-spacing-lg); }

.p-sheet-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u-text-secondary);
  padding: var(--u-spacing-lg) 16px var(--u-spacing-sm);
}

.p-sheet-actions { padding: var(--u-spacing-md) 16px 0; }

.p-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--u-separator-light);
  background: var(--u-surface);
}

.p-row-active { background: rgba(0, 209, 178, 0.06); }

.p-row-main {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: var(--u-spacing-md) 16px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--u-transition);
}

.p-row-main:hover { background: rgba(60, 60, 67, 0.04); }

.p-row-name {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-sm);
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--u-text);
}

.p-row-check { color: var(--u-accent); flex-shrink: 0; }

.p-row-manage {
  background: none;
  border: none;
  border-left: 1px solid var(--u-separator-light);
  padding: 0 16px;
  color: var(--u-text-tertiary);
  cursor: pointer;
  transition: color var(--u-transition);
}

.p-row-manage:hover { color: var(--u-text); }

/* The way out of a profile's settings and into the account's, at the top of the
   sheet. A row rather than a hint, because it is somewhere to go. */
.p-account-link {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-md);
  padding: var(--u-spacing-md) 16px;
  border-bottom: 1px solid var(--u-separator-light);
  color: var(--u-text-tertiary);
  text-decoration: none;
  transition: background var(--u-transition);
}

.p-account-link:hover { background: rgba(60, 60, 67, 0.04); }

.p-account-icon { display: inline-flex; flex-shrink: 0; }

.p-account-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.p-account-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--u-text);
}

.p-account-meta {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--u-text-secondary);
}

.p-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--u-text-secondary);
  background: rgba(60, 60, 67, 0.08);
  border-radius: 980px;
  padding: 2px 7px;
}

/* === Forms inside the sheet === */
.p-field {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-sm);
  padding: 0 16px;
}

.p-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--u-text);
  background: var(--u-surface);
  border: 1px solid var(--u-separator);
  border-radius: var(--u-radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--u-transition);
}

.p-input:focus { border-color: var(--u-accent); }

.p-select {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

/* The commit button for the fields above it, so it sits at the trailing edge
   rather than in the sheet's title bar: only the top two fields are a form,
   everything below acts immediately. */
.p-field-go { justify-content: flex-end; padding-top: var(--u-spacing-sm); }

.p-hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--u-text-secondary);
  padding: var(--u-spacing-sm) 16px 0;
}

.p-error {
  font-size: 0.8125rem;
  color: #c0392b;
  padding: var(--u-spacing-sm) 16px 0;
}

.p-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-spacing-sm);
  /* 44px minimum: these rows carry a control, and a row is as tappable as its target. */
  min-height: 44px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--u-separator-light);
}

.p-share-who {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-sm);
  min-width: 0;
  font-size: 0.9375rem;
}

/* An account is named by its email, which is long and must not push the control off the row. */
.p-share-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-invite {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--u-separator-light);
}

.p-invite-row {
  display: flex;
  align-items: center;
  gap: var(--u-spacing-sm);
}

/* The link reads as a token to be copied, not as a field to be edited: no border, a quiet
   fill, and the digits in a face where they line up. */
.p-invite-link {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--u-text-secondary);
  background: rgba(60, 60, 67, 0.05);
  border: none;
  padding: 10px 12px;
  cursor: text;
  text-overflow: ellipsis;
}

.p-invite-link:focus { border: none; box-shadow: inset 0 0 0 1px var(--u-accent); }

/* A link whose plaintext was shown once and is not ours to show again. */
.p-invite-link-sent {
  font-family: var(--u-font);
  font-size: 0.8125rem;
  color: var(--u-text-tertiary);
  background: none;
  padding-left: 0;
}

.p-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px;
  color: #c0392b;
  cursor: pointer;
  transition: background var(--u-transition);
}

.p-trash:hover { background: rgba(192, 57, 43, 0.1); }

.p-invite-meta {
  font-size: 0.75rem;
  color: var(--u-text-tertiary);
  margin-top: 7px;
  padding-left: 2px;
}

/* Confirm alert, same shape as .u-foot-modal in unified.css with the
   destructive action in red. */
.p-confirm { max-width: 340px; text-align: center; z-index: 1100; }

#confirmModal { z-index: 1100; }

.p-confirm-head { padding: var(--u-spacing-lg) var(--u-spacing-xl) var(--u-spacing-md); }

.p-confirm-title { font-size: 1.0625rem; font-weight: 600; }

.p-confirm-body {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--u-text-secondary);
  margin-top: 6px;
}

.p-confirm-actions { border-top: 1px solid var(--u-separator-light); }

.p-confirm-go,
.p-confirm-cancel {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  background: none;
  font-family: var(--u-font);
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background var(--u-transition);
}

.p-confirm-go {
  font-weight: 600;
  color: #c0392b;
  border-bottom: 1px solid var(--u-separator-light);
}

.p-confirm-go:hover { background: rgba(192, 57, 43, 0.06); }

.p-confirm-go .p-spinner-sm {
  border-color: rgba(192, 57, 43, 0.25);
  border-top-color: #c0392b;
}

.p-confirm-cancel {
  font-weight: 400;
  color: var(--u-accent);
  border-radius: 0 0 var(--u-radius) var(--u-radius);
}

.p-confirm-cancel:hover { background: rgba(60, 60, 67, 0.06); }

.p-danger {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #c0392b;
  background: none;
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: 980px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all var(--u-transition);
}

.p-danger:hover { background: rgba(192, 57, 43, 0.06); }

/* Prompt to register, shown where a visitor meets the limits of an anonymous profile. */
.p-cta {
  background: rgba(0, 209, 178, 0.07);
  border-radius: var(--u-radius-sm);
  margin: var(--u-spacing-sm) 16px 0;
  padding: 10px 12px;
}

.p-cta a {
  color: var(--u-accent-hover);
  font-weight: 600;
  text-decoration: none;
}

.p-cta a:hover { text-decoration: underline; }

.u-btn:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 600px) {
  .p-bar { padding: var(--u-spacing-md); }
}


/* Full size chart panel
   A second view inside the details modal: the chart as we hold it, where it came from, and a
   way to tell us it is wrong. */
/* Sits inside the summary paragraph, so it inherits that text's size and colour and is told
   apart only by the underline. */
.u-chart-open-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(60, 60, 67, 0.25);
}

.u-chart-open-link:hover {
  color: var(--u-text);
  text-decoration-color: currentColor;
}

.u-chart-provenance {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--u-text-secondary);
  margin-bottom: var(--u-spacing-md);
}

.u-chart-provenance a { color: var(--u-accent-deep); }

.u-chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.u-chart-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u-text-secondary);
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.12);
}

.u-chart-table td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(60, 60, 67, 0.06);
}

.u-chart-table td:last-child,
.u-chart-table th:last-child { text-align: right; }

/* === Fit feedback ===
   Two questions, asked one row each, in a panel that opens from the rack. */
.u-fit-body {
  padding: 0 var(--u-spacing-lg) var(--u-spacing-lg);
}

.u-fit-row {
  padding: var(--u-spacing-lg) 0;
  border-bottom: 1px solid var(--u-separator-light);
}

.u-fit-row:last-of-type {
  border-bottom: 0;
}

.u-fit-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  margin-bottom: var(--u-spacing-md);
}

/* An unanswered row is marked rather than described, so the panel does not spend a sentence
   asking for something it is already showing three buttons for. */
.u-fit-row.is-unanswered .u-fit-row-label::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9500;
  animation: u-fit-pulse 1.8s ease-in-out infinite;
}

@keyframes u-fit-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .u-verdict.is-asking .u-verdict-btn svg { animation: none; }
  .u-fit-row.is-unanswered .u-fit-row-label::after { animation: none; }
  .u-fit-dot { animation: none; }
}

.u-fit-options {
  display: flex;
  gap: var(--u-spacing-sm);
}

.u-fit-option {
  flex: 1;
  border: 1px solid var(--u-separator);
  background: var(--u-surface);
  font-family: var(--u-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  padding: 10px 8px;
  border-radius: var(--u-radius-sm);
  cursor: pointer;
  transition: border-color var(--u-transition), color var(--u-transition);
}

.u-fit-option:hover {
  border-color: rgba(60, 60, 67, 0.24);
}

.u-fit-option.is-active {
  border-color: var(--u-accent);
  color: var(--u-text);
  box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.18);
}

.u-fit-help,
.u-fit-reports {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--u-text-secondary);
  margin-top: var(--u-spacing-md);
}

/* The chip is the way into a shoe, the same as a comparison row. */
.u-chip-btn {
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* Says there is something to answer here without spending a word on it, and goes when both
   questions have been. */
.u-fit-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9500;
  animation: u-fit-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* Everything we ask has been answered. It goes back to a dot the day we ask something new,
   which is how existing owners get invited to fill in a dimension that did not exist when they
   answered. */
.u-fit-tick {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--u-success);
  flex-shrink: 0;
}

.u-fit-tick svg {
  width: 100%;
  height: 100%;
}

/* Above the chart and right aligned, matching the product page. */
.u-chart-report { margin-bottom: var(--u-spacing-sm); text-align: right; }

.u-chart-report-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--u-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.u-chart-report-link:hover { color: var(--u-text); }

.u-chart-report-captcha {
  margin: var(--u-spacing-md) 0;
  display: flex;
  justify-content: center;
  min-height: 0;
}

.u-chart-report-note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--u-text-secondary);
  margin-top: var(--u-spacing-sm);
}

.u-chart-report-send {
  font-family: var(--u-font);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--u-radius-sm);
  cursor: pointer;
  padding: 9px 14px;
  transition: opacity var(--u-transition);
}

.u-chart-report-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.u-chart-report-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--u-font);
  font-size: 0.9375rem;
  padding: 10px 12px;
  border: 1px solid rgba(60, 60, 67, 0.16);
  border-radius: var(--u-radius-sm);
  resize: vertical;
}

.u-chart-report-send {
  width: 100%;
  margin-top: var(--u-spacing-md);
  border: none;
  background: var(--u-accent, #00d1b2);
  color: #fff;
  padding: 12px 16px;
  font-size: 0.9375rem;
}



/* The prompt sits under the chart, as an addition to it rather than in place of it. */
.u-chart-cta {
  display: flex;
  justify-content: center;
  padding-bottom: var(--u-spacing-md);
}

/* The similar owners' verdict, under the community size it moved. */
.u-community-fit-voice {
  margin-top: var(--u-spacing-xs);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--u-text);
}