/* ARETE Metabolic and Performance — component stylesheet.
   Loads after tokens.css. Every value here is a token reference; no literal
   colour, size, radius or shadow is declared in this file. */

/* ---------- base ---------- */

.ar {
  font-family: var(--font-body);
  color: var(--ink-100);
  -webkit-font-smoothing: antialiased;
}
.ar *, .ar *::before, .ar *::after { box-sizing: border-box; }
.ar-muted  { color: var(--ink-300); }
.ar-dim    { color: var(--ink-200); }
.ar-gold   { color: var(--gold-300); }
.ar-ok     { color: var(--success-400); }
.ar-warn   { color: var(--warn-400); }
.ar-bad    { color: var(--danger-400); }
.ar-num    { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.ar-stack  { display: flex; flex-direction: column; }
.ar-rowx   { display: flex; align-items: center; }
.ar-spread { display: flex; align-items: center; justify-content: space-between; }
.ar-grow   { flex: 1 1 auto; min-width: 0; }
.ar-trunc  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- icon ---------- */

.ar-icon {
  display: inline-block;
  flex: none;
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.18em;
}
.ar-icon--sm { width: 20px; height: 20px; }
.ar-icon--lg { width: 28px; height: 28px; }

/* ---------- button ---------- */

.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.ar-btn:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.ar-btn--block { display: flex; width: 100%; }
.ar-btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: 13px; }
.ar-btn--lg { min-height: 54px; font-size: 16px; }

.ar-btn--primary {
  background: var(--gold-400);
  color: var(--ink-on-gold);
  box-shadow: var(--shadow-gold);
}
.ar-btn--primary:hover  { background: var(--gold-300); }
.ar-btn--primary:active { background: var(--gold-500); }

.ar-btn--secondary {
  background: var(--surface-300);
  color: var(--ink-100);
  border-color: var(--line-300);
}
.ar-btn--secondary:hover  { background: var(--surface-400); }

.ar-btn--ghost {
  background: transparent;
  color: var(--gold-300);
  padding: 0 var(--space-3);
}
.ar-btn--ghost:hover { background: var(--surface-300); }

.ar-btn--danger {
  background: transparent;
  color: var(--danger-400);
  border-color: var(--danger-400);
}
.ar-btn--danger:hover { background: var(--danger-700); }

.ar-btn[disabled], .ar-btn[aria-disabled="true"] {
  background: var(--surface-300);
  color: var(--ink-300);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- input ---------- */

.ar-field { display: block; margin-bottom: var(--space-4); }
.ar-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px; font-weight: 600; line-height: 16px;
  color: var(--ink-200);
}
.ar-field__box {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--surface-300);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  min-height: 50px;
  color: var(--ink-300);
}
.ar-field__box:focus-within { border-color: var(--gold-400); box-shadow: 0 0 0 3px var(--gold-700); }
.ar-field__input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none; padding: 0;
  font-family: var(--font-body); font-size: 15px; line-height: 23px;
  color: var(--ink-100);
}
.ar-field__input::placeholder { color: var(--ink-300); }
.ar-field__help { margin-top: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-300); }
.ar-field--error .ar-field__box { border-color: var(--danger-400); }
.ar-field--error .ar-field__help { color: var(--danger-400); }
.ar-field textarea.ar-field__input { resize: none; padding: var(--space-3) 0; }

/* ---------- chip ---------- */

.ar-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-4);
  background: var(--surface-300);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; line-height: 16px;
  color: var(--ink-200);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.ar-chip:hover { background: var(--surface-400); color: var(--ink-100); }
.ar-chip[aria-pressed="true"], .ar-chip--on {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--ink-on-gold);
}
.ar-chip__count { opacity: .72; font-family: var(--font-numeric); }
.ar-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: none; }
.ar-chips::-webkit-scrollbar { display: none; }

/* ---------- card ---------- */

.ar-card {
  background: var(--surface-200);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.ar-card--flush { padding: 0; overflow: hidden; }
.ar-card--roomy { padding: var(--space-6); }
.ar-card--tint  { background: var(--gold-700); border-color: var(--gold-600); }
.ar-card--press { cursor: pointer; transition: background-color .14s ease; }
.ar-card--press:hover { background: var(--surface-300); }
.ar-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 24px; }

/* ---------- badge ---------- */

.ar-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 14px;
  background: var(--surface-300); color: var(--ink-200);
  white-space: nowrap;
}
.ar-badge--gold    { background: var(--gold-700);    color: var(--gold-200); }
.ar-badge--success { background: var(--success-700); color: var(--success-400); }
.ar-badge--warn    { background: var(--warn-700);    color: var(--warn-400); }
.ar-badge--danger  { background: var(--danger-700);  color: var(--danger-400); }
.ar-badge--info    { background: var(--info-700);    color: var(--info-400); }

/* ---------- notice ---------- */

.ar-notice {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--info-400);
  background: var(--info-700);
  color: var(--ink-200);
  font-size: 13px; line-height: 20px;
}
.ar-notice__icon { color: var(--info-400); }
.ar-notice--warn   { background: var(--warn-700);    border-left-color: var(--warn-400); }
.ar-notice--warn   .ar-notice__icon { color: var(--warn-400); }
.ar-notice--danger { background: var(--danger-700);  border-left-color: var(--danger-400); }
.ar-notice--danger .ar-notice__icon { color: var(--danger-400); }
.ar-notice--success{ background: var(--success-700); border-left-color: var(--success-400); }
.ar-notice--success .ar-notice__icon { color: var(--success-400); }
.ar-notice strong { color: var(--ink-100); font-weight: 600; }

/* ---------- product card ---------- */

.ar-product {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-200);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: border-color .14s ease;
}
.ar-product:hover { border-color: var(--line-300); }
.ar-product__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-000); overflow: hidden; }
.ar-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-product__flag { position: absolute; top: var(--space-2); left: var(--space-2); }
.ar-product__body { display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-3) var(--space-4) var(--space-4); }
.ar-product__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; }
.ar-product__name {
  display: block;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px;
  color: var(--ink-100); margin: var(--space-1) 0 0;
}
.ar-product__meta { display: block; font-size: 11px; line-height: 14px; color: var(--ink-300); margin-top: 2px; }
.ar-product__price {
  display: block; margin-top: auto; padding-top: var(--space-3);
  font-family: var(--font-numeric); font-size: 17px; font-weight: 700; line-height: 20px;
  color: var(--ink-100);
}
.ar-product__price small {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: var(--ink-300); letter-spacing: .02em;
}
.ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* loading shimmer */
.ar-skel {
  background: var(--surface-300);
  border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
}
.ar-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface-400), transparent);
  transform: translateX(-100%);
  animation: ar-shimmer 1.3s infinite;
}
@keyframes ar-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ar-skel::after { animation: none; } }

/* ---------- consultation gate ---------- */

.ar-gate { display: flex; flex-direction: column; gap: var(--space-4); }
.ar-gate__price { font-family: var(--font-numeric); font-size: 20px; font-weight: 600; line-height: 22px; color: var(--ink-100); }
.ar-gate__price span { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--ink-300); }
.ar-gate__head { display: flex; align-items: center; gap: var(--space-2); color: var(--gold-300); }
.ar-gate__head h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 24px; color: var(--ink-100); }

/* ---------- set-logging row ---------- */

.ar-set {
  display: grid;
  grid-template-columns: 26px 1fr 64px 64px 40px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-200);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-sm);
}
.ar-set + .ar-set { margin-top: var(--space-2); }
.ar-set__n {
  font-family: var(--font-numeric); font-size: 15px; font-weight: 600;
  color: var(--ink-300); text-align: center;
}
.ar-set__prev { font-size: 11px; line-height: 14px; color: var(--ink-300); }
.ar-set__prev b { display: block; font-family: var(--font-numeric); font-size: 13px; font-weight: 600; color: var(--ink-200); }
.ar-set__in {
  width: 100%; min-height: 40px;
  background: var(--surface-300);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-sm);
  color: var(--ink-100);
  font-family: var(--font-numeric); font-size: 15px; font-weight: 600;
  text-align: center;
  outline: none;
  padding: 0 2px;
  -moz-appearance: textfield;
}
.ar-set__in::-webkit-outer-spin-button, .ar-set__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ar-set__in:focus { border-color: var(--gold-400); box-shadow: 0 0 0 3px var(--gold-700); }
.ar-set__in::placeholder { color: var(--ink-300); font-weight: 400; }
.ar-set__tick {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-300);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-sm);
  color: var(--ink-300);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ar-set__tick:hover { background: var(--surface-400); color: var(--ink-100); }
.ar-set--done { background: var(--success-700); border-color: var(--success-400); }
.ar-set--done .ar-set__in { background: transparent; border-color: transparent; color: var(--ink-100); }
.ar-set--done .ar-set__tick { background: var(--success-400); border-color: var(--success-400); color: var(--surface-000); }
.ar-set--done .ar-set__n { color: var(--success-400); }
.ar-set__head {
  display: grid; grid-template-columns: 26px 1fr 64px 64px 40px;
  gap: var(--space-2); padding: 0 var(--space-3) var(--space-2);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-300);
  text-align: center;
}
.ar-set__head span:nth-child(2) { text-align: left; }

/* ---------- calorie ring ---------- */

.ar-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ar-ring svg { transform: rotate(-90deg); display: block; }
.ar-ring__track { stroke: var(--surface-300); fill: none; }
.ar-ring__fill  { stroke: var(--gold-400); fill: none; stroke-linecap: round; transition: stroke-dashoffset .5s ease, stroke .2s ease; }
.ar-ring--near .ar-ring__fill { stroke: var(--warn-400); }
.ar-ring--over .ar-ring__fill { stroke: var(--danger-400); }
.ar-ring--over .ar-ring__track { stroke: var(--danger-700); }
.ar-ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ar-ring__val { font-family: var(--font-numeric); font-size: 46px; font-weight: 700; line-height: 46px; color: var(--ink-100); }
.ar-ring--over .ar-ring__val { color: var(--danger-400); }
.ar-ring__cap { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-300); margin-top: var(--space-1); }

/* ---------- tab bar ---------- */

.ar-tabbar {
  display: flex;
  background: var(--surface-200);
  border-top: 1px solid var(--line-200);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-2) var(--space-1) var(--space-3);
}
.ar-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: var(--space-1) 2px;
  color: var(--ink-300);
  font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 14px;
  cursor: pointer;
}
.ar-tab:hover { color: var(--ink-200); }
.ar-tab[aria-current="page"] { color: var(--gold-300); }
.ar-tab__pip { width: 16px; height: 2px; border-radius: var(--radius-pill); background: transparent; margin-top: 1px; }
.ar-tab[aria-current="page"] .ar-tab__pip { background: var(--gold-400); }

/* ---------- empty state ---------- */

.ar-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-16) var(--space-6);
  gap: var(--space-3);
}
.ar-empty__mark {
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-200);
  border: 1px solid var(--line-200);
  color: var(--ink-300);
  margin-bottom: var(--space-1);
}
.ar-empty__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 24px; color: var(--ink-100); margin: 0; }
.ar-empty__body { font-size: 13px; line-height: 20px; color: var(--ink-300); margin: 0; max-width: 34ch; }

/* ---------- screen chrome ---------- */

.ar-appbar {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: 0 var(--space-5);
  background: var(--surface-100);
  border-bottom: 1px solid var(--line-100);
}
.ar-appbar h1 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 24px; }
.ar-appbar__btn {
  width: 36px; height: 36px; margin-left: calc(var(--space-2) * -1);
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--ink-100); cursor: pointer;
}
.ar-appbar__btn:hover { background: var(--surface-300); }

.ar-sect { margin-top: var(--space-8); }
.ar-sect__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
.ar-sect__head h2 {
  margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 24px; color: var(--ink-100);
}
.ar-eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; line-height: 14px; text-transform: uppercase; color: var(--gold-300);
}

.ar-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-4);
  background: var(--surface-200);
  border: 0; border-bottom: 1px solid var(--line-100);
  color: var(--ink-100); text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; line-height: 23px;
}
.ar-row:last-child { border-bottom: 0; }
.ar-row:hover { background: var(--surface-300); }
.ar-row__sub { font-size: 13px; line-height: 20px; color: var(--ink-300); }
.ar-rows { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-100); }

.ar-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--scrim-soft) 0%, var(--scrim-hard) 62%, var(--surface-100) 100%);
}