Something went wrong. Try again.
unified development activity
Something went wrong. Try again.
48 kB · 2056 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057/* -------------------------------------------------------------------------- tally — a commit matrix with a red signal. The dark palette is the primary one. Light mode is a deliberate second theme, not an automatic inversion. -------------------------------------------------------------------------- */
:root { color-scheme: light; --surface-1: #fbf8f6; --surface-2: #f4eeeb; --page: #efe7e3; --ink: #160d0f; --ink-2: #5b4a4b; --muted: #8a7677; --grid: #e2d6d3; --axis: #c9b8b6; --border: rgba(22, 13, 15, 0.12); --border-strong: rgba(200, 16, 46, 0.35); --accent: #c8102e; --accent-soft: #8f0f22; --accent-dim: #f0c9cd; --track: #f0dcdc; --matrix-0: #ebe3e0; --matrix-1: #d98f97; --matrix-2: #c95a68; --matrix-3: #b83245; --matrix-4: #9e1f31; --matrix-5: #700a1a; --series-red: #ff0000; --series-1: #1f5fff; --series-2: #f05a00; --series-3: #00a072; --series-4: #d99400; --series-5: #e6008c; --series-6: #129c00; --series-7: #8a2bff; --shadow: 0 18px 50px rgba(22, 13, 15, 0.10); --glow: 0 0 18px rgba(200, 16, 46, 0.18); --radius: 10px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;}
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --surface-1: #100b0c; --surface-2: #160f11; --page: #070506; --ink: #f4e9e7; --ink-2: #c3adae; --muted: #8a7375; --grid: #241417; --axis: #3a2427; --border: rgba(255, 43, 61, 0.14); --border-strong: rgba(255, 43, 61, 0.45); --accent: #ff2b3d; --accent-soft: #ff6b78; --accent-dim: #2a1114; --track: #2a1114; --matrix-0: #1a1113; --matrix-1: #8a1622; --matrix-2: #b01a2a; --matrix-3: #d92a3c; --matrix-4: #ff4d5e; --matrix-5: #ff9aa3; --series-red: #ff0000; --series-1: #4f8cff; --series-2: #e05a00; --series-3: #00ab7b; --series-4: #c08700; --series-5: #ff1aa3; --series-6: #1aa300; --series-7: #a35cff; --shadow: 0 18px 60px rgba(0, 0, 0, 0.55); --glow: 0 0 24px rgba(255, 43, 61, 0.18); }}
:root[data-theme="dark"] { color-scheme: dark; --surface-1: #100b0c; --surface-2: #160f11; --page: #070506; --ink: #f4e9e7; --ink-2: #c3adae; --muted: #8a7375; --grid: #241417; --axis: #3a2427; --border: rgba(255, 43, 61, 0.14); --border-strong: rgba(255, 43, 61, 0.45); --accent: #ff2b3d; --accent-soft: #ff6b78; --accent-dim: #2a1114; --track: #2a1114; --matrix-0: #1a1113; --matrix-1: #8a1622; --matrix-2: #b01a2a; --matrix-3: #d92a3c; --matrix-4: #ff4d5e; --matrix-5: #ff9aa3; --series-red: #ff0000; --series-1: #4f8cff; --series-2: #e05a00; --series-3: #00ab7b; --series-4: #c08700; --series-5: #ff1aa3; --series-6: #1aa300; --series-7: #a35cff; --shadow: 0 18px 60px rgba(0, 0, 0, 0.55); --glow: 0 0 24px rgba(255, 43, 61, 0.18);}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; color: var(--ink); background: radial-gradient(ellipse at 50% -10%, rgba(255, 43, 61, 0.10), transparent 55%), var(--page); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;}
:root[data-theme="light"] body { background: radial-gradient(ellipse at 50% -10%, rgba(255, 0, 0, 0.07), transparent 55%), var(--page);}
a { color: inherit; text-decoration-color: var(--axis); text-underline-offset: 3px;}a:hover { color: var(--accent); text-decoration-color: currentColor; }
.page { margin: 0 auto; }
/* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */
.site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border);}
/* The page-wide period picker sits beside the theme toggle. */.header-controls { display: flex; flex: none; align-items: center; gap: 10px;}
.eyebrow { margin: 0 0 4px; color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;}
.eyebrow.accent { color: var(--accent); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: pulse 2.4s ease-in-out infinite;}
@keyframes pulse { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); }}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; }}
h1 { margin: 0; font-size: 27px; font-weight: 650; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase;}
:root[data-theme="dark"] h1,:root:where(:not([data-theme="light"])) h1 { text-shadow: var(--glow-text);}
h2 { margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;}
h2::before { content: "// "; color: var(--accent);}
.asof, .sub { margin: 4px 0 0; color: var(--ink-2); font-size: 12px;}
.label { margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;}
/* -------------------------------------------------------------------------- Surfaces -------------------------------------------------------------------------- */
.card, .share-card { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--border); border-radius: var(--radius);}
.card { padding: 18px 20px; margin-bottom: 16px;}
.matrix-card { overflow: hidden; border-top: 2px solid var(--accent); box-shadow: var(--glow), var(--shadow);}
.matrix-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(680px 240px at 16% 0%, rgba(255, 43, 61, 0.10), transparent 70%);}
.matrix-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px ); opacity: 0.55;}
.matrix-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px;}
.matrix-main { position: relative; display: flex; flex-direction: column; min-width: 0;}
.matrix-side { min-width: 0; padding-left: 24px; border-left: 1px solid var(--border);}
.matrix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.matrix-head h2 { margin-top: 2px; color: var(--ink); font-size: 15px;}
.matrix-head .sub { max-width: 48ch; }
.matrix-total { text-align: right; flex: none; }
.matrix-total-value { margin: 0; color: var(--accent); font-family: var(--mono); font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: 0; text-shadow: var(--glow-text);}
.matrix-scroll { margin-top: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-color: var(--accent-dim) var(--surface-1);}
#matrix { display: block; width: 100%; height: auto; min-width: 760px; overflow: visible;}
.matrix-cell { stroke: none; cursor: pointer; transition: opacity 120ms ease;}
.matrix-cell:hover,.matrix-cell:focus-visible { stroke: var(--ink); stroke-width: 1.5; outline: none;}
.matrix-cell.selected { stroke: var(--ink); stroke-width: 2;}
.matrix-cell[data-level="5"] { filter: drop-shadow(var(--glow-mark));}
.matrix-month,.matrix-weekday { fill: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;}
.matrix-month { text-transform: uppercase; }
.matrix-spark { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);}
.matrix-spark[hidden] { display: none; }
.spark-head { display: flex; align-items: center; gap: 14px;}
.spark-head .label { margin: 0; }
.spark-key { display: inline-flex; align-items: center; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase;}
.spark-line { width: 18px; height: 2px; margin-right: 5px; border-radius: 2px; display: inline-block;}
.spark-line.daily { background: var(--accent-soft); opacity: 0.6;}
.spark-line.average { background: var(--accent); }
#spark { display: block; width: 100%; height: 64px; margin-top: 4px; overflow: visible;}
.spark-baseline { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke;}
.spark-area { fill: var(--accent); opacity: 0.1;}
.spark-daily { fill: none; stroke: var(--accent-soft); stroke-width: 1.2; opacity: 0.55; vector-effect: non-scaling-stroke;}
.spark-average { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; filter: drop-shadow(var(--glow-mark));}
/* Stat rows: small label/value pairs on one line, wrapping when narrow. */
.stat-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-family: var(--mono); line-height: 1.4;}
.stat { display: flex; align-items: baseline; gap: 6px; white-space: nowrap;}
.stat dt { color: var(--muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;}
.stat dd { margin: 0; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums;}
.stat-meta { margin-left: 6px; color: var(--muted); font-size: 10px;}
.matrix-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);}
.matrix-legend { margin: 0; gap: 5px; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;}
.matrix-swatch { width: 11px; height: 11px; border-radius: 2px; flex: none;}
.matrix-tooltip { position: absolute; top: 10px; left: 10px; }
/* The day panel under the heatmap: one UTC day's commits. */
.day-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);}
.day-panel[hidden] { display: none; }.day-panel:focus { outline: none; }.day-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
/* Two classes to sit below the card headings' 27px, which come later. */.day-panel .day-head h2 { margin-top: 2px; color: var(--ink); font-size: 18px;}
.day-head .icon-button { flex: none; }
.day-list { max-height: 360px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-color: var(--accent-dim) var(--surface-1);}
.day-commit { display: grid; grid-template-columns: 38px minmax(0, 10rem) 6.5rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--grid); font-size: 12px;}
.day-time,.day-sha,.day-project { color: var(--muted); font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums;}
.day-project { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink-2);}
.day-project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.day-subject { color: var(--ink); overflow-wrap: anywhere; }
.day-private { padding: 7px 0 2px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;}
/* -------------------------------------------------------------------------- Project ranking -------------------------------------------------------------------------- */
.side-head h2 { color: var(--ink); }
.project-ranking { display: flex; flex-direction: column; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none;}
.project-row { display: grid; grid-template-columns: 18px auto auto minmax(0, 1fr); grid-template-areas: "rank body body body" ". icon count spark"; gap: 5px 8px; align-items: center;}
.project-rank { grid-area: rank; align-self: start; color: var(--muted); font-family: var(--mono); font-size: 10px; line-height: 16px; text-align: right;}
.project-row > .project-icons { grid-area: icon; display: flex; align-items: center; gap: 6px; }.project-row .project-icon { width: 20px; height: 20px; }.project-row .project-favicon { width: 16px; height: 16px; }
.project-icon { display: grid; box-sizing: border-box; place-items: center; width: 26px; height: 26px; flex: none; overflow: hidden; border-radius: 6px;}
.project-icon.fallback { border: 1px solid var(--border-strong); background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0; box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.2);}
.project-favicon { width: 20px; height: 20px; object-fit: contain; border-radius: 4px;}
.repo-name .project-icon { width: 20px; height: 20px;}
.repo-name .project-favicon { width: 16px; height: 16px;}
.project-body { grid-area: body; min-width: 0; }
.project-name { display: flex; align-items: flex-start; gap: 6px; min-width: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25;}
.project-label { min-width: 0; }
/* A project's links: the favicon opens its live site, and the forge logo beside it, in the page's red, opens the repository. The logo's slot is the favicon's size, and is kept empty on rows without one, so both line up. */.project-links { display: inline-flex; flex: none; align-items: center; gap: 4px; vertical-align: middle; }.project-site { display: inline-flex; flex: none; border-radius: 6px; }.project-icon.small { width: 14px; height: 14px; border-radius: 3px; font-size: 7px; }.project-icon.small .project-favicon { width: 12px; height: 12px; }
.source-link { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 4px;}
/* The logo is masked on a pseudo-element so the focus ring isn't clipped. */.source-link::before { width: 16px; height: 16px; background: var(--accent); content: ""; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;}
.source-link.small { width: 14px; height: 14px; border-radius: 3px; }.source-link.small::before { width: 12px; height: 12px; }.source-link.empty::before { content: none; }.source-link:hover::before { background: var(--accent-soft); }.source-tangled { --glyph: url("icons/tangled.svg"); }.source-github { --glyph: url("icons/github.svg"); }
.project-label-part { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: pre;}
.project-meta { display: block; overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;}
.project-count { grid-area: count; display: inline-flex; min-width: 5ch; align-items: center; gap: 4px; color: var(--ink); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600;}
.project-momentum { font-size: 11px; font-weight: 500; line-height: 1;}
.project-momentum.up { color: var(--accent); }.project-momentum.down { color: var(--muted); }.project-momentum.flat { color: var(--ink-2); }
.side-note { margin-top: 14px; font-size: 11px; }
.side-link { display: inline-block; margin-top: 8px; color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase;}
.side-link:hover { color: var(--accent-soft); }
/* -------------------------------------------------------------------------- Hero figures and KPIs -------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;}
.share-card { padding: 20px 22px; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.share-periods { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--page);}
.share-periods button { padding: 3px 7px; font-size: 9px;}
.share-value { margin: 6px 0 0; color: var(--accent); font-family: var(--mono); font-size: 34px; font-weight: 650; line-height: 1.1; letter-spacing: 0; text-shadow: var(--glow-text);}
.share-prior { margin-top: 7px; font-size: 11px; }
.meter { position: relative; height: 9px; margin: 13px 0 8px;}
.meter-track, .meter-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 5px;}
.meter-track { width: 100%; background: var(--track); }
.meter-fill { width: 0; background: var(--accent); box-shadow: var(--glow-mark); transition: width 300ms ease;}
/* -------------------------------------------------------------------------- Controls -------------------------------------------------------------------------- */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--page);}
button { padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;}
button:hover { color: var(--ink); background: var(--accent-dim); }
button.active,button[aria-pressed="true"] { color: var(--accent); background: var(--surface-1); box-shadow: inset 0 -2px 0 var(--accent);}
.ghost { border: 1px solid var(--border); background: var(--surface-1);}
.ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }
.icon-button { width: 34px; height: 34px; padding: 0; color: var(--accent); font-size: 15px;}
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;}
/* -------------------------------------------------------------------------- Legends and charts -------------------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 14px 0 4px; padding: 0; list-style: none; color: var(--ink-2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em;}
.legend li { display: inline-flex; align-items: center; gap: 6px;}
.legend .burn-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none;}
.legend .burn-toggle:hover { color: var(--ink); }.legend .burn-toggle[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.burn-key { width: 14px; height: 2px; background: #ff0000; box-shadow: var(--glow-mark);}
.swatch { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--swatch, var(--series-1));}
.chart-wrap { position: relative; width: 100%; margin-top: 6px;}
#chart { display: block; width: 100%; height: auto; min-height: 220px; overflow: visible;}
.chart-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }.chart-axis { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }.chart-tick { fill: var(--muted); font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; }.chart-hit { fill: transparent; cursor: crosshair; }/* The token burn pulse: pure red on a page-coloured casing, sharp joins. */.burn-casing, .burn-pulse { fill: none; stroke-linejoin: miter; stroke-miterlimit: 12; vector-effect: non-scaling-stroke; pointer-events: none;}.burn-casing { stroke: var(--page); stroke-width: 4; opacity: 0.85; }.burn-pulse { stroke: #ff0000; stroke-width: 1.5; filter: drop-shadow(var(--glow-mark)); }.chart-hit:focus-visible { outline: none; stroke: var(--accent); stroke-width: 1.5; }
.tooltip { position: absolute; z-index: 5; min-width: 168px; max-width: 260px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow), 0 0 20px rgba(255, 0, 0, 0.18); font-size: 12px; pointer-events: none;}
.tooltip .tip-date { margin-bottom: 6px; color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;}
.tooltip .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;}
.tooltip .tip-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); /* Project names are long; wrap them rather than push the count out. */ overflow-wrap: anywhere;}
.tooltip .tip-value { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;}
.tooltip .tip-key { width: 12px; height: 2px; border-radius: 1px;}
/* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */
.table-view { max-height: 340px; margin-top: 14px; overflow: auto; scrollbar-color: var(--accent-dim) var(--surface-1);}
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap;}
th:first-child, td:first-child { text-align: left; }
th { position: sticky; top: 0; background: var(--surface-1); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;}
td { color: var(--ink-2); font-variant-numeric: tabular-nums; }td:first-child { color: var(--ink); }.table-scroll-note { margin-top: 6px; color: var(--muted); font-size: 10px; }
/* -------------------------------------------------------------------------- Two-column panels -------------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;}
/* Cards marked .half pair up on main's grid; everything else spans it. */main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
main > * { grid-column: 1 / -1; }main > .half { grid-column: auto; min-width: 0; }
.repo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--grid);}
.repo-row:last-child { border-bottom: 0; }
.repo-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 550;}
.repo-name .repo-label { overflow-wrap: anywhere; white-space: normal; line-height: 1.25;}
.repo-meta { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;}
.repo-count { grid-area: 1 / 2 / 3; color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right;}
.repo-bar-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--track);}
.repo-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: 0 0 6px rgba(255, 43, 61, 0.30);}
/* -------------------------------------------------------------------------- Recent and status -------------------------------------------------------------------------- */
.recent { margin: 6px 0 0; padding: 0; list-style: none; }
.recent li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--grid);}
.recent li:last-child { border-bottom: 0; }
.recent .dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 8px var(--swatch);}
.recent .msg { margin: 0; color: var(--ink); }.recent .meta { margin: 2px 0 0; color: var(--muted); font-family: var(--mono); font-size: 10px; }.recent .when { color: var(--muted); font-family: var(--mono); font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }.recent .sha { color: var(--muted); font-family: var(--mono); font-size: 10px; }
/* Agentic activity: one row per agent, newest first, in a card as tall as the stacked charts beside it. It never scrolls: rows that don't fit are dropped, so the page keeps the wheel. */.activity-card { display: flex; flex-direction: column; min-width: 0; }.activity-card[hidden] { display: none; }.activity-frame { position: relative; flex: 1 1 auto; min-height: 260px; margin-top: 10px; overflow: clip; }
.activity-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;}
.activity-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--grid);}
.activity-row:last-child { border-bottom: 0; }.activity-row.is-new { animation: activity-in 1.6s ease-out; }
@keyframes activity-in { from { background: var(--accent-dim); } to { background: transparent; }}
@media (prefers-reduced-motion: reduce) { .activity-row.is-new { animation: none; }}
.activity-emoji { font-size: 14px; line-height: 18px; text-align: center; }.activity-body { min-width: 0; }
.activity-text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.activity-meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 2px 0 0; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em;}
.activity-meta > * + *::before { content: "· "; }.activity-agent { color: var(--ink-2); }.activity-repo { color: var(--ink-2); }.activity-project { display: inline-flex; align-items: center; gap: 4px; }
.activity-age,.activity-live { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap;}
.activity-age.fresh { color: var(--accent); }.activity-live { display: flex; align-items: center; margin: 0; text-transform: uppercase; }.activity-live.paused .live-dot { background: var(--muted); }.activity-source { margin: 8px 0 0; }.activity-source a { color: inherit; }
@media (max-width: 860px) { .activity-frame { flex: none; min-height: 0; } .activity-list { position: static; }}
.status-grid { margin: 8px 0 10px; }
.notice { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-1);}
.method { margin-top: 10px; color: var(--ink-2); font-size: 12px; }.method summary { cursor: pointer; color: var(--accent); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }.method p { max-width: 78ch; }
.errors { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 11px;}
.errors li { margin: 2px 0; overflow-wrap: anywhere; }
.loading { opacity: 0.55; transition: opacity 150ms ease; }
/* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */
@media (max-width: 980px) { .matrix-layout { grid-template-columns: 1fr; } .matrix-side { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--border); border-left: 0; } .project-ranking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 20px; }}
@media (max-width: 860px) { .hero, .two-col { grid-template-columns: 1fr; }}
@media (max-width: 620px) { .page { padding: 20px 14px 48px; } .card-head { flex-direction: column; } .matrix-head { flex-direction: column; } .matrix-total { text-align: left; } .matrix-foot { flex-direction: column; align-items: flex-start; } .day-commit { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; } .day-subject { grid-column: 1 / -1; } .project-ranking { grid-template-columns: 1fr; } .share-head { flex-direction: column; align-items: flex-start; gap: 6px; }}
@media print { :root { --page: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff; } .controls, .icon-button, .side-link { display: none; } .card, .share-card { break-inside: avoid; box-shadow: none; }}
/* -------------------------------------------------------------------------- Editorial pass: flat, serif, numbers first. -------------------------------------------------------------------------- */
:root { --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Courier Prime", "Nimbus Mono PS", "Courier New", monospace; --mono: "Courier Prime", "Nimbus Mono PS", "Courier New", monospace; --page: #fbf2ef; --surface-1: #fff8f6; --surface-2: #fdeeea; --ink: #120202; --ink-2: #4a1a16; --muted: #82534d; --grid: #f0d6d0; --axis: #e0b4ab; --border: rgba(18, 2, 2, 0.16); --border-strong: rgba(212, 0, 0, 0.6); --accent: #d40000; --accent-soft: #a30000; --accent-dim: #ffd6d6; --track: #f3d9d4; --matrix-0: #f5e1dc; --matrix-1: #ffc4c4; --matrix-2: #ff7a7a; --matrix-3: #ff0000; --matrix-4: #c40000; --matrix-5: #7a0000; --glow-text: 0 0 18px rgba(255, 0, 0, 0.2); --glow-mark: 0 0 5px rgba(255, 0, 0, 0.45); --shadow: none; --glow: none; --radius: 0;}
:root[data-theme="dark"] { --page: #080202; --surface-1: #110404; --surface-2: #170606; --ink: #fff3f1; --ink-2: #ffc2bb; --muted: #c08a84; --grid: #2c0a0a; --axis: #4a1010; --border: rgba(255, 30, 30, 0.22); --border-strong: rgba(255, 0, 0, 0.75); --accent: #ff0000; --accent-soft: #ff5c5c; --accent-dim: #420000; --track: #2a0606; --matrix-0: #1c0606; --matrix-1: #420000; --matrix-2: #750000; --matrix-3: #a80000; --matrix-4: #d90000; --matrix-5: #ff0000; --glow-text: 0 0 22px rgba(255, 0, 0, 0.6); --glow-mark: 0 0 8px rgba(255, 0, 0, 0.9);}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #080202; --surface-1: #110404; --surface-2: #170606; --ink: #fff3f1; --ink-2: #ffc2bb; --muted: #c08a84; --grid: #2c0a0a; --axis: #4a1010; --border: rgba(255, 30, 30, 0.22); --border-strong: rgba(255, 0, 0, 0.75); --accent: #ff0000; --accent-soft: #ff5c5c; --accent-dim: #420000; --track: #2a0606; --matrix-0: #1c0606; --matrix-1: #420000; --matrix-2: #750000; --matrix-3: #a80000; --matrix-4: #d90000; --matrix-5: #ff0000; --glow-text: 0 0 22px rgba(255, 0, 0, 0.6); --glow-mark: 0 0 8px rgba(255, 0, 0, 0.9); }}
body { background: var(--page); color: var(--ink); font-family: var(--sans);}
.page { max-width: 1440px; padding: 30px 34px 80px;}
.site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border);}
.site-header h1 { margin: 6px 0 4px; color: var(--ink); font-family: var(--serif); font-size: clamp(46px, 8vw, 88px); font-weight: 700; letter-spacing: 0; line-height: 0.95; text-transform: none;}
.eyebrow,.label,.stat dt,.side-head .eyebrow { color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;}
.eyebrow.accent { color: var(--accent); }
/* A card with a fixed window says so, quietly, instead of a picker. */.eyebrow.period-fixed { color: var(--muted); cursor: help; }
.asof { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;}
.live-dot { width: 5px; height: 5px; margin-right: 7px; border-radius: 0; box-shadow: var(--glow-mark); animation: none;}
.card,.matrix-card,.share-card { background: none; border: 0; border-radius: 0; box-shadow: none;}
.card { margin: 0; padding: 26px 0; border-top: 1px solid var(--border);}
.matrix-card { padding-top: 22px; border-top: 2px solid var(--accent);}
.matrix-card::before,.matrix-card::after { display: none; }
.matrix-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;}
.matrix-side { padding-left: 28px; border-left: 1px solid var(--border);}
.matrix-head { align-items: flex-end; gap: 20px;}
.matrix-head h2,.side-head h2,.card h2,.chart-card h2 { margin: 2px 0 0; color: var(--ink); font-family: var(--serif); font-size: 27px; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: none;}
.matrix-total { padding-bottom: 2px; }
.matrix-total-value { color: var(--accent); font-family: var(--serif); font-size: clamp(48px, 6vw, 68px); font-weight: 700; letter-spacing: 0; line-height: 0.9;}
.matrix-total .label { margin-top: 8px; }
.matrix-scroll { margin-top: 20px; }
#matrix { min-width: 700px; }
.matrix-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);}
.matrix-legend { font-size: 8px; letter-spacing: 0.1em; }
.matrix-note { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase;}
.matrix-spark { margin-top: 10px; padding-top: 8px; }.spark-head .label { color: var(--muted); }#spark { height: 54px; }
/* The sidebar's title and its period picker share a row, wrapping when the column is narrow. */.side-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px;}
.project-ranking { gap: 0 20px; margin-top: 0; }
.project-row { padding: 6px 0; border-bottom: 1px solid var(--grid);}
.project-row:last-child { border-bottom: 0; }
.project-rank { font-size: 9px; }.project-name { color: var(--ink); font-size: 13px; font-weight: 500; }.project-meta { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; }.project-count { color: var(--ink); font-family: var(--mono); font-size: 12px; }.side-link { color: var(--accent); font-size: 9px; letter-spacing: 0.12em; }
/* The share beside a column of totals, on the matrix card's grid. */
.hero { border-top: 1px solid var(--border);}
.share-card { padding: 26px 0 24px;}
.totals { padding: 26px 0 24px 28px; border-left: 1px solid var(--border);}
.totals-list { flex-direction: column; gap: 0; margin-top: 10px;}
.totals-list .stat { justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--grid);}
.totals-list .stat:last-child { border-bottom: 0; }
.share-value { margin: 4px 0 0; color: var(--accent); text-shadow: var(--glow-text); font-family: var(--serif); font-size: clamp(58px, 7vw, 82px); font-weight: 700; letter-spacing: 0; line-height: 0.9;}
.share-head { align-items: center; margin-bottom: 8px; }.share-periods button { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; }.share-periods button.active { color: var(--accent); }.meter { height: 3px; margin-top: 14px; border-radius: 0; }.meter-track, .meter-fill { border-radius: 0; }.share-sub { margin-top: 10px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; }
/* Share trend: a quiet line under the meter, not a second headline. */
.share-trend { position: relative; margin-top: 12px;}
#share-spark { display: block; width: 100%; height: 40px; overflow: visible;}
.share-trend-line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke;}
.share-trend-cursor { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke;}
.share-trend-label { display: block; margin-top: 3px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em;}
.chart-card { border-top: 1px solid var(--border); }.card-head { align-items: flex-end; }.chart-card .legend { margin-top: 14px; }.chart-wrap { margin-top: 8px; }.controls { gap: 10px; }.ghost, .segmented { border-radius: 0; background: transparent;}.ghost { border: 1px solid var(--border); color: var(--ink-2); font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }.ghost:hover { border-color: var(--accent); color: var(--accent); }.segmented { border: 1px solid var(--border); padding: 0; }.segmented button { color: var(--muted); font-family: var(--mono); font-size: 9px; }.segmented button.active { background: var(--accent); color: var(--page); box-shadow: var(--glow-mark); }
.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border);}
.two-col > .card { padding: 24px 0; border-top: 0;}
.two-col > .card + .card { padding-left: 36px; border-left: 1px solid var(--border);}
.two-col > .card:has(+ .card:not([hidden])),.half:has(+ .half) { padding-right: 36px; }.half + .half { padding-left: 36px; border-left: 1px solid var(--border); }
/* A card whose partner is hidden takes the whole row. */.half:has(+ .half[hidden]),.half[hidden] + .half { grid-column: 1 / -1; padding-right: 0; padding-left: 0; border-left: 0; }
.repo-row { padding: 6px 0; }.repo-name { color: var(--ink); font-size: 13px; }.repo-meta { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: 0.03em; }.repo-count { font-family: var(--mono); font-size: 11px; }.repo-bar { background: var(--accent); box-shadow: none; }
.recent { margin-top: 2px; }.recent li { padding: 6px 0; }.recent .msg { color: var(--ink); font-size: 13px; }.recent .meta, .recent .when { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: 0.03em; }.recent .dot { box-shadow: none; }
.status { padding-top: 22px; }#status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 24px; }#status > details { flex-basis: 100%; }.method { margin-top: 14px; }.method summary { color: var(--muted); font-size: 8px; letter-spacing: 0.1em; }.method p { color: var(--muted); font-size: 11px; max-width: 70ch; }.status > .sub { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
@media (max-width: 980px) { .matrix-layout { grid-template-columns: 1fr; gap: 24px; } .matrix-side { padding-top: 20px; padding-left: 0; border-top: 1px solid var(--border); border-left: 0; }}
@media (max-width: 860px) { main, .hero, .two-col { grid-template-columns: 1fr; } .hero { gap: 0; } .totals { padding: 18px 0 20px; border-left: 0; border-top: 1px solid var(--border); } .two-col > .card + .card, .half + .half { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); } .two-col > .card:has(+ .card:not([hidden])), .half:has(+ .half) { padding-right: 0; } .share-value { font-size: 58px; }}
@media (max-width: 620px) { .page { padding: 22px 16px 50px; } .matrix-head { align-items: flex-start; } .card-head { align-items: flex-start; } .share-head { align-items: flex-start; } .matrix-total { text-align: left; } .site-header { flex-wrap: wrap; } .site-header h1 { font-size: 52px; }}
h2::before { content: none; }.two-col { align-items: start; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap;}
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap;}
.site-header h1,.matrix-head h2,.side-head h2,.card h2,.chart-card h2,.matrix-total-value,.share-value { font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0;}
/* -------------------------------------------------------------------------- Time-of-day wheel -------------------------------------------------------------------------- */
.wheel-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 8px;}
#wheel { display: block; width: 100%; height: auto; overflow: visible;}
.wheel-ring { fill: none; }
.wheel-ring-label { paint-order: stroke; stroke: var(--page); stroke-width: 3px;}
.wheel-total { fill: var(--ink); font-family: var(--serif); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;}
@media (max-width: 860px) { .wheel-layout { grid-template-columns: 1fr; } .wheel-wrap { max-width: 440px; margin: 0 auto; }}
/* -------------------------------------------------------------------------- Project sparklines: twelve weeks under each project, one shared scale -------------------------------------------------------------------------- */
.project-spark { display: block; grid-area: spark; width: 100%; height: 20px;}
.project-spark-bar { fill: var(--accent); }.project-spark-empty { fill: var(--track); }
/* -------------------------------------------------------------------------- Commit types -------------------------------------------------------------------------- */
#types { display: block; width: 100%; height: auto; min-height: 200px; overflow: visible;}
.type-band { stroke: var(--page); stroke-width: 1.5; stroke-linejoin: round;}
.types-cursor { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges;}
.types-note { margin-top: 8px; color: var(--muted); font-family: var(--mono); font-size: 9px; }
/* -------------------------------------------------------------------------- Project timelines: one mirrored lane per project on a shared day axis -------------------------------------------------------------------------- */
.timelines-wrap { margin-top: 12px; }
.timeline-lane { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; column-gap: 12px; outline: none;}
.timeline-label { display: flex; align-items: center; gap: 8px; min-width: 0;}
.timeline-label .project-icon { width: 20px; height: 20px; }.timeline-label .project-favicon { width: 16px; height: 16px; }.timeline-text { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.timeline-name { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap;}
.timeline-meta { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap;}
.timeline-plot { display: block; width: 100%; height: 34px; overflow: visible; }.timeline-axis { height: 22px; }.timeline-span { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }.violin { fill: var(--accent); fill-opacity: 0.78; }.timeline-lane:hover .violin,.timeline-lane:focus-visible .violin { fill-opacity: 1; }.timeline-lane:hover .timeline-name,.timeline-lane:focus-visible .timeline-name { color: var(--accent); }.timeline-lane:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.timelines-cursor { position: absolute; background: var(--ink-2); opacity: 0.14; pointer-events: none;}
@media (max-width: 620px) { .timeline-lane { grid-template-columns: minmax(0, 1fr); padding-top: 6px; } .timeline-axis-row { padding-top: 0; } .timeline-axis-row .timeline-label { display: none; } .timeline-plot { height: 26px; } .timeline-axis { height: 22px; }}
/* -------------------------------------------------------------------------- Commits by date and by time, stacked beside agentic activity -------------------------------------------------------------------------- */
.chart-pair { align-items: stretch; }.chart-pair > .card { min-width: 0; }.chart-pair .card-head { flex-wrap: wrap; gap: 10px; }.chart-pair .wheel-layout { grid-template-columns: 1fr; gap: 14px; }.chart-pair .wheel-wrap { width: 100%; max-width: 320px; margin: 0 auto; }
/* One header, one legend: the wheel on top, the date chart below it. */.when-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; }.when-label { margin: 0 0 6px; }
/* With no activity card the stacked card takes the row, and its two charts sit side by side under the same header. */.chart-pair:has(> .activity-card[hidden]) { grid-template-columns: minmax(0, 1fr); }
.chart-pair:has(> .activity-card[hidden]) .when-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px;}
@media (max-width: 860px) { .chart-pair:has(> .activity-card[hidden]) .when-body { grid-template-columns: minmax(0, 1fr); }}
/* -------------------------------------------------------------------------- Written to landed -------------------------------------------------------------------------- */
.gap-layout { margin-top: 10px; }
#gap { display: block; width: 100%; height: auto; overflow: visible;}
.gap-dot { fill: var(--accent); fill-opacity: 0.32; }.gap-dot.slow { fill-opacity: 1; stroke: var(--page); stroke-width: 1; }.gap-quantile { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }.gap-quantile-label { fill: var(--ink-2); }.gap-limit-label { paint-order: stroke; stroke: var(--page); stroke-width: 3px; }.gap-limit { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }.tooltip .tip-subject { max-width: 240px; color: var(--ink); font-size: 12px; line-height: 1.35; }.tooltip .tip-dates { margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.gap-stats { margin-top: 10px; }.gap-cursor { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }