/* module:tracker - legend, controls, calendar, stat tiles (Night Shift).
   Every selector starts with .m-tracker.
   Note: the per-fill hover restatements below are mandatory; a generic
   cell hover rule otherwise outranks the mark background and blanks the
   fill (prescription-v2 section 5.6). */

.m-tracker h2{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0 0 6px;
}

.m-tracker h2::before{
  content:"";
  display:block;
  width:28px;
  height:3px;
  border-radius:2px;
  background:var(--accent);
  margin-bottom:12px;
}

.m-tracker .section-sub{
  color:var(--sub);
  font-size:0.95rem;
  line-height:1.5;
  margin:0 0 20px;
}

/* Legend */

.m-tracker .legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px 16px;
  margin-bottom:16px;
  font-size:0.88rem;
  font-weight:400;
  line-height:1.4;
  color:var(--ink);
}

.m-tracker .legend-item{
  display:flex;
  align-items:center;
  gap:6px;
}

.m-tracker .swatch{
  width:12px;
  height:12px;
  border-radius:3px;
  display:inline-block;
}

.m-tracker .sw-strength{background:var(--fill-strength);}
.m-tracker .sw-cardio{background:var(--fill-cardio);}
.m-tracker .sw-active{background:var(--fill-active);}
.m-tracker .sw-rest{background:var(--fill-rest);}
.m-tracker .sw-blank{background:var(--panel-2);border:1px solid var(--line-strong);}

/* Month controls */

.m-tracker .cal-controls{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}

.m-tracker .cal-controls button{
  font-family:var(--font-data);
  font-weight:600;
  font-size:0.72rem;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:var(--panel-2);
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:9px 16px;
  cursor:pointer;
  transition:border-color var(--dur-slow) var(--ease),
    color var(--dur-slow) var(--ease),
    background-color var(--dur-slow) var(--ease),
    transform var(--dur-fast) var(--ease);
}

@media (max-width:640px){
  .m-tracker .cal-controls button{min-height:44px;min-width:44px;}
}

.m-tracker .cal-controls button:hover{
  background:var(--accent-tint);
  color:var(--accent);
  border-color:var(--accent);
}

.m-tracker .cal-controls button:active{transform:scale(0.97);}

.m-tracker .month-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.45rem;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:0.03em;
  min-width:8.5em;
  text-align:center;
}

/* At narrow viewports the 8.5em label min-width plus two 44px buttons
   cannot fit; drop the min-width, tighten the gap, and scale the label
   with the viewport so September 2026 fits at 280px with no overflow.
   Buttons keep their 44px touch targets from the 640px rule above. */
@media (max-width:360px){
  .m-tracker .cal-controls{gap:8px;}
  .m-tracker .month-label{
    min-width:0;
    white-space:nowrap;
    font-size:clamp(1rem,6.4vw,1.45rem);
  }
}

/* Calendar frame and grid */

.m-tracker .calendar{
  --cal-ground:var(--panel);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:16px;
}

.m-tracker .cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

@media (max-width:480px){
  .m-tracker .calendar{
    --cal-ground:var(--bg);
    border:none;
    background:transparent;
    padding:0;
    border-radius:0;
  }
  .m-tracker .cal-grid{gap:4px;}
}

.m-tracker .cal-dow{
  font-family:var(--font-data);
  font-weight:500;
  font-size:0.64rem;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--sub);
  text-align:center;
  padding-bottom:4px;
}

/* Calendar day cells (buttons) */

.m-tracker .cal-day{
  font:inherit;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  text-align:center;
  min-height:72px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  user-select:none;
  font-size:0.85rem;
  position:relative;
  transition:background-color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}

@media (max-width:640px){
  .m-tracker .cal-day{aspect-ratio:1/1;min-height:0;}
}

.m-tracker .cal-day .num{
  font-family:var(--font-data);
  font-weight:500;
  line-height:1.4;
}

.m-tracker .cal-day:not(.empty):hover{
  background:var(--panel-hover);
  border-color:var(--line-strong);
}

.m-tracker .cal-day:not(.empty):active{transform:scale(0.94);}
.m-tracker .cal-day:focus-visible{outline-offset:1px;}

.m-tracker .cal-day.empty{
  background:transparent;
  border:none;
  cursor:default;
}

.m-tracker .cal-day.mark-strength{background:var(--fill-strength);border-color:transparent;color:var(--ink-on-fill);}
.m-tracker .cal-day.mark-cardio{background:var(--fill-cardio);border-color:transparent;color:var(--ink-on-fill);}
.m-tracker .cal-day.mark-active{background:var(--fill-active);border-color:transparent;color:var(--ink-on-fill);}
.m-tracker .cal-day.mark-rest{background:var(--fill-rest);border-color:transparent;color:var(--ink-on-fill);}

.m-tracker .cal-day.mark-strength .num,
.m-tracker .cal-day.mark-cardio .num,
.m-tracker .cal-day.mark-active .num,
.m-tracker .cal-day.mark-rest .num{font-weight:600;}

/* Mandatory per-fill hover restatement (see note at top of file) */
.m-tracker .cal-day.mark-strength:hover{background:var(--fill-strength);filter:brightness(1.1);border-color:transparent;}
.m-tracker .cal-day.mark-cardio:hover{background:var(--fill-cardio);filter:brightness(1.1);border-color:transparent;}
.m-tracker .cal-day.mark-active:hover{background:var(--fill-active);filter:brightness(1.1);border-color:transparent;}
.m-tracker .cal-day.mark-rest:hover{background:var(--fill-rest);filter:brightness(1.1);border-color:transparent;}

.m-tracker .cal-day.today{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--cal-ground),
    0 0 0 4px var(--accent),
    0 0 14px 4px var(--accent-glow);
}

.m-tracker .dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:0.9;
}

/* Stat tiles */

.m-tracker .streak-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}

.m-tracker .stat{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--stat-color);
  border-radius:var(--radius-md);
  padding:16px 18px 14px;
  min-width:0;
}

.m-tracker .stat:nth-child(1){--stat-color:var(--ink);}
.m-tracker .stat:nth-child(2){--stat-color:var(--accent);}
.m-tracker .stat:nth-child(3){--stat-color:var(--fill-cardio);}

@media (max-width:640px){
  .m-tracker .stat{padding:12px 12px 10px;}
}

.m-tracker .num-big{
  font-family:var(--font-data);
  font-weight:700;
  font-size:2.3rem;
  line-height:1.1;
  color:var(--stat-color);
}

@media (max-width:640px){
  .m-tracker .num-big{font-size:1.9rem;}
}

.m-tracker .lbl{
  font-family:var(--font-data);
  font-weight:500;
  font-size:0.62rem;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:0.11em;
  color:var(--sub);
  margin-top:4px;
}

@media (max-width:640px){
  .m-tracker .lbl{font-size:0.6rem;letter-spacing:0.05em;}
}

.m-tracker .print-note{
  font-size:0.82rem;
  font-weight:400;
  line-height:1.5;
  color:var(--sub);
  margin-top:14px;
}

/* Motion */

@media (prefers-reduced-motion:reduce){
  .m-tracker .cal-day:not(.empty):active{transform:none;}
  .m-tracker .cal-controls button:active{transform:none;}
}

/* Print */

@media print{
  .m-tracker .cal-controls button{display:none;}
  .m-tracker .num-big{color:var(--ink);}
  .m-tracker .cal-day,
  .m-tracker .swatch,
  .m-tracker .stat{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    page-break-inside:avoid;
  }
}