/* ═══════════════════════════════════════════════════════════
   CŒUR ASTRAL - HARMONY PARTIALS
   ═══════════════════════════════════════════════════════════

   Styles of the server-rendered compatibility partials in
   templates/components/v2/: the harmony gauge (44/80/120/180), the six
   dimension bars and the portrait card. Loaded after tokens.css, base.css
   and components.css.

   Every selector starts with `.ui-v2 ` so it outranks legacy element
   rules. The displayed score is always the
   global harmony; its tier (≥70 strong, 40–69 promising, <40 muted) is
   also given as text, never by colour alone.

   Legacy rules beaten here: style.css:73-120 sets font and colour on
   p/span/a/h3 and margins on p/h3, so each styled element declares its own
   font, line height, weight, colour and margin; materialize-override.css
   forces h1–h6 to Montserrat 600 with !important; Materialize's
   button:focus paints #2ab7a9. */

/* ─────────────────────────────────────────────────────────────
   TIERS - one colour per tier, read through --ca-tier
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-gauge--strong,
.ui-v2 .ca-dimension--strong {
  --ca-tier: var(--rose-400);
}

.ui-v2 .ca-gauge--promising,
.ui-v2 .ca-dimension--promising {
  --ca-tier: var(--violet-400);
}

.ui-v2 .ca-gauge--muted,
.ui-v2 .ca-dimension--muted {
  --ca-tier: var(--line-strong);
}

/* ─────────────────────────────────────────────────────────────
   GAUGE - sized by its SVG; the arc draws once
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-gauge {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
  vertical-align: middle;
}

.ui-v2 .ca-gauge__svg {
  display: block;
  overflow: visible;
}

.ui-v2 .ca-gauge__ticks {
  stroke: var(--ring-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ui-v2 .ca-gauge__track {
  stroke: var(--gauge-track);
  stroke-width: 1;
}

.ui-v2 .ca-gauge__arc {
  stroke: var(--ca-tier);
  animation: ca-gauge-draw var(--dur-4) var(--ease-out);
}

/* The planet is ringed with the surface behind it (night by default). */
.ui-v2 .ca-gauge__planet {
  fill: var(--ca-tier);
  stroke: var(--ca-gauge-ring, var(--night-950));
  stroke-width: 1.5;
}

.ui-v2 .ca-card .ca-gauge {
  --ca-gauge-ring: var(--surface-1);
}

/* Centre figure; spans set their own font against style.css p, span. */
.ui-v2 .ca-gauge__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--ivory-100);
}

.ui-v2 .ca-gauge__unit {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--ivory-300);
}

/* 44px card ring: an opaque disc over the photo, no « % ». */
.ui-v2 .ca-gauge--s {
  border-radius: 50%;
  background-color: var(--disc-on-photo);
}

.ui-v2 .ca-gauge--s .ca-gauge__value {
  font-variant-numeric: tabular-nums;
}

/* 80px Explorer gauge: centred Cormorant figure, « % » nudged down. */
.ui-v2 .ca-gauge--m .ca-gauge__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.ui-v2 .ca-gauge--m .ca-gauge__unit {
  padding-top: 6px;
  font-size: 13px;
  line-height: 16px;
}

/* 120px profile gauge: figure and « % » share a baseline below centre. */
.ui-v2 .ca-gauge--l .ca-gauge__value {
  align-items: baseline;
  gap: 2px;
  padding-top: 34px;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
  font-variant-numeric: lining-nums;
}

.ui-v2 .ca-gauge--l .ca-gauge__unit {
  font-size: 18px;
  line-height: 18px;
}

/* 180px Explorer column gauge: the screen's hero figure, Cormorant 88 with
   the « % » of the 120 gauge, centred in the ring. */
.ui-v2 .ca-gauge--xl .ca-gauge__value {
  align-items: baseline;
  gap: 2px;
  padding-top: 46px;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 88px;
  line-height: 88px;
  font-variant-numeric: lining-nums;
}

.ui-v2 .ca-gauge--xl .ca-gauge__unit {
  font-size: 18px;
  line-height: 18px;
}

@keyframes ca-gauge-draw {
  from {
    stroke-dasharray: 0 var(--ca-gauge-c);
  }
}

/* ─────────────────────────────────────────────────────────────
   DIMENSIONS - six 44px rows, one column then two from 600px
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-dimensions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .ui-v2 .ca-dimensions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ui-v2 .ca-dimension {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  border-bottom: 1px solid var(--rule-soft);
  list-style: none;
}

.ui-v2 .ca-dimension__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory-300);
}

/* Profile mockup: label and value share 600 ivory; only the icon is dimmer. */
.ui-v2 .ca-dimension__label {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ivory-100);
}

.ui-v2 .ca-dimension__value {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-100);
}

.ui-v2 .ca-dimension__bar {
  height: 4px;
  border-radius: var(--r-pill);
  background-color: var(--surface-3);
  overflow: hidden;
}

.ui-v2 .ca-dimension__fill {
  display: block;
  width: var(--ca-dim);
  height: 100%;
  border-radius: var(--r-pill);
  background-color: var(--ca-tier);
  transform-origin: left center;
  animation: ca-dim-grow var(--dur-4) var(--ease-out);
}

@keyframes ca-dim-grow {
  from {
    transform: scaleX(0);
  }
}

/* ─────────────────────────────────────────────────────────────
   PORTRAIT CARD - 4:5 photo, caption below, name link stretched
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ui-v2 .ca-portrait__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
  background-color: var(--surface-2);
}

.ui-v2 .ca-portrait__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--dur-photo) var(--ease-out);
}

@media (pointer: fine) {
  .ui-v2 .ca-portrait:hover .ca-portrait__photo {
    transform: scale(1.03);
  }
}

/* No photo: cropped constellation of the sign at 35 % behind the initial,
   in Cormorant italic gold (spec « monogramme »). */
.ui-v2 .ca-portrait__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ui-v2 .ca-portrait__constellation {
  position: absolute;
  top: 4%;
  right: -30%;
  width: 120%;
  max-width: none;
  height: auto;
  opacity: 0.35;
  transform: rotate(-8deg);
  pointer-events: none;
}

.ui-v2 .ca-portrait__monogram {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--gold-400);
}

.ui-v2 .ca-portrait__online {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background-color: var(--online);
  box-shadow: 0 0 0 2px var(--night-900);
}

/* Ring, pill and charm button sit above the stretched name link (z 1).
   The ring and the pill only inform: clicks pass through them to the link,
   while the charm button stays its own target. */
.ui-v2 .ca-portrait__ring {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

/* The pill stops 6px short of the 44px charm button (both inset 8px): on a
   two-column phone card (~170px) « Vous a charmé » wraps onto two lines
   (44px tall, level with the button) instead of running under it. */
.ui-v2 .ca-portrait__charmed {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  max-width: calc(100% - 2 * 8px - 44px - 6px);
  margin: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background-color: var(--disc-on-photo);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--rose-300);
}

/* Every state sets its own background, :focus included, to beat
   Materialize's button:focus { background-color: #2ab7a9 }. */
.ui-v2 .ca-portrait__charm,
.ui-v2 .ca-portrait__charm:focus {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--disc-on-photo);
  color: var(--ivory-100);
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.ui-v2 .ca-portrait__charm[aria-pressed="false"]:hover {
  color: var(--rose-400);
}

.ui-v2 .ca-portrait__charm[aria-pressed="true"],
.ui-v2 .ca-portrait__charm[aria-pressed="true"]:focus {
  background-color: var(--rose-600);
}

.ui-v2 .ca-portrait__charm[aria-pressed="true"]:hover {
  background-color: var(--rose-700);
}

.ui-v2 .ca-portrait__charm-off,
.ui-v2 .ca-portrait__charm-on {
  display: inline-flex;
  line-height: 0;
}

.ui-v2 .ca-portrait__charm-on,
.ui-v2 .ca-portrait__charm[aria-pressed="true"] .ca-portrait__charm-off {
  display: none;
}

.ui-v2 .ca-portrait__charm[aria-pressed="true"] .ca-portrait__charm-on {
  display: inline-flex;
}

/* Caption: name, meta and astral signature. */
.ui-v2 .ca-portrait__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* !important on family and weight beats materialize-override.css h1–h6;
   the family swaps from Montserrat (2-column mobile grid) to Cormorant. */
.ui-v2 .ca-portrait__name {
  margin: 0;
  font-family: var(--font-name-card) !important;
  font-weight: 600 !important;
  font-size: var(--fs-name-card);
  line-height: var(--lh-name-card);
  font-variant-numeric: lining-nums;
  color: var(--ivory-100);
  overflow-wrap: anywhere;
}

.ui-v2 .ca-portrait__link {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

/* Stretched link: the whole card opens the profile. */
.ui-v2 .ca-portrait__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Upright tabular figures with the Montserrat name of the 2-column phone
   grid (no italic Montserrat is loaded); italic once the name is Cormorant. */
.ui-v2 .ca-portrait__age {
  font: inherit;
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-300);
}

@media (min-width: 600px) {
  .ui-v2 .ca-portrait__age {
    font-style: italic;
  }
}

/* Premium only. Above the stretched name link (z 1) so it stays its own
   target; ::before widens its 18px line to a 44px hit area. */
.ui-v2 .ca-portrait__reading {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--gold-400);
}

.ui-v2 .ca-portrait__reading:hover {
  color: var(--gold-300);
}

.ui-v2 .ca-portrait__reading::before {
  content: "";
  position: absolute;
  inset: -13px 0;
}

.ui-v2 .ca-portrait__meta {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-300);
}

/* 8px plus the 4px body gap: the 12px of the Recherche mockup. */
.ui-v2 .ca-portrait__signs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Phones (ALS-1190): with all three chips, the 2-column grids at 390
   (about 169px per card) could leave the life-path number alone on row 2.
   Force two predictable rows instead: the zodiac sign on row 1, the
   Chinese sign and the number on row 2, every name in full. The empty
   ::after is the row break; it sits on a line of its own, so two 3px row
   gaps make the usual 6px. Fewer chips wrap as on wider screens. */
@media (max-width: 599.98px) {
  .ui-v2 .ca-portrait__signs:has(> :nth-child(3)) {
    row-gap: 3px;
  }

  .ui-v2 .ca-portrait__signs:has(> :nth-child(3))::after {
    content: "";
    order: 1;
    flex-basis: 100%;
  }

  .ui-v2 .ca-portrait__signs > :not(:first-child) {
    order: 2;
  }
}

.ui-v2 .ca-portrait__sign {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--ivory-300);
  white-space: nowrap;
  list-style: none;
}

/* The sign text sits in its own span (portrait.js fills it): keep the
   12px chip type over style.css p, span { 1rem/1.5 }. :where() keeps this
   at class weight, as .ca-btn :where(span) does in components.css. */
.ui-v2 .ca-portrait__signs :where(span) {
  font: inherit;
}

.ui-v2 .ca-portrait__sign-icon {
  display: inline-flex;
  line-height: 0;
  color: var(--gold-400);
}

.ui-v2 .ca-portrait__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--ring-gold);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-400);
  list-style: none;
}

/* Discovery chat link (ALS-1058): « Discuter » on mutual harmonies. Above
   the stretched name link (z 1) like the reading link, with a 44px row of
   its own as its touch target; .ca-link gives the underline. */
.ui-v2 .ca-portrait__chat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--violet-400);
}

/* ─────────────────────────────────────────────────────────────
   PORTRAIT SKELETON - loading placeholder of a card
   components/v2/_portrait_skeleton.html: the 4:5 media sweeps with
   .ca-skeleton (stopped by base.css under reduced motion), then a name
   line and a shorter meta line. No photo, so no hover zoom.
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-portrait--skeleton .ca-skeleton--text {
  width: 70%;
}

.ui-v2 .ca-portrait--skeleton .ca-portrait__skeleton-short {
  width: 45%;
}