@gotcos/glasses-server 6.98.1 → 6.99.16

package/server/web-control/panes/sessions.css

@@ -0,0 +1,452 @@
+/* COS Control Web: sessions pane styles, on top of control.css.
+   Control's Sessions pane (ActivityWindow.swift 2288-2933, 6341-6890) and its Usage and COS cost
+   views (SessionUsageView.swift). Phone first: the list, then the reader as a pushed screen; from
+   760px the list sits beside the reader. Nothing here is fixed to the bottom of the screen. */
+
+.sx {
+  --pv-claude: rgb(199, 115, 56);
+  --pv-codex: rgb(26, 140, 122);
+  --pv-cursor: rgb(107, 97, 219);
+  --run-green: rgb(56, 145, 99);
+}
+:root[data-theme='dark'] .sx { --pv-claude: rgb(226, 146, 92); --pv-codex: rgb(72, 190, 168); --pv-cursor: rgb(158, 150, 245); --run-green: rgb(108, 207, 143); }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .sx { --pv-claude: rgb(226, 146, 92); --pv-codex: rgb(72, 190, 168); --pv-cursor: rgb(158, 150, 245); --run-green: rgb(108, 207, 143); }
+}
+
+/* ── header, views, clock ─────────────────────────────── */
+.sx-views { justify-content: space-between; margin: 10px 0 8px; }
+.sx-clock { margin-left: auto; }
+.sx-split { margin-top: 4px; }
+@media (max-width: 599px) {
+  .sx-views { gap: 2px 18px; }
+  .sx-clock { margin-left: 0; }
+  .sx-views .cx-switch button { min-height: 38px; }
+}
+/* A reader on a narrow screen is a pushed page: the header and switches step aside. */
+@media (max-width: 759px) {
+  #pane-sessions.reading .sx-hero,
+  #pane-sessions.reading .sx-views { display: none; }
+}
+
+/* ── search ───────────────────────────────────────────── */
+.sx-tools { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; }
+.sx-search { flex: 1 1 auto; max-width: none; min-width: 0; }
+.sx-search .field { width: 100%; }
+.sx-select {
+  min-height: 36px; height: 36px; padding: 0 30px 0 11px; font-size: 13.5px; border-radius: 9px;
+  background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px; width: auto; max-width: 210px; flex: none; color: var(--ink);
+}
+.sx-hint { margin: 0 2px 8px; }
+@media (max-width: 599px) {
+  .sx-search { order: 0; flex: 1 1 auto; }
+  .sx-search .cx-clear { min-height: 40px; padding: 0 2px; }
+  .sx-select { min-height: 40px; height: 40px; font-size: 16px; background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; }
+  #sessions-recency { max-width: 128px; }
+  .sx-ufilters .sx-select { flex: 1 1 150px; max-width: none; }
+  .sx-utable .hp { display: none; }
+}
+
+.sx-hooks { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; margin: 0 0 10px; border-radius: 10px; background: var(--qopen); border: 1px solid var(--panel-border); font-size: 12.5px; line-height: 1.4; color: var(--sub); }
+.sx-hooks-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-top: 5px; flex: none; }
+.sx-hooks-where { color: var(--tertiary); }
+
+/* ── rows ─────────────────────────────────────────────── */
+.sx-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; padding: 11px 12px 11px 12px; align-items: start; }
+.cx-row.sx-row + .cx-row.sx-row::before { left: 51px; }
+.sx-row[aria-selected='true'] { background: var(--qopen); box-shadow: inset 3px 0 0 var(--accent); }
+.sx-glyph { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; margin-top: 1px; color: var(--pv-claude); background: color-mix(in srgb, var(--pv-claude) 16%, transparent); }
+.sx-glyph.codex { color: var(--pv-codex); background: color-mix(in srgb, var(--pv-codex) 16%, transparent); }
+.sx-glyph.cursor { color: var(--pv-cursor); background: color-mix(in srgb, var(--pv-cursor) 16%, transparent); }
+.sx-glyph svg { width: 16px; height: 16px; fill: currentColor; fill-rule: evenodd; stroke: none; }
+.sx-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: 600 15px/1.3 var(--body); color: var(--ink); }
+.sx-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--sub); }
+.sx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; min-width: 0; }
+.sx-badge { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 9px; font: 700 9px/1 var(--mono); letter-spacing: 0.06em; color: var(--pv-claude); background: color-mix(in srgb, var(--pv-claude) 14%, transparent); white-space: nowrap; }
+.sx-badge.codex { color: var(--pv-codex); background: color-mix(in srgb, var(--pv-codex) 14%, transparent); }
+.sx-badge.cursor { color: var(--pv-cursor); background: color-mix(in srgb, var(--pv-cursor) 14%, transparent); }
+.sx-pinned { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 9px; font: 700 8.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--sub); background: color-mix(in srgb, var(--ink) 8%, transparent); }
+.sx-chip { font: 600 11.5px/1.3 var(--body); color: var(--sub); }
+.sx-chip.waiting { color: var(--amber); }
+.sx-chip.running { color: var(--run-green); }
+.sx-when, .sx-ws { font-size: 11.5px; line-height: 1.3; color: var(--sub); }
+.sx-ws { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.sx-opened { font: 500 11.5px/1.3 var(--body); color: var(--amber); }
+.sx-side { display: flex; align-items: center; gap: 8px; align-self: center; }
+.sx-match { font: 600 9.5px/1 var(--mono); padding: 4px 7px; border-radius: 10px; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--tint) 16%, transparent); }
+.sx-looking { padding: 10px 4px; }
+@media (min-width: 760px) {
+  .sx-title { -webkit-line-clamp: 1; font-size: 13.5px; }
+  .sx-snippet { font-size: 11.5px; }
+  .sx-when, .sx-ws, .sx-chip, .sx-opened { font-size: 10.5px; }
+  .sx-row { padding: 10px 12px; }
+}
+
+/* ── reader ───────────────────────────────────────────── */
+.sx-reader { min-width: 0; }
+.sx-reader-head { padding: 4px 0 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
+.sx-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.sx-head-line .sx-badge { height: 19px; font-size: 9.5px; padding: 0 7px; }
+.sx-reader-title { font: 500 22px/1.2 var(--display); margin: 0; color: var(--ink); overflow-wrap: anywhere; min-width: 0; letter-spacing: -0.005em; }
+.sx-subtitle { margin: 6px 0 0; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
+.sx-retry { margin: 10px 0; }
+
+/* ACTIVITY keeps one size in every state, so nothing below it moves while you read. Each row has a
+   fixed height; the tail of tool lines and reply text is anchored to its bottom and clips above. */
+.sx-activity {
+  --act-state: 34px; --act-prompt: 20px; --act-tail: 48px;
+  padding: 11px 14px 10px; border-radius: 10px; background: var(--qopen); border: 1px solid var(--panel-border); margin-bottom: 14px; overflow: hidden;
+}
+@media (min-width: 760px) { .sx-activity { --act-tail: 64px; } }
+.sx-act-label { display: flex; align-items: center; gap: 12px; height: 14px; font: 600 9.5px/14px var(--mono); letter-spacing: 0.12em; color: var(--sub); white-space: nowrap; overflow: hidden; }
+.sx-act-bits { display: flex; gap: 10px; margin-left: auto; min-width: 0; overflow: hidden; font: 400 10px/14px var(--mono); letter-spacing: 0; color: var(--tertiary); }
+.sx-act-bits .warn { color: var(--amber); }
+.sx-act-bits .accent { color: var(--accent); }
+.sx-act-state { display: flex; align-items: center; gap: 8px; height: var(--act-state); margin-top: 4px; white-space: nowrap; overflow: hidden; }
+.sx-act-state strong { flex: none; font: 600 13.5px/1.3 var(--body); color: var(--ink); }
+.sx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tertiary); flex: none; }
+.sx-dot.working { background: var(--run-green); animation: pulse 2s ease-out infinite; }
+.sx-dot.waiting { background: var(--amber); }
+.sx-dot.failed { background: var(--hot); }
+.sx-act-detail { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sx-act-clock { flex: none; margin-left: auto; font: 400 11px/1.3 var(--mono); color: var(--tertiary); font-variant-numeric: tabular-nums; }
+.sx-act-stop.cx-btn { flex: none; height: 30px; padding: 0 11px; font-size: 13px; }
+.sx-act-prompt { height: var(--act-prompt); margin: 0; font-size: 13.5px; line-height: var(--act-prompt); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sx-act-tail { height: var(--act-tail); margin-top: 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
+.sx-act-tool { flex: none; font: 400 11px/16px var(--mono); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sx-act-prose { flex: none; margin-top: 2px; font-size: 13px; line-height: 16px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+.sx-act-fallback { height: calc(var(--act-state) + var(--act-prompt) + var(--act-tail) + 8px); margin: 0; padding-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--sub); overflow: hidden; box-sizing: border-box; }
+@media (max-width: 599px) { .sx-activity { --act-state: 38px; } .sx-act-stop.cx-btn { height: 36px; } }
+.sx-note { font-size: 12px; color: var(--sub); margin: 0 2px 12px; }
+
+/* YOU and ASSISTANT cards (Control: card fill, a tinted hairline; sessions tint for you, green for the reply). */
+#session-turns.sx-turns { display: grid; gap: 12px; margin-top: 0; }
+.sx-turns .turn {
+  max-width: none; justify-self: stretch; min-width: 0; color: var(--ink); background: var(--panel);
+  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--panel-border)); border-radius: 13px;
+  padding: 13px 16px 14px; white-space: normal; font-size: 15px; line-height: 1.5;
+}
+.sx-turns .turn.user { border-color: color-mix(in srgb, var(--tint) 30%, var(--panel-border)); background: var(--panel); color: var(--ink); }
+.sx-turns .turn .who { display: flex; justify-content: space-between; gap: 10px; opacity: 1; margin-bottom: 9px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
+.sx-turn-when { font: 400 10.5px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--tertiary); }
+.sx-turns .turn.pending { white-space: pre-wrap; opacity: 0.75; overflow-wrap: anywhere; }
+.sx-turns .turn.user code { background: color-mix(in srgb, var(--row-border) 70%, transparent); }
+.sx-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
+.sx-turns .reader-placeholder { padding: 12px 4px; }
+
+/* Markdown in a reply. */
+.sx-md { overflow-wrap: anywhere; min-width: 0; }
+.sx-md > :first-child { margin-top: 0; }
+.sx-md > :last-child { margin-bottom: 0; }
+.sx-md p { margin: 0 0 0.7em; }
+.sx-md h3, .sx-md h4, .sx-md h5, .sx-md h6 { font: 600 15.5px/1.3 var(--body); margin: 1em 0 0.45em; color: var(--ink); }
+.sx-md h3 { font-size: 17px; }
+.sx-md h5, .sx-md h6 { font-size: 14px; color: var(--sub); }
+.sx-md ul, .sx-md ol { margin: 0 0 0.7em; padding-left: 1.35em; }
+.sx-md li { margin: 0.18em 0; }
+.sx-md li > ul, .sx-md li > ol { margin: 0.2em 0 0.2em; }
+.sx-md code { font: 400 13px/1.4 var(--mono); background: color-mix(in srgb, var(--row-border) 70%, transparent); padding: 1px 5px; border-radius: 5px; }
+.sx-md pre { margin: 0 0 0.8em; padding: 10px 12px; border-radius: 9px; background: var(--qopen); border: 1px solid var(--hairline); overflow-x: auto; max-width: 100%; }
+.sx-md pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.5; white-space: pre; }
+.sx-md blockquote { margin: 0 0 0.7em; padding: 2px 0 2px 12px; border-left: 3px solid var(--panel-border); color: var(--sub); }
+.sx-md hr { border: 0; border-top: 1px solid var(--hairline); margin: 1em 0; }
+.sx-md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.sx-md del { color: var(--sub); }
+.sx-table { overflow-x: auto; max-width: 100%; margin: 0 0 0.8em; }
+.sx-table table { border-collapse: collapse; font-size: 13.5px; line-height: 1.4; min-width: 100%; }
+.sx-table th, .sx-table td { border: 1px solid var(--hairline); padding: 6px 9px; text-align: left; vertical-align: top; }
+.sx-table th { font-weight: 600; background: var(--qopen); }
+
+.sx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 4px; }
+.sx-foot-note { font-size: 11.5px; color: var(--tertiary); }
+.sx-copy-note { margin: 6px 2px 0; font-size: 12px; color: var(--sub); }
+
+/* Continue: refusal and caution boxes, the park hint, the field, the queue. */
+.sx-chat { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
+#pane-sessions .composer { position: relative; bottom: auto; margin-top: 4px; }
+#pane-sessions .composer .btn.small { min-height: 38px; }
+.sx-box { padding: 11px 13px; border-radius: 10px; margin-bottom: 10px; font-size: 13px; line-height: 1.45; color: var(--sub); }
+.sx-box p { margin: 0; overflow-wrap: anywhere; }
+.sx-box .sx-box-sub { margin-top: 4px; font-size: 12px; color: var(--tertiary); }
+.sx-box.refusal { background: var(--amber-bg); }
+.sx-box.confirm { background: var(--panel); border: 1px solid var(--amber); box-shadow: var(--shadow); }
+.sx-box.confirm strong { display: block; font: 600 14.5px/1.3 var(--body); color: var(--ink); margin-bottom: 4px; }
+.sx-box-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
+.cx-btn.danger { border-color: var(--hot); color: var(--hot); background: var(--btn-bg); }
+.sx-park { margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; color: var(--sub); }
+.sx-park p { margin: 0; }
+.sx-caution { margin: 6px 4px 0; font-size: 11.5px; line-height: 1.4; color: var(--tertiary); }
+.sx-queue { margin-top: 12px; display: grid; gap: 6px; }
+.sx-queue-head { margin: 0 2px 2px; font-size: 12px; color: var(--accent); }
+.sx-queue-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--panel-border); }
+.sx-queue-state { font: 700 9.5px/1.2 var(--mono); color: var(--accent); }
+.sx-queue-text { font-size: 13px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
+@media (max-width: 599px) {
+  .sx-queue-row { grid-template-columns: minmax(0, 1fr) auto; }
+  .sx-queue-state { grid-column: 1 / -1; }
+}
+@media (min-width: 760px) {
+  .sx-reader-title { font-size: 24px; }
+}
+
+/* ── Usage view ───────────────────────────────────────── */
+.sx-usage { margin-top: 2px; }
+.sx-ufilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; }
+.sx-link { font: 600 13px/1 var(--body); color: var(--accent); min-height: 36px; padding: 0 4px; }
+.sx-fresh { margin-left: auto; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.sx-unote { margin: 6px 2px 0; }
+.sx-uempty { margin-top: 14px; padding: 22px 16px; border-radius: 10px; background: var(--qopen); color: var(--sub); font-size: 14px; line-height: 1.45; }
+.sx-uempty .sx-unote { margin-top: 8px; }
+.sx-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 18px; }
+.sx-figure { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.sx-figure b { font: 500 24px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
+.sx-figure.lead b { font-size: 30px; }
+.sx-figure-title { font: 500 12px/1.3 var(--body); color: var(--ink); }
+.sx-figure-note { font-size: 11px; color: var(--sub); }
+@media (min-width: 760px) { .sx-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sx-figure.lead b { font-size: 32px; } }
+.sx-uhead { font: 600 15px/1.2 var(--body); color: var(--ink); margin: 26px 2px 10px; }
+.sx-utable table { width: 100%; background: var(--panel); }
+.sx-utable th { font-size: 11.5px; color: var(--sub); }
+.sx-utable td { font-size: 13px; }
+.sx-utable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.sx-days { padding: 2px 0; }
+.sx-day { display: grid; grid-template-columns: 96px minmax(0, 1fr) 58px 56px; gap: 10px; align-items: center; padding: 7px 14px; font-size: 13px; }
+.sx-day + .sx-day { border-top: 1px solid var(--hairline); }
+.sx-day-date { color: var(--ink); white-space: nowrap; }
+.sx-day-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--hairline) 70%, transparent); overflow: hidden; }
+.sx-day-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
+.sx-day-tok, .sx-day-usd { text-align: right; font-variant-numeric: tabular-nums; color: var(--sub); white-space: nowrap; }
+.sx-day-usd { color: var(--ink); }
+.sx-ufoot { margin: 18px 2px 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 12px; line-height: 1.5; color: var(--sub); }
+.sx-how { margin: 10px 2px 0; font-size: 12px; color: var(--sub); }
+.sx-how summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
+.sx-how p { margin: 8px 0 0; max-width: 680px; line-height: 1.5; }
+.sx-reading { padding: 18px 4px; }
+
+/* ── COS cost view ────────────────────────────────────── */
+.sx-cost-head { font: 500 26px/1.28 var(--display); color: var(--ink); margin: 10px 0 0; max-width: 800px; letter-spacing: -0.005em; }
+.sx-cost-head span { color: var(--sub); }
+.sx-cost-api { margin: 12px 0 0; font-size: 13px; color: var(--sub); }
+.sx-cost-status { margin-top: 10px; display: grid; gap: 6px; font-size: 13px; }
+.sx-cost-status p { margin: 0; color: var(--sub); }
+.sx-cost-status .warn { color: var(--amber); }
+.sx-cost-rows { margin-top: 22px; border-bottom: 1px solid var(--hairline); }
+.sx-cost-row { display: grid; grid-template-columns: minmax(0, 340px) minmax(80px, 1fr) 170px; gap: 22px; align-items: center; padding: 13px 0; border-top: 1px solid var(--hairline); }
+.sx-cost-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.sx-cost-name b { font: 500 14px/1.3 var(--body); color: var(--ink); }
+.sx-cost-name span { font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
+.sx-cost-name .mix { font-size: 12px; }
+.sx-cost-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--hairline) 55%, transparent); }
+.sx-cost-bar .m { background: var(--accent); min-width: 3px; }
+.sx-cost-bar .e { background: color-mix(in srgb, var(--accent) 28%, transparent); min-width: 3px; }
+.sx-cost-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
+.sx-cost-fig b { font: 500 14px/1.2 var(--body); color: var(--sub); font-variant-numeric: tabular-nums; }
+.sx-cost-fig.measured b { font: 500 19px/1.15 var(--display); color: var(--ink); }
+.sx-cost-fig span { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
+.sx-work { margin-top: 24px; display: grid; gap: 8px; }
+.sx-work-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
+.sx-work-top > div:first-child { display: flex; flex-direction: column; gap: 3px; }
+.sx-work-title { font: 500 19px/1.15 var(--display); color: var(--ink); }
+.sx-work-count { font-size: 12.5px; color: var(--sub); }
+.sx-work-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
+.sx-work-fig b { font: 500 19px/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
+.sx-work-fig span { font-size: 12px; color: var(--sub); }
+.sx-work p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--sub); max-width: 760px; }
+.sx-work p.strong { font: 500 13px/1.45 var(--body); color: var(--ink); }
+.sx-cost-foot { margin-top: 26px; display: grid; gap: 8px; }
+.sx-cost-foot > p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sub); max-width: 760px; }
+@media (max-width: 759px) {
+  .sx-cost-head { font-size: 22px; }
+  .sx-cost-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
+  .sx-cost-bar { grid-column: 1 / -1; grid-row: 2; }
+  .sx-day { grid-template-columns: 84px minmax(0, 1fr) 52px 50px; gap: 8px; padding: 7px 12px; }
+}
+
+/* ── Usage, wide (860 px and up): the Mac's desktop layout (SessionUsageView, SessionUsageSplitLayout) ──
+   Chart left and the summary card right, the day-by-day calendar and the Tool and model table full width below.
+   Under 860 px none of this applies and the vertical view above is unchanged. Series colours are the Mac's
+   (SessionUsageChart.seriesColor), fixed in both themes except Cursor, which follows the ink. */
+.sx-usage {
+  --u-gold: rgb(201, 168, 110); --u-codex: rgb(5, 150, 158); --u-cursor: color-mix(in srgb, var(--ink) 72%, transparent);
+  --u-purple: rgb(135, 102, 196); --u-input: rgb(51, 125, 199); --u-output: rgb(219, 110, 41); --u-read: rgb(156, 148, 135);
+  --u-gray: rgb(142, 142, 147); --u-brown: rgb(140, 107, 51);
+  --u-blue: rgb(0, 122, 255); --u-green: rgb(52, 199, 89); --u-pink: rgb(255, 45, 85); --u-indigo: rgb(88, 86, 214); --u-tan: rgb(162, 132, 94);
+}
+.u-sw { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 2px; }
+.u-chev { width: 9px; height: 6px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.u-rangebtn {
+  appearance: none; -webkit-appearance: none; text-align: left; cursor: pointer; padding-right: 30px; color: var(--ink);
+  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
+  background-repeat: no-repeat; background-size: 5px 5px;
+}
+.u-wide .sx-figures.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.u-split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 31%, 340px); gap: 28px; align-items: stretch; margin-top: 26px; }
+.u-chartcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.u-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font: 500 15px/1.2 var(--body); color: var(--ink); }
+.u-grow { flex: 1; }
+.u-word { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 36px; color: var(--accent); cursor: pointer; border-radius: 6px; }
+.u-word select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; -webkit-appearance: none; border: 0; }
+.u-word:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
+.u-style { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: color-mix(in srgb, var(--sub) 70%, transparent); }
+.u-style[aria-pressed='true'] { color: var(--accent); }
+.u-style svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.u-chart { position: relative; min-height: 300px; border-radius: 8px; }
+.u-chart:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
+.u-svg { display: block; overflow: visible; font-family: var(--body); }
+.u-svg .u-grid { stroke: var(--hairline); stroke-width: 1; }
+.u-svg text { font-size: 11px; fill: var(--sub); font-variant-numeric: tabular-nums; }
+.u-svg .u-col { transition: opacity 160ms ease; }
+.u-svg .u-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.u-svg .u-avg { stroke: color-mix(in srgb, var(--sub) 75%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
+.u-svg .u-avglab { paint-order: stroke; stroke: var(--page); stroke-width: 4px; stroke-linejoin: round; }
+.u-svg .u-hover { stroke: color-mix(in srgb, var(--sub) 60%, transparent); stroke-dasharray: 3 3; pointer-events: none; }
+.u-svg .u-hover.hidden { display: none; }
+/* The scrub layer: a finger dragging sideways reads the bars, a finger dragging up or down scrolls the page. */
+.u-svg .u-hit { fill: transparent; touch-action: pan-y; cursor: pointer; }
+.u-chart-empty { display: grid; place-items: center; min-height: 300px; margin: 0; color: var(--sub); font-size: 13.5px; text-align: center; }
+.u-tip {
+  position: absolute; left: 0; top: 6px; z-index: 2; padding: 10px; border-radius: 8px; pointer-events: none;
+  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 6px 20px rgba(43, 33, 26, 0.12);
+  font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; transition: opacity 120ms ease;
+}
+.u-tip.hidden { display: none; }
+.u-tip p { margin: 0 0 5px; font-weight: 600; color: var(--ink); }
+.u-tiprow { display: flex; align-items: center; gap: 6px; color: var(--sub); margin-top: 3px; }
+.u-tiprow span:not(.u-sw) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-tiprow b { font-weight: 400; }
+.u-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--sub); }
+.u-key { display: inline-flex; align-items: center; gap: 6px; }
+
+.u-card { min-width: 0; padding: 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--row-border); font-size: 12px; color: var(--ink); align-self: stretch; }
+.u-card-top { display: flex; align-items: center; gap: 4px; }
+.u-card-title { flex: 1; min-width: 0; margin: 0; font: 400 12.5px/1.3 var(--body); color: var(--sub); text-align: left; }
+.u-rangelink { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; color: var(--accent); font-weight: 600; flex: 1 1 auto; justify-content: flex-start; }
+.u-step { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; border: 1px solid var(--panel-border); color: var(--ink); }
+.u-step:disabled { opacity: 0.4; }
+.u-step svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.u-card-head { margin: 10px 0 0; font: 500 26px/1.15 var(--display); font-variant-numeric: tabular-nums; }
+.u-card-sub { margin: 4px 0 0; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
+.u-mixes { display: grid; gap: 9px; margin-top: 14px; }
+.u-mix > span { display: block; font-size: 11px; color: var(--sub); margin-bottom: 4px; }
+.u-strip { display: flex; gap: 2px; height: 10px; }
+.u-strip i { display: block; flex-basis: 0; flex-shrink: 1; min-width: 3px; border-radius: 2px; }
+.u-ch { margin: 16px 0 3px; font: 600 12px/1.3 var(--body); color: var(--ink); }
+.u-crow { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-variant-numeric: tabular-nums; }
+.u-cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-cval { min-width: 52px; text-align: right; color: var(--sub); }
+.u-cnote { margin: 3px 0 0; font-size: 11px; line-height: 1.4; color: var(--sub); }
+.u-rule-h { border: 0; border-top: 1px solid var(--hairline); margin: 14px 0 10px; }
+.u-cline { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--sub); font-variant-numeric: tabular-nums; }
+.u-peak { display: block; text-align: left; font-size: 12px; line-height: 1.45; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; min-height: 28px; }
+.u-whole { margin-top: 10px; padding: 0; }
+
+.u-daysec { margin-top: 34px; }
+.u-h { margin: 0 0 12px; }
+.u-cal { display: grid; row-gap: 3px; font-size: 11px; color: var(--sub); }
+.u-cal-row { display: flex; align-items: center; gap: 8px; height: 16px; }
+.u-cal.numbers .u-cal-row { height: 26px; }
+.u-cal-row.u-cal-months { height: 14px; }
+.u-cal-lab { width: 26px; flex: none; }
+.u-cal-weeks { flex: 1; min-width: 0; display: grid; height: 100%; }
+.u-cal-month { white-space: nowrap; overflow: visible; line-height: 14px; }
+.u-cal-avg { width: 150px; flex: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+.u-avgbar { width: 88px; flex: none; display: flex; align-items: center; }
+.u-avgbar i { display: block; height: 14px; max-height: 100%; border-radius: 2px; background: var(--u-gold); }
+.u-cal:not(.numbers) .u-avgbar i { height: 12px; }
+.u-avgnum { font-variant-numeric: tabular-nums; }
+.u-cell { display: block; min-width: 0; height: 100%; border-radius: 3px; }
+.u-cell.day { padding: 0; font: 400 11px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); overflow: hidden; white-space: nowrap; }
+.u-cell.day.deep { color: #1f1712; }
+.u-cell.day.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
+.u-cell.none { border: 1px solid var(--hairline); }
+.u-cell.faint { background: color-mix(in srgb, var(--hairline) 45%, transparent); border-radius: 2px; }
+
+.u-tablesec { margin-top: 34px; }
+.u-thead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.u-thead .u-h { margin: 0; }
+.u-cols { position: relative; }
+.u-cols summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 4px; font: 500 12.5px/1 var(--body); color: var(--ink); cursor: pointer; }
+.u-cols summary::-webkit-details-marker { display: none; }
+.u-cols summary .u-chev { color: var(--accent); }
+.u-cols-menu { position: absolute; right: 0; top: 100%; z-index: 5; display: grid; min-width: 180px; padding: 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 10px 28px rgba(43, 33, 26, 0.16); }
+.u-colopt { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 8px; font-size: 13.5px; color: var(--ink); border-radius: 7px; cursor: pointer; }
+.u-colopt input { width: 16px; height: 16px; accent-color: var(--accent); }
+.u-tablewrap { overflow-x: auto; }
+.u-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
+.u-table th { font: 500 11px/1.2 var(--body); color: var(--sub); padding: 0 0 8px 18px; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
+.u-table th.name { text-align: left; padding-left: 0; }
+.u-table th.num { text-align: right; }
+.u-table td { padding: 0 0 0 18px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
+.u-table td:first-child { padding-left: 0; width: 40%; }
+.u-table td.num { text-align: right; }
+.u-sort { display: inline-flex; align-items: center; gap: 3px; color: var(--sub); font: inherit; min-height: 28px; }
+.u-sort.on { color: var(--ink); }
+.u-dir { width: 8px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; }
+.u-namebtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; text-align: left; color: inherit; font: inherit; }
+.u-tool td { font-weight: 600; font-size: 14px; }
+.u-tool td.num { padding-top: 4px; }
+.u-model td { color: var(--sub); }
+.u-model .u-namebtn { padding-left: 17px; min-height: 36px; }
+.u-model .u-namebtn.on { color: var(--ink); font-weight: 600; }
+.u-namebtn.u-more { color: var(--accent); }
+.u-sharecell { display: table-cell; }
+.u-sharebar { display: inline-flex; vertical-align: middle; width: 56px; height: 5px; margin-right: 8px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
+.u-sharebar[data-empty] { background: transparent; }
+.u-sharebar i { display: block; height: 100%; border-radius: 3px; }
+
+.u-breakdown { margin-top: 20px; font-size: 13px; }
+.u-breakdown summary { cursor: pointer; font-weight: 500; color: var(--ink); min-height: 36px; display: flex; align-items: center; }
+.u-brow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 60px 92px 110px; gap: 10px; align-items: center; width: 100%; min-height: 34px; padding: 0; text-align: left; font: 400 12px/1.2 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); border-bottom: 1px solid var(--hairline); }
+.u-brow > span:not(:first-child) { text-align: right; }
+.u-brow > span:nth-child(3), .u-brow > span:nth-child(4) { color: var(--sub); }
+.u-brow.on > span:first-child { font-weight: 600; }
+.u-bhead { font-size: 11px; font-weight: 500; color: var(--sub); min-height: 30px; }
+
+/* Touch screens get 44 px targets (the unfolded Duo has no mouse). */
+@media (pointer: coarse) {
+  .u-word, .u-style, .u-step, .u-rangelink, .u-cols summary, .u-namebtn, .u-brow { min-height: 44px; }
+  .u-word { min-width: 44px; justify-content: center; }
+  .u-style, .u-step { width: 44px; height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .u-svg .u-col, .u-tip, .u-range { transition: none; animation: none; }
+}
+
+/* The date range sheet: a popover beside its button when wide, a bottom sheet on a phone. */
+.u-range-back { position: fixed; inset: 0; z-index: 55; }
+.u-range-back.hidden { display: none; }
+.u-range-back.bottom { background: rgba(23, 18, 14, 0.45); display: flex; align-items: flex-end; justify-content: center; }
+.u-range {
+  width: 100%; max-height: 88dvh; overflow: auto; overscroll-behavior: contain; background: var(--page); color: var(--ink);
+  padding: 16px var(--gutter) calc(var(--safe-bottom) + 16px); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
+  animation: u-rise 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.u-range-back.pop .u-range { position: fixed; width: min(380px, calc(100vw - 32px)); padding: 16px; border-radius: 14px; border: 1px solid var(--panel-border); background: var(--panel); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); animation: u-fade 140ms ease; }
+@keyframes u-rise { from { transform: translateY(24px); opacity: 0.6; } }
+@keyframes u-fade { from { opacity: 0; } }
+.u-range-title { margin: 0 0 10px; font: 500 20px/1.2 var(--display); }
+.u-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
+.u-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 7px 10px; border-radius: 9px; text-align: left; font: 500 14px/1.2 var(--body); color: var(--ink); }
+.u-preset .u-preset-dates { font-size: 11.5px; font-weight: 400; color: var(--sub); font-variant-numeric: tabular-nums; }
+.u-preset:hover { background: var(--qopen); }
+.u-preset[aria-checked='true'] { background: var(--qopen); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
+.u-range-field { display: grid; gap: 5px; font-size: 12.5px; color: var(--sub); margin-top: 12px; }
+.u-range-field .field { min-height: 44px; padding: 8px 12px; color: var(--ink); }
+.u-range-field select.field { background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; }
+.u-custom { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
+.u-custom-title { margin: 0; font: 600 14px/1.2 var(--body); color: var(--ink); }
+.u-custom.on .u-custom-title { color: var(--accent); }
+.u-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.u-dates .u-range-field { margin-top: 8px; }
+.u-range-err { margin: 8px 0 0; font-size: 12.5px; color: var(--hot); min-height: 0; }
+.u-range-err:empty { display: none; }
+.u-range-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--sub); }
+.u-range-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
+.u-range-actions .cx-btn { height: 40px; padding: 0 16px; }
+@media (max-width: 359px) { .u-presets, .u-dates { grid-template-columns: 1fr; } }
+.u-chartcol .u-chart { flex: 1 1 auto; }
+.u-cell.day { text-align: center; }
+.u-breakdown summary { gap: 6px; }
+.u-breakdown summary::-webkit-details-marker { display: none; }
+.u-breakdown summary .u-chev { color: var(--accent); transform: rotate(-90deg); transition: transform 120ms ease; }
+.u-breakdown[open] summary .u-chev { transform: none; }