/* the graph view (graph.html, src/graph.js) */
body.gpage { overflow: hidden; height: 100dvh; }
.g-top { position: fixed; z-index: 7; inset: 0 0 auto 0; display: flex; align-items: center; gap: 16px; padding: 14px 20px; pointer-events: none; }
.g-top > * { pointer-events: auto; }
.g-home { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 400 15px var(--f-sans); text-transform: uppercase; letter-spacing: .01em; }
.g-home .mark { width: 28px; height: 28px; }
.g-search { position: relative; flex: 0 1 420px; }
.g-search input { width: 100%; box-sizing: border-box; border: 0; border-radius: 999px; padding: 11px 44px 11px 18px; font: 400 15px var(--f-sans); color: var(--ink); background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); outline: none; }
.g-search input:focus-visible { box-shadow: var(--shadow), 0 0 0 2px var(--accent); }
.g-search > kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 11px var(--f-mono); color: var(--muted); border: 1px solid var(--faint); border-radius: 5px; padding: 1px 6px; }
.g-search ul { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); }
.g-search li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14.5px; }
.g-search li span:not(.g-dot) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-search li small { color: var(--muted); font: 400 11px var(--f-mono); text-transform: uppercase; white-space: nowrap; }
.g-search li[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--edge); }
.g-top .pills { display: flex; gap: 8px; margin: 0 auto; }
.g-top .pills .pill { background: var(--surface); border-color: var(--edge); padding: 9px 20px; }
.g-top .pills .pill.is-on { background: var(--pill); color: var(--bg); border-color: var(--pill); }
.g-right { display: flex; align-items: center; margin-left: auto; }
.g-apps { grid-template-columns: repeat(2, 1fr); } .g-right .apps { width: 230px; }
.g-top .g-search { margin-right: auto; }
.g-bar { position: fixed; z-index: 5; top: 70px; left: 20px; right: 20px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.g-bar > * { pointer-events: auto; }
.g-views { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); }
.g-seg { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font: 500 13px var(--f-sans); color: var(--muted); cursor: pointer; }
.g-seg[aria-pressed="true"] { background: var(--pill); color: var(--bg); }
.g-tools { display: flex; gap: 8px; margin-left: auto; }
.g-btn { border: 0; border-radius: 999px; padding: 9px 16px; font: 500 13.5px var(--f-sans); color: var(--ink); background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); cursor: pointer; }
.g-btn[aria-pressed="true"] { background: var(--pill); color: var(--bg); }
.g-stage { position: fixed; inset: 0; }
.g-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.g-stage canvas:active { cursor: grabbing; }
.g-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.g-dot.g-hollow, .g-panel .g-dot[style*="transparent"], .g-search .g-dot[style*="transparent"], .g-tip .g-dot[style*="transparent"] { box-shadow: inset 0 0 0 1.5px var(--muted); }
.g-tip { position: absolute; z-index: 6; pointer-events: none; max-width: 300px; padding: 9px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); font-size: 14px; line-height: 1.35; }
.g-tip b { font-weight: 500; } .g-tip small { display: block; margin-top: 3px; color: var(--muted); font: 400 11px var(--f-mono); text-transform: uppercase; }
.g-legend { position: absolute; z-index: 4; left: 20px; bottom: 54px; width: 250px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); font-size: 13.5px; }
.g-leg-h { font: 400 11px var(--f-mono); text-transform: uppercase; color: var(--muted); margin: 0 0 8px; letter-spacing: .04em; }
.g-leg-h small { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.g-legend { transition: width .25s ease, padding .25s ease; }
.g-legend .g-leg-h { display: flex; align-items: center; gap: 4px; width: 100%; padding: 0; background: none; color: var(--muted); font: 400 11px var(--f-mono); }
.g-legend .g-leg-h:hover { background: none; color: var(--ink); }
.g-leg-dots { display: none; gap: 4px; margin-left: 8px; }
.g-leg-dots .g-dot { width: 8px; height: 8px; margin: 0; }
.g-leg-arrow { margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.g-legend.shut { width: auto; padding: 10px 14px; }
.g-legend.shut > :not(.g-leg-h) { display: none; }
.g-legend.shut .g-leg-h { margin: 0; min-height: 24px; }
.g-legend.shut .g-leg-h small { display: none; }
.g-legend.shut .g-leg-dots { display: inline-flex; }
.g-legend.shut .g-leg-arrow { transform: rotate(-135deg) translate(-2px, -2px); margin-left: 10px; }
.g-legend button { display: flex; align-items: center; width: 100%; border: 0; background: none; padding: 5px 4px; border-radius: 7px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.g-legend button:hover { background: var(--surface-2); }
.g-legend button small { margin-left: auto; color: var(--muted); font: 400 11px var(--f-mono); }
.g-legend button[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.g-legend button[aria-pressed="false"] .g-dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--faint); }
.g-leg-k { display: flex; align-items: center; gap: 8px; padding: 5px 4px; color: var(--muted); font-size: 13px; }
.g-leg-k .g-dot { margin: 0; }
.g-leg-k .g-inf { flex: none; }
.g-ring { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--muted); }
.g-tog { display: flex; align-items: center; gap: 8px; padding: 6px 4px 0; color: var(--ink); font-size: 13px; cursor: pointer; }
.g-tog svg { color: var(--muted); }
.g-panel { position: absolute; z-index: 4; right: 20px; top: 124px; bottom: 54px; width: min(380px, calc(100vw - 40px)); box-sizing: border-box; overflow: auto; padding: 22px 22px 26px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); }
.g-x { position: absolute; top: 12px; right: 12px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 50%; }
.g-x:hover { color: var(--ink); }
.g-kind { font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding-right: 30px; }
.g-kind b { font-weight: 400; color: var(--accent); margin-left: 4px; } .g-kind code { text-transform: none; margin-left: 4px; }
.g-panel h2 { font: 400 24px/1.2 var(--f-sans); letter-spacing: -.02em; margin: 10px 0 10px; }
.g-desc { margin: 0 0 8px; line-height: 1.55; }
.g-when { margin: 0 0 12px; font: 400 12px var(--f-mono); color: var(--muted); }
.g-acts { display: flex; gap: 8px; margin: 14px 0 6px; }
.g-acts a { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--faint); }
.g-acts a:first-child { background: var(--pill); color: var(--bg); box-shadow: none; }
.g-panel section { margin-top: 18px; }
.g-panel h3 { font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.g-panel h3 span { margin-left: 4px; }
.g-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.g-panel li { display: flex; align-items: center; gap: 4px; }
.g-panel li button { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 5px 11px 5px 9px; font: 400 13.5px var(--f-sans); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--edge); cursor: pointer; text-align: left; }
.g-panel li button:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.g-panel li button .g-dot { width: 8px; height: 8px; margin-right: 6px; }
.g-inf { font: 400 10px var(--f-mono); text-transform: uppercase; color: var(--muted); border: 1px dashed var(--faint); border-radius: 5px; padding: 1px 4px; }
.g-more { color: var(--muted); font-size: 13px; padding: 5px 4px; }
.g-panel li.g-prop { display: block; width: 100%; padding: 4px 0; }
.g-prop code { font: 400 12.5px var(--f-mono); } .g-prop small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.g-vals { margin: 0; line-height: 1.9; } .g-vals code { font: 400 12px var(--f-mono); background: var(--surface-2); border-radius: 5px; padding: 2px 6px; }
.g-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13.5px; }
.g-facts dt { color: var(--muted); } .g-facts dd { margin: 0; overflow-wrap: anywhere; }
.g-trail { position: absolute; z-index: 4; left: 290px; right: 420px; bottom: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.g-trail-h { font: 400 11px var(--f-mono); text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.g-trail button { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 5px 11px 5px 9px; font: 400 13px var(--f-sans); color: var(--ink); background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); cursor: pointer; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-trail button[aria-current="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.g-trail .g-dot { width: 8px; height: 8px; margin-right: 6px; }
.g-arrow { color: var(--muted); font-size: 12px; }
.g-stats, .g-hint { position: absolute; z-index: 3; bottom: 16px; margin: 0; font: 400 12px var(--f-mono); color: var(--muted); }
.g-stats { left: 20px; } .g-hint { right: 20px; }
.g-hint kbd { font: inherit; border: 1px solid var(--faint); border-radius: 4px; padding: 0 4px; }
/* while the graph loads: a small graph drawing itself, and what is happening */
.g-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); transition: opacity .3s; }
.g-loading p { margin: 0; font: 400 12px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
.gl-e line { stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: gl-draw 1.6s ease-in-out infinite; }
.gl-e line:nth-child(2) { animation-delay: .15s; } .gl-e line:nth-child(3) { animation-delay: .3s; } .gl-e line:nth-child(4) { animation-delay: .45s; } .gl-e line:nth-child(5) { animation-delay: .6s; }
.gl-n { fill: #2a78d6; transform-box: fill-box; transform-origin: center; animation: gl-pulse 1.6s ease-in-out infinite; }
.gl-n:nth-of-type(2) { fill: #eb6834; animation-delay: .2s; } .gl-n:nth-of-type(3) { fill: #1baf7a; animation-delay: .4s; } .gl-n:nth-of-type(4) { fill: #eda100; animation-delay: .6s; }
@keyframes gl-draw { 0% { stroke-dashoffset: 60; } 50%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
@keyframes gl-pulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
body.ready .g-loading { opacity: 0; pointer-events: none; }
.g-loading.failed .gl-e line, .g-loading.failed .gl-n { animation: none; }
@media (prefers-reduced-motion: reduce) { .gl-e line { animation: none; stroke-dashoffset: 0; } .gl-n { animation: none; } }
@media (max-width: 1100px) { .g-trail { left: 20px; right: 20px; bottom: auto; top: 118px; } .g-hint { display: none; } }
/* ---------- phones: the header in two rows, compact controls, the panel as a sheet from the bottom ---------- */
.g-seg .narrow { display: none; }
.g-btn { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) {
  .g-top { flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
  .g-home span { display: none; }
  .g-home .mark { width: 34px; height: 34px; }
  .g-search { flex: 1 1 calc(100% - 50px); }
  .g-search input { padding: 10px 40px 10px 16px; font-size: 16px; }   /* 16px: iOS doesn't zoom into the field */
  .g-search ul { position: fixed; left: 12px; right: 12px; top: 58px; }
  /* two rows only: the logo, search and the apps menu, then the graph's own controls */
  .g-search { flex: 1 1 0; }
  .g-right .contact-btn { display: none; }
  .g-bar { top: 62px; left: 12px; right: 12px; gap: 6px; }
  .g-seg { padding: 7px 11px; font-size: 12.5px; }
  .g-seg .wide { display: none; } .g-seg .narrow { display: inline; }
  .g-seg[data-view="data"]::first-letter { text-transform: uppercase; }
  /* the tour and fit buttons float at the bottom right, like a map's controls; hidden under the sheet */
  .g-tools { position: fixed; right: 12px; bottom: calc(40px + env(safe-area-inset-bottom)); flex-direction: column; gap: 8px; }
  body:has(.g-panel:not([hidden])) .g-tools { display: none; }
  .g-btn { width: 42px; height: 42px; padding: 0; justify-content: center; box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); }
  .g-btn .lbl { display: none; }
  .g-legend, .g-hint { display: none; }
  /* the graph fades out under the controls, so names don't collide with them */
  .g-stage::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 116px; pointer-events: none; background: linear-gradient(var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent)); }
  .g-trail { top: 108px; left: 12px; right: 12px; bottom: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .g-trail::-webkit-scrollbar { display: none; }
  .g-trail button { flex: none; }
  .g-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-height: 52dvh; padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .g-panel::before { content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--faint); }
  .g-panel h2 { font-size: 21px; margin: 6px 0 8px; }
  .g-panel:not([hidden]) ~ .g-stats { display: none; }
  .g-stats { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 11px; }
}
/* the drawing fades in once the graph is read, instead of appearing all at once after the page transition */
.g-stage canvas { opacity: 0; transition: opacity .35s ease-out; }
body.ready .g-stage canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .g-stage canvas { transition: none; } }
body:not(.ready) .g-legend, body:not(.ready) .g-stats { visibility: hidden; }

/* ---------- time: the window of months ---------- */
.g-timebtn[aria-pressed="true"] { background: var(--pill); color: var(--bg); }
.g-timebar { position: absolute; z-index: 5; left: 50%; bottom: 46px; width: min(560px, calc(100vw - 600px)); min-width: 380px; transform: translateX(-50%); box-sizing: border-box; padding: 12px 16px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); }
.gt-row { display: flex; align-items: center; gap: 10px; }
.gt-play { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--pill); color: var(--bg); cursor: pointer; }
.gt-play .gt-s, .gt-play[aria-pressed="true"] .gt-p { display: none; } .gt-play[aria-pressed="true"] .gt-s { display: block; }
.gt-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.gt-text b { font-weight: 500; font-size: 15px; } .gt-text span { color: var(--muted); font-size: 12.5px; }
.gt-ask { color: var(--accent); font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.gt-close { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.gt-track { position: relative; height: 26px; margin-top: 8px; }
.gt-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--line); }
.gt-fill { position: absolute; top: 11px; height: 4px; border-radius: 2px; background: var(--accent); }
.gt-track input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.gt-track input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--accent), var(--shadow); cursor: grab; }
.gt-track input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); cursor: grab; }
.gt-track input::-webkit-slider-runnable-track { background: none; } .gt-track input::-moz-range-track { background: none; }
.gt-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); }
.gt-ends { display: flex; justify-content: space-between; font: 400 11px var(--f-mono); color: var(--muted); text-transform: uppercase; }
@media (max-width: 1100px) { .g-timebar { width: auto; min-width: 0; left: 20px; right: 20px; transform: none; } }
@media (max-width: 760px) {
  .g-timebar { left: 0; right: 0; bottom: 0; border-radius: 20px 20px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  body:has(.g-timebar:not([hidden])) .g-tools { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .g-timebar:not([hidden]) ~ .g-stats { display: none; }
  .gt-ask { display: none; }
}

/* the first-visit card: what the dots are, and two ways in */
.g-coach { position: absolute; z-index: 6; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(420px, calc(100% - 40px)); padding: 16px 18px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); animation: gc-in .35s ease both; }
@keyframes gc-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.gc-h { margin: 0 28px 4px 0; font-weight: 500; font-size: 15px; }
.gc-t { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.gc-touch { display: none; }
@media (hover: none) { .gc-touch { display: inline; } .gc-desk { display: none; } }
.gc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gc-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.gc-btn.primary { background: var(--pill); color: var(--bg); box-shadow: none; }
.gc-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); } .gc-btn.primary:hover { opacity: .9; box-shadow: none; }
.gc-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.gc-x:hover { background: var(--surface-2); color: var(--ink); }
body:has(.g-coach:not([hidden])) .g-hint { visibility: hidden; }
@media (max-width: 760px) {
  .g-coach { left: 12px; right: 12px; width: auto; transform: none; bottom: calc(36px + env(safe-area-inset-bottom)); animation-name: gc-in-m; }
  @keyframes gc-in-m { from { opacity: 0; transform: translateY(10px); } }
  body:has(.g-coach:not([hidden])) .g-tools, body:has(.g-coach:not([hidden])) .g-stats { visibility: hidden; }
  .gc-btn { min-height: 44px; flex: 1; justify-content: center; }
}