/* ==========================================================================
   JELLY UI — the component language
   Built on tokens.css. Nothing here is a generic pattern: every component
   carries one of the four brand devices.

   1. THE BEAD      the j's floating dot — bullets, tab indicators, eyebrows,
                    selected states, loaders. It replaces icons-as-decoration
                    and uppercase micro-labels.
   2. POURED CORNERS asymmetric radii — shapes look settled, not boxed.
   3. THE GLOSS      lives on the MARK and hero imagery only. Buttons are flat.
   4. THE WOBBLE     overshoot on press and entrance. Set, not still.
   ========================================================================== */

/* ---------------------------------------------------------------- base --- */
.j-body{
  font: var(--type-body); font-family: var(--font-ui);
  background: var(--color-surface-page); color: var(--color-text-body);
  -webkit-font-smoothing: antialiased;
}
.j-display{ font-family: var(--font-display); font-variation-settings: var(--font-display-settings);
  font-weight: 900; letter-spacing: -.015em; }

/* ------------------------------------------------------------ the bead --- */
/* The atom of the system: the j's dot, drawn in CSS. */
.j-bead{
  display:inline-block; width:.62em; height:.62em; border-radius:50%;
  background: var(--color-action-primary); position:relative; flex:none;
}
.j-bead::after{                      /* the specular that makes it jelly */
  content:''; position:absolute; left:22%; top:18%; width:34%; height:28%;
  border-radius:50%; background:rgba(255,255,255,.55);
}
.j-bead--rose{ background: var(--raw-rose) }
.j-bead--blush{ background: var(--raw-blush) }

/* Eyebrow: a bead + soft italic. Replaces the uppercase tracked kicker. */
.j-eyebrow{
  display:flex; align-items:center; gap:.55em;
  font-family: var(--font-display); font-variation-settings: var(--font-display-settings);
  font-weight:600; font-style:italic; font-size:15px;
  color: var(--color-action-primary); margin-bottom: var(--space-3);
}
.j-eyebrow .j-bead{ width:9px; height:9px }

/* Bulleted list with beads instead of discs */
.j-list{ list-style:none; margin:0; padding:0 }
.j-list li{ position:relative; padding-left:1.35em; margin:.42em 0; color:var(--color-text-secondary) }
.j-list li::before{
  content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%;
  background: var(--raw-rose);
}
.j-list--cherry li::before{ background: var(--color-action-primary) }

/* --------------------------------------------------------- the wobble --- */
@keyframes j-settle{
  0%{ transform: translateY(9px) scale(.97); opacity:0 }
  100%{ transform:none; opacity:1 }
}
.j-settle{ animation: j-settle var(--motion-slow) var(--motion-wobble) both }
@keyframes j-jiggle{
  0%,100%{ transform: translateY(0) }
  30%{ transform: translateY(-22%) }
  55%{ transform: translateY(0) scaleX(1.12) scaleY(.9) }
  75%{ transform: translateY(-7%) scaleX(.97) scaleY(1.03) }
}

/* Loader: three beads, wobbling out of phase */
.j-loader{ display:inline-flex; gap:7px; align-items:flex-end }
.j-loader .j-bead{ width:11px; height:11px; animation: j-jiggle 900ms var(--motion-wobble) infinite }
.j-loader .j-bead:nth-child(2){ animation-delay:120ms }
.j-loader .j-bead:nth-child(3){ animation-delay:240ms }

@media (prefers-reduced-motion: reduce){
  .j-settle{ animation: none }
  .j-loader .j-bead{ animation: none }
  *{ transition-duration: .01ms !important }
}

/* --------------------------------------------------------- the button --- */
.j-btn{
  position:relative; overflow:hidden; isolation:isolate;
  font-family: var(--font-ui); font-weight:700; font-size:14px; letter-spacing:.01em;
  border:0; border-radius: var(--radius-btn, 12px); padding:15px 26px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  transition: transform var(--motion-base) var(--motion-wobble),
              background var(--motion-fast) var(--motion-ease);
}
.j-btn:hover{ transform: translateY(-2px) }
.j-btn:active{ transform: translateY(0) scaleX(1.04) scaleY(.94) }  /* it squishes */
.j-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--color-focus-ring) }

/* PRIMARY — deep cherry with the gloss cap. The only glossy component in the UI. */
.j-btn--primary{ background: var(--color-action-primary); color: var(--raw-blush) }
.j-btn--primary:hover{ background: var(--raw-wine) }

.j-btn--secondary{ background: var(--color-surface-brand); color: var(--color-action-primary) }
.j-btn--secondary:hover{ background: var(--raw-rose) }

.j-btn--outline{ background:transparent; color: var(--color-action-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-action-primary) }
.j-btn--outline:hover{ background: var(--color-surface-brand) }

/* TEXT button — carries a bead instead of a chevron */
.j-btn--text{ background:none; padding:8px 2px; color: var(--color-action-primary) }
.j-btn--text:hover{ transform:none; color: var(--raw-wine) }
.j-btn--text .j-bead{ width:7px; height:7px; transition: transform var(--motion-base) var(--motion-wobble) }
.j-btn--text:hover .j-bead{ transform: translateX(4px) }

.j-btn--danger{ background: var(--raw-signal); color:#fff }
.j-btn--sm{ font-size:12.5px; padding:11px 20px }
.j-btn--block{ width:100%; }

/* ------------------------------------------------------------ the chip --- */
/* Jelly-bean pill. Selected gets a bead, not a colour swap alone. */
.j-chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:13px; font-weight:600; padding:9px 16px; border-radius: var(--radius-pill);
  background: var(--color-surface-raised); color: var(--color-text-body);
  box-shadow: inset 0 0 0 1.5px var(--raw-rose); cursor:pointer;
  transition: transform var(--motion-base) var(--motion-wobble), background var(--motion-fast);
}
.j-chip:hover{ transform: translateY(-1px); background: var(--color-surface-brand) }
.j-chip--on{ background: var(--color-action-primary); color: var(--raw-blush); box-shadow:none }
.j-chip--on .j-bead{ background: var(--raw-blush); width:7px; height:7px }

/* ------------------------------------------------------------ surfaces --- */
/* Poured corners + a cherry-tinted shadow. No hairline boxes anywhere. */
.j-card{
  background: var(--color-surface-raised);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--elevation-card);
  overflow:hidden;
  transition: transform var(--motion-base) var(--motion-wobble),
              box-shadow var(--motion-base) var(--motion-ease);
}
.j-card:hover{ transform: translateY(-3px); box-shadow: var(--elevation-raised) }
.j-card--flip{ }   /* legacy hook — radii are uniform in Direction C */
.j-panel{
  background: var(--color-surface-brand);
  border-radius: var(--radius-panel, 20px);
  padding: var(--space-7);
}
.j-panel--paper{ background: var(--color-surface-page) }
.j-panel--rose{ background: var(--raw-rose); color: var(--color-text-primary) }

/* Listing card internals */
.j-listing .j-listing__img{ aspect-ratio: 3/4; display:block; width:100% }
.j-listing__body{ padding: 12px 14px 15px }
.j-listing__brand{ font-size:11.5px; font-weight:600; color: var(--color-text-secondary) }
.j-listing__name{ font-family:var(--font-display); font-variation-settings:var(--font-display-settings);
  font-weight:600; font-size:15px; line-height:1.25; color: var(--color-text-primary); margin:2px 0 6px }
.j-listing__price{ font-family:var(--font-display); font-variation-settings:var(--font-display-settings);
  font-weight:900; font-size:16px; color: var(--color-action-primary) }
.j-listing__price span{ font-family:var(--font-ui); font-weight:500; font-size:12.5px;
  color: var(--color-text-secondary) }

/* ------------------------------------------------------------- inputs --- */
/* Blush fill, no border — the field looks poured into the page. */
.j-field{
  width:100%; font-family: var(--font-ui); font-size:15px;
  padding:15px 20px; border-radius: var(--radius-pill);
  border:0; background: var(--color-surface-brand); color: var(--color-text-body); outline:none;
  transition: box-shadow var(--motion-fast) var(--motion-ease), background var(--motion-fast);
}
.j-field::placeholder{ color: var(--color-text-secondary) }
.j-field:focus{ background: var(--color-surface-raised); box-shadow:0 0 0 2px var(--color-action-primary) }
.j-search{ display:flex; align-items:center; gap:10px; background: var(--color-surface-brand);
  border-radius: var(--radius-pill); padding:12px 18px; color: var(--color-text-secondary); font-size:14px }

/* ------------------------------------------------------------- status --- */
.j-status{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:5px 12px 5px 9px; border-radius: var(--radius-pill);
}
.j-status .j-bead{ width:6px; height:6px }
.j-status--out{ background: var(--color-status-out-bg); color: var(--color-status-out-text) }
.j-status--out .j-bead{ background: var(--color-status-out-text) }
.j-status--due{ background: var(--color-status-due-bg); color: var(--color-status-due-text) }
.j-status--due .j-bead{ background: var(--color-status-due-text) }
.j-status--late{ background: var(--color-status-late-bg); color: var(--color-status-late-text) }
.j-status--late .j-bead{ background: var(--color-status-late-text) }
.j-status--done{ background: var(--color-status-returned-bg); color: var(--color-status-returned-text) }
.j-status--done .j-bead{ background: var(--color-status-returned-text) }

/* Badge — sits on imagery, slightly tilted like a sticker that was pressed on */
.j-badge{
  display:inline-block; font-family:var(--font-display);
  font-variation-settings:var(--font-display-settings); font-weight:900; font-style:italic;
  font-size:12.5px; padding:5px 13px; border-radius: 14px 10px 14px 10px;
  background: var(--raw-rose); color: var(--color-text-primary); transform: rotate(-2.5deg);
}
.j-badge--cherry{ background: var(--color-surface-inverse); color: var(--color-text-inverse) }
.j-badge--blush{ background: var(--raw-blush); color: var(--color-action-primary) }

/* --------------------------------------------------------------- misc --- */
.j-avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  background: var(--raw-rose); color: var(--color-text-primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-variation-settings:var(--font-display-settings);
  font-weight:900; font-size:15px;
}
/* Price breakdown — the rule is a rose dash, never a grey line */
.j-receipt{ font-size:13.5px }
.j-receipt__row{ display:flex; justify-content:space-between; padding:5px 0;
  color: var(--color-text-secondary) }
.j-receipt__row--total{ font-family:var(--font-display);
  font-variation-settings:var(--font-display-settings); font-weight:900; font-size:16px;
  color: var(--color-text-primary); border-top:2px dashed var(--raw-rose);
  margin-top:8px; padding-top:10px }

/* Tab bar — the active tab is marked by a bead, not a filled icon */
.j-tabs{ display:flex; justify-content:space-around; align-items:center;
  background: var(--color-surface-raised) }
.j-tab{ display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; color: var(--color-text-secondary); position:relative;
  padding:10px 4px }
.j-tab svg{ width:20px; height:20px }
.j-tab--on{ color: var(--color-action-primary) }
.j-tab--on::before{ content:''; position:absolute; top:1px; width:6px; height:6px; border-radius:50%;
  background: var(--color-action-primary) }

/* Segmented control */
.j-seg{ display:inline-flex; background: var(--color-surface-brand);
  border-radius: var(--radius-pill); padding:4px; gap:2px }
.j-seg button{ border:0; background:none; cursor:pointer; font-family:var(--font-ui);
  font-weight:600; font-size:13px; padding:9px 20px; border-radius: var(--radius-pill);
  color: var(--color-action-primary); transition: background var(--motion-fast) }
.j-seg button.on{ background: var(--color-action-primary); color: var(--raw-blush) }

/* Section heading pattern: eyebrow (bead + italic) → display headline */
.j-h2{ font-family:var(--font-display); font-variation-settings:var(--font-display-settings);
  font-weight:900; font-size:clamp(30px, 4vw, 44px); line-height:1.05; letter-spacing:-.02em;
  color: var(--color-text-primary); margin-bottom: var(--space-3) }
.j-h2 em{ font-style:italic; color: var(--color-action-primary) }
.j-lede{ color: var(--color-text-secondary); max-width:62ch; font-size:16px; line-height:1.65 }

/* Divider — a row of beads, never a grey rule */
.j-divider{ display:flex; gap:9px; justify-content:center; padding: var(--space-7) 0 }
.j-divider i{ width:6px; height:6px; border-radius:50%; background: var(--raw-rose); display:block }
.j-divider i:nth-child(2){ background: var(--color-action-primary) }