clauddy 1.22.0 → 1.23.0

package/renderer/style.css

@@ -56,10 +56,12 @@ body {
 
 #controls {
   position: absolute;
-  top: 6px;
-  right: 7px;
+  top: 0;
+  right: 8px;
+  height: 38px;
+  align-items: center;
   display: flex;
-  gap: 5px;
+  gap: 4px;
   opacity: 1;
   z-index: 10;
   -webkit-app-region: no-drag;
@@ -67,10 +69,11 @@ body {
 #controls button {
   width: 19px;
   height: 19px;
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.035);
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.6);
+  background: linear-gradient(rgba(255, 255, 255, 0.043), rgba(255, 255, 255, 0.012));
+  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.03);
+  color: #ab9886;
   font-size: 12px;
   line-height: 1;
   cursor: pointer;
@@ -93,14 +96,6 @@ body {
 #min {
   font-size: 16px;
 }
-#usage svg {
-  stroke: currentColor;
-  stroke-width: 2.6;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  pointer-events: none;
-}
 #gear {
   font-size: 10px;
 }
@@ -136,25 +131,31 @@ body.has-update #gear::after {
     opacity: 1;
   }
 }
+/* inline lucide glyphs: one stroke treatment for the whole control row */
+.ic {
+  width: 9px;
+  height: 9px;
+  pointer-events: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+#gear .ic {
+  width: 10px;
+  height: 10px;
+  stroke-width: 2.2;
+}
 /* minimize icon swaps to an "expand" icon when collapsed */
 .ic-max {
   display: none;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
 }
 body.collapsed #min .ic-min {
   display: none;
 }
 body.collapsed #min .ic-max {
-  display: inline-block;
-}
-.ic-max path {
-  stroke: currentColor;
-  stroke-width: 2.4;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+  display: block;
 }
 body.collapsed #gear,
 body.collapsed #usage {
@@ -164,18 +165,18 @@ body.collapsed #usage {
 /* logged-in account chip (top-left, mirrors #controls) */
 #account-chip {
   position: absolute;
-  top: 6px;
+  top: 0;
   left: 10px;
   z-index: 10;
   display: flex;
   align-items: center;
-  gap: 3px;
-  height: 19px; /* match #controls buttons so text centers on the same line */
+  gap: 5px;
+  height: 38px; /* the title band — centres the chip against #controls */
   /* #controls starts at ~154px: stop short of it, the pill has padding too */
   max-width: 142px;
-  font-size: 9.5px;
+  font-size: 9px;
   line-height: 1;
-  color: var(--muted);
+  color: #c7b8a7;
 }
 #account-chip[hidden] {
   display: none;
@@ -188,7 +189,7 @@ body.collapsed #usage {
   padding: 0 5px 0 6px;
   margin-left: -6px; /* the text stays where it has always been */
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.05);
+  background: transparent;
   transition:
     background 0.15s,
     color 0.15s;
@@ -210,18 +211,9 @@ body.collapsed #usage {
   stroke-linecap: round;
   stroke-linejoin: round;
 }
-/* a single account keeps the pill, minus the affordance: nothing to switch to.
-   The email then takes the width the chevron leaves behind. */
-body.one-account #account-chip {
-  cursor: default;
-}
-body.one-account #account-chip:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--muted);
-}
-body.one-account .ac-caret {
-  display: none;
-}
+/* a single account still opens the menu — that is how a second one is added */
+/* the chevron stays even with a single account — it is the only hint that the
+   menu exists at all, and that is where another account gets added */
 /* the widget is mostly a drag region, and those swallow clicks before the page
    ever sees them — so an invisible sheet under the menu catches them instead */
 #acc-backdrop {
@@ -236,18 +228,18 @@ body.one-account .ac-caret {
 /* dropdown under the chip; it overlays the pet rather than resizing the window */
 #acc-menu {
   position: absolute;
-  top: 24px;
+  top: 33px;
   left: 8px;
   z-index: 20;
-  min-width: 118px;
-  max-width: 176px;
-  max-height: 120px;
+  min-width: 150px;
+  max-width: 190px;
+  max-height: 132px;
   overflow-y: auto;
-  padding: 3px;
-  border: 0.5px solid rgba(255, 210, 180, 0.1);
-  border-radius: 7px;
-  background: #221a15;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+  padding: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  background: #30251e;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.33);
   -webkit-app-region: no-drag;
 }
 #acc-menu[hidden] {
@@ -258,15 +250,19 @@ body.one-account .ac-caret {
 }
 /* the add entry closes the list: it belongs to no account */
 #acc-menu .acc-add {
-  margin-top: 2px;
-  padding-top: 6px;
-  border-top: 0.5px solid var(--hair);
+  margin-top: 3px;
+  padding: 9px 4px 0;
+  border-top: 1px solid var(--hair);
   border-radius: 0;
-  color: var(--coral-soft);
+  color: #cb8a67;
   /* no .who inside this one, so it needs the row font itself */
-  font-size: 9.5px;
+  font-size: 10px;
   white-space: nowrap;
 }
+#acc-menu .acc-add:hover {
+  background: transparent;
+  color: #e3b193;
+}
 #acc-menu .acc-add:hover {
   background: none;
   color: var(--coral);
@@ -274,18 +270,19 @@ body.one-account .ac-caret {
 /* tighter than the dropdown-less list it replaced: it floats over the pet */
 #acc-menu .acc-item {
   gap: 6px;
-  padding: 4px 6px;
+  padding: 5px 4px;
   border-radius: 5px;
 }
 #acc-menu .acc-item .who {
-  font-size: 9.5px;
+  font-size: 10px;
 }
 .ac-dot {
   flex: none;
-  width: 6px;
-  height: 6px;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
-  background: var(--pixel);
+  background: #a1b786;
+  box-shadow: 0 0 8px rgba(161, 183, 134, 0.19);
 }
 #ac-email {
   /* line-height:1 leaves the ascender inside the box, so the text reads a hair
@@ -299,13 +296,15 @@ body.one-account .ac-caret {
 }
 .plan-badge {
   flex: none;
-  padding: 1.5px 5px;
-  border-radius: 6px;
+  text-transform: lowercase;
+  padding: 2px 3px;
+  border-radius: 3px;
   font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.3px;
-  color: var(--coral-soft);
-  background: rgba(217, 119, 87, 0.16);
+  font-weight: 400;
+  letter-spacing: 0;
+  color: #c6a385;
+  border: 1px solid rgba(181, 144, 109, 0.15);
+  background: rgba(181, 144, 109, 0.04);
 }
 .plan-badge[hidden] {
   display: none;
@@ -329,10 +328,116 @@ body.collapsed #mini-acct-name {
 }
 
 /* settings panel */
+/* stays in flow so the card keeps a height the window can be sized to (pet.js
+   measures #card) — it still reads as an overlay because the stage, the content
+   and the mini line all sit this screen out. The negative margins bleed its
+   background to the card's edges, past the card's own padding. */
 #settings {
   display: none;
-  margin-top: 8px;
+  margin: 24px -18px -14px;
+  padding: 12px 16px;
+  background: linear-gradient(145deg, #2c221c, #17120f);
+  -webkit-app-region: no-drag;
+}
+/* panel heading: gives the screen a title instead of opening cold on a form */
+.settings-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 38px;
+}
+.settings-heading h3 {
+  font-size: 16px;
+  letter-spacing: -0.4px;
+  font-weight: 500;
+  color: #e7cfb8;
+}
+.settings-heading p {
+  font-size: 10px;
+  color: #a48b75;
+  margin-top: 4px;
+}
+.sh-ico {
+  width: 18px;
+  height: 18px;
+  color: var(--text);
+  stroke-width: 2;
+}
+/* group label above a cluster of rows */
+.settings-label {
+  display: block;
+  font-size: 10px;
+  color: #ac9177;
+  margin-bottom: 6px;
+}
+.threshold-label {
+  margin-top: 15px;
+}
+.settings-segment {
+  height: 28px;
+}
+/* connected account: avatar + who + plan, as one bordered block */
+.connect-block {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 11px 0 13px;
+  padding: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.043);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.012);
+}
+.connect-block > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.cb-out {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+  background: none;
+  border: 0;
+  border-radius: 5px;
+  color: #8d7b6c;
+  cursor: pointer;
   -webkit-app-region: no-drag;
+  transition:
+    color 0.15s,
+    background 0.15s;
+}
+.cb-out .ic {
+  width: 12px;
+  height: 12px;
+  stroke-width: 1.9;
+}
+.cb-out:hover {
+  color: #e0a184;
+  background: rgba(255, 255, 255, 0.05);
+}
+.connect-block b {
+  font-size: 10px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.connect-block > div > span {
+  font-size: 9px;
+  color: #a28a73;
+}
+.account-avatar {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: rgba(177, 132, 94, 0.13);
+  font-size: 13px;
+  color: #d5a07b;
 }
 body.settings-open #content,
 body.settings-open #mini {
@@ -340,16 +445,65 @@ body.settings-open #mini {
 }
 body.settings-open #settings {
   display: block;
-  animation: set-in 0.18s ease;
+  animation: set-in 0.78s cubic-bezier(0.22, 1, 0.36, 1);
+}
+/* the panel covers the card, so the stage keeps its normal height behind it */
+body.settings-open #stage {
+  display: none;
 }
 @keyframes set-in {
   from {
     opacity: 0;
-    transform: translateY(4px);
+    transform: translateX(102%);
   }
   to {
     opacity: 1;
-    transform: none;
+    transform: translateX(0);
+  }
+}
+/* leaving settings: the panel rides back out to the right. It goes absolute for
+   those frames so the card is already at its home height while it plays. */
+body.settings-closing #settings {
+  display: block;
+  position: absolute;
+  inset: 38px 0 0;
+  margin: 0;
+  z-index: 6;
+  overflow: hidden;
+  pointer-events: none;
+  animation: set-out 0.58s cubic-bezier(0.5, 0, 0.75, 0) forwards;
+}
+@keyframes set-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(102%);
+  }
+}
+/* home comes back in from the other side, so the two screens read as a pair */
+body.settings-closing #content,
+body.settings-closing #stage {
+  animation: home-in 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+@keyframes home-in {
+  from {
+    opacity: 0;
+    transform: translateX(-9%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  body.settings-open #settings,
+  body.settings-closing #settings,
+  body.settings-closing #content,
+  body.settings-closing #stage {
+    animation: none;
   }
 }
 .set-hint {
@@ -363,29 +517,6 @@ body.settings-open #settings {
   text-align: left;
   margin: -3px 0 9px;
 }
-.set-field {
-  display: block;
-  font-size: 9.5px;
-  color: var(--muted);
-  margin-bottom: 8px;
-}
-.set-field input,
-.set-field select {
-  width: 100%;
-  margin-top: 3px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 0.5px solid var(--hair);
-  border-radius: 7px;
-  color: var(--text);
-  font-size: 12px;
-  padding: 5px 8px;
-  outline: none;
-  font-variant-numeric: tabular-nums;
-}
-.set-field input:focus,
-.set-field select:focus {
-  border-color: var(--coral);
-}
 /* hide the ugly native number spinners (custom ones below) */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
@@ -396,18 +527,23 @@ input[type="number"]::-webkit-outer-spin-button {
 /* display-mode segmented control (floating pet | menu bar) */
 .seg {
   display: flex;
-  gap: 4px;
-  margin-top: 4px;
+  gap: 3px;
+  height: 31px;
+  padding: 3px;
+  border: 0.5px solid rgba(255, 255, 255, 0.035);
+  background: rgba(15, 16, 23, 0.43);
+  border-radius: 6px;
 }
 .seg-btn {
   flex: 1;
-  padding: 6px 4px;
+  padding: 0 4px;
   font-size: 11px;
-  color: var(--muted);
-  background: rgba(255, 255, 255, 0.06);
-  border: 0.5px solid var(--hair);
-  border-radius: 7px;
+  color: #938996;
+  background: none;
+  border: 0;
+  border-radius: 4px;
   cursor: pointer;
+  white-space: nowrap;
   transition:
     background 0.15s,
     color 0.15s,
@@ -417,9 +553,11 @@ input[type="number"]::-webkit-outer-spin-button {
   color: var(--text);
 }
 .seg-btn.on {
-  background: var(--coral);
-  border-color: var(--coral);
-  color: #fff;
+  background: rgba(193, 177, 176, 0.1);
+  box-shadow:
+    0 1px 4px rgba(0, 0, 0, 0.13),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  color: #eadccf;
 }
 /* menu-bar mode: the popover auto-sizes, so the minimize control is redundant */
 body.is-menubar #min {
@@ -436,51 +574,27 @@ body.is-menubar #min {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 34px;
-  border-bottom: 0.5px solid var(--hair);
-}
-/* the threshold pair lives in an inset card under its toggle row */
-.set-row:has(+ .set-subgroup) {
-  border-bottom: none;
+  font-size: 11px;
+  color: #cdb49b;
+  margin-top: 11px;
 }
-/* flat, but visibly nested: a soft coral guide bar ties the pair to the
-   toggle above, and each label hugs its own stepper */
-.set-subgroup {
+/* the stepper rows stack, so they read as a group at a tighter pitch than the
+   reference's 14px — the steppers already carry their own height */
+.set-row:has(.num) {
+  margin-top: 5px;
+} /* flat,
+but visibly nested: a soft coral guide bar ties the pair to the
+   toggle above {
   position: relative;
   padding-left: 14px;
   border-bottom: 0.5px solid var(--hair);
   padding-bottom: 3px;
   transition: opacity 0.15s;
 }
-.set-subgroup::before {
-  content: "";
-  position: absolute;
-  left: 3px;
-  top: 5px;
-  bottom: 10px;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--coral);
-  opacity: 0.35;
-}
-.set-subgroup .set-row {
-  border-bottom: none;
-  justify-content: flex-end;
-  gap: 10px;
-}
 .set-row-label {
   font-size: 11px;
-  font-weight: 600;
-  color: var(--text);
-}
-.set-row-hint {
-  display: block;
-  white-space: nowrap;
-  font-style: normal;
   font-weight: 400;
-  font-size: 9px;
-  color: var(--muted);
-  margin-top: 2px;
+  color: #cdb49b;
 }
 .set-row.set-sub {
   min-height: 31px;
@@ -490,7 +604,7 @@ body.is-menubar #min {
   font-size: 10.5px;
   color: var(--muted);
 }
-#set-rows.alerts-off .set-subgroup {
+#set-rows.alerts-off .set-sub {
   opacity: 0.35;
   pointer-events: none;
 }
@@ -507,10 +621,10 @@ body.is-menubar #min {
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
-  width: 30px;
-  height: 18px;
-  border-radius: 9px;
-  background: rgba(255, 255, 255, 0.14);
+  width: 29px;
+  height: 16px;
+  border-radius: 10px;
+  background: #5c5146;
   position: relative;
   cursor: pointer;
   -webkit-app-region: no-drag;
@@ -521,8 +635,8 @@ body.is-menubar #min {
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: #fff;
   opacity: 0.85;
@@ -531,34 +645,36 @@ body.is-menubar #min {
     opacity 0.18s;
 }
 .set-toggle:checked {
-  background: var(--coral);
+  background: #ae7954;
 }
 .set-toggle:checked::after {
-  left: 14px;
+  left: 15px;
   opacity: 1;
 }
 /* number field: minus / value% / plus */
 .num {
   display: flex;
   align-items: center;
-  gap: 4px;
   flex: none;
+  border: 0.5px solid var(--hair);
+  background: rgba(255, 255, 255, 0.012);
+  border-radius: 4px;
+  overflow: hidden;
 }
 .num-val {
   position: relative;
-  width: 54px;
+  width: 38px;
 }
 .num-val input {
   width: 100%;
-  background: rgba(255, 255, 255, 0.06);
-  border: 0.5px solid var(--hair);
-  border-radius: 7px;
+  background: none;
+  border: 0;
   color: var(--text);
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 400;
   font-variant-numeric: tabular-nums;
   text-align: right;
-  padding: 4px 20px 4px 6px;
+  padding: 4px 15px 4px 0;
   outline: none;
   transition:
     border-color 0.15s,
@@ -570,22 +686,22 @@ body.is-menubar #min {
 }
 .num-val i {
   position: absolute;
-  right: 7px;
+  right: 3px;
   top: 50%;
   transform: translateY(-50%);
   font-style: normal;
-  font-size: 10px;
-  color: var(--muted);
+  font-size: 9px;
+  color: #a1876b;
   pointer-events: none;
 }
 .num-btn {
   -webkit-app-region: no-drag;
   border: none;
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--muted);
-  width: 20px;
-  height: 20px;
-  border-radius: 6px;
+  background: none;
+  color: #ceb194;
+  width: 22px;
+  height: 22px;
+  border-radius: 0;
   font-size: 12px;
   line-height: 1;
   display: flex;
@@ -604,26 +720,18 @@ body.is-menubar #min {
 .num-btn:active {
   transform: scale(0.9);
 }
-.set-check {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: var(--text);
-  margin-bottom: 9px;
-}
 .set-actions {
   display: flex;
   gap: 8px;
-  margin-top: 4px;
+  margin-top: 17px;
 }
 .set-actions button {
   flex: 1;
-  border: none;
-  border-radius: 8px;
-  padding: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.082);
+  border-radius: 5px;
+  padding: 7px;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 400;
   cursor: pointer;
   transition:
     background 0.18s,
@@ -633,15 +741,16 @@ body.is-menubar #min {
   transform: scale(0.97);
 }
 #set-cancel {
-  background: rgba(255, 255, 255, 0.12);
+  background: none;
   color: var(--text);
 }
 #set-cancel:hover {
   background: rgba(255, 255, 255, 0.2);
 }
 #set-save {
-  background: rgba(255, 255, 255, 0.12); /* rests like Cancel; dirty lights it */
-  color: var(--text);
+  background: #ce926d;
+  border-color: #ce926d;
+  color: #261a12;
 }
 #set-save:disabled {
   opacity: 0.45;
@@ -649,14 +758,17 @@ body.is-menubar #min {
 }
 #set-save.dirty,
 #set-save.dirty:hover {
-  color: #fff;
+  color: #261a12; /* filled coral now — dark text, not white */
 }
 #set-save.dirty:hover {
-  background: #e2876a;
+  background: #e2a07f;
+  border-color: #e2a07f;
 }
 /* unsaved changes: light up and pulse so you don't forget to save */
 #set-save.dirty {
-  background: var(--coral);
+  background: #ce926d;
+  border-color: #ce926d;
+  color: #261a12;
   animation: save-pulse 1.6s ease-in-out infinite;
 }
 @keyframes save-pulse {
@@ -675,9 +787,9 @@ body.is-menubar #min {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-top: 11px;
-  padding-top: 9px;
-  border-top: 0.5px solid var(--hair);
+  margin-top: 12px;
+  font-size: 8px;
+  color: #8f755e;
 }
 .upd-ver {
   font-size: 10px;
@@ -699,14 +811,24 @@ body.is-menubar #min {
   color: var(--coral);
 }
 /* compact update button — lighter than the full-width .acc-btn */
+/* once an update is offered, the button says it — the check link is redundant
+   and the three of them would not fit the footer on one line */
+body.has-update #upd-check {
+  display: none;
+}
+.set-updates .upd-ver,
+.upd-btn,
+#upd-check {
+  white-space: nowrap;
+}
 .upd-btn {
-  border: none;
-  border-radius: 7px;
-  padding: 4px 9px;
-  font-size: 10px;
-  font-weight: 600;
-  color: #fff;
-  background: var(--coral);
+  border: 1px solid rgba(206, 146, 109, 0.35);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 9px;
+  font-weight: 400;
+  color: #e3b193;
+  background: rgba(206, 146, 109, 0.09);
   cursor: pointer;
   -webkit-app-region: no-drag;
   transition:
@@ -714,7 +836,8 @@ body.is-menubar #min {
     transform 0.1s;
 }
 .upd-btn:hover {
-  background: #e2876a;
+  background: rgba(206, 146, 109, 0.2);
+  border-color: rgba(206, 146, 109, 0.55);
 }
 .upd-btn:active {
   transform: scale(0.97);
@@ -732,33 +855,45 @@ body.live .live-only {
   display: inline;
 }
 #live-tag {
-  color: var(--green);
-  font-weight: 600;
+  margin-left: auto;
+  font-size: 8px;
+  letter-spacing: 0.4px;
+  font-weight: 400;
+  padding: 3px 5px;
+  color: #abbd96;
+  border: 1px solid rgba(161, 183, 134, 0.13);
+  background: rgba(161, 183, 134, 0.03);
+  border-radius: 3px;
 }
 
 /* account / auth */
 #account {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 0.5px solid var(--hair); /* divider before the first section */
+  margin-bottom: 0;
 }
 .acc-btn {
   width: 100%;
-  border: none;
-  border-radius: 8px;
-  padding: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid rgba(206, 146, 109, 0.35);
+  border-radius: 5px;
+  padding: 9px;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 400;
   cursor: pointer;
-  background: var(--coral);
-  color: #fff;
+  background: rgba(206, 146, 109, 0.09);
+  color: #e3b193;
   -webkit-app-region: no-drag;
+  /* the glyph rides at the text's weight, not heavier */
+  stroke-width: 1.8;
   transition:
     background 0.18s,
     transform 0.1s;
 }
 .acc-btn:hover:not(:disabled) {
-  background: #e2876a;
+  background: rgba(206, 146, 109, 0.2);
+  border-color: rgba(206, 146, 109, 0.55);
 }
 .acc-btn:active:not(:disabled) {
   transform: scale(0.98);
@@ -786,9 +921,9 @@ body.live .live-only {
   text-decoration: underline;
 }
 .acc-ok {
-  color: var(--green);
-  font-size: 11px;
-  font-weight: 600;
+  color: var(--text);
+  font-size: 9px;
+  font-weight: 400;
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -816,23 +951,24 @@ body.live .live-only {
     color 0.15s;
 }
 .acc-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text);
 }
 .acc-item.active {
-  background: rgba(217, 119, 87, 0.14);
-  color: var(--text);
+  background: transparent;
+  color: #e7d6c5;
   cursor: default;
 }
 .acc-item .dot {
-  width: 5px;
-  height: 5px;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.22); /* logged out: a row with no usage yet */
   flex: none;
 }
 .acc-item.connected .dot {
-  background: var(--green);
+  background: #a1b786;
+  box-shadow: 0 0 8px rgba(161, 183, 134, 0.19);
 }
 .acc-item .who {
   flex: 1;
@@ -934,7 +1070,8 @@ body.awaiting #acc-intro {
   display: none;
 }
 #acc-disconnected {
-  margin-top: 10px;
+  margin-top: 8px;
+  margin-bottom: 13px;
 }
 
 /* just logged in: a short-lived green cheer at the top of the home panel */
@@ -948,16 +1085,26 @@ body.awaiting #acc-intro {
 }
 
 /* limits: real meters when connected, a "connect" prompt otherwise */
+/* the connect prompt draws its own frame, so the rules on either side of it
+   would box a box. It is `.live` that decides whether it shows — being logged
+   in is not enough, the usage fetch has to have landed — so that is what these
+   have to key off, not `.auth-on`. */
+body:not(.live) #statusline {
+  border-bottom: 0;
+}
+body:not(.live) #bymodel {
+  border-top: 0;
+}
 #limits-connect {
   display: flex;
   align-items: center;
-  gap: 11px;
+  gap: 9px;
   width: 100%;
   text-align: left;
-  border: 0.5px solid var(--hair);
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.04);
-  padding: 11px 13px;
+  border: 1px solid rgba(206, 146, 109, 0.22);
+  border-radius: 7px;
+  background: rgba(206, 146, 109, 0.055);
+  padding: 10px 11px;
   cursor: pointer;
   -webkit-app-region: no-drag;
   transition:
@@ -965,15 +1112,15 @@ body.awaiting #acc-intro {
     border-color 0.2s;
 }
 #limits-connect:hover {
-  background: rgba(217, 119, 87, 0.1);
-  border-color: rgba(217, 119, 87, 0.5);
+  background: rgba(206, 146, 109, 0.13);
+  border-color: rgba(206, 146, 109, 0.42);
 }
 .lc-ico {
   flex: 0 0 auto;
-  width: 17px;
-  height: 17px;
-  stroke: var(--coral);
-  stroke-width: 2;
+  width: 14px;
+  height: 14px;
+  stroke: #cb8a67;
+  stroke-width: 1.8;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -985,14 +1132,14 @@ body.awaiting #acc-intro {
   line-height: 1.25;
 }
 .lc-text b {
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--text);
+  font-size: 11px;
+  font-weight: 400;
+  color: #e3cdb8;
 }
 .lc-text i {
-  font-size: 9.5px;
+  font-size: 9px;
   font-style: normal;
-  color: var(--muted);
+  color: #a28a73;
 }
 body.live #limits-connect {
   display: none;
@@ -1101,23 +1248,8 @@ body.collapsed #pet {
 }
 /* hide minimize while settings are open (toggling it bugs the layout) */
 body.settings-open #min {
-  display: none;
-}
-
-/* pet */
-/* expanded: a little night scene */
-body.settings-open #stage {
-  height: 100px;
-}
-/* the ground layers stretch to fill the stage; while it's shortened, pin them
-   at their natural height so the gears stay round — the top just clips away.
-   #scene keeps stretching (dots and stars tolerate it) so its frame rows stay
-   at the edges; the blocky clouds don't, so they sit this screen out. */
-body.settings-open #gears {
-  top: auto;
-  bottom: 0;
-  height: 132px;
-}
+  display: none;
+} /* pet */
 body.settings-open .cloud {
   display: none;
 }
@@ -1127,7 +1259,7 @@ body.settings-open #pet {
 #stage {
   position: relative;
   height: 132px;
-  margin-top: 16px;
+  margin-top: 24px; /* the title band is 38px; the card already pads 14 of it */
   border-radius: 12px;
   background: radial-gradient(125% 145% at 50% 36%, #050505 52%, #150e0a 100%);
   box-shadow: 0 0 22px 7px rgba(6, 5, 4, 0.7);
@@ -1173,15 +1305,12 @@ body.collapsed #stage {
 }
 body.collapsed #scene {
   display: none;
-}
-/* minimized = just the pet's face: hide all activity scenery + props */
+} /* minimized = just the pet's face: hide all activity scenery + props */
 body.collapsed #desk,
 body.collapsed #plant,
 body.collapsed #mug,
 body.collapsed #reading,
-body.collapsed #terminal,
-body.collapsed #gears,
-body.collapsed #glasses {
+body.collapsed #terminal {
   display: none;
 }
 /* collapsed: the pet sits a bit high, so the % fits under it inside the ring */
@@ -1293,47 +1422,11 @@ body.collapsed #shadow {
   transform-box: fill-box;
   transform-origin: center;
   animation: blink 5.5s infinite;
-}
-/* mechanic mode (settings): hard hat + screwdriver on the pet, loose gears
-   turning behind it. Hidden otherwise. */
-#robot {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-/* hard hat colors live inline (built pixel-by-pixel in pet.js buildHat) */
-.dr-handle {
-  fill: #c0392b;
-}
-.dr-handle-hi {
-  fill: #e0685a;
-}
-.dr-collar {
-  fill: #9a9a9a;
-}
-.dr-tip,
-.dr-shaft {
-  fill: #d0d0d0;
-}
-.dr-hi {
-  fill: #f2f2f2;
-}
-#gears {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  fill: #7a6a5c;
+} /* mechanic mode (settings): hard hat + screwdriver on the pet {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
-}
-body.settings-open #robot,
-body.settings-open #gears {
-  opacity: 1;
-}
-/* declutter the scene while configuring: mood marks AND activity props —
+}/* declutter the scene while configuring: mood marks AND activity props —
    the shortened stage only fits the pet and its gears */
 body.settings-open #zzz,
 body.settings-open #flames,
@@ -1342,8 +1435,7 @@ body.settings-open #terminal,
 body.settings-open #reading,
 body.settings-open #mug,
 body.settings-open #desk,
-body.settings-open #plant,
-body.settings-open #glasses {
+body.settings-open #plant {
   display: none;
 }
 /* reading mode: an open book with a magnifying glass scanning the lines */
@@ -1361,89 +1453,9 @@ body.settings-open #glasses {
 body.act-reading #reading {
   opacity: 1;
 }
-/* reading glasses on the pet */
-#glasses {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-.gl-lens {
-  fill: rgba(190, 225, 255, 0.16);
-  stroke: #241c17;
-  stroke-width: 2.4;
-}
-.gl-bridge,
-.gl-arm {
-  fill: none;
-  stroke: #241c17;
-  stroke-width: 2.4;
-  stroke-linecap: round;
-}
-body.act-reading #glasses {
-  opacity: 1;
-}
-.dc-card {
-  fill: #191d23; /* dark markdown viewer — easier to read on the dark scene */
-}
-.dc-ico {
-  fill: none;
-  stroke: #8a9098;
-  stroke-width: 1.1;
-}
-.dc-ico-fold {
-  fill: #8a9098;
-}
-.dc-title {
-  fill: #e2e5ea;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 7px;
-  font-weight: 700;
-}
 #dc-fname {
   transition: opacity 0.25s ease;
 }
-.dc-divider {
-  stroke: rgba(255, 255, 255, 0.1);
-  stroke-width: 1;
-}
-.dc-h {
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 6.5px;
-  font-weight: 700;
-}
-.dc-h1 {
-  fill: #c39cf0; /* purple */
-}
-.dc-g {
-  fill: #7ed07e; /* green */
-}
-.dc-b {
-  fill: #6fb3f2; /* blue */
-}
-.dc-a {
-  fill: #e0b46a; /* amber */
-}
-.dc-body {
-  fill: #626b76; /* muted body text */
-}
-/* each heading lights up in turn (a "being read" pulse) */
-body.act-reading .dc-h {
-  animation: dc-read 4s ease-in-out infinite;
-}
-@keyframes dc-read {
-  0% {
-    opacity: 0.5;
-  }
-  7% {
-    opacity: 1;
-  }
-  24% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}
 /* editing mode: a coding desk (laptop with colorful code, coffee, plant) */
 #desk {
   position: absolute;
@@ -1491,31 +1503,6 @@ body.act-reading:not(.collapsed) #pet {
 body.act-running:not(.collapsed) #pet {
   left: 27px;
 }
-.dk-desk {
-  fill: #262626;
-}
-.dk-keys {
-  fill: #4d4d4d;
-}
-.mug-body {
-  fill: #d8cbaf;
-}
-.mug-rim {
-  fill: #c6b896;
-}
-.mug-handle {
-  fill: none;
-  stroke: #d8cbaf;
-  stroke-width: 2.8;
-  stroke-linecap: round;
-}
-.mug-code {
-  fill: none;
-  stroke: #2a211a;
-  stroke-width: 1.7;
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-}
 .dk-wisp {
   fill: none;
   stroke: #c9c9c9;
@@ -1524,36 +1511,6 @@ body.act-running:not(.collapsed) #pet {
   opacity: 0;
   vector-effect: non-scaling-stroke;
 }
-.dk-deck2 {
-  fill: #3a3a3a;
-}
-.dk-screen {
-  fill: #1c1c1c;
-}
-.dk-glass {
-  fill: #0b0b0b;
-}
-.c-grn {
-  fill: #6fcf6f;
-}
-.c-yel {
-  fill: #e2c46a;
-}
-.c-blu {
-  fill: #6fb3f2;
-}
-.c-cur {
-  fill: #cdeccf;
-}
-.dk-pot {
-  fill: #b98a5e;
-}
-.dk-leaf {
-  fill: #3f9150;
-}
-.dk-leaf-c {
-  fill: #57a95f;
-}
 /* shared potted plant (editing + reading desks) */
 #plant {
   position: absolute;
@@ -1568,24 +1525,11 @@ body.act-running:not(.collapsed) #pet {
 body.act-editing #plant {
   opacity: 1;
 }
-body.act-editing .c-cur {
-  animation: cursor-blink 1s steps(1, end) infinite;
-}
 body.act-editing .dk-wisp,
 body.act-reading .dk-wisp {
   transform-box: view-box;
   animation: steam 2.6s ease-in-out infinite;
 }
-@keyframes cursor-blink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0;
-  }
-}
 @keyframes steam {
   0% {
     opacity: 0;
@@ -1824,187 +1768,16 @@ body.act-running #claude {
 body.act-running #terminal {
   opacity: 1;
 }
-.tm-win {
-  fill: #14161a;
-}
-.tm-border {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.14);
-  stroke-width: 0.7;
-}
-.tm-bar {
-  fill: #262a30;
-}
-.tm-d1 {
-  fill: #ff5f57;
-}
-.tm-d2 {
-  fill: #febc2e;
-}
-.tm-d3 {
-  fill: #28c840;
-}
-.tm-prompt-c {
-  fill: #6fcf6f;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 7.5px;
-  font-weight: 700;
-}
-.tm-head {
-  fill: #d6d9de;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 7px;
-  font-weight: 600;
-}
-.tm-txt {
-  fill: #cfd3d8;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 6.5px;
-}
-.tm-dots {
-  fill: #8a9098;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 7px;
-  font-weight: 700;
-}
-.tm-cursor {
-  fill: #6fcf6f;
-}
-.tm-check {
-  fill: none;
-  stroke: #28c840;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.tm-spin {
-  fill: none;
-  stroke: #cfd3d8;
-  stroke-width: 1.6;
-  stroke-linecap: round;
-  transform-box: view-box;
-  transform-origin: 8px 54px; /* the spinner's own centre */
-}
-.tm-done-txt {
-  fill: #6fcf6f;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 6.5px;
-  font-weight: 600;
-}
-/* task log lifecycle (5s): lines stream in → Waiting spins → ✓ Done → restart */
-.tskA,
-.tskB,
-.tskC,
-.tskWait,
-.tskDone {
-  opacity: 0;
-}
-body.act-running .tskA {
-  animation: tskA 5s linear infinite;
-}
-body.act-running .tskB {
-  animation: tskB 5s linear infinite;
-}
-body.act-running .tskC {
-  animation: tskC 5s linear infinite;
-}
-body.act-running .tskWait {
-  animation: tskWait 5s linear infinite;
-}
-body.act-running .tskDone {
-  animation: tskDone 5s linear infinite;
-}
-body.act-running .tm-spin {
-  animation: tm-spin-rot 0.8s linear infinite;
-}
-body.act-running .tm-cursor {
-  animation: cursor-blink 1s steps(1, end) infinite;
-}
-@keyframes tm-spin-rot {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes tskA {
-  0%,
-  4% {
-    opacity: 0;
-  }
-  8%,
-  90% {
-    opacity: 1;
-  }
-  96%,
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes tskB {
-  0%,
-  16% {
-    opacity: 0;
-  }
-  20%,
-  90% {
-    opacity: 1;
-  }
-  96%,
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes tskC {
-  0%,
-  30% {
-    opacity: 0;
-  }
-  34%,
-  90% {
-    opacity: 1;
-  }
-  96%,
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes tskWait {
-  0%,
-  6% {
-    opacity: 0;
-  }
-  10%,
-  46% {
-    opacity: 1;
-  }
-  52%,
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes tskDone {
-  0%,
-  52% {
-    opacity: 0;
-  }
-  58%,
-  90% {
-    opacity: 1;
-  }
-  96%,
-  100% {
-    opacity: 0;
-  }
-}
 
 /* status */
 #statusline {
-  margin-top: 2px;
-  font-size: 11.5px;
-  color: var(--muted);
   display: flex;
   align-items: center;
-  justify-content: center;
   gap: 6px;
+  padding: 11px 0 12px; /* clear the stage's edge — the live pill sat on it */
+  border-bottom: 1px solid var(--hair);
+  font-size: 11px;
+  color: #c4b29f;
 }
 #statusline .sep {
   opacity: 0.4;
@@ -2020,6 +1793,8 @@ body.act-running .tm-cursor {
   color: var(--text);
 }
 #rate {
+  font-size: 10px;
+  color: #978572;
   font-variant-numeric: tabular-nums;
 }
 body.state-working #status-dot {
@@ -2046,8 +1821,8 @@ body.state-tired #status-text {
 .sub {
   /* small enough that "resets in 69h 15m (Fri 7:01 AM) · 1.02B tokens" stays on one line */
   font-size: 9px;
-  color: var(--muted);
-  margin-top: 4px;
+  color: #96816d;
+  margin-top: 5px;
   letter-spacing: 0px;
   white-space: nowrap;
   overflow: hidden;
@@ -2068,120 +1843,146 @@ body.state-tired #status-text {
 
 /* 30-day map */
 #heat {
-  margin-top: 12px;
+  padding-top: 0; /* #heat-meta draws its own rule and padding, like a .sec */
 }
 #heat-row {
   display: flex;
   gap: 2px;
-  height: 14px;
+  height: 7px;
+  margin-top: 7px;
 }
+/* a warm ramp that climbs in lightness AND saturation at once: opacity alone
+   collapses the low steps into one smudge against the dark card, so the busy
+   days and the quiet ones have to differ in colour, not just in strength */
 .sq {
   flex: 1;
-  border-radius: 2px;
-  background: rgba(255, 255, 255, 0.07);
+  border-radius: 1.5px;
+  background: rgba(255, 255, 255, 0.05); /* no activity */
   transition: background 0.4s;
 }
 .sq.lv1 {
-  background: #8fbf6e;
+  background: #6b4430;
 }
 .sq.lv2 {
-  background: #d8c25f;
+  background: #9c6340;
 }
 .sq.lv3 {
-  background: #d98f52;
+  background: #cf8b52;
 }
 .sq.lv4 {
-  background: #cf5b46;
+  background: #f0b464;
 }
 #heat-meta {
   display: flex;
   justify-content: space-between;
-  font-size: 9.5px;
-  color: var(--muted);
-  margin-top: 5px;
-  letter-spacing: 0.2px;
+  font-size: 9px;
+  color: #a58d77;
+  border-top: 1px solid var(--hair);
+  padding-top: 9px;
+  margin-top: 0;
+  letter-spacing: 0;
 }
 #month-total {
-  font-weight: 600;
-  color: var(--text);
+  font-weight: 400;
+  color: #a58d77;
   font-variant-numeric: tabular-nums;
 }
 
-/* divider */
-.divider {
-  height: 0.5px;
-  background: var(--hair);
-  margin: 12px 0;
-}
-
 /* meters */
+#limits-meters {
+  padding: 0 0 12px;
+}
+.meter {
+  margin-top: 12px;
+}
 .meter + .meter,
 #scoped-meters .meter {
-  margin-top: 9px;
+  margin-top: 12px;
 }
 .meter-top {
   display: flex;
   justify-content: space-between;
-  font-size: 10px;
-  color: var(--muted);
-  margin-bottom: 4px;
+  align-items: center;
+  font-size: 11px;
+  color: #cbb9a7;
+  margin-bottom: 0;
 }
 .meter-top i {
   font-style: italic;
   opacity: 0.5;
   font-size: 9px;
 }
+/* the number is plain while there is nothing to worry about — colour is the
+   warning, so spending it at 5% leaves nothing to say at 90% */
 .meter-top span:last-child {
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 500;
   color: var(--text);
   font-variant-numeric: tabular-nums;
+  transition: color 0.6s;
 }
 .track {
   width: 100%;
-  height: 6px;
-  background: var(--track);
-  border-radius: 6px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.035);
+  border-radius: 4px;
   overflow: hidden;
+  margin-top: 7px;
 }
 .fill {
   height: 100%;
   width: 0%;
-  background: linear-gradient(90deg, var(--coral-soft), var(--coral));
-  border-radius: 6px;
+  background: var(--coral);
+  border-radius: 4px;
   transition:
-    width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
-    background 0.4s;
+    width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    background 0.7s;
 }
 .fill.week {
-  background: linear-gradient(90deg, #c98a6e, var(--coral-soft));
+  background: var(--coral);
+}
+/* the ramp, shared by the bars and their numbers */
+.fill.mid {
+  background: #e5b55d;
+}
+.fill.hot,
+.fill.high.hot {
+  background: #ee705e;
 }
-.fill.high {
-  background: linear-gradient(90deg, #e98a68, #d8442f);
+.meter-top span:last-child.mid {
+  color: #e5b55d;
+}
+.meter-top span:last-child.hot {
+  color: #ee705e;
 }
 
 /* by model / by project — collapsible sections */
+.sec {
+  border-top: 1px solid var(--hair);
+  padding: 9px 0;
+}
 .sec-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 0;
-  margin-bottom: 6px;
+  margin-bottom: 0;
   background: none;
   border: 0;
   cursor: pointer;
   font: inherit;
-  font-size: 9.5px;
-  color: var(--muted);
-  letter-spacing: 0.3px;
+  font-size: 10px;
+  color: #a38c78;
+  letter-spacing: 0;
   -webkit-app-region: no-drag;
 }
 .sec-head:hover {
   color: var(--text);
 }
 .sec-chev {
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
@@ -2192,52 +1993,81 @@ body.state-tired #status-text {
 .sec.folded .sec-chev {
   transform: rotate(-90deg);
 }
+/* 0fr -> 1fr is the only way a height-to-content box can be animated; the inner
+   wrapper is what actually clips, so the rows never reflow mid-slide */
+.sec-body {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.sec-body > div {
+  min-height: 0;
+  overflow: hidden;
+}
 .sec.folded .sec-body {
-  display: none;
+  grid-template-rows: 0fr;
 }
 .sec.folded .sec-head {
   margin-bottom: 0;
 }
 .mrow {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 40px 44px;
   align-items: center;
   gap: 7px;
-  font-size: 11px;
-  color: var(--text);
-  margin-bottom: 5px;
+  font-size: 10px;
+  color: #c7b19a;
+  margin-top: 7px;
+  margin-bottom: 0;
 }
 .mrow .mname {
-  /* one width for the whole list, measured at render time — the bars are only
-     comparable if every track starts at the same x */
-  flex: 0 0 var(--name-w, 64px);
-  font-weight: 500;
+  /* the grid now fixes the bar column, so every track starts at the same x
+     without measuring the names */
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* project names are paths, not four-letter families — give them room and clip
-   the rest, with the full name on the row's title attribute */
-#byproject .mrow {
-  font-size: 10px;
+/* a rank dot, so a row reads as an entry rather than a bare label */
+.mrow .mname::before {
+  content: "";
+  flex: none;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #b1967c;
+}
+.mrow:nth-child(1) .mname::before {
+  background: var(--coral);
+}
+.mrow:nth-child(2) .mname::before {
+  background: #c8a475;
 }
+.mrow:nth-child(3) .mname::before {
+  background: #807769;
+}
+/* project names are paths, not four-letter families — the grid's first column
+   takes the slack and clips the rest, full name on the row's title attribute */
 .mrow .mbar {
-  flex: 1;
-  height: 4px;
-  background: var(--track);
-  border-radius: 3px;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.024);
+  border-radius: 2px;
   overflow: hidden;
 }
 .mrow .mbar > i {
   display: block;
   height: 100%;
-  background: var(--coral);
-  border-radius: 3px;
+  background: #c2865e;
+  border-radius: 2px;
   transition: width 0.6s ease;
 }
 .mrow .mval {
-  flex: 0 0 auto;
+  text-align: right;
   font-size: 10px;
-  color: var(--muted);
+  color: #a48b74;
   font-variant-numeric: tabular-nums;
 }