/* ==========================================================================
   views.css — view-specific composition: hero, log rows, heatmap, charts
   ========================================================================== */

/* ---- hero / arc header --------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--r-xl);
  background: var(--surface-1);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}
.hero::after {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 420px; height: 420px; pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  opacity: .9;
}
.hero-main { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hero-figure {
  font: 600 var(--fs-hero)/.92 var(--sans);
  letter-spacing: -.035em;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.hero-figure .unit { font-size: .3em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.hero-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hero-mantra {
  font-size: var(--fs-sm); color: var(--ink-2); font-style: italic;
  border-left: 2px solid var(--accent-line); padding-left: 10px; max-width: 54ch;
}
.hero-ring { position: relative; display: grid; place-items: center; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-ring { justify-self: start; }
}

/* progress ring */
.ring { display: block; }
.ring-track { fill: none; stroke: var(--surface-3); }
.ring-fill { fill: none; stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset var(--slow) var(--ease); }
.ring-label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 1px;
}
.ring-label .v { font: 600 var(--fs-lg)/1 var(--mono); letter-spacing: -.02em; }
.ring-label .l { font: 500 var(--fs-micro)/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

/* ---- arc timeline bar ---------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 7px; }
.timeline-bar {
  position: relative; height: 26px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--hairline);
  overflow: hidden;
}
.timeline-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(to right, color-mix(in oklab, var(--accent) 22%, transparent), var(--accent-soft));
  border-right: 2px solid var(--accent);
  transition: width var(--slow) var(--ease);
}
.timeline-ticks { position: absolute; inset: 0; display: flex; }
.timeline-tick { flex: 1 1 0; border-right: 1px solid var(--hairline); }
.timeline-tick:last-child { border-right: 0; }
.timeline-legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- log rows (today view) ----------------------------------------------- */
.log-group + .log-group { margin-top: var(--sp-5); }
.log-rows { display: flex; flex-direction: column; gap: var(--sp-2); }

.log-row {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3) 10px 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.log-row:hover { border-color: var(--hairline-str); }
.log-row.is-done { background: color-mix(in oklab, var(--habit, var(--accent)) 7%, var(--surface-1)); border-color: color-mix(in oklab, var(--habit, var(--accent)) 26%, transparent); }
.log-row.is-off { opacity: .45; }

.log-check {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-str); border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-4);
  transition: all var(--fast) var(--ease);
}
.log-check svg { width: 17px; height: 17px; }
.log-check:hover { border-color: var(--habit, var(--accent)); color: var(--habit, var(--accent)); }
.log-row.is-done .log-check {
  background: var(--habit, var(--accent)); border-color: transparent; color: var(--plane);
  animation: checkPop var(--med) var(--ease);
}
.log-row.is-partial .log-check { border-color: var(--habit, var(--accent)); color: var(--habit, var(--accent)); }
@keyframes checkPop { 0% { scale: 1 } 42% { scale: .86 } 100% { scale: 1 } }

.log-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.log-name { font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.log-name .icon { font-size: 14px; line-height: 1; }
.log-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); flex-wrap: wrap; }
.log-streak { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); }
.log-streak svg { width: 11px; height: 11px; color: var(--warning); }

.log-ctl { display: flex; align-items: center; gap: var(--sp-2); }
.log-ctl .stepper { display: flex; align-items: center; gap: 2px; }
.log-ctl input[type="number"] { width: 72px; text-align: center; padding: 6px 4px; }
.log-ctl .unit { font-size: var(--fs-xs); color: var(--ink-3); min-width: 0; }

.scale-pick { display: flex; gap: 3px; }
.scale-pick button {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-str); background: var(--surface-2);
  font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-3);
  transition: all var(--fast) var(--ease);
}
.scale-pick button[aria-pressed="true"] { background: var(--habit, var(--accent)); border-color: transparent; color: var(--plane); }

.day-nav { display: flex; align-items: center; gap: var(--sp-2); }
.day-nav-date { display: flex; flex-direction: column; min-width: 0; }
.day-nav-date .d { font-size: var(--fs-md); font-weight: 600; }
.day-nav-date .w { font-size: var(--fs-xs); color: var(--ink-3); }

.metrics-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
.rating { display: flex; gap: 4px; }
.rating button {
  flex: 1 1 0; min-width: 0; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-str); background: var(--surface-2);
  font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-3);
  transition: all var(--fast) var(--ease);
}
.rating button:hover { color: var(--ink); }
.rating button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ---- heatmap ------------------------------------------------------------- */
.heat-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.heat-scroll { overflow-x: auto; padding-bottom: 2px; }
.heat {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
  width: max-content;
}
.heat-cell {
  width: 13px; height: 13px; border-radius: 3px;
  background: var(--h0);
  transition: outline-color var(--fast) var(--ease);
  outline: 1px solid transparent; outline-offset: 1px;
  cursor: pointer;
}
.heat-cell[data-l="1"] { background: var(--h1); }
.heat-cell[data-l="2"] { background: var(--h2); }
.heat-cell[data-l="3"] { background: var(--h3); }
.heat-cell[data-l="4"] { background: var(--h4); }
.heat-cell[data-l="5"] { background: var(--h5); }
.heat-cell.is-void { background: transparent; cursor: default; }
.heat-cell.is-today { outline-color: var(--accent); }
.heat-cell.is-future { background: transparent; border: 1px dashed var(--hairline); cursor: default; }
.heat-cell:hover:not(.is-void):not(.is-future) { outline-color: var(--ink-2); }
.heat-cell.is-rest { background: repeating-linear-gradient(135deg, var(--surface-3) 0 3px, var(--h0) 3px 6px); }

.heat-side { display: grid; grid-template-rows: repeat(7, 13px); gap: 3px; margin-right: 6px; }
.heat-side span { font: 500 9px/13px var(--mono); color: var(--ink-4); text-align: right; }
.heat-months { display: flex; gap: 3px; width: max-content; margin-left: 24px; margin-bottom: 4px; }
.heat-month { font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.heat-legend { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.heat-legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.heat-body { display: flex; align-items: flex-start; }

/* ---- charts -------------------------------------------------------------- */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.c-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.c-axis { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.c-tick { font: 400 var(--fs-micro)/1 var(--mono); fill: var(--muted); font-variant-numeric: tabular-nums; }
.c-label { font: 500 var(--fs-micro)/1 var(--mono); fill: var(--ink-3); letter-spacing: .08em; }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-area { stroke: none; opacity: .10; }
.c-bar { }
.c-dot { stroke: var(--surface-1); stroke-width: 2; }
.c-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 0; opacity: 0; }
.c-cross.is-on { opacity: .55; }
.c-hit { fill: transparent; }
.c-target { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.c-val { font: 500 var(--fs-xs)/1 var(--mono); fill: var(--ink); font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.legend-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.legend-key.is-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-key.is-dash { background: none !important; border-top: 2px dashed var(--ink-3); border-radius: 0; height: 0; }

.spark { display: block; width: 100%; height: 26px; overflow: visible; }

/* ---- calendar ------------------------------------------------------------ */
.cal { display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
.cal-head span { text-align: center; font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 4px; }
.cal-day {
  position: relative; aspect-ratio: 1 / .92; min-height: 54px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 6px 7px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-1);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  text-align: left; overflow: hidden;
}
.cal-day:hover { border-color: var(--hairline-str); }
.cal-day .dnum { font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-2); }
.cal-day .dscore { font: 600 var(--fs-sm)/1 var(--mono); color: var(--ink); }
.cal-day .dbar { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); }
.cal-day.is-out { opacity: .28; pointer-events: none; }
.cal-day.is-today { border-color: var(--accent); }
.cal-day.is-today .dnum { color: var(--accent); }
.cal-day.is-future .dscore { display: none; }
.cal-day.is-perfect { background: color-mix(in oklab, var(--accent) 10%, var(--surface-1)); }
.cal-day.is-rest::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hairline) 5px 6px);
}
.cal-day .dchips { display: flex; gap: 2px; flex-wrap: wrap; }
.cal-day .dchips i { width: 5px; height: 5px; border-radius: 50%; }
@media (max-width: 640px) {
  .cal-head, .cal-grid { gap: 4px; }
  .cal-day { min-height: 46px; padding: 4px 5px; }
}

/* ---- achievements -------------------------------------------------------- */
.badges { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); }
.badge {
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface-1);
  position: relative; overflow: hidden;
}
.badge.is-locked { opacity: .5; }
.badge.is-earned { border-color: var(--accent-line); }
.badge.is-earned::after {
  content: ""; position: absolute; inset: auto auto -30px -30px;
  width: 110px; height: 110px;
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
}
.badge-glyph { font-size: 20px; line-height: 1; }
.badge-name { font-size: var(--fs-sm); font-weight: 600; }
.badge-desc { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.badge-when { font: 500 var(--fs-micro)/1 var(--mono); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }

/* ---- journal ------------------------------------------------------------- */
.journal { display: flex; flex-direction: column; gap: var(--sp-3); }
.entry {
  display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface-1);
}
.entry-date { display: flex; flex-direction: column; gap: 2px; }
.entry-date .d { font: 600 var(--fs-sm)/1.2 var(--mono); }
.entry-date .w { font: 400 var(--fs-micro)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.entry-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.entry-text { font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-wrap; line-height: 1.65; }
.entry-text mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; padding: 0 2px; }
.entry-tags { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) { .entry { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---- habits (protocol) manager ------------------------------------------- */
.hab-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.hab-row {
  display: grid; grid-template-columns: 20px 28px minmax(0,1fr) auto auto; gap: var(--sp-3);
  align-items: center; padding: 10px var(--sp-3);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface-1);
}
.hab-row.is-archived { opacity: .5; }
.hab-drag { color: var(--ink-4); cursor: grab; display: grid; place-items: center; }
.hab-drag svg { width: 14px; height: 14px; }
.hab-row.is-dragging { opacity: .4; border-color: var(--accent); }
.hab-row.is-dragover { border-color: var(--accent); }
.hab-swatch {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 14px;
  border: 1px solid color-mix(in oklab, var(--habit) 45%, transparent);
  background: color-mix(in oklab, var(--habit) 15%, transparent);
}
.hab-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hab-info .n { font-size: var(--fs-sm); font-weight: 500; }
.hab-info .m { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hab-acts { display: flex; gap: 4px; }
@media (max-width: 640px) {
  .hab-row { grid-template-columns: 20px 28px minmax(0,1fr) auto; }
  .hab-row .hab-rate { display: none; }
}

.color-pick { display: flex; gap: 5px; flex-wrap: wrap; }
.color-pick button {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-str);
  transition: all var(--fast) var(--ease);
}
.color-pick button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.icon-pick { display: flex; gap: 4px; flex-wrap: wrap; }
.icon-pick button {
  width: 30px; height: 30px; border-radius: var(--r-sm); font-size: 15px;
  border: 1px solid var(--hairline-str); background: var(--surface-2);
}
.icon-pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* ---- rules / commitments ------------------------------------------------- */
.rules { display: flex; flex-direction: column; gap: var(--sp-2); }
.rule {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-1); font-size: var(--fs-sm);
}
.rule .n { font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-4); min-width: 18px; }
.rule .t { flex: 1 1 auto; min-width: 0; }

/* ---- goals --------------------------------------------------------------- */
.goal { display: flex; flex-direction: column; gap: var(--sp-3); }
.goal-top { display: flex; align-items: baseline; gap: var(--sp-3); }
.goal-top .n { font-size: var(--fs-sm); font-weight: 500; }
.goal-top .v { margin-left: auto; font: 600 var(--fs-sm)/1 var(--mono); font-variant-numeric: tabular-nums; }
.goal-foot { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- weekly review ------------------------------------------------------- */
.review-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); }
.review-item { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3); border-left: 2px solid var(--accent-line); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.review-item .l { font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.review-item .v { font-size: var(--fs-sm); }

/* ---- print --------------------------------------------------------------- */
@media print {
  body::before, .rail, .topbar-actions, .toasts { display: none !important; }
  .app { display: block; }
  .card, .tile, .hero { break-inside: avoid; }
}