/* ============================================================
   Vita 365 — 체크인 이력, v2 skin

   The last screen in the check-in flow still on the cream palette:
   the 플랜 tile and the check-in's own "이력 보기" both land here, so
   a member left a v2 screen and arrived on the old app.

   Same shape as checkin-v2.css — re-point the --vdw-* family rather
   than restyle history.css rule by rule, then name the few colours it
   hard-codes. Every rule needs an ancestor `.v2`.
   ============================================================ */

.v2 .vdw-history-shell {
  --vdw-bg:         var(--v2-bg);
  --vdw-card:       var(--v2-surface);
  --vdw-border:     var(--v2-line);
  --vdw-ink:        var(--v2-ink);
  --vdw-quiet:      var(--v2-ink-3);
  --vdw-forest:     var(--v2-brand-btn);
  --vdw-terracotta: var(--v2-bad);

  color: var(--v2-ink);
  max-width: 720px;
}

/* No serif in v2 — the headline, the trend numerals, the card and
   empty-state headings and the per-row analysis heading all asked for
   Fraunces. */
.v2 .vdw-h1 { font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -0.03em; }
.v2 .vdw-lede { color: var(--v2-ink-2); font-size: var(--v2-fs-sm); line-height: var(--v2-lh-loose); }
.v2 .vdw-back { color: var(--v2-brand-ink); font-weight: 600; }

/* ─── Cards: hairline border → floating white ───────────────── */
.v2 .vdw-trend-card,
.v2 .vdw-history-shell .vdw-card {
  background: var(--v2-surface);
  border: none;
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card);
}
.v2 .vdw-trend-card:hover { box-shadow: var(--v2-sh-pop); }
.v2 .vdw-trend-label {
  font-size: var(--v2-fs-micro); letter-spacing: .06em; color: var(--v2-ink-3); font-weight: 700;
}
.v2 .vdw-trend-value {
  font-size: var(--v2-fs-title); font-weight: 700;
  letter-spacing: var(--v2-num-tracking); color: var(--v2-ink);
}
.v2 .vdw-history-shell .vdw-card h2 { font-size: var(--v2-fs-section); font-weight: 700; }

/* Delta pills. Up is a gain and down a loss, which on this screen is
   weight — so "down" is the encouraging one and keeps the brand tint. */
.v2 .vdw-trend-delta { background: var(--v2-surface-2); color: var(--v2-ink-2); }
.v2 .vdw-trend-delta.up   { background: var(--v2-c-move-tint); color: var(--v2-warn); }
.v2 .vdw-trend-delta.down { background: var(--v2-brand-tint); color: var(--v2-brand-ink); }

/* ─── Weekly log table ──────────────────────────────────────── */
.v2 .vdw-table th { color: var(--v2-ink-3); }
.v2 .vdw-table th, .v2 .vdw-table td { border-bottom-color: var(--v2-line); }
.v2 .vdw-table tbody tr[data-row]:hover { background: var(--v2-surface-2); }
.v2 .vdw-table .bar { background: var(--v2-surface-sunken); }
.v2 .vdw-table .bar-fill { background: var(--v2-brand); }
.v2 .vdw-row-toggle { color: var(--v2-brand-ink); }

/* Per-row coach analysis — a sunken panel rather than a tinted one. */
.v2 .vdw-row-detail { background: var(--v2-surface-2); color: var(--v2-ink); }
.v2 .vdw-row-detail h4 { font-size: var(--v2-fs-caption); font-weight: 700; color: var(--v2-brand-ink); }
.v2 .vdw-row-detail .focus {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-sm);
}

/* ─── Empty state ───────────────────────────────────────────── */
.v2 .vdw-empty h2 { font-size: var(--v2-fs-section); font-weight: 700; color: var(--v2-ink); }
.v2 .vdw-empty .vdw-cta {
  background: var(--v2-brand-btn); color: #fff;
  border-radius: var(--v2-r-md); padding: 14px 22px; font-weight: 700;
}

/* The completion bar's fill is a <span>, and history.css never gave it a
   display — so it was an inline box, 0×0, and the bar has been drawing
   as an empty grey pill for every row since this screen shipped. The
   cream palette hid it; against a v2 pill it is obvious. */
.v2 .vdw-table .bar-fill { display: block; }

/* ─── Phone: one block per week, not a six-column table ──────
   375px minus the shell padding leaves ~48px a column, so every cell
   wrapped mid-value — "78. 4 kg", "7. 1h", "4 /5". The <th> labels move
   into the cells (history.js copies them onto data-label, so they stay
   trilingual) and each week becomes a stack. */
@media (max-width: 720px) {
  .v2 .vdw-table thead { display: none; }
  .v2 .vdw-table, .v2 .vdw-table tbody { display: block; }
  /* Separator BETWEEN weeks, drawn as a top border on every week after
     the first. It was a bottom border with a `:last-of-type` exception,
     and that exception never fired: each week renders a hidden
     `tr[data-detail]` after its `tr[data-row]`, so the last <tr> in the
     table is the detail row and no data-row is ever last-of-type. The
     result was a hairline under the final week with nothing beneath it.
     `~` skips over the detail rows, which `+` would not. */
  .v2 .vdw-table tr[data-row] {
    display: block; padding: 14px 0;
  }
  .v2 .vdw-table tbody tr[data-row] ~ tr[data-row] {
    border-top: 1px solid var(--v2-line);
  }
  .v2 .vdw-table tr[data-row] > td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 5px 0; border-bottom: none; font-size: var(--v2-fs-caption);
  }
  .v2 .vdw-table tr[data-row] > td::before {
    content: attr(data-label);
    color: var(--v2-ink-3); font-size: var(--v2-fs-label); font-weight: 600;
    flex-shrink: 0;
  }
  /* The week is the block's heading, and the toggle its footer — neither
     wants a label or a two-column split. */
  .v2 .vdw-table tr[data-row] > td.wk {
    display: block; font-size: var(--v2-fs-body); padding-bottom: 8px;
  }
  .v2 .vdw-table tr[data-row] > td.act {
    display: block; text-align: left !important; padding-top: 8px;
  }
  .v2 .vdw-table tr[data-row] > td.act:empty { display: none; }
  .v2 .vdw-table .bar { width: 88px; }
  /* The expanded analysis spans the block rather than a table column. */
  .v2 .vdw-table tr[data-detail], .v2 .vdw-table tr[data-detail] > td { display: block; }
}