.heatmap-shell{padding:42px 0 86px;--heat-accent:#ff5064;--heat-l1:color-mix(in srgb,var(--heat-accent) 18%,var(--card));--heat-l2:color-mix(in srgb,var(--heat-accent) 40%,var(--card));--heat-l3:color-mix(in srgb,var(--heat-accent) 68%,var(--card));--heat-l4:var(--heat-accent)}
.heatmap-hero,.heatmap-panel,.heatmap-side-card,.heatmap-metrics article{background:var(--card);border:1px solid var(--line);border-radius:26px}
.heatmap-hero{padding:30px 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:14px}
.heatmap-hero h1{margin:7px 0 10px;font-size:clamp(36px,6vw,62px);line-height:1;letter-spacing:-.055em}.heatmap-hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.8;max-width:720px}.heatmap-hero-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.heatmap-hero-actions .learning-btn.primary,.heatmap-dialog-actions .learning-btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.heatmap-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.heatmap-metrics article{padding:20px 21px}.heatmap-metrics span,.heatmap-metrics small{display:block;color:var(--muted)}.heatmap-metrics span{font-size:11px;font-weight:760}.heatmap-metrics strong{display:block;margin:9px 0 7px;font-size:32px;line-height:1;letter-spacing:-.04em}.heatmap-metrics small{font-size:9px;line-height:1.5}
.heatmap-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);gap:14px;align-items:start}.heatmap-panel{padding:24px}.heatmap-panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}.heatmap-panel-head h2{margin:4px 0 5px;font-size:29px;letter-spacing:-.04em}.heatmap-panel-head p{margin:0;color:var(--muted);font-size:11px}.heatmap-segment{display:flex;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:14px}.heatmap-segment button{border:0;background:transparent;border-radius:10px;padding:9px 13px;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer}.heatmap-segment button.active{background:var(--card);color:var(--ink);box-shadow:0 3px 12px rgba(15,23,42,.07)}
.heatmap-calendar-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;margin:20px 0 13px}.heatmap-nav-btn{width:44px;height:44px;border:1px solid var(--line);background:var(--card);border-radius:14px;color:var(--heat-accent);font-size:28px;line-height:1;cursor:pointer}.heatmap-month-label{border:0;background:transparent;color:var(--ink);font-size:22px;font-weight:900;letter-spacing:-.025em;cursor:pointer}.heatmap-weekdays,.heatmap-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.heatmap-weekdays{margin-bottom:7px}.heatmap-weekdays span{text-align:center;color:var(--muted);font-size:10px;font-weight:800}.heatmap-day{position:relative;aspect-ratio:1/1;border:1px solid transparent;border-radius:16px;display:grid;place-items:center;background:var(--soft);color:var(--muted);font-size:15px;font-weight:850;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.heatmap-day:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--heat-accent) 45%,var(--line))}.heatmap-day.empty{background:transparent;cursor:default}.heatmap-day.empty:hover{transform:none;border-color:transparent}.heatmap-day[data-level="0"]{background:var(--soft);color:color-mix(in srgb,var(--muted) 48%,transparent)}.heatmap-day[data-level="1"]{background:var(--heat-l1);color:color-mix(in srgb,var(--heat-accent) 75%,var(--ink))}.heatmap-day[data-level="2"]{background:var(--heat-l2);color:color-mix(in srgb,var(--heat-accent) 86%,#382028)}.heatmap-day[data-level="3"]{background:var(--heat-l3);color:#fff}.heatmap-day[data-level="4"]{background:var(--heat-l4);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--heat-accent) 25%,transparent)}.heatmap-day.today{outline:2px solid var(--ink);outline-offset:2px}.heatmap-day b{font:inherit}.heatmap-day small{position:absolute;right:6px;bottom:5px;font-size:8px;font-weight:900;opacity:.86}
.heatmap-legend{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:11px;color:var(--muted);font-size:9px}.heatmap-legend i{width:16px;height:16px;border-radius:5px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent)}.heatmap-legend i[data-lv="0"]{background:var(--soft)}.heatmap-legend i[data-lv="1"]{background:var(--heat-l1)}.heatmap-legend i[data-lv="2"]{background:var(--heat-l2)}.heatmap-legend i[data-lv="3"]{background:var(--heat-l3)}.heatmap-legend i[data-lv="4"]{background:var(--heat-l4)}
.heatmap-summary{margin-top:17px;padding:18px 19px;border-radius:20px;background:color-mix(in srgb,var(--heat-accent) 5%,var(--card));border:1px solid color-mix(in srgb,var(--heat-accent) 20%,var(--line));display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}.heatmap-summary>div:first-child span{display:block;color:var(--muted);font-size:9px}.heatmap-summary>div:first-child strong{display:block;margin-top:3px;color:var(--heat-accent);font-size:34px;letter-spacing:-.045em}.heatmap-summary b{font-size:20px}.heatmap-summary p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.6}
.heatmap-year-head{margin-top:18px}.heatmap-year-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.heatmap-mini-month{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:12px}.heatmap-mini-month h3{margin:0 0 9px;font-size:12px}.heatmap-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.heatmap-mini-day{aspect-ratio:1/1;border-radius:4px;background:var(--soft)}.heatmap-mini-day[data-level="1"]{background:var(--heat-l1)}.heatmap-mini-day[data-level="2"]{background:var(--heat-l2)}.heatmap-mini-day[data-level="3"]{background:var(--heat-l3)}.heatmap-mini-day[data-level="4"]{background:var(--heat-l4)}
.heatmap-side{display:grid;gap:12px}.heatmap-side-card{padding:20px}.heatmap-side-card h3{margin:4px 0 0;font-size:22px}.heatmap-today-number{display:inline-block;margin-top:14px;font-size:48px;line-height:1;letter-spacing:-.05em}.heatmap-side-card>span{color:var(--muted);font-size:11px}.heatmap-source-bars,.heatmap-source-list{display:grid;gap:9px;margin-top:16px}.heatmap-source-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.heatmap-source-item strong{font-size:11px}.heatmap-source-item span{color:var(--muted);font-size:10px}.heatmap-source-track{grid-column:1/-1;height:6px;border-radius:99px;background:var(--soft);overflow:hidden}.heatmap-source-track i{display:block;height:100%;border-radius:inherit;background:var(--heat-accent)}.heatmap-tip strong{font-size:12px}.heatmap-tip p{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.75}
.heatmap-dialog{border:0;padding:0;background:transparent;max-width:min(520px,calc(100vw - 28px));width:100%}.heatmap-dialog::backdrop{background:rgba(15,23,42,.44);backdrop-filter:blur(4px)}.heatmap-dialog-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 30px 90px rgba(15,23,42,.25)}.heatmap-dialog-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.heatmap-dialog-card header span{font-size:9px;color:var(--muted);font-weight:850}.heatmap-dialog-card header h3{margin:4px 0 0;font-size:24px}.heatmap-dialog-card header button{width:36px;height:36px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:22px;color:var(--muted);cursor:pointer}.heatmap-day-events{display:grid;gap:8px;max-height:55vh;overflow:auto}.heatmap-event{padding:12px 13px;border:1px solid var(--line);border-radius:15px;background:var(--soft);display:grid;grid-template-columns:auto 1fr;gap:10px}.heatmap-event-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);font-size:11px;font-weight:900}.heatmap-event strong{display:block;font-size:11px}.heatmap-event small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.5}.heatmap-empty{padding:18px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);font-size:11px;text-align:center}.heatmap-field{display:grid;gap:7px;margin-top:12px}.heatmap-field>span{font-size:10px;color:var(--muted);font-weight:800}.heatmap-field input,.heatmap-field select,.heatmap-field textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink);padding:11px 12px;font:inherit;outline:0}.heatmap-field textarea{min-height:90px;resize:vertical}.heatmap-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.heatmap-manual-hint{margin:10px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
@media(max-width:960px){.heatmap-layout{grid-template-columns:1fr}.heatmap-side{grid-template-columns:1fr 1fr}.heatmap-tip{grid-column:1/-1}.heatmap-year-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.heatmap-shell{padding:28px 0 62px}.heatmap-hero{padding:23px;border-radius:22px;align-items:flex-start;flex-direction:column}.heatmap-hero-actions{width:100%;justify-content:flex-start}.heatmap-metrics{grid-template-columns:1fr 1fr}.heatmap-panel{padding:17px;border-radius:22px}.heatmap-panel-head{align-items:flex-start;flex-direction:column}.heatmap-segment{width:100%}.heatmap-segment button{flex:1}.heatmap-weekdays,.heatmap-month-grid{gap:5px}.heatmap-day{border-radius:11px;font-size:13px}.heatmap-day small{display:none}.heatmap-summary{grid-template-columns:1fr;gap:9px}.heatmap-year-grid{grid-template-columns:1fr 1fr}.heatmap-side{grid-template-columns:1fr}.heatmap-tip{grid-column:auto}}
@media(max-width:380px){.heatmap-year-grid{grid-template-columns:1fr}.heatmap-metrics{grid-template-columns:1fr 1fr}.heatmap-metrics strong{font-size:28px}}

/* Tablet density and landscape behavior are kept here so the page has one heatmap stylesheet. */
@media (min-width:721px) and (max-width:1180px),(min-width:721px) and (max-width:1366px) and (any-pointer:coarse){
  .heatmap-shell{padding:34px 0 72px}
  .heatmap-hero{padding:25px 27px}
  .heatmap-hero h1{font-size:clamp(40px,5vw,52px)}
  .heatmap-metrics article{padding:17px 18px}
  .heatmap-metrics strong{font-size:29px}
  .heatmap-layout{grid-template-columns:1fr}
  .heatmap-panel{padding:20px 22px}
  .heatmap-panel-head{max-width:760px;margin-inline:auto}
  .heatmap-calendar-head,.heatmap-weekdays,.heatmap-month-grid,.heatmap-legend,.heatmap-summary{width:min(100%,560px);margin-left:auto;margin-right:auto}
  .heatmap-calendar-head{grid-template-columns:40px 1fr 40px;gap:10px;margin-top:16px;margin-bottom:11px}
  .heatmap-nav-btn{width:40px;height:40px;border-radius:13px;font-size:25px}
  .heatmap-month-label{font-size:20px}
  .heatmap-weekdays,.heatmap-month-grid{gap:6px}
  .heatmap-weekdays span{font-size:9px}
  .heatmap-day{border-radius:13px;font-size:14px}
  .heatmap-day small{right:5px;bottom:4px;font-size:7px}
  .heatmap-legend{margin-top:9px}
  .heatmap-summary{margin-top:14px;padding:15px 17px}
  .heatmap-summary>div:first-child strong{font-size:30px}
  .heatmap-summary b{font-size:18px}
  .heatmap-side{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .heatmap-side-card{padding:17px 18px}
  .heatmap-side-card h3{font-size:19px}
  .heatmap-today-number{font-size:40px}
  .heatmap-tip{grid-column:auto}
  .heatmap-year-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .heatmap-mini-month{padding:10px;border-radius:16px}
}
@media (min-width:960px) and (max-width:1366px) and (any-pointer:coarse) and (orientation:landscape){
  .heatmap-layout{grid-template-columns:minmax(0,1fr) 250px;gap:12px}
  .heatmap-side{grid-template-columns:1fr}
  .heatmap-tip{grid-column:auto}
  .heatmap-calendar-head,.heatmap-weekdays,.heatmap-month-grid,.heatmap-legend,.heatmap-summary{width:min(100%,570px)}
}