/* glen-design: v1 */
/* Persistent explorer, quiet evidence, explicit modelling. Token materials only. */
:root{
 --an-series-1:color-mix(in srgb,var(--accent) 55%,var(--mask));
 --an-series-2:color-mix(in srgb,var(--accent) 70%,var(--mask));
 --an-series-3:color-mix(in srgb,var(--accent) 85%,var(--mask));
 --an-series-4:var(--accent);
 --an-series-5:color-mix(in srgb,var(--accent) 89%,var(--hot));
 --an-series-6:color-mix(in srgb,var(--accent) 78%,var(--hot));
 --an-series-7:color-mix(in srgb,var(--accent) 67%,var(--hot));
 --an-series-other:color-mix(in srgb,var(--mask) 50%,var(--hot));
 --an-chart-height: 300px; --an-phone-chart-height: 260px; }
.an-page{ display: grid; gap: var(--s5); min-width: 0; }
.an-head{ margin-bottom: 0; }
.an-head > div{ flex: 1 1 560px; min-width: 0; }
.an-page .btn{ min-height: var(--h-touch); white-space: normal; }
.an-page .card{ transition: none; background-image: none; }
.an-section-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.an-section-head h2{ margin-top: var(--s2); }
.an-explorer{ padding: var(--s5) var(--s6); overflow: hidden; }
.an-controls{ display: grid; grid-template-columns: 1.35fr 1fr 1.25fr 1fr; gap: var(--s3); }
.an-controls label{ display: grid; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); min-width: 0; }
.an-controls .field{ min-height: var(--h-touch); cursor: pointer; font-size: var(--fs-sm); padding-right: var(--s5); text-overflow: ellipsis; }
.an-numbers{ display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s5); padding: var(--s5) 0; }
.an-number{ display: flex; flex-direction: column; justify-content: center; gap: var(--s2); min-width: 0; }
.an-number > span{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.an-number > b{ font-size: var(--fs-lg); font-weight: 500; line-height: 1.3; }
.an-number-lead > .fig{ font-size: var(--fs-hero); line-height: 1; font-weight: 300; }
.an-number > small{ color: var(--ink-dim); font-size: var(--fs-sm); }
.an-legend{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--ink-dim); font-size: var(--fs-sm); padding-bottom: var(--s3); }
.an-legend > span, .an-readout > span{ display: inline-flex; align-items: center; gap: var(--s2); }
.an-legend i, .an-readout i{ width: var(--s4); height: 3px; background: var(--an-color, var(--accent)); flex: none; }
.an-legend .an-legend-dashed{ background: repeating-linear-gradient(90deg, var(--an-color) 0 4px, transparent 4px 6px); }
.an-plot{ position: relative; height: var(--an-chart-height); min-width: 0; border-radius: var(--r-sm); }
.an-plot canvas{ width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; border-radius: var(--r-sm); }
.an-chart-loading{ position: absolute; inset: var(--s3); pointer-events: none; }
.an-chart-empty{ position: absolute; inset: 0; background: var(--surface-1); }
.an-readout{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); min-height: var(--s7); padding: var(--s3) 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.an-readout > b{ color: var(--ink); }
.an-readout strong{ color: var(--ink); font-weight: 500; }
.an-chart-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s4); background: var(--tint); border-radius: var(--r-sm); }
.an-chart-foot p{ margin: 0; font-size: var(--fs-base); line-height: 1.5; }
.an-chart-foot .btn{ flex: none; }
.an-source{ margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-dim); }
.an-page details{ margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-dim); }
.an-page summary{ min-height: var(--h-touch); display: flex; align-items: center; gap: var(--s2); cursor: pointer; color: var(--ink); font-weight: 600; border-radius: var(--r-sm); padding: var(--s2); margin-left: calc(-1 * var(--s2)); }
.an-page summary::before{ content: '+'; font-family: var(--font-mono); color: var(--accent); }
.an-page details[open] > summary::before{ content: '−'; }
.an-page details p{ margin: var(--s2) 0 var(--s3); }
.an-table-wrap{ overflow: auto; max-height: 440px; }
.an-table-wrap caption{ text-align: left; padding: var(--s3); }
.an-table-wrap th{ position: sticky; top: 0; background: var(--surface-1); }
.an-insights{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.an-insight{ min-width: 0; display: flex; flex-direction: column; }
.an-insight:nth-child(4){ grid-column: span 2; }
.an-insight-index{ color: var(--ink-faint); font-size: var(--fs-micro); margin-bottom: var(--s3); }
.an-insight h3{ line-height: 1.3; margin-bottom: var(--s3); }
.an-insight > p{ color: var(--ink-dim); font-size: var(--fs-base); margin-bottom: var(--s4); min-height: 3.1em; }
.an-mini{ width: 100%; height: 88px; overflow: visible; }
.an-line{ fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.an-previous{ fill: none; stroke: var(--ink-dim); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.an-band{ fill: var(--tint-2); }
.an-gridline{ fill: none; stroke: var(--line-2); }
.an-dot{ fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.an-mini-legend{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-micro); color: var(--ink-dim); margin-bottom: var(--s2); }
.an-mini-legend span{ display: inline-flex; gap: var(--s2); align-items: center; }
.an-mini-legend span::before{ content: ''; width: var(--s4); height: 2px; background: var(--accent); }
.an-mini-legend .an-key-previous::before{ background: repeating-linear-gradient(90deg, var(--ink-dim) 0 4px, transparent 4px 6px); }
.an-mini-legend .an-key-band::before{ height: var(--s2); background: var(--tint-2); }
.an-mini-range{ margin-top: var(--s1); }
.an-insight .btn{ align-self: flex-start; margin-top: var(--s2); }
.an-lab-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s4); align-items: start; }
.an-forecast, .an-scenario{ min-width: 0; }
.an-projected{ font-size: var(--fs-hero); margin: var(--s6) 0 var(--s4); }
.an-forecast > div > p{ color: var(--ink-dim); }
.an-forecast .an-mini{ height: 176px; margin-top: var(--s4); }
.an-forecast-dates{ display: flex; justify-content: space-between; gap: var(--s4); }
.an-no-projection{ display: grid; gap: var(--s4); padding: var(--s6) 0; }
.an-no-projection p{ color: var(--ink-dim); margin: 0; }
.an-no-projection .btn{ justify-self: start; }
.an-sliders{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); }
.an-sliders label{ display: grid; gap: var(--s1); min-width: 0; }
.an-sliders label > span{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); }
.an-sliders output{ color: var(--accent); }
.an-sliders input{ width: 100%; min-width: 0; height: var(--h-touch); margin: 0; accent-color: var(--accent); cursor: pointer; }
.an-results{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--line); margin-top: var(--s4); }
.an-results > div{ display: grid; gap: var(--s2); min-width: 0; }
.an-results small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.an-results .fig{ font-size: var(--fs-2xl); }
.an-lever{ padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--tint); font-size: var(--fs-sm); margin-bottom: 0; }
.an-assumptions{ margin-bottom: var(--s3); }
.an-ai-strip{ display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--mat-float); box-shadow: inset 0 0 0 1px var(--line); }
.an-ai-strip p{ margin: 0; font-weight: 600; }
.an-ai-strip small{ display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-dim); }
.an-ai-strip .btn{ margin-left: auto; }
.an-state{ min-height: 280px; }
.an-page :is(button, select, input, summary):disabled{ opacity: .4; pointer-events: none; }
.an-page :is(button, select, input, summary):focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference){
  .an-page :is(.btn, .field, summary, input), .an-page .an-insight, .an-page .an-forecast, .an-page .an-scenario, .an-number, .an-results > div{ transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
  .an-dot{ transition: transform var(--dur-base) var(--ease-out); }
  .an-plot.reveal canvas{ clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-reveal) var(--ease-out); }
  .an-plot.in canvas, .settled .an-plot canvas{ clip-path: inset(0); }
}
@media (hover: hover) and (pointer: fine){
  .an-page :is(.btn, .field, summary):not(:disabled):hover{ transform: translateY(-2px); box-shadow: var(--ring), 0 0 0 1px var(--line-2); }
  .an-sliders input:hover{ transform: scale(1.02); }
  .an-insight:hover, .an-forecast:hover, .an-scenario:hover, .an-number:hover, .an-results > div:hover{ transform: translateY(-2px); }
  .an-insight:hover{ box-shadow: var(--shadow-2); }
  .an-mini:hover .an-dot{ transform: scale(1.5); }
}
.an-page :is(.btn, .field, summary, input):not(:disabled):active{ transform: scale(.97); }
@media (prefers-reduced-motion: reduce){
  .an-page *, .an-page *::before, .an-page *::after{ transition: none; animation: none; }
  .an-plot canvas{ clip-path: none; }
}
@media (max-width: 1100px){
  .an-controls{ grid-template-columns: 1fr 1fr; }
  .an-insights{ grid-template-columns: 1fr 1fr; }
  .an-insight:nth-child(4){ grid-column: auto; }
  .an-insight:last-child{ grid-column: 1 / -1; }
  .an-lab-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .an-page{ gap: var(--s4); }
  .an-explorer{ padding: var(--s4); }
  .an-section-head{ align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--s4); }
  .an-section-head h2{ font-size: var(--fs-lg); }
  .an-explorer .an-section-head > .chip{ display: none; }
  .an-controls{ grid-template-columns: 1fr; gap: var(--s3); }
  .an-numbers{ grid-template-columns: 1fr 1fr; gap: var(--s4); padding: var(--s5) 0; }
  .an-number-lead{ grid-column: 1 / -1; }
  .an-number > b{ font-size: var(--fs-base); }
  .an-number-lead > .fig{ font-size: var(--fs-hero); }
  .an-number > small{ font-size: var(--fs-micro); }
  .an-plot{ height: var(--an-phone-chart-height); margin-left: calc(-1 * var(--s2)); margin-right: calc(-1 * var(--s2)); }
  .an-chart-foot{ flex-direction: column; align-items: stretch; gap: var(--s3); }
  .an-insights{ grid-template-columns: 1fr; }
  .an-insight:nth-child(4), .an-insight:last-child{ grid-column: auto; }
  .an-insight, .an-forecast, .an-scenario{ padding: var(--s4); }
  .an-sliders{ grid-template-columns: 1fr; }
  .an-results .fig{ font-size: var(--fs-xl); }
  .an-ai-strip{ flex-wrap: wrap; padding: var(--s4); }
  .an-ai-strip .btn{ margin-left: 0; width: 100%; }
  .an-forecast .table{ font-size: var(--fs-micro); }
  .an-forecast .table :is(th, td){ padding: var(--s2); }
}

/* Direct labels make every split readable without returning to the key. */
.an-end-labels{position:absolute;inset:0;pointer-events:none}
.an-end-label{position:absolute;left:var(--an-label-x);top:var(--an-label-y);transform:translateY(-50%);width:196px;display:grid;gap:var(--s1);padding-left:var(--s2);border-left:3px solid var(--an-color);font-size:var(--fs-micro);line-height:1.2;color:var(--ink);background:var(--surface-1)}
.an-end-label b{font-weight:600}.an-end-label small{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-dim)}
.an-end-previous{border-left-style:dashed}
@media(max-width:760px){.an-end-label{width:114px;font-size:var(--fs-micro);gap:0}}