@import url("/provider-icons.css"); @import url("/style.css"); :root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1c1c1e; background: #f2f2f7; font-synthesis: none; --bg: #f2f2f7; --surface: #fff; --text: #1c1c1e; --secondary: #6c6c70; --line: #e5e5ea; --blue: #006ee6; --bluewash: #eaf2ff; --sheetshadow: 0 -12px 70px #0002; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); } button, a, input, select { -webkit-tap-highlight-color: transparent; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; touch-action: manipulation; } button, a { touch-action: manipulation; } button { border: 0; background: none; } a { color: var(--blue); text-decoration: none; } button:disabled { opacity: 0.35; cursor: default; } svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } [hidden] { display: none !important; } .app { width: 100%; margin: auto; } .top { height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); } .sessions-link { font-size: 17px; min-height: 44px; display: flex; align-items: center; } .circle-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: 24px; color: var(--blue); } .circle-button:hover { background: var(--bluewash); } main { padding: 0 0 calc(90px + env(safe-area-inset-bottom)); } h1 { font-size: 36px; font-weight: 750; letter-spacing: -1px; line-height: 1.13; margin: 5px 0 8px; } .title-row { display: flex; align-items: center; justify-content: space-between; } .secondary { color: var(--secondary); font-size: 15px; line-height: 1.45; margin: 0; } .calendar-icon { background: var(--surface); } .week { display: flex; justify-content: space-between; gap: 5px; margin: 4px 0 14px; } .day-button { min-width: 40px; min-height: 69px; flex: 1; max-width: 67px; border-radius: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--secondary); position: relative; } .day-button span { font-size: 11px; font-weight: 550; } .day-button b { font-size: 19px; font-weight: 600; color: var(--text); } .day-button .day-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--secondary); position: absolute; bottom: 6px; } .day-button[aria-pressed="true"] { background: var(--blue); color: white; } .day-button[aria-pressed="true"] b { color: white; } .day-button[aria-pressed="true"] .day-dot { background: white; } .day-button:hover:not([aria-pressed="true"]) { background: var(--surface); } .recap { font-size: 16px; line-height: 1.45; font-weight: 500; margin: 0; padding: 14px 20px 18px; border-bottom: 1px solid var(--line); } .work-list { background: var(--bg); } .work-row { display: flex; width: 100%; text-align: left; padding: 18px 20px 12px; gap: 12px; align-items: flex-start; background: var(--bg); } .work-row:hover { background: var(--bluewash); } .work-content { flex: 1; min-width: 0; } .work-content h2 { font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0 0 6px; overflow-wrap: anywhere; } .work-content p { font-size: 15px; line-height: 1.5; color: var(--secondary); margin: 0 0 11px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .work-content small { display: block; color: var(--secondary); font-size: 12px; line-height: 1.4; } .chevron { align-self: center; color: #aaaab1; font-size: 25px; font-weight: 300; } .day-note { font-size: 12px; color: var(--secondary); line-height: 1.5; margin: 18px 12px 0; text-align: center; } .text-button { color: var(--blue); font-size: 15px; min-height: 44px; padding: 10px 14px; } .refresh-button { display: block; margin: 3px auto 0; } .notice { font-size: 14px; line-height: 1.5; padding: 14px 16px; border-radius: 14px; background: var(--surface); margin-bottom: 18px; } .notice a { display: inline-block; padding: 6px 0; } .empty-state { padding: 30px 25px; text-align: center; line-height: 1.5; color: var(--secondary); } .empty-state h2 { color: var(--text); font-size: 21px; } .loading-row { padding: 30px; color: var(--secondary); } .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-around; gap: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 9px 8px calc(9px + env(safe-area-inset-bottom)); } .tab-bar button { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--secondary); min-width: 75px; min-height: 47px; font-size: 11px; font-weight: 500; } .tab-bar button[aria-current="page"] { color: var(--blue); } .tab-bar svg { width: 23px; height: 23px; } .search-field { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 48px; background: var(--surface); border-radius: 12px; margin: 20px; color: var(--secondary); } .search-field input { border: 0; outline: 0; background: transparent; font-size: 17px; min-width: 0; width: 100%; min-height: 26px; } .search-field:focus-within { outline: 2px solid var(--blue); } #find-results h2 { font-size: 19px; margin: 26px 0 13px; } .find-row { display: block; width: 100%; text-align: left; background: var(--surface); padding: 16px; border-bottom: 1px solid var(--line); } .find-row:first-child { border-radius: 14px 14px 0 0; } .find-row:last-child { border-bottom: 0; border-radius: 0 0 14px 14px; } .find-row:only-child { border-radius: 14px; } .find-row b { font-size: 16px; font-weight: 600; display: block; line-height: 1.4; } .find-row small { display: block; margin-top: 5px; color: var(--secondary); font-size: 13px; line-height: 1.4; } .sheet, .small-sheet { border: 0; color: var(--text); background: var(--bg); padding: 0; box-shadow: var(--sheetshadow); width: min(660px, 100%); max-width: 100%; max-height: 88dvh; overflow: auto; overscroll-behavior: contain; border-radius: 24px 24px 0 0; margin: auto auto 0; inset: auto 0 0; } .sheet::backdrop, .small-sheet::backdrop { background: #0006; backdrop-filter: blur(3px); } .sheet-handle { height: 5px; width: 36px; margin: 9px auto 0; border-radius: 4px; background: #aaaab180; } .sheet-toolbar { position: sticky; top: 0; z-index: 2; background: var(--bg); display: flex; justify-content: space-between; align-items: center; padding: 8px 21px 5px; gap: 12px; } .sheet-toolbar .circle-button { color: var(--secondary); font-size: 27px; background: none; width: 44px; height: 44px; margin: 0; min-width: 44px; } .sheet-toolbar .secondary { font-size: 13px; } .sheet-body { padding: 10px 24px calc(35px + env(safe-area-inset-bottom)); } .sheet h2 { font-size: 29px; line-height: 1.15; letter-spacing: -0.7px; margin: 4px 0 15px; } .detail-summary { font-size: 18px; line-height: 1.55; margin: 0 0 13px; } .detail-meta { font-size: 13px; color: var(--secondary); line-height: 1.5; } .sheet h3 { font-size: 18px; margin: 27px 0 11px; letter-spacing: -0.2px; } .grouped-list { background: var(--bg); overflow: hidden; } .conversation-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; color: var(--text); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.35; } .conversation-link:last-child { border: 0; } .conversation-link small { display: block; color: var(--secondary); font-size: 12px; margin-top: 4px; } .conversation-link .chevron { color: var(--blue); } .source { background: var(--surface); border-radius: 14px; margin-top: 12px; padding: 16px; } .source p { font-size: 16px; line-height: 1.55; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .source footer { margin-top: 12px; color: var(--secondary); font-size: 12px; line-height: 1.5; } .source details summary { color: var(--blue); font-size: 14px; padding: 10px 0; cursor: pointer; } .section-note { font-size: 13px; line-height: 1.55; color: var(--secondary); margin: 0 0 10px; } .evidence-details { font-size: 13px; color: var(--secondary); line-height: 1.6; margin-top: 27px; } .evidence-details > summary { min-height: 44px; cursor: pointer; color: var(--blue); } .visit { padding: 8px 0; border-top: 1px solid var(--line); } .small-sheet { width: min(480px, 100%); } .small-sheet h2 { font-size: 21px; margin: 8px 0; } .calendar-days { padding: 5px 22px 30px; } .calendar-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 55px; border-bottom: 1px solid var(--line); font-size: 17px; text-align: left; } .calendar-row span { color: var(--secondary); font-size: 13px; } .calendar-row[aria-pressed="true"] { color: var(--blue); font-weight: 600; } .settings-body { padding: 0 24px 35px; font-size: 16px; line-height: 1.55; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 23px 0; } .setting-row select { background: var(--surface); border: 1px solid var(--line); padding: 10px; font-size: 16px; border-radius: 9px; } .settings-link { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); min-height: 55px; padding: 12px 0; margin-top: 18px; } .related-row { padding: 14px 16px; } .app:has(dialog[open]) { overflow: hidden; } @media (min-width: 760px) { .sheet, .small-sheet { margin: auto; border-radius: 24px; inset: 0; max-height: 85dvh; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000; --surface: #1c1c1e; --text: #f2f2f7; --secondary: #aaaab1; --line: #38383a; --blue: #69aaff; --bluewash: #14263e; color: var(--text); background: var(--bg); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #000; --surface: #1c1c1e; --text: #f2f2f7; --secondary: #aaaab1; --line: #38383a; --blue: #69aaff; --bluewash: #14263e; color: var(--text); background: var(--bg); color-scheme: dark; } @media (prefers-reduced-motion: no-preference) { dialog[open] { animation: sheet-in 0.18s ease-out; } @keyframes sheet-in { from { transform: translateY(18px); opacity: 0.7; } to { transform: translateY(0); opacity: 1; } } } @media (max-width: 360px) { .week { gap: 2px; } .day-button { min-width: 36px; } } .sheet-toolbar .circle-button:hover { background: var(--line); } .more-work > summary { padding: 20px 16px; color: var(--blue, #0a84ff); font-weight: 600; cursor: pointer; } .more-work[open] > summary { border-bottom: 1px solid var(--line, #8884); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: baseline; font-size: 12px; line-height: 1.5; color: var(--secondary); overflow-wrap: anywhere; } .breadcrumbs > * + *:before { content: "›"; color: var(--secondary); padding-right: 10px; } .breadcrumbs a { padding: 5px 0; } .conversation-row { border-bottom: 1px solid var(--line); padding-bottom: 10px; } .conversation-row:last-child { border-bottom: 0; } .conversation-row .conversation-link { border: 0; padding-bottom: 12px; } .conversation-row .breadcrumbs { padding: 0 16px; } .detail-actions { display: flex; flex-wrap: wrap; margin: 10px -14px 0; } .timeline-view { font-size: 15px; line-height: 1.5; } .timeline-view h2 { font-size: 20px; letter-spacing: -0.3px; line-height: 1.3; margin: 0; } .timeline-view .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; background: var(--surface); border-radius: 20px; } .timeline-view label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--secondary); } .timeline-view input, .timeline-view select { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; min-height: 44px; width: 100%; min-width: 0; padding: 8px; } .timeline-view .controls label:has(input[type="search"]) { grid-column: 1/-1; } .timeline-view .controls .text-button { grid-column: 1/-1; padding: 0; text-align: left; min-height: 30px; } .timeline-view .assumption, .timeline-view .method { margin: 16px 0; color: var(--secondary); font-size: 13px; } .timeline-view summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; } .timeline-view summary:before { content: "›"; font-size: 21px; color: var(--secondary); } .timeline-view details[open] > summary:before { transform: rotate(90deg); } .timeline-view .assumption > div { background: var(--surface); padding: 16px; border-radius: 14px; } .timeline-view .assumption label { display: block; } .timeline-view .assumption input { padding: 0; border: 0; accent-color: var(--blue); } .timeline-view .summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 20px; overflow: hidden; background: var(--line); margin: 20px 0 28px; margin-top: 0; } .timeline-view .summary > div { display: flex; flex-direction: column; background: var(--surface); padding: 14px 16px; } .timeline-view .summary strong { font-size: 23px; font-weight: 650; color: var(--text); } .timeline-view .summary span { font-size: 12px; color: var(--secondary); } .timeline-view .section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 10px; } .timeline-view .section-head > span { font-size: 11px; color: var(--secondary); } .timeline-view .hint { font-size: 13px; color: var(--secondary); line-height: 1.5; margin: 10px 0 15px; } .timeline-view .days { display: flex; overflow-x: auto; gap: 3px; padding: 12px 8px; background: var(--surface); border-radius: 16px; } .timeline-view .day-bar { display: flex; flex-direction: column; align-items: center; min-width: 34px; min-height: 85px; padding: 5px 2px; border-radius: 9px; font-size: 11px; color: var(--secondary); } .timeline-view .day-bar svg { width: 24px; height: 60px; stroke: none; fill: var(--blue); } .timeline-view .day-bar[aria-pressed="true"] { background: var(--bluewash); color: var(--blue); } .timeline-view .axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--secondary); padding: 8px 4px; } .timeline-view .thread-row { display: block; text-align: left; width: 100%; padding: 15px 16px; background: var(--surface); border-bottom: 1px solid var(--line); } .timeline-view .thread-row:nth-child(2) { border-radius: 16px 16px 0 0; } .timeline-view .thread-row:last-child { border-radius: 0 0 16px 16px; border: 0; } .timeline-view .thread-row:hover, .timeline-view .rank:hover, .timeline-view .transition:hover { background: var(--bluewash); } .timeline-view .thread-label { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; } .timeline-view .thread-label strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .timeline-view .thread-label small { font-size: 12px; color: var(--secondary); overflow-wrap: anywhere; } .timeline-view svg.track { display: block; width: 100%; height: 32px; margin-top: 10px; stroke: none; } .timeline-view .tick { stroke: var(--line); stroke-width: 1; } .timeline-view .span { stroke: var(--blue); stroke-opacity: 0.4; stroke-width: 5; } .timeline-view .message { fill: var(--blue); } .timeline-view .voice { fill: #8b66c1; } .timeline-view .analysis-section { margin: 26px 0; background: var(--surface); border-radius: 20px; padding: 8px 16px 16px; } .timeline-view .analysis-section > summary { font-size: 20px; } .timeline-view .compact { display: flex; flex-direction: row; align-items: center; font-size: 13px; } .timeline-view .compact select { width: auto; } .timeline-view .rank, .timeline-view .transition { display: block; text-align: left; width: 100%; border-bottom: 1px solid var(--line); padding: 14px 0; } .timeline-view .rank:last-child, .timeline-view .transition:last-child { border-bottom: 0; } .timeline-view .rank-heading { display: flex; gap: 16px; justify-content: space-between; font-size: 14px; overflow-wrap: anywhere; } .timeline-view .rank-heading > span:last-child { flex-shrink: 0; } .timeline-view .rank small, .timeline-view .transition small { display: block; font-size: 12px; color: var(--secondary); line-height: 1.5; margin: 5px 0; } .timeline-view .rank svg { display: block; width: 100%; height: 4px; fill: var(--blue); stroke: none; margin-top: 8px; } .timeline-view .transition b { font-size: 14px; line-height: 1.5; font-weight: 500; } .timeline-view .empty { padding: 20px; font-size: 14px; color: var(--secondary); text-align: center; } .timeline-view .filter-context { font-size: 14px; padding: 12px 16px; background: var(--bluewash); border-radius: 14px; margin: 0 0 15px; overflow-wrap: anywhere; } @media (min-width: 760px) { .timeline-view .controls { grid-template-columns: 1fr 1fr; } .timeline-view .summary { grid-template-columns: repeat(4, 1fr); } } .timeline-view .timeline-filters { background: var(--surface); border-radius: 16px; margin-bottom: 18px; } .timeline-view .timeline-filters > summary { padding: 12px 16px; min-height: 58px; font-size: 15px; } .timeline-view .timeline-filters > summary span { font-size: 12px; color: var(--secondary); font-weight: 400; margin-left: auto; text-align: right; max-width: 65%; overflow-wrap: anywhere; } .timeline-view .timeline-filters .controls { padding-top: 0; } .timeline-view .analysis-section .assumption { margin: 0; } .work-item + .work-item { border-top: 1px solid var(--line); } .work-item .work-row { width: 100%; } .work-item > .repository-strip { padding: 0 18px 14px; } .thread-label .provider-label { font-size: 11px; color: var(--secondary); margin-bottom: 4px; } .thread-label .provider-icon { width: 14px; height: 14px; flex-basis: 14px; } .conversation-row .context-detail { padding: 0 16px 8px; } @media (max-width: 600px) { .work-item > .repository-strip { padding-left: 14px; padding-right: 14px; } } .conversation-content { flex: 1; min-width: 0; } .conversation-row .conversation-link { align-items: flex-start; gap: 12px; } .conversation-row > .repository-strip { padding: 0 16px 4px; } .work-row .harness-badge { margin-top: 1px; } .shell-heading, .shell-actions { display: flex; align-items: center; gap: 10px; min-width: 0; } .shell-heading h1 { font-size: 20px; line-height: 1.2; letter-spacing: -0.4px; margin: 0; } .connection { font-size: 11px; color: var(--secondary); } .connection[data-state="error"] { color: var(--blue); } #date-header { padding: 10px 20px 0; border-bottom: 1px solid var(--line); } .title-row { min-height: 44px; } .title-row > div { display: flex; gap: 8px; align-items: baseline; } .date-day { font-size: 15px; font-weight: 600; } #date-label { font-size: 13px; } .day-button { min-height: 60px; max-width: none; border-radius: 12px; } .work-item > .repository-strip { padding: 0 20px 16px; } .work-item { border-bottom: 1px solid var(--line); } .work-item + .work-item { border-top: 0; } #find-results > h2 { padding: 0 20px; font-size: 14px; color: var(--secondary); } .find-row, .conversation-link { padding-left: 20px; padding-right: 20px; background: var(--bg); } .timeline-view > :is(.section-note, .timeline-filters, .method, .history-section, .lower) { margin-left: 20px; margin-right: 20px; } .timeline-view .timeline-filters { margin-top: 16px; margin-bottom: 16px; border-radius: 12px; } .timeline-view .summary { border-radius: 0; margin-bottom: 20px; border-block: 1px solid var(--line); } .timeline-view .summary > div { background: var(--bg); padding: 14px 20px; } .timeline-view .timeline-section > :is(.section-head, .hint) { margin-left: 20px; margin-right: 20px; } .timeline-view .thread-row, .timeline-view .thread-row:nth-child(2), .timeline-view .thread-row:last-child { padding: 16px 20px; border-radius: 0; background: var(--bg); border-bottom: 1px solid var(--line); } .timeline-view .axis { padding-inline: 20px; } .timeline-view .analysis-section { background: var(--bg); border-radius: 0; padding: 0; border-top: 1px solid var(--line); } .notice { margin: 12px 20px; } .login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .login-card { width: min(390px, 100%); padding: 0; } .login-card h1 { font-size: 30px; } .login-card p { color: var(--secondary); line-height: 1.6; } .login-card button { background: var(--blue); color: white; width: 100%; min-height: 48px; border-radius: 12px; margin-top: 20px; } .login-card [role="alert"]:empty { display: none; } .timeline-view .thread-heading { display: flex; align-items: flex-start; gap: 12px; } .timeline-view .thread-label { min-width: 0; flex: 1; } .timeline-view .thread-label strong { font-size: 17px; } .timeline-view .thread-item { border-bottom: 1px solid var(--line); } .timeline-view .thread-item .thread-row { border-bottom: 0; } .timeline-view .thread-item > .repository-strip { padding: 0 20px 16px; }