/* glen-design: v1 */
/* Tailored sections (modules/section.js). Prefix sc-. Tokens only. */
:root{ --sc-bar-rest: .85; --sc-plan-ink: .55; }
.sc-page{ display:grid; gap:var(--s5); }
.sc-page .page-head{ margin-bottom:0; }
.sc-page .btn{ min-height:var(--h-touch); }

/* hero: the business line against plan */
.sc-hero{ display:grid; grid-template-columns:minmax(220px,.34fr) minmax(0,1fr); gap:var(--s5) var(--s6); align-items:center; }
.sc-figs{ display:grid; gap:var(--s5); }
.sc-fig{ display:grid; gap:var(--s1); }
.sc-fig .fig{ font-size:var(--fs-2xl); }
.sc-fig>span:last-child{ font-size:var(--fs-sm); font-weight:600; }
.sc-fig>.sc-ok{ color:var(--ok); } .sc-fig>.sc-bad{ color:var(--bad); } .sc-fig>.sc-watch{ color:var(--warn); }
.sc-chart{ min-width:0; }
.sc-income{ width:100%; height:auto; overflow:visible; }
.sc-bar{ fill:var(--accent); opacity:var(--sc-bar-rest); transform-box:fill-box; transform-origin:bottom; }
.sc-gap{ fill:var(--warn-tint); stroke:var(--warn); stroke-width:1.5; stroke-dasharray:4 3; transform-box:fill-box; transform-origin:bottom; }
.sc-plan{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; opacity:var(--sc-plan-ink); }
.sc-tk{ fill:var(--ink-dim); font:var(--fs-micro) var(--font-mono); }
.sc-why{ grid-column:1/-1; display:flex; gap:var(--s3); align-items:flex-start; margin:0; padding:var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--warn-tint); color:var(--ink); font-size:var(--fs-sm); line-height:1.45; }
.sc-why .ic{ width:18px; height:18px; flex:none; color:var(--warn); margin-top:1px; }

/* legends: one per chart, at the top */
.sc-legend{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); color:var(--ink-dim); font-size:var(--fs-sm); margin-bottom:var(--s3); }
.sc-legend>span{ display:inline-flex; align-items:center; gap:var(--s2); }
.sc-legend i{ display:inline-block; width:14px; height:8px; border-radius:2px; background:var(--accent); }
.sc-legend .sc-key-under{ background:var(--warn-tint); box-shadow:inset 0 0 0 1.5px var(--warn); }
.sc-legend .sc-key-plan{ height:2px; background:var(--ink); opacity:.55; }

/* figure instruments */
.sc-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:var(--s3); }
.sc-kpi{ border:0; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:var(--s3); min-width:0; color:var(--ink); font:inherit; }
.sc-kpi-top{ display:flex; flex-direction:column; gap:var(--s2); align-items:start; }
.sc-kpi .label{ min-height:40px; }
.sc-kpi .fig{ font-size:var(--fs-2xl); white-space:nowrap; }
.sc-state{ font-size:var(--fs-micro); font-weight:600; padding:var(--s1) var(--s2); border-radius:var(--r-pill); background:var(--surface-3); }
.sc-kpi.sc-ok .sc-state{ background:var(--ok-tint); color:var(--ok); }
.sc-kpi.sc-watch .sc-state{ background:var(--warn-tint); color:var(--warn); }
.sc-kpi.sc-bad .sc-state{ background:var(--bad-tint); color:var(--bad); }
.sc-kpi[aria-pressed="true"]{ box-shadow:var(--shadow-1),inset 0 0 0 1px var(--accent); }
.sc-target{ color:var(--ink-dim); font-size:var(--fs-sm); line-height:1.4; }
.sc-gauge{ position:relative; display:block; height:8px; margin-top:auto; background:var(--surface-3); border-radius:var(--r-pill); }
.sc-gauge i{ position:absolute; inset:0 auto 0 0; width:var(--v); background:var(--accent); border-radius:inherit; transform-origin:left; }
.sc-gauge b{ position:absolute; left:var(--t); top:-5px; bottom:-5px; width:2px; background:var(--ink-dim); }
.sc-bad .sc-gauge i{ background:var(--bad); }
.sc-history{ display:grid; grid-template-columns:minmax(200px,.62fr) minmax(0,1.38fr); gap:var(--s5); align-items:center; }
.sc-h-copy{ display:grid; gap:var(--s3); justify-items:start; }
.sc-h-copy p{ margin:0; }
.sc-line{ width:100%; height:auto; overflow:visible; }
.sc-line-path{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.sc-line-target{ fill:none; stroke:var(--ink-dim); stroke-width:1.5; stroke-dasharray:5 5; }
.sc-line-pt{ fill:var(--accent); opacity:.35; transform-box:fill-box; transform-origin:center; }

/* bento */
.sc-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5); align-items:start; }
.sc-grid>*{ grid-column:span var(--span,6); }
.sc-wide{ grid-column:1/-1; }
.sc-panel{ min-width:0; }
.sc-panel-head{ display:grid; gap:var(--s2); margin-bottom:var(--s4); }
.sc-panel-head h2{ font-size:var(--fs-lg); display:flex; align-items:center; gap:var(--s2); }
.sc-panel-head p{ margin:0; }
.sc-foot{ margin:var(--s4) 0 0; }
.sc-pill{ display:inline-block; font-size:var(--fs-micro); font-weight:600; padding:var(--s1) var(--s2); border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-dim); white-space:nowrap; }
.sc-ok .sc-pill,.sc-good .sc-pill,.sc-sev-good .sc-pill{ background:var(--ok-tint); color:var(--ok); }
.sc-warn .sc-pill,.sc-watch .sc-pill,.sc-sev-medium .sc-pill{ background:var(--warn-tint); color:var(--warn); }
.sc-bad .sc-pill,.sc-sev-high .sc-pill,.sc-sev-critical .sc-pill{ background:var(--bad-tint); color:var(--bad); }

/* funnel */
.sc-funnel{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.sc-funnel li{ display:grid; grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr) auto; grid-template-rows:auto auto; gap:var(--s1) var(--s4); align-items:center; }
.sc-f-name{ font-weight:600; font-size:var(--fs-sm); }
.sc-f-track{ height:22px; background:var(--surface-3); border-radius:var(--r-sm); overflow:hidden; }
.sc-f-track i{ display:block; height:100%; width:calc(var(--p) * 100%); background:var(--accent); opacity:calc(1 - var(--i) * .12); border-radius:inherit; transform-origin:left; }
.sc-funnel b{ font-size:var(--fs-base); min-width:6ch; text-align:right; }
.sc-funnel small{ grid-column:2/-1; color:var(--ink-dim); font-size:var(--fs-micro); }

/* bars */
.sc-bars{ display:grid; gap:var(--s3); }
.sc-barrow{ display:grid; grid-template-columns:minmax(120px,.9fr) minmax(0,1.5fr) 88px; gap:var(--s4); align-items:center; }
.sc-b-name{ display:grid; gap:2px; font-size:var(--fs-sm); font-weight:600; }
.sc-b-name small{ font-weight:400; color:var(--ink-dim); font-size:var(--fs-micro); }
.sc-b-track{ position:relative; height:12px; background:var(--surface-3); border-radius:var(--r-pill); }
.sc-b-track i{ position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 100%); background:var(--accent); border-radius:inherit; transform-origin:left; }
.sc-barrow.sc-bad .sc-b-track i{ background:var(--bad); }
.sc-barrow.sc-warn .sc-b-track i{ background:var(--warn); }
.sc-b-track b{ position:absolute; left:calc(var(--x) * 100%); top:-4px; bottom:-4px; width:2px; background:var(--ink); opacity:.55; }
.sc-b-val{ text-align:right; font-size:var(--fs-sm); }

/* split */
.sc-split{ display:flex; height:28px; border-radius:var(--r-sm); overflow:hidden; gap:2px; }
.sc-split i{ width:var(--w); background:var(--accent); opacity:var(--o); transform-origin:left; }
.sc-split-key{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s2); }
.sc-split-key li{ display:grid; grid-template-columns:14px minmax(0,1fr) auto 44px; gap:var(--s3); align-items:center; font-size:var(--fs-sm); }
.sc-split-key i{ width:12px; height:12px; border-radius:3px; background:var(--accent); opacity:var(--o); }
.sc-split-key small{ color:var(--ink-dim); text-align:right; }

/* table */
.sc-table-wrap{ overflow-x:auto; }
.sc-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.sc-table th,.sc-table td{ text-align:left; padding:var(--s3) var(--s3); border-bottom:1px solid var(--line); vertical-align:top; }
.sc-table thead th{ font-size:var(--fs-micro); color:var(--ink-dim); font-weight:600; border-bottom-color:var(--line-2); }
.sc-table .num{ text-align:right; font-family:var(--font-mono); }
.sc-table tbody th{ font-weight:600; }
.sc-table tbody th small{ display:block; font-weight:400; color:var(--ink-dim); font-size:var(--fs-micro); margin-top:2px; }

/* timeline */
.sc-time{ list-style:none; margin:0; padding:0; display:grid; }
.sc-time li{ display:grid; grid-template-columns:84px 14px minmax(0,1fr) auto; gap:var(--s3); align-items:start; padding:var(--s3) 0; position:relative; }
.sc-time li::before{ content:''; position:absolute; left:calc(84px + var(--s3) + 6px); top:0; bottom:0; width:2px; background:var(--line-2); }
.sc-t-date{ display:grid; font-size:var(--fs-sm); }
.sc-t-date small{ color:var(--ink-dim); font-size:var(--fs-micro); }
.sc-t-dot{ position:relative; z-index:1; width:14px; height:14px; margin-top:3px; border-radius:50%; background:var(--surface-1); box-shadow:inset 0 0 0 3px var(--accent); }
.sc-time .sc-past .sc-t-dot{ background:var(--accent); }
.sc-time .sc-bad .sc-t-dot{ box-shadow:inset 0 0 0 3px var(--bad); }
.sc-time .sc-warn .sc-t-dot{ box-shadow:inset 0 0 0 3px var(--warn); }
.sc-t-copy{ display:grid; gap:2px; font-size:var(--fs-sm); }
.sc-t-copy small{ color:var(--ink-dim); }

/* note */
.sc-note{ display:flex; gap:var(--s3); margin:0; line-height:1.5; color:var(--ink); }
.sc-note .ic{ width:20px; height:20px; flex:none; color:var(--accent); margin-top:2px; }

/* alerts, automations, projects */
.sc-alerts,.sc-autos,.sc-projects{ display:grid; gap:var(--s2); }
.sc-alert,.sc-auto,.sc-proj{ display:grid; align-items:center; gap:var(--s3); width:100%; padding:var(--s3); border:0; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.sc-alert{ grid-template-columns:auto minmax(0,1fr) auto; align-items:start; }
.sc-a-copy,.sc-au-copy,.sc-p-copy{ display:grid; gap:2px; min-width:0; font-size:var(--fs-sm); }
.sc-a-copy small,.sc-au-copy small,.sc-p-copy small{ color:var(--ink-dim); font-size:var(--fs-micro); line-height:1.4; }
.sc-a-money,.sc-au-h{ display:grid; text-align:right; font-size:var(--fs-sm); font-weight:600; }
.sc-a-money small,.sc-au-h small{ font-weight:400; color:var(--ink-dim); font-size:var(--fs-micro); max-width:24ch; line-height:1.35; }
.sc-auto{ grid-template-columns:minmax(0,1fr) auto; }
.sc-proj{ grid-template-columns:minmax(0,1fr) 96px 44px; }
.sc-p-bar{ height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.sc-p-bar i{ display:block; height:100%; width:calc(var(--p) * 100%); background:var(--accent); border-radius:inherit; transform-origin:left; }
.sc-h-bad .sc-p-bar i{ background:var(--bad); } .sc-h-warn .sc-p-bar i{ background:var(--warn); }
.sc-p-pct{ text-align:right; font-size:var(--fs-sm); }
.sc-asks{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.sc-asks .chip{ min-height:34px; }
.sc-focused{ box-shadow:var(--shadow-2),inset 0 0 0 2px var(--accent); }

/* hover and press */
@media(hover:hover) and (pointer:fine){
 .sc-alert:hover,.sc-auto:hover,.sc-proj:hover{ transform:translateY(-2px); }
 .sc-kpi:hover{ box-shadow:var(--shadow-2),inset 0 0 0 1px var(--accent); }
 .sc-alert:hover,.sc-auto:hover,.sc-proj:hover{ background:var(--surface-3); }
 .sc-mo:hover .sc-bar{ opacity:1; transform:scaleY(1.04); }
 .sc-line-pt:hover{ transform:scale(1.25); opacity:1; }
 .sc-table tbody tr:hover{ background:var(--surface-2); }
 .sc-page .btn:hover{ transform:translateY(-2px); }
}
.sc-page button:active,.sc-page .btn:active{ transform:scale(.97); }

/* motion: each chart builds once when it comes into view */
@media(prefers-reduced-motion:no-preference){
 .sc-page button,.sc-bar,.sc-line-pt,.sc-table tbody tr{ transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),background var(--dur-fast) var(--ease-out); }
 .sc-income .sc-bar{ transform:scaleY(0); }
 .sc-income.in .sc-bar{ transform:scaleY(1); transition:transform var(--dur-slow) var(--ease-out); transition-delay:calc(var(--i) * 40ms); }
 .sc-income .sc-gap{ opacity:0; } .sc-income.in .sc-gap{ opacity:1; transition:opacity var(--dur-slow) var(--ease-out) .6s; }
 .sc-income .sc-plan{ opacity:0; } .sc-income.in .sc-plan{ opacity:var(--sc-plan-ink); transition:opacity var(--dur-slow) var(--ease-out) .5s; }
 .sc-funnel .sc-f-track i,.sc-bars .sc-b-track i,.sc-split i,.sc-projects .sc-p-bar i{ transform:scaleX(0); }
 .sc-funnel.in .sc-f-track i,.sc-bars.in .sc-b-track i,.sc-split.in i,.sc-projects.in .sc-p-bar i{ transform:scaleX(1); transition:transform var(--dur-slow) var(--ease-out); }
 .sc-funnel.in li:nth-child(n) .sc-f-track i{ transition-delay:calc(var(--i) * 70ms); }
 .sc-bars.in .sc-barrow .sc-b-track i{ transition-delay:calc(var(--i) * 50ms); }
 .sc-time li{ opacity:0; transform:translateY(6px); }
 .sc-time.in li{ opacity:1; transform:none; transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); transition-delay:calc(var(--i) * 60ms); }
 .sc-line .sc-line-path{ stroke-dasharray:1; stroke-dashoffset:1; }
 .sc-line.in .sc-line-path{ stroke-dashoffset:0; transition:stroke-dashoffset var(--dur-slow) var(--ease-out); }
 .sc-kpi.reveal.in .sc-gauge i{ animation:sc-measure var(--dur-reveal) var(--ease-out) backwards; }
 @keyframes sc-measure{ from{ transform:scaleX(0); } }
 .sc-page button:active,.sc-page .btn:active{ transition-duration:var(--dur-instant); }
}
@media(prefers-reduced-motion:reduce){ .sc-page *{ animation:none!important; transition:none!important; } }

@media(max-width:1100px){ .sc-hero{ grid-template-columns:1fr; } .sc-figs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px){ .sc-grid>*{ grid-column:1/-1; } .sc-history{ grid-template-columns:1fr; } }
@media(max-width:600px){
 .sc-page,.sc-grid{ gap:var(--s4); } .sc-page .card{ padding:var(--s4); }
 .sc-figs{ grid-template-columns:1fr; gap:var(--s3); } .sc-fig .fig{ font-size:var(--fs-xl); }
 .sc-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); } .sc-kpi .fig{ font-size:var(--fs-xl); } .sc-kpi .label{ min-height:60px; }
 .sc-funnel li{ grid-template-columns:minmax(0,1fr) auto; } .sc-f-track{ grid-column:1/-1; grid-row:2; } .sc-funnel small{ grid-column:1/-1; }
 .sc-barrow{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s2) var(--s3); } .sc-b-track{ grid-column:1/-1; grid-row:2; }
 .sc-time li{ grid-template-columns:64px 14px minmax(0,1fr); } .sc-time li::before{ left:calc(64px + var(--s3) + 6px); } .sc-time .sc-pill{ grid-column:3; justify-self:start; }
 .sc-alert{ grid-template-columns:minmax(0,1fr); } .sc-a-money{ text-align:left; }
 .sc-proj{ grid-template-columns:minmax(0,1fr) 44px; } .sc-p-bar{ grid-column:1/-1; grid-row:2; }
}

/* plates: the one instrument a section is remembered for (section-visuals.css draws it) */
.sc-plates{ display:grid; gap:var(--s5); }
.sc-plate{ min-width:0; }
.sc-plate-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4); margin-bottom:var(--s4); }
.sc-plate-head h2{ font-size:var(--fs-xl); letter-spacing:-.02em; }
.sc-plate-head p{ margin:var(--s1) 0 0; }
.sc-plate-badge{ font-size:var(--fs-micro); font-weight:600; padding:var(--s1) var(--s2); border-radius:var(--r-pill); background:var(--tint); color:var(--accent); white-space:nowrap; }

/* ribbon: the section's figures in one slim strip under the plate */
.sc-ribbon{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; padding:var(--s2); }
.sc-rb{ display:flex; flex-direction:column; gap:var(--s2); min-width:0; padding:var(--s3) var(--s4); border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; position:relative; }
.sc-rb+.sc-rb::before{ content:''; position:absolute; left:0; top:var(--s3); bottom:var(--s3); width:1px; background:var(--line); }
.sc-rb .label{ line-height:1.35; }
.sc-rb .fig{ font-size:var(--fs-xl); white-space:nowrap; }
.sc-rb-s{ display:flex; align-items:center; gap:6px; font-size:var(--fs-micro); color:var(--ink-dim); line-height:1.35; margin-top:auto; }
.sc-rb-s i{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); flex:none; }
.sc-rb.sc-ok .sc-rb-s i{ background:var(--ok); } .sc-rb.sc-watch .sc-rb-s i{ background:var(--warn); } .sc-rb.sc-bad .sc-rb-s i{ background:var(--bad); }
.sc-rb.sc-bad .sc-rb-s{ color:var(--bad); font-weight:600; } .sc-rb.sc-ok .sc-rb-s{ color:var(--ok); font-weight:600; } .sc-rb.sc-watch .sc-rb-s{ color:var(--warn); font-weight:600; }
.sc-rb[aria-pressed="true"]{ background:var(--tint); box-shadow:inset 0 0 0 1px var(--accent); }
.sc-history[hidden]{ display:none; }
@media(hover:hover) and (pointer:fine){ .sc-rb:hover{ background:var(--surface-2); transform:translateY(-2px); } .sc-rb[aria-pressed="true"]:hover{ background:var(--tint); } }
.sc-rb:active{ transform:scale(.97); }
@media(prefers-reduced-motion:no-preference){
 .sc-rb{ transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast) ease; }
 .sc-history.sc-open{ animation:sc-drop var(--dur-slow) var(--ease-out); }
 @keyframes sc-drop{ from{ opacity:0; transform:translateY(-8px); } }
}
@media(max-width:600px){
 .sc-ribbon{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:var(--s1); }
 .sc-rb{ padding:var(--s3); } .sc-rb .fig{ font-size:var(--fs-lg); }
 .sc-rb+.sc-rb::before{ display:none; }
 .sc-plate-head h2{ font-size:var(--fs-lg); }
 .sc-plate-head{ flex-direction:column; gap:var(--s2); }
 .sc-plate-badge{ white-space:normal; }
}

/* the Beacon strip: alerts, automations, projects and questions in one tabbed card */
.sc-bc-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); margin-bottom:var(--s3); }
.sc-bc-head h2{ font-size:var(--fs-lg); flex:1 1 auto; }
.sc-bc-tabs button{ display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--h-control); }
.sc-bc-tabs button b{ font-size:var(--fs-micro); font-weight:500; color:var(--ink-dim); }
.sc-bc-tabs button[aria-selected="true"]{ background:var(--surface-1); color:var(--ink); box-shadow:var(--shadow-1),var(--ring); }
.sc-bc-tabs button[aria-selected="true"] b{ color:var(--accent); }
.sc-bc-sub{ margin:0 0 var(--s3); }
.sc-bc-pane .sc-alerts,.sc-bc-pane .sc-autos,.sc-bc-pane .sc-projects{ grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); }
@media(prefers-reduced-motion:no-preference){ .sc-bc-pane.sc-swap{ animation:sc-drop var(--dur-base) var(--ease-out); } }

/* phones: tables become one card per row, every value labelled */
@media(max-width:600px){
 .sc-bc-head{ gap:var(--s2); } .sc-bc-tabs{ width:100%; overflow-x:auto; } .sc-bc-tabs button{ flex:none; min-height:var(--h-touch); }
 .sc-bc-pane .sc-alerts,.sc-bc-pane .sc-autos,.sc-bc-pane .sc-projects{ grid-template-columns:1fr; }
 .sc-table-wrap{ overflow:visible; }
 .sc-table,.sc-table tbody,.sc-table tr,.sc-table th,.sc-table td{ display:block; }
 .sc-table thead{ display:none; }
 .sc-table tbody{ display:grid; gap:var(--s2); }
 .sc-table tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s3); padding:var(--s3); border-radius:var(--r-sm); background:var(--surface-2); }
 .sc-table th,.sc-table td{ padding:0; border:0; text-align:left!important; overflow-wrap:normal; word-break:normal; hyphens:none; }
 .sc-table tbody th{ grid-column:1/-1; font-size:var(--fs-base); }
 .sc-table td::before{ content:attr(data-label); display:block; font:600 var(--fs-micro)/1.3 var(--font-body); color:var(--ink-dim); margin-bottom:2px; }
 .sc-table td.sc-td-status{ grid-column:1/-1; }
 .sc-table td.sc-td-status::before{ display:none; }
 .sc-page .btn{ min-height:var(--h-touch); }
 .sc-rb{ min-height:var(--h-touch); }
}