/* Home: keep the five-view composition and motion; give context a readable floor.
   Load after refinements.css. The measured reserves in home.js/home-fit.js include
   these caption rows, so changing views does not change the stage height. */
.home-page .view-nav,
.home-page .utility-nav,
.home-page .home-axis-label,
.home-page .home-guide-label,
.home-page .roman-ruby rt,
.home-page .ruby-separator,
.home-page .home-time-year,
.home-page .home-fallback-timeline,
.home-page .home-tooltip,
.home-page .home-related-works a,
.home-page .home-step-controls>.home-next-button,
.home-page .home-graph-wrap .home-point-label,
.home-page .home-graph-wrap .home-context-label,
.home-page .home-step-controls output,
.home-page .home-graph-caption .home-legend,
.home-page .site-footer{font-size:14px}
.home-page .home-graph-wrap .home-context-label{width:152px;line-height:1.35}
.home-page .home-graph-wrap .home-today-point .home-context-label{width:84px}
.home-page .home-graph-caption .home-legend{line-height:1.4}
.home-page .home-legend>span{white-space:nowrap}

/* Keep the key on one compact row; stage changes retain a stable drawing area. */
@media(max-width:600px){
 .home-page .home-graph-caption{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-items:start}
 .home-page .home-graph-caption .home-legend{justify-self:start;gap:12px}
}
@media(min-width:640px) and (max-height:520px){
 .home-page .view-nav{font-size:14px}
 .home-page .home-step-controls output{min-width:30px}
 .home-page .home-graph-caption{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-items:start}
 .home-page .home-graph-caption .home-legend{justify-self:start;gap:12px}
}
/* A little more room for the drawing when browser bars leave a very short phone.
   Keep type and controls intact; take eight pixels from the surrounding gaps. */
@media(max-width:360px) and (max-height:480px){
 .home-page .home-experience{gap:2px;padding-top:0}
}

/* Time views distinguish a duration; the conceptual network uses a work node. */
.home-page{--home-graph-min-height:220px}
.home-page .home-graph-wrap .home-period-point .home-dot{display:block;border-style:solid;opacity:var(--home-fragments-dot-opacity,0)}
.home-page .home-birth-point{cursor:default;pointer-events:none}
.home-page .home-graph-wrap .home-birth-point .home-context-label{width:62px}
.home-page .home-period-line{pointer-events:none;stroke-opacity:var(--home-period-opacity,1);fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.home-page .home-period-hit{fill:none;stroke:transparent;stroke-width:44;pointer-events:stroke;cursor:pointer;vector-effect:non-scaling-stroke}
.home-page .home-period-line.is-focused{stroke-width:5}
.home-page .home-period-point.is-period-hover .home-tooltip{opacity:1;visibility:visible;pointer-events:none}
.home-page .home-time-break{fill:none;stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.home-page .home-experience[data-home-view="focus"] .home-period-point .home-point-label{white-space:nowrap}

@media(max-width:600px){
 .home-page .home-experience[data-home-view="timeline"] .home-context-point .home-context-label{width:100px}
 .home-page .home-experience[data-home-view="timeline"] .home-birth-point .home-context-label{width:62px}
}

.home-page .home-experience[data-home-view="focus"] .home-today-point .home-context-label{width:44px}

.home-page .has-selected-idea .home-period-point.is-unrelated .home-dot{opacity:calc(var(--home-fragments-dot-opacity,0)*.38)}
.home-page .has-selected-idea .home-period-point:is(:hover,:focus-visible) .home-dot{opacity:var(--home-fragments-dot-opacity,0)}