/* Shared surface and motion treatment. No dependency on JavaScript for visibility. */
:root{--motion-fast:160ms;--motion-base:260ms;--motion-ease:cubic-bezier(.22,1,.36,1);--surface-glint:rgba(205,225,255,.08)}
@view-transition{navigation:auto}
.workspace-sidebar{view-transition-name:workspace-navigation}
::view-transition-group(workspace-navigation){animation-duration:220ms;animation-timing-function:var(--motion-ease)}
::view-transition-old(root){animation:160ms ease-out both frost-page-out}
::view-transition-new(root){animation:260ms var(--motion-ease) both frost-page-in}
@keyframes frost-page-out{to{opacity:0}}
@keyframes frost-page-in{from{opacity:0;transform:none}to{opacity:1;transform:none}}
@keyframes frost-enter{from{opacity:.7;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes frost-modal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes frost-line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes frost-bars{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
@keyframes frost-tab{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
.experience-enter{animation:frost-enter 260ms var(--motion-ease) both}
:where(.tool-card,.scanner-launch,.history-match,.profile-entry,.opp-book,.opp-result,.capabilities-grid article,.member-tools a){transition:transform var(--motion-base) var(--motion-ease),border-color var(--motion-base),box-shadow var(--motion-base),background-color var(--motion-base)}
:where(.tool-panel,.opp-panel,.opp-result,.checkout-card,.timing-panel){box-shadow:inset 0 1px 0 var(--surface-glint),0 16px 42px #00000016}
:where(.tool-panel,.opp-panel,.checkout-card){background-image:linear-gradient(135deg,rgba(154,192,245,.085),transparent 55%)}
:where(.btn,.opp-primary,.opp-secondary,.icon-btn,.page-back,.filter-tab,.history-views button,.ws-link){transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--motion-ease),color var(--motion-fast)}
:where(.btn:not(.btn-sec),.opp-primary){box-shadow:inset 0 1px 0 #e5f2ff66,0 3px 10px #030a182b}
:where(.btn,.opp-primary,.opp-secondary,.icon-btn):active:not(:disabled){transform:translateY(1px)}
:where(input,select,textarea){transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast);accent-color:var(--primary-blue)}
:where(.tool-shell,.opp-shell,.billing-shell) :where(input,select,textarea):focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}
:where(.val,.opp-return strong,.timing-stat strong,.invoice-summary strong){font-variant-numeric:tabular-nums}
:where(.modal,dialog[open]:not(.workspace-sidebar),.workspace-menu[open] .workspace-navigation){animation:frost-modal 240ms var(--motion-ease)}
:where(.history-views,.filter-tabs,.opp-workspace-tabs){isolation:isolate}
:where(#history-observations,#timing-insights,#scan-pane,#alerts-pane,.panel.active):not([hidden]){animation:frost-tab 240ms var(--motion-ease)}
#opp-idle::before{content:'';display:block;width:110px;height:96px;margin:0 auto 16px;background:url('assets/icons/opportunity-lens.svg') center/contain no-repeat;filter:drop-shadow(0 10px 22px #578ad319)}
:where(.history-table,.timing-table,.opp-result table) tbody tr{transition:background-color var(--motion-fast)}
:where(.history-table,.timing-table,.opp-result table) tbody tr:hover{background:var(--blue-wash)}
.history-table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.history-table th,.timing-table th{white-space:nowrap}
.history-match{position:relative;overflow:hidden;padding:20px 22px;background:linear-gradient(115deg,#17273b66,transparent),var(--bg-input)}
.history-match[aria-pressed=true]{border-color:var(--primary-blue);box-shadow:inset 3px 0 var(--primary-blue),inset 0 1px #c5dfff12;background-color:var(--surface-hover)}
.history-match strong{font-size:14px;line-height:1.5}.history-match small{line-height:1.6}
.history-match:focus-visible{outline-offset:3px}
.history-list:has(.history-match){max-height:520px;overflow-y:auto;padding:4px;scrollbar-gutter:stable;overscroll-behavior:contain}
#history-detail{scroll-margin-top:24px}
.scanner-launch{position:relative;overflow:hidden}
.scanner-launch-icon{background:linear-gradient(145deg,#263f60aa,#0d192c);box-shadow:inset 0 1px #cfe4ff24,0 4px 12px #0002;transition:transform 260ms var(--motion-ease),box-shadow 260ms}
.scanner-launch-tag{transition:transform 260ms var(--motion-ease),color 260ms}
.tool-card .tool-arrow{background:linear-gradient(145deg,#8dbbff14,#14243a33);box-shadow:inset 0 1px #bddaff0d;transition:transform 260ms,border-color 260ms}
.plan-showcase{box-shadow:inset 0 1px #e0eeff35,0 25px 60px #0003}
.plan-emblem{filter:drop-shadow(0 12px 24px #5d9aff28);transition:transform 500ms var(--motion-ease)}
.capabilities-grid article>svg{padding:8px;box-sizing:content-box;border-radius:13px;background:linear-gradient(145deg,#8bbfff1a,#8bbfff04);border:1px solid #89b6ee20;box-shadow:inset 0 1px #e1edff12}
.tool-head .tool-art{filter:drop-shadow(0 10px 22px #679ee829);transition:transform 400ms var(--motion-ease)}
.timing-chart-wrap{border:1px solid #89b7ec1f;border-radius:16px;background:radial-gradient(ellipse at 45% 0%,#739ee810,transparent 75%),#08132366;margin-top:22px;padding:22px 12px 10px}
.timing-chart .point{stroke:#dbeeff;stroke-width:1.5;filter:drop-shadow(0 0 5px #79afff55)}
.timing-chart .ci{stroke-linecap:round}.timing-chart .axis{stroke-dasharray:3 6;opacity:.65}
.volume-column i{border-radius:5px 5px 0 0!important;background:linear-gradient(180deg,#b4d5ff,#548bdc)!important;box-shadow:inset 1px 0 #d8ecff60,0 -2px 12px #7eb5ff13;transform-origin:bottom;animation:frost-bars 550ms var(--motion-ease)}
.volume-column:focus-visible{outline:2px solid var(--primary-blue);outline-offset:3px;border-radius:4px}
.volume-column:hover i,.volume-column:focus-visible i{filter:brightness(1.2)}
.chart-readout{min-height:24px;font-size:12px;color:var(--text-secondary);padding:8px 0}
/* The empty state is an illustration, never a synthetic data chart. */
.history-empty{display:flex;gap:28px;align-items:center;padding:28px;margin:18px 0;border:1px solid var(--border-color);border-radius:16px;background:linear-gradient(120deg,#1c304b55,transparent)}
.history-empty img{width:126px;height:108px;flex:none}.history-empty h3{font-size:20px;margin:0 0 9px}.history-empty p{color:var(--text-secondary);max-width:470px;line-height:1.8;margin:0}.history-empty a{display:inline-flex;margin-top:14px;text-decoration:none;font-weight:600}
/* Interactive charts use original observations; gaps stay broken. */
.frost-chart{padding:24px 22px 16px;margin:22px 0;border:1px solid var(--border-color);border-radius:18px;background:radial-gradient(ellipse at 55% 0%,#669df912,transparent 70%),var(--bg-input);position:relative;min-width:0}
.frost-chart-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.frost-chart-stat{display:grid;gap:5px;border-right:1px solid var(--border-color)}.frost-chart-stat:last-child{border:0}.frost-chart-stat small{font-size:11px;color:var(--text-secondary)}.frost-chart-stat strong{font-size:22px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.frost-chart-stat .positive{color:var(--accent-green)}.frost-chart-stat .negative{color:var(--accent-red)}
.frost-chart-stage{position:relative;min-width:0}.frost-chart-svg{display:block;width:100%;height:260px;overflow:visible;touch-action:pan-y;outline-offset:4px;border-radius:6px}.frost-chart-svg text{fill:var(--text-secondary);font:11px var(--font-family)}.frost-chart-grid{stroke:var(--border-color);stroke-dasharray:3 6;stroke-width:1}.frost-chart-line{fill:none;stroke:#91beff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;animation:frost-line 650ms var(--motion-ease)}.frost-chart-area{fill:url(#frost-history-fill)}.frost-chart-dot{fill:#bbd8ff;stroke:var(--bg-input);stroke-width:1.5}.frost-chart-cursor{stroke:#b9d7ff;stroke-width:1;stroke-dasharray:4 4}.frost-chart-focus{fill:#cde4ff;stroke:#78aaff;stroke-width:5;stroke-opacity:.25}.frost-chart-tooltip{position:absolute;z-index:2;top:8px;max-width:min(270px,80%);padding:12px 15px;border:1px solid #5376a1;border-radius:12px;background:#101d30f5;box-shadow:0 10px 30px #0005;pointer-events:none;backdrop-filter:blur(12px);font-size:12px;color:#dcecff}.frost-chart-tooltip strong,.frost-chart-tooltip small{display:block}.frost-chart-tooltip strong{font-size:20px;margin:4px 0}.frost-chart-tooltip small{color:#adc3df;line-height:1.6;overflow-wrap:anywhere}.frost-chart-footer{display:flex;justify-content:space-between;gap:16px;padding-top:10px;font-size:11px;color:var(--text-secondary)}.frost-chart-legend{display:flex;gap:7px;align-items:center}.frost-chart-legend::before{content:'';width:16px;height:3px;border-radius:2px;background:#91beff}.frost-chart-readout{min-height:20px;margin:12px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.7;font-variant-numeric:tabular-nums}.chart-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){
 .tool-card:hover{box-shadow:inset 0 1px #d8eaff33,0 16px 36px #0004,0 0 24px #75aaff0b}.tool-card:hover .tool-arrow{transform:rotate(8deg);border-color:#9cc9ff88}
 .scanner-launch:hover,.history-match:hover,.member-tools a:hover{transform:translateY(-2px);border-color:#719bd0;box-shadow:inset 0 1px #d4e7ff1c,0 8px 24px #0003}
 .scanner-launch:hover .scanner-launch-icon{transform:rotate(-4deg);box-shadow:inset 0 1px #dcecff40,0 0 22px #81b7ff17}.scanner-launch:hover .scanner-launch-tag{transform:translateX(3px);color:#d6e8ff}
 .opp-book:hover{border-color:#6d95c7}.opp-book.is-selected{box-shadow:inset 0 1px #c2ddff22,0 5px 16px #03091630}
 .opp-result:hover{border-color:#567699}.capabilities-grid article:hover{transform:translateY(-3px);border-color:#53769f}
 .plan-showcase:hover .plan-emblem{transform:translateY(-4px) rotate(4deg)}.tool-head:hover .tool-art{transform:translateY(-3px)}
 :where(.btn:not(.btn-sec),.opp-primary):hover:not(:disabled){box-shadow:inset 0 1px #edf6ff88,0 5px 20px #82b4ff20}
}
@media(max-width:600px){#history-detail .tool-toolbar{display:grid;grid-template-columns:1fr}.frost-chart{padding:18px 12px 12px}.frost-chart-stats{gap:8px}.frost-chart-stat strong{font-size:18px}.frost-chart-stat small{font-size:10px}.frost-chart-svg{height:230px}.frost-chart-footer{font-size:10px;gap:8px}.frost-chart-tooltip{padding:9px 12px}.history-match{padding:16px}.history-empty{flex-direction:column;text-align:center;padding:24px 18px;gap:16px}.history-empty img{width:110px;height:92px}}
body.light-mode .frost-chart{background:var(--bg-input)}body.light-mode .frost-chart-line{stroke:#2862bf}body.light-mode .frost-chart-dot{fill:#2862bf}body.light-mode .timing-chart-wrap{background:var(--bg-input)}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .experience-enter{opacity:1;transform:none}
}
