/* Super AI Guy's local, progressively enhanced AI Work Timeline. */
.timeline-page-content { max-width: 1060px; margin: auto; }
.timeline-page-heading { max-width: 770px; margin-bottom: 38px; }
.timeline-page-heading .eyebrow { margin-bottom: 18px; }
.timeline-page-heading .page-lede { color: #c3d1df; line-height: 1.8; }
.timeline-page-context { max-width: 680px; color: #a5b3c4; font-size: .88rem; line-height: 1.85; }
.timeline-dashboard { position: relative; min-width: 0; isolation: isolate; padding: 32px; border: 1px solid #3a5067; border-radius: 12px; background: radial-gradient(ellipse at 95% 0, #14364b66, transparent 44%), #0b1521; box-shadow: 0 22px 75px #0003; }
.timeline-dashboard:before { content: ""; position: absolute; z-index: -1; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, #66cfff, #e8bd79, transparent); }
.timeline-compact { margin-top: 34px; }
.timeline-dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.timeline-kicker { margin: 0 0 11px; color: #e8bd79; font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.timeline-dashboard-heading h2, .timeline-dashboard-heading h3 { margin: 0; color: #f0f5fa; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.timeline-scenario-badge { flex-shrink: 0; margin-top: 5px; padding: 7px 10px; color: #b3d7ed; border: 1px solid #45637b; border-radius: 4px; background: #132639; font-size: .58rem; font-weight: 700; letter-spacing: .1em; }
.timeline-provenance { margin: 19px 0 26px; max-width: 860px; color: #afbed0; font-size: .78rem; line-height: 1.8; }
.timeline-provenance strong { color: #e8bd79; font-weight: 600; }
.timeline-year-panel { min-width: 0; padding: 23px; border: 1px solid #354c63; border-radius: 8px; background: #08121f; }
.timeline-year-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.timeline-year-heading > label { color: #bdcddd; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.timeline-year-heading output { color: #80d4ff; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1.1; font-weight: 650; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.timeline-slider { display: block; width: 100%; min-height: 44px; margin: 11px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; accent-color: #80d4ff; cursor: pointer; appearance: none; -webkit-appearance: none; }
.timeline-slider::-webkit-slider-runnable-track { height: 8px; border: 1px solid #63839e; border-radius: 8px; background: #19334c; }
.timeline-slider::-moz-range-track { height: 6px; border: 1px solid #63839e; border-radius: 8px; background: #19334c; }
.timeline-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border: 3px solid #d9f1ff; border-radius: 50%; background: #61c7fc; box-shadow: 0 0 0 5px #61c7fc1a; }
.timeline-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #d9f1ff; border-radius: 50%; background: #61c7fc; box-shadow: 0 0 0 5px #61c7fc1a; }
.timeline-slider:focus-visible { outline-offset: 3px; }
.timeline-year-ticks { display: flex; justify-content: space-between; color: #92a8bc; font-size: .7rem; font-variant-numeric: tabular-nums; }
.timeline-year-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 1.2fr) minmax(0, 1fr); align-items: end; gap: 15px; margin-top: 20px; }
.timeline-step { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 8px 10px; border: 1px solid #62748a; border-radius: 4px; color: #c7dff0; background: #0e2032; font-size: .76rem; font-weight: 600; }
.timeline-step:not(:disabled):hover { border-color: #80d4ff; background: #173149; }
.timeline-step span { font-size: 1rem; }
.timeline-year-select-label { display: flex; flex-direction: column; gap: 5px; color: #a8bdd0; font-size: .7rem; }
.timeline-year-select-label select { min-height: 46px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
.timeline-phase { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; margin: 24px 0 29px; padding: 22px; border: 1px solid #3d637e; border-left: 3px solid #80d4ff; border-radius: 6px; background: #102438; }
.timeline-phase[data-phase="knowledge"] { border-color: #665a88; border-left-color: #b9a9eb; background: #1b2137; }
.timeline-phase[data-phase="logistics"] { border-color: #796442; border-left-color: #e8bd79; background: #25231e; }
.timeline-phase[data-phase="physical"] { border-color: #476b61; border-left-color: #96d5be; background: #142923; }
.timeline-phase-label { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0 0 10px; color: #bbcee0; font-size: .67rem; font-weight: 650; letter-spacing: .1em; }
.timeline-phase-label span { color: #aabed2; font-variant-numeric: tabular-nums; }
.timeline-phase h3, .timeline-phase h4 { margin: 0 0 10px; color: #f0f5fa; font-size: 1.07rem; }
.timeline-phase p[data-phase-description] { margin: 0; color: #b6c4d1; font-size: .76rem; line-height: 1.8; }
.timeline-phase-focus { align-self: center; margin: 0; padding-left: 23px; border-left: 1px solid #61758a; }
.timeline-phase-focus span { display: block; margin-bottom: 8px; color: #b3c1ce; font-size: .7rem; }
.timeline-phase-focus strong { display: block; color: #d8e7f2; font-size: .79rem; font-weight: 550; line-height: 1.7; }
.timeline-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid #35495e; }
.timeline-chart-heading p { margin: 0; color: #d2deea; font-size: .79rem; font-weight: 650; }
.timeline-chart-heading > span { color: #9db0c4; font-size: .7rem; }
.timeline-industries { display: grid; grid-template-columns: 1fr; gap: 4px; }
.timeline-industry { min-width: 0; padding: 17px 0; border-bottom: 1px solid #263a4e; }
.timeline-row-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.timeline-row-heading h3, .timeline-row-heading h4 { display: flex; align-items: baseline; gap: 13px; margin: 0; color: #dbe6ef; font-size: .9rem; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.timeline-sector-number { color: #88a8be; font-size: .68rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.timeline-share { flex-shrink: 0; display: flex; align-items: baseline; gap: 7px; margin: 0; color: #a9d7f3; font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; }
.timeline-share-label { color: #93a6ba; font-size: .67rem; font-weight: 400; }
.timeline-bar { display: block; width: 100%; overflow: visible; }
.timeline-track { fill: #142638; }
.timeline-fill { fill: #72cfff; }
.timeline-industry[data-industry="creative"] .timeline-fill { fill: #b8a7eb; }
.timeline-industry[data-industry="cyber"] .timeline-fill { fill: #70dcde; }
.timeline-industry[data-industry="finance"] .timeline-fill { fill: #96d5be; }
.timeline-industry[data-industry="logistics"] .timeline-fill { fill: #e8bd79; }
.timeline-industry[data-industry="healthcare"] .timeline-fill { fill: #edacb7; }
.timeline-industry[data-industry="trades"] .timeline-fill { fill: #acbacb; }
.timeline-human { display: flex; align-items: baseline; gap: 10px 20px; flex-wrap: wrap; margin: 9px 0 0; color: #b3c1cf; font-size: .74rem; line-height: 1.8; }
.timeline-human > span { color: #92a7bd; font-size: .7rem; }
.timeline-status { margin: 17px 0; color: #9cbed5; font-size: .72rem; }
.timeline-assumptions { border: 1px solid #405a71; border-radius: 6px; background: #0b1928; }
.timeline-assumptions > summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 52px; padding: 13px 18px; color: #b5dff6; font-size: .79rem; font-weight: 550; list-style: none; }
.timeline-assumptions > summary::-webkit-details-marker { display: none; }
.timeline-assumptions > summary span { color: #e8bd79; font-size: 1.25rem; }
.timeline-assumptions[open] > summary { border-bottom: 1px solid #405a71; }
.timeline-assumptions[open] > summary span { transform: rotate(45deg); }
.timeline-assumptions-body { padding: 20px; }
.timeline-assumptions-body > p { margin: 0 0 20px; color: #b2c1d0; font-size: .75rem; line-height: 1.85; }
.timeline-editor-fields { min-width: 0; padding: 0; margin: 0; border: 0; }
.timeline-industry-editor { min-width: 0; margin: 0 0 19px; padding: 15px; border: 1px solid #354e65; border-radius: 5px; }
.timeline-industry-editor legend { padding: 0 6px; color: #c7d8e8; font-size: .75rem; font-weight: 600; }
.timeline-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.timeline-input-grid label { gap: 7px; color: #adbed0; font-size: .68rem; }
.timeline-input-grid input { min-height: 46px; padding: 9px 11px; }
.timeline-input-grid input[aria-invalid="true"] { border-color: #f0b1a8; }
.timeline-field-error, .timeline-form-error { margin: 11px 0 0; color: #f0b1a8; font-size: .74rem; line-height: 1.8; }
.timeline-timing-help { color: #a5b7ca; font-size: .71rem; line-height: 1.8; }
.timeline-editor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.timeline-method { margin-top: 13px; }
.timeline-method > summary { color: #acc4d7; font-size: .74rem; }
.timeline-method p { max-width: 850px; margin: 10px 0; color: #a5b7ca; font-size: .74rem; line-height: 1.85; }
.timeline-method code { color: #d4e8f6; font-size: .9em; overflow-wrap: anywhere; }
.timeline-method strong { color: #d4e8f6; font-weight: 600; }
.timeline-method .timeline-formula { padding: 13px 15px; border: 1px solid #405a71; border-radius: 4px; background: #08121f; }
.timeline-formula code { display: block; white-space: normal; font-size: .78rem; line-height: 1.9; }
.timeline-home-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 21px; padding-top: 20px; border-top: 1px solid #35495e; }
.timeline-home-footer > p { margin: 0; color: #a5b7ca; font-size: .74rem; }
.timeline-home-footer .text-link { min-height: 44px; flex-shrink: 0; }
.timeline-noscript { color: #e8bd79; font-size: .78rem; }
.timeline-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 900px) {
  .timeline-compact .timeline-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
  .timeline-compact .timeline-row-heading { gap: 12px; }
  .timeline-compact .timeline-row-heading h4 { font-size: .81rem; }
  .timeline-compact .timeline-share-label { display: none; }
  .timeline-compact .timeline-human { display: block; }
  .timeline-compact .timeline-human > span { display: block; margin-bottom: 2px; }
}
@media (max-width: 700px) {
  .timeline-dashboard { padding: 23px; }
  .timeline-dashboard-heading { flex-direction: column; gap: 14px; }
  .timeline-scenario-badge { margin-top: 0; }
  .timeline-phase { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .timeline-phase-focus { padding: 15px 0 0; border-left: 0; border-top: 1px solid #61758a; }
  .timeline-input-grid { grid-template-columns: 1fr; gap: 13px; }
  .timeline-home-footer { align-items: flex-start; flex-direction: column; gap: 9px; }
}
@media (max-width: 440px) {
  .timeline-dashboard { padding: 17px; border-radius: 8px; }
  .timeline-year-panel { padding: 16px; }
  .timeline-year-heading { gap: 10px; }
  .timeline-year-heading > label { font-size: .65rem; letter-spacing: .06em; }
  .timeline-year-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .timeline-year-select-label { grid-column: 1 / -1; grid-row: 1; }
  .timeline-step { gap: 7px; font-size: .73rem; }
  .timeline-provenance { font-size: .74rem; }
  .timeline-chart-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
  .timeline-row-heading { gap: 10px; }
  .timeline-row-heading h3, .timeline-row-heading h4 { gap: 7px; font-size: .79rem; }
  .timeline-share { flex-direction: column; align-items: flex-end; gap: 2px; font-size: .98rem; }
  .timeline-human { display: block; }
  .timeline-human > span { display: block; margin-bottom: 2px; }
  .timeline-assumptions > summary { padding: 12px; font-size: .74rem; }
  .timeline-assumptions-body { padding: 13px; }
  .timeline-industry-editor { padding: 12px; }
  .timeline-editor-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-dashboard *, .timeline-dashboard *:before, .timeline-dashboard *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
