/* Depends on: tokens.css -- linked as a separate <link> tag by every
   template that uses this file, NOT @import-ed here. See the note at the
   top of profile.css for why (test_template_lint.py enforces it).

   Shared by the profile's 52-week season grid (core/_season_heatmap.html)
   and a car's part-wear matrix (core/_wear_matrix.html). They live in one
   file because they share the shade scale below: two grids on the same
   site that mean "more" with different greens would read as two different
   scales rather than one visual language. */

:root {
  /* Five steps of the brand accent. hm-l0 is "nothing happened" and is
     deliberately a surface tone, not a pale green -- an empty day must not
     look like a faint one. */
  --hm-l0: var(--surface-raised);
  --hm-l1: rgba(0, 230, 118, 0.22);
  --hm-l2: rgba(0, 230, 118, 0.45);
  --hm-l3: rgba(0, 230, 118, 0.7);
  --hm-l4: var(--accent);
}

.hm-cell {
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--hm-l0); flex: none;
}
.hm-l0 { background: var(--hm-l0); }
.hm-l1 { background: var(--hm-l1); }
.hm-l2 { background: var(--hm-l2); }
.hm-l3 { background: var(--hm-l3); }
.hm-l4 { background: var(--hm-l4); }
.hm-empty { background: transparent; }

/* A day whose activity belongs to exactly one event is a link to it. It
   keeps the cell's exact box so the grid geometry is unchanged, and
   announces itself on hover and on keyboard focus -- at 11px there is no
   room for any other affordance. */
a.hm-cell { display: block; }
a.hm-cell:hover { outline: 1px solid var(--accent); outline-offset: 1px; }
a.hm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Season grid (profile) ---- */

.heatmap-card { padding: 20px 22px 16px; margin-bottom: 20px; }

/* The grid is 52 columns wide and will not fit a phone. Scrolling it
   horizontally beats shrinking cells below a tappable//hoverable size,
   and beats wrapping, which would destroy the week-column reading. */
.hm-scroll { overflow-x: auto; padding-bottom: 6px; margin-top: 14px; }
.hm-scroll::-webkit-scrollbar { height: 6px; }
.hm-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.hm-grid { display: inline-flex; flex-direction: column; gap: 4px; min-width: min-content; }
.hm-months { display: flex; gap: 3px; }
.hm-month {
  width: 11px; flex: none; font-size: 10px; color: var(--text-tertiary);
  white-space: nowrap; overflow: visible;
}
.hm-body { display: flex; gap: 3px; }
.hm-week { display: flex; flex-direction: column; gap: 3px; }

/* Three labels spread across seven 11px rows with 3px gaps. */
.hm-daycol {
  width: 16px; flex: none; display: flex; flex-direction: column;
  justify-content: space-around; font-size: 9px; color: var(--text-tertiary);
}

.hm-legend {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
  font-size: 11px; color: var(--text-tertiary);
}
.hm-scale { display: flex; align-items: center; gap: 3px; }
.hm-scale i { display: block; }

/* ---- Wear matrix (car detail) ---- */

.wear-matrix { margin-top: 14px; overflow-x: auto; }
.wm-table { border-collapse: separate; border-spacing: 3px; font-size: 11px; }
.wm-table th {
  font-weight: 600; color: var(--text-tertiary); text-align: left;
  white-space: nowrap; font-size: 10px;
}
.wm-table th.wm-part { text-align: right; padding-right: 6px; color: var(--text-secondary); }
.wm-cell {
  width: 30px; height: 20px; border-radius: 4px; background: var(--hm-l0);
  position: relative; text-align: center;
}
.wm-cell.wm-none { background: transparent; border: 1px dashed var(--line); }
/* The change marker: this event is where the part was replaced and its
   meter reset, so the cell is both the end of one cycle and the start of
   the next. Drawn on top of the shade rather than replacing it. */
.wm-cell .wm-swap {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 9px; color: var(--ink); font-weight: 700;
}
.wm-cell.wm-l0 .wm-swap, .wm-cell.wm-l1 .wm-swap { color: var(--accent); }
.wm-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; font-size: 11px; color: var(--text-tertiary);
}