/* Behavior only: retain every original color, font, icon and component shape. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}

/* Same completed-title treatment already used by .row.done .t for tasks. */
.hl.habit-done .hl-t,.agenda .row.habit-done>.main{text-decoration:line-through;color:var(--ink-3)}

/* The animated stroke follows measured text fragments, including wrapped lines. */
.row .t,.gp .t{background-image:none}
.just-done .t{text-decoration:line-through}
.completion-strike-active{position:relative;text-decoration:none!important}
.completion-strike-overlay{position:absolute;inset:0;pointer-events:none;color:var(--ink-3)}
.completion-strike-line{position:absolute;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* Paint the native label colors on top of the moving native selection pill.
   Clipping the text colors to the pill keeps both labels readable throughout. */
.nav.compasso-nav-motion{isolation:isolate}
.nav.compasso-nav-motion.has-ind button>span{
  background-image:linear-gradient(90deg,
    var(--ink) 0,
    var(--ink) calc(var(--compasso-pill-left) - var(--compasso-label-left)),
    var(--bg) calc(var(--compasso-pill-left) - var(--compasso-label-left)),
    var(--bg) calc(var(--compasso-pill-right) - var(--compasso-label-left)),
    var(--ink) calc(var(--compasso-pill-right) - var(--compasso-label-left)),
    var(--ink) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media(forced-colors:active){
  .nav.compasso-nav-motion.has-ind button>span{background-image:none;-webkit-text-fill-color:currentColor}
}

/* Approved visual identity retained; only the desktop container width adapts. */
@media (min-width:901px){
 main{max-width:none}
 .side{padding-inline:var(--gut)}
}

/* Layout geometry only. Keep all existing typography, colors and controls. */
/* Match the existing 14px card gap, including compact/mobile layouts. */
main[data-area="stats"]>.card+.card{margin-block-start:14px}
@media (min-width:1101px) and (min-height:900px){
 main[data-space-balance="calendar"] .cal-wrap>.cal{
  height:var(--balanced-calendar-height);display:flex;flex-direction:column;
 }
 main[data-space-balance="calendar"] .cal-grid{
  flex:1;min-height:0;grid-auto-rows:minmax(min-content,1fr);
 }
 main[data-space-balance="habits"] .grid3>.goal{
  min-height:var(--balanced-goal-height);justify-content:space-between;
 }
 main[data-space-balance="habits"] .hab-table>.hab:has(.name){
  min-height:var(--balanced-habit-height);
 }
}