@twentyfirstmedia/pro 0.7.0 → 0.8.0

package/dist/scoped.css

@@ -14646,7 +14646,14 @@
     .tf-insight,
     .tf-consent-item,
     .tf-nw,
-    .tf-policy
+    .tf-policy,
+    .tf-connector,
+    .tf-device,
+    .tf-vehicle,
+    .tf-nowplaying,
+    .tf-workout,
+    .tf-booking,
+    .tf-scorecard
   ):not(
     :is(
         .tf-panel,
@@ -14669,6 +14676,13 @@
         .tf-consent-item,
         .tf-nw,
         .tf-policy,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-glass
       )
       *
@@ -14689,7 +14703,14 @@
     .tf-insight,
     .tf-consent-item,
     .tf-nw,
-    .tf-policy
+    .tf-policy,
+    .tf-connector,
+    .tf-device,
+    .tf-vehicle,
+    .tf-nowplaying,
+    .tf-workout,
+    .tf-booking,
+    .tf-scorecard
   ):not(
     :is(
         .tf-panel,
@@ -14712,6 +14733,13 @@
         .tf-consent-item,
         .tf-nw,
         .tf-policy,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-glass
       )
       *
@@ -14832,6 +14860,13 @@
         .tf-policy,
         .tf-consent-item,
         .tf-journal,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-btngroup,
         .tf-map-ctl,
         .tf-topbar
@@ -14865,6 +14900,13 @@
         .tf-policy,
         .tf-consent-item,
         .tf-journal,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-btngroup,
         .tf-map-ctl,
         .tf-topbar
@@ -14902,6 +14944,13 @@
         .tf-policy,
         .tf-consent-item,
         .tf-journal,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-glass
       )
       *
@@ -14919,6 +14968,13 @@
         .tf-policy,
         .tf-consent-item,
         .tf-journal,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-glass
       )
       *
@@ -14983,7 +15039,14 @@
       .tf-insight,
       .tf-consent-item,
       .tf-nw,
-      .tf-policy
+      .tf-policy,
+      .tf-connector,
+      .tf-device,
+      .tf-vehicle,
+      .tf-nowplaying,
+      .tf-workout,
+      .tf-booking,
+      .tf-scorecard
     ),
   :where([data-kit="pro"]) [data-surface="glass"]
     :is(
@@ -15001,7 +15064,14 @@
       .tf-insight,
       .tf-consent-item,
       .tf-nw,
-      .tf-policy
+      .tf-policy,
+      .tf-connector,
+      .tf-device,
+      .tf-vehicle,
+      .tf-nowplaying,
+      .tf-workout,
+      .tf-booking,
+      .tf-scorecard
     ) {
     outline: 1px solid CanvasText;
     outline-offset: -1px;
@@ -16768,6 +16838,1057 @@
   color: var(--ink-muted);
 }
 
+/* 13-connectors.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Connectors: service marks, the connector gallery, sync status, agent activity */
+
+/* ServiceMark */
+:where([data-kit="pro"]) .tf-svc {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 36px;
+  height: var(--density-control);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+}
+:where([data-kit="pro"]) .tf-svc-sm {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+}
+:where([data-kit="pro"]) .tf-svc-lg {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+}
+:where([data-kit="pro"]) .tf-svc > img,
+:where([data-kit="pro"]) .tf-svc > svg:not(.tf-ico) {
+  width: 62%;
+  height: 62%;
+  object-fit: contain;
+}
+:where([data-kit="pro"]) .tf-svc-mono {
+  font: 600 13px/1 var(--font-sans);
+  letter-spacing: 0.02em;
+}
+:where([data-kit="pro"]) .tf-svc-sm .tf-svc-mono {
+  font-size: 10px;
+}
+:where([data-kit="pro"]) .tf-svc-lg .tf-svc-mono {
+  font-size: 17px;
+}
+/* the state dot sits on the corner, ringed in the surface colour */
+:where([data-kit="pro"]) .tf-svc-dot {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 2px solid var(--card);
+  border-radius: var(--radius-full);
+  background: var(--idle);
+}
+:where([data-kit="pro"]) .tf-svc-sm .tf-svc-dot {
+  width: 8px;
+  height: 8px;
+  border-width: 1.5px;
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-connected {
+  background: var(--ok);
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-syncing {
+  background: var(--info);
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-error {
+  background: var(--danger);
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-paused {
+  background: var(--warn);
+}
+
+/* ConnectorGallery */
+:where([data-kit="pro"]) .tf-connectors {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-connectors-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-connectors-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+:where([data-kit="pro"]) .tf-connectors-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+:where([data-kit="pro"]) .tf-connectors-title {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-connectors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-connector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-connector-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-connector-head .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-connector-head b {
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-connector-head small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-connector-desc {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-connector-note {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-subtle);
+}
+:where([data-kit="pro"]) .tf-connector-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 4px;
+}
+:where([data-kit="pro"]) .tf-connector.is-soon {
+  box-shadow: inset 0 0 0 1px var(--line);
+  background: transparent;
+}
+
+/* SyncStatus */
+:where([data-kit="pro"]) .tf-sync {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-sync-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+}
+:where([data-kit="pro"]) .tf-sync-icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-1);
+  background: var(--mint);
+  color: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-syncing .tf-sync-icon {
+  background: var(--sky);
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-syncing .tf-sync-icon .tf-ico {
+  animation: tf-pro-spin 1.2s linear infinite;
+}
+:where([data-kit="pro"]) .tf-sync.is-error .tf-sync-icon {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-paused .tf-sync-icon {
+  background: var(--butter);
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-never .tf-sync-icon {
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync-text small,
+:where([data-kit="pro"]) .tf-sync-next {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync-line > .tf-btn {
+  margin-left: auto;
+}
+:where([data-kit="pro"]) .tf-sync-error {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-sync-counts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  padding: 0 0 0 28px;
+  list-style: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync-counts b {
+  font-weight: 500;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-sync.compact {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync.compact .tf-sync-icon {
+  width: 16px;
+  height: 16px;
+}
+:where([data-kit="pro"]) .tf-sync.compact .tf-sync-icon .tf-ico {
+  width: 11px;
+  height: 11px;
+}
+
+/* AgentActivity */
+:where([data-kit="pro"]) .tf-agentlog {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-agentlog-day ul {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-agentlog-title {
+  margin: 0 0 4px;
+  font: 500 12px/16px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 4px 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-agentlog-item:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-agentlog-item > .tf-svc {
+  margin-top: 1px;
+}
+:where([data-kit="pro"]) .tf-agentlog-main {
+  display: flex;
+  flex: 1 1 200px;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-agentlog-text {
+  margin: 0;
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-item.is-declined .tf-agentlog-text,
+:where([data-kit="pro"]) .tf-agentlog-item.is-undone .tf-agentlog-text {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+:where([data-kit="pro"]) .tf-agentlog-detail {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 2px 0 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-kind,
+:where([data-kit="pro"]) .tf-agentlog-state,
+:where([data-kit="pro"]) .tf-scope-level {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: var(--radius-pill);
+  font: 500 11px/18px var(--font-sans);
+  white-space: nowrap;
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-kind.kind-act,
+:where([data-kit="pro"]) .tf-scope-level.is-act {
+  background: var(--sky);
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-kind.kind-money,
+:where([data-kit="pro"]) .tf-scope-level.is-money {
+  background: var(--butter);
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-state.is-waiting {
+  background: var(--lilac);
+  color: var(--lilac-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-state.is-failed {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-item > .tf-btn {
+  flex: none;
+  align-self: center;
+}
+
+/* ConsentList: what a permission allows */
+:where([data-kit="pro"]) .tf-scope-level {
+  align-self: flex-start;
+  margin-top: 4px;
+}
+
+/* ConnectionList */
+:where([data-kit="pro"]) .tf-connlist {
+  container: tf-connlist / inline-size;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-connlist-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-connlist-item:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-connlist-item .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-connlist-item .tf-option-text small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-connlist-item > .tf-btn {
+  grid-column: 4;
+}
+/* narrow: the sync line goes under the name */
+@container tf-connlist (max-width: 480px) {
+  :where([data-kit="pro"]) .tf-connlist-item {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  :where([data-kit="pro"]) .tf-connlist-item > .tf-sync {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :where([data-kit="pro"]) .tf-connlist-item > .tf-btn {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+
+/* 14-connected-data.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Connected data: devices, car, now playing, workouts, calls, bookings, golf, holdings */
+
+/* the cards */
+:where([data-kit="pro"]) .tf-device,
+:where([data-kit="pro"]) .tf-vehicle,
+:where([data-kit="pro"]) .tf-nowplaying,
+:where([data-kit="pro"]) .tf-workout,
+:where([data-kit="pro"]) .tf-booking,
+:where([data-kit="pro"]) .tf-scorecard {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  box-sizing: border-box;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) :is(
+  .tf-device-head,
+  .tf-vehicle-head,
+  .tf-nowplaying-head,
+  .tf-workout-head,
+  .tf-booking-head,
+  .tf-scorecard-head
+) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) :is(
+    .tf-device-head,
+    .tf-vehicle-head,
+    .tf-nowplaying-head,
+    .tf-workout-head,
+    .tf-booking-head,
+    .tf-scorecard-head
+  )
+  > .tf-option-text {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) :is(
+    .tf-device-head,
+    .tf-vehicle-head,
+    .tf-nowplaying-head,
+    .tf-workout-head,
+    .tf-booking-head,
+    .tf-scorecard-head
+  )
+  b {
+  font: 500 14px/20px var(--font-sans);
+}
+
+/* DeviceTile */
+:where([data-kit="pro"]) .tf-device-ico {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 36px;
+  height: var(--density-control);
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-ico.is-on {
+  background: var(--butter);
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-device.kind-thermostat .tf-device-ico.is-on {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-device.kind-vacuum .tf-device-ico.is-on,
+:where([data-kit="pro"]) .tf-device.kind-purifier .tf-device-ico.is-on {
+  background: var(--sky);
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-device-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-kit="pro"]) .tf-device-value {
+  font: 600 22px/28px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-device.is-offline .tf-device-value,
+:where([data-kit="pro"]) .tf-device.is-off .tf-device-value {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-status {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+  font: 500 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-device-stepper > span {
+  flex: 1;
+  text-align: center;
+}
+:where([data-kit="pro"]) .tf-device-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-device-battery {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: auto;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-battery.is-low {
+  color: var(--blush-ink);
+}
+
+/* VehicleCard */
+:where([data-kit="pro"]) .tf-vehicle-charge {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 12px;
+}
+:where([data-kit="pro"]) .tf-vehicle-pct {
+  font: 600 24px/38px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-vehicle-range {
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-vehicle-bar {
+  position: relative;
+  height: 12px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-vehicle-fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-fill.is-charging {
+  background: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-limit {
+  position: absolute;
+  top: -3px;
+  bottom: -3px;
+  width: 2px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: var(--ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-vehicle-line > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+:where([data-kit="pro"]) .tf-vehicle-state.is-charging {
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-vehicle-inside {
+  margin-left: auto;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* NowPlaying */
+:where([data-kit="pro"]) .tf-nowplaying {
+  flex-direction: row;
+  align-items: stretch;
+}
+:where([data-kit="pro"]) .tf-nowplaying-art {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 88px;
+  height: 88px;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background: var(--lilac);
+  color: var(--lilac-ink);
+}
+:where([data-kit="pro"]) .tf-nowplaying-art > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+:where([data-kit="pro"]) .tf-nowplaying-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-nowplaying-head small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-nowplaying-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-kit="pro"]) .tf-nowplaying-bar {
+  height: 4px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-nowplaying-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--ink);
+}
+:where([data-kit="pro"]) .tf-nowplaying-times {
+  display: flex;
+  justify-content: space-between;
+  font: 500 11px/14px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nowplaying-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px 8px;
+  margin-top: auto;
+}
+:where([data-kit="pro"]) .tf-nowplaying-device {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nowplaying-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+/* WorkoutCard */
+:where([data-kit="pro"]) .tf-workout-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
+  gap: 10px 16px;
+  margin: 0;
+}
+:where([data-kit="pro"]) .tf-workout-stats dt {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-workout-stats dd {
+  margin: 0;
+  font: 600 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-workout-zones {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+:where([data-kit="pro"]) .tf-workout-zones-title {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-workout-zonebar {
+  display: flex;
+  gap: 2px;
+  height: 8px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+}
+:where([data-kit="pro"]) .tf-workout-zonebar > span {
+  flex-basis: 0;
+  min-width: 2px;
+}
+:where([data-kit="pro"]) .tf-workout-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-workout-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+:where([data-kit="pro"]) .tf-workout-legend i {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+/* CallLog */
+:where([data-kit="pro"]) .tf-calls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-calls-day ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-call {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-call:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-call-ico {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: var(--control-sm);
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-call.is-missed .tf-call-ico {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-call-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-call-name {
+  align-self: flex-start;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink);
+  font: 500 14px/20px var(--font-sans);
+  text-align: left;
+}
+:where([data-kit="pro"]) button.tf-call-name {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-call-name:hover {
+  text-decoration: underline;
+}
+:where([data-kit="pro"]) button.tf-call-name:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+:where([data-kit="pro"]) .tf-call.is-missed .tf-call-name {
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-call-meta {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-call-summary {
+  margin: 2px 0 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink);
+}
+
+/* ReservationCard */
+:where([data-kit="pro"]) .tf-booking-when {
+  margin: 0;
+  font: 500 15px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-booking-place {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-booking-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-booking-code {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-booking-code b {
+  font: 500 12px/16px var(--font-mono);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-booking.is-cancelled .tf-booking-when {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+:where([data-kit="pro"]) .tf-booking-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* Scorecard */
+:where([data-kit="pro"]) .tf-scorecard-total {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: flex-end;
+}
+:where([data-kit="pro"]) .tf-scorecard-total b {
+  font: 600 24px/28px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-scorecard-total small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-scorecard-scroll {
+  overflow-x: auto;
+}
+:where([data-kit="pro"]) .tf-scorecard-table {
+  width: 100%;
+  min-width: 360px;
+  border-collapse: collapse;
+  font: 500 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+:where([data-kit="pro"]) .tf-scorecard-table th,
+:where([data-kit="pro"]) .tf-scorecard-table td {
+  padding: 6px 2px;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-scorecard-table th[scope="row"] {
+  padding-right: 8px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--ink-muted);
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-scorecard-table thead th {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-scorecard-table td:last-child,
+:where([data-kit="pro"]) .tf-scorecard-table th:last-child {
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-scorecard-par td,
+:where([data-kit="pro"]) .tf-scorecard-putts td {
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-score {
+  display: inline-grid;
+  place-items: center;
+  min-width: 22px;
+  height: 22px;
+  box-sizing: border-box;
+  font-weight: 500;
+}
+/* the usual marks: circles under par, squares over it */
+:where([data-kit="pro"]) .tf-score.is-birdie {
+  border: 1.5px solid currentColor;
+  border-radius: var(--radius-1);
+}
+:where([data-kit="pro"]) .tf-score.is-eagle {
+  border: 1.5px solid currentColor;
+  border-radius: var(--radius-1);
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 3.5px currentColor;
+}
+:where([data-kit="pro"]) .tf-score.is-bogey {
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+}
+:where([data-kit="pro"]) .tf-score.is-double {
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 3.5px currentColor;
+}
+:where([data-kit="pro"]) .tf-scorecard-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-scorecard-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-scorecard-legend .tf-score {
+  min-width: 14px;
+  height: 14px;
+}
+
+/* HoldingsList */
+:where([data-kit="pro"]) .tf-holdings {
+  container: tf-holdings / inline-size;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-holdings > li {
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-holdings > li:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-holding {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(96px, 160px);
+  align-items: center;
+  gap: 4px 16px;
+  width: 100%;
+  padding: 10px 0;
+  border: 0;
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+}
+:where([data-kit="pro"]) button.tf-holding {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-holding:hover {
+  background: var(--accent);
+}
+:where([data-kit="pro"]) button.tf-holding:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-holding .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-holding .tf-option-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-holding-nums {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-holding-nums b {
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-holding-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-holding-change.is-up {
+  color: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-holding-change.is-down {
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-holding-change.is-down .tf-ico {
+  transform: rotate(180deg);
+}
+:where([data-kit="pro"]) .tf-holding-weight {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-holding-bar {
+  height: 6px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-holding-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--lilac-ink);
+}
+/* narrow: the share goes under the name */
+@container tf-holdings (max-width: 420px) {
+  :where([data-kit="pro"]) .tf-holding {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  :where([data-kit="pro"]) .tf-holding-weight {
+    grid-column: 1 / -1;
+  }
+}
+
 /* 90-pro-look.css */
 /* Pro look ("Clean Dark Pro", reference/pro): monochrome surfaces on a visible 1px hairline grid,
    square corners (2px on controls), Geist and Geist Mono, colour only for state, dense by default.