@hypit/hypit 0.1.4 → 0.1.5

package/packages/studio/src/style.css

@@ -10,6 +10,9 @@
   --text: #e7e8eb;
   --text-2: #a4a7ae;
   --text-3: #6f737c;
+  --subtab-surface: #101114;
+  --subtab-active-surface: #24262a;
+  --subtab-active-text: #c9cbd0;
   /* Replace this ramp as one unit when Hypit's interaction identity changes. */
   --brand-200: #f8c1ce;
   --brand-400: #ed7898;
@@ -28,6 +31,8 @@
   --tone-orange-muted-rail: #e7834c;
   --tone-green: #38853e;
   --tone-green-rail: #75d079;
+  --tone-green-muted: #285c30;
+  --tone-green-muted-rail: #73a478;
   --tone-teal: #008889;
   --tone-teal-rail: #00d4d5;
   /* Semantic ruler: brightness separates content from its own band; hue marks state. */
@@ -35,6 +40,7 @@
   --semantic-word: #005551;
   /* Author intent uses a gold annotation hue; brand pink stays in the chrome. */
   --semantic-intent: #a28b2b;
+  --semantic-moment: var(--brand-500);
   /* Same perceived active level as a selected/covered semantic cell. */
   --semantic-current: #009f98;
   /* Ordered marker depth: one hue, decreasing lightness. */
@@ -44,10 +50,14 @@
   --intent-depth-3: #846d00;
   --tone-blue: #1777b8;
   --tone-blue-rail: #58c0ff;
+  --tone-blue-muted: #175079;
+  --tone-blue-muted-rail: #5795bf;
   --tone-violet: #6f63b8;
   --tone-violet-rail: #b3a6ff;
   --tone-magenta: #995398;
   --tone-magenta-rail: #ea93e8;
+  --tone-magenta-muted: #683b68;
+  --tone-magenta-muted-rail: #b57ab4;
   --tone-neutral: #6a737c;
   --tone-neutral-rail: #aeb9c4;
   --timeline-label-width: 188px;
@@ -132,6 +142,14 @@ button:focus-visible, textarea:focus-visible {
   white-space: nowrap;
 }
 .topbar-right { justify-self: end; display: flex; align-items: center; min-width: 0; }
+.view-tabs { display: flex; align-items: center; gap: 2px; margin-left: 16px; padding: 2px; border-radius: 5px; background: var(--subtab-surface); }
+.view-tabs button {
+  display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
+  border: 0; border-radius: 4px; color: var(--text-3); background: transparent;
+}
+.view-tabs button[aria-selected="true"] { color: var(--subtab-active-text); background: var(--subtab-active-surface); }
+.view-tabs button:focus-visible { outline: 1px solid #8a8f99; outline-offset: -1px; }
+.view-tabs .icon { width: 14px; height: 14px; }
 .meta {
   color: var(--text-3);
   font: 500 11px/1 var(--font-ui);
@@ -159,6 +177,67 @@ button:focus-visible, textarea:focus-visible {
   grid-template-columns: var(--source-width) 8px minmax(320px, 1fr) 8px var(--workspace-width);
   overflow: hidden;
 }
+.comments-panel, .comments-handle { display: none; }
+.studio-shell[data-view="comments"] { grid-template-rows: minmax(0, 1fr); padding-bottom: 6px; }
+.studio-shell[data-view="comments"] > .handle,
+.studio-shell[data-view="comments"] > .timeline-panel { display: none; }
+.studio-shell[data-view="comments"] .upper-shell { grid-template-columns: minmax(240px, 1fr) 8px var(--comments-width, 360px); }
+.studio-shell[data-view="comments"] .source-panel,
+.studio-shell[data-view="comments"] .source-handle,
+.studio-shell[data-view="comments"] .workspace-panel,
+.studio-shell[data-view="comments"] .workspace-handle { display: none; }
+.studio-shell[data-view="comments"] .comments-handle { display: block; }
+.studio-shell[data-view="comments"] .comments-panel { display: flex; }
+.comments-panel { flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border: 1px solid #08090a; }
+.comments-heading { justify-content: space-between; flex: none; }
+.comments-heading [data-count] { color: var(--text-3); font-size: 11px; margin-left: 2px; }
+.comments-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 3px; background: transparent; color: var(--text-3); }
+.comments-icon:hover { background: var(--field); color: var(--text); }
+.comments-icon .icon { width: 15px; height: 15px; }
+.comments-icon.is-done { color: var(--ok); }
+.comments-panel button:disabled { opacity: .4; }
+.comments-filters { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
+.comments-filters button { border: 0; background: transparent; padding: 4px 11px; border-radius: 3px; color: var(--text-3); }
+.comments-filters button[aria-pressed="true"] { color: var(--text); background: #282a30; }
+.comments-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; user-select: text; }
+.comments-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; height: 100%; padding: 24px; text-align: center; color: var(--text-3); }
+.comments-empty > .icon { width: 28px; height: 28px; margin-bottom: 18px; opacity: .7; }
+.comments-empty strong { font-size: 13px; font-weight: 500; color: var(--text-2); }
+.comments-empty p { line-height: 1.7; max-width: 230px; margin: 8px 0; }
+.comment-card { padding: 12px 10px 14px; border-bottom: 1px solid var(--line); border-radius: 2px; }
+.comment-card.selected { background: #1e2025; }
+.comment-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.comment-location { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; }
+.comment-number { margin-right: 5px; color: var(--text-3); font: 500 11px var(--font-mono); }
+.comment-actions { display: flex; align-items: center; gap: 1px; }
+.comment-time { display: inline-flex; align-items: center; gap: 6px; min-height: 23px; padding: 2px 6px; background: var(--brand-soft); border: 0; border-radius: 3px; color: var(--brand-400); font: 500 11px/1.5 var(--font-mono); white-space: nowrap; }
+.comment-time .icon { width: 13px; height: 13px; }
+.comment-text { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; }
+.comment-card.resolved .comment-text { color: var(--text-3); }
+.comment-composer { flex: none; border-top: 1px solid var(--line); padding: 14px 14px 12px; background: #18191d; }
+.comment-anchor { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; min-height: 24px; }
+.comment-composer textarea, .comment-edit textarea { width: 100%; resize: none; background: #202227; color: var(--text); border: 1px solid #33363c; border-radius: 3px; padding: 10px 11px; font: 400 13px/1.7 var(--font-ui); display: block; min-height: 82px; user-select: text; }
+.comment-composer textarea::placeholder { color: var(--text-3); }
+.comments-panel textarea:focus { outline: none; box-shadow: none; }
+.comment-edit textarea:focus { background: #292c32; }
+.comments-panel textarea::selection { background: #dce1eb33; color: var(--text); }
+.comment-input { border: 1px solid #33363c; border-radius: 4px; background: #202227; transition: background 120ms ease; }
+.comment-input:focus-within { background: #292c32; }
+.comment-input textarea { border: 0; background: transparent; }
+.comment-input-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 9px 9px; }
+.comment-tools { display: flex; align-items: center; gap: 4px; }
+.comment-tools .comments-icon { width: 28px; height: 28px; padding: 5px; }
+.comment-tools .icon { width: 18px; height: 18px; }
+.comment-submit { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #e4e6eb; color: #202227; }
+.comment-submit .icon { display: block; width: 18px; height: 18px; }
+.comment-submit:hover:not(:disabled) { background: #fff; }
+.comment-submit:disabled { opacity: 1; background: #35383f; color: #858b95; }
+.comment-submit:focus-visible { outline: 1px solid #aeb3bc; outline-offset: 3px; }
+.comments-error { color: var(--brand-200); font-size: 12px; line-height: 1.6; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.comment-edit { margin-top: 10px; }
+.comment-edit-actions { display: flex; justify-content: end; gap: 6px; margin-top: 8px; }
+.comment-edit-actions button { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--field); color: var(--text-2); }
+.comment-edit-actions button[type="submit"] { color: var(--text); }
 .source-panel, .preview-panel, .workspace-panel, .timeline-panel {
   min-width: 0;
   min-height: 0;
@@ -602,7 +681,7 @@ button:focus-visible, textarea:focus-visible {
   margin: 10px 12px 4px;
   padding: 2px;
   border-radius: 5px;
-  background: #101114;
+  background: var(--subtab-surface);
   overflow: hidden;
 }
 .inspector-subtab {
@@ -626,7 +705,7 @@ button:focus-visible, textarea:focus-visible {
   line-height: 1;
   white-space: nowrap;
 }
-.inspector-subtab.active { background: #24262a; color: #c9cbd0; }
+.inspector-subtab.active { background: var(--subtab-active-surface); color: var(--subtab-active-text); }
 .inspector-empty { padding: 28px 14px; color: var(--text-3); font-size: 11px; text-align: center; }
 .property-group { min-width: 0; padding: 14px 14px 16px; border-bottom: 1px solid var(--line); }
 .property-group h3 { margin: 0 0 10px; color: #c4c6cc; font-size: 11px; font-weight: 500; }
@@ -689,6 +768,7 @@ button:focus-visible, textarea:focus-visible {
   caret-color: var(--interaction-accent);
   cursor: text !important;
 }
+.parameter-display { width: 100%; padding: 5px 7px; color: var(--text-2); font-size: 11px; line-height: 1.2; text-align: right; overflow-wrap: anywhere; user-select: text; font-variant-numeric: tabular-nums; }
 .parameter-value:focus { border-color: #6a6e77; outline: 0; background: #131417; }
 .control-boolean .parameter-right { justify-content: flex-end; }
 .control-boolean .parameter-value {
@@ -745,8 +825,8 @@ button:focus-visible, textarea:focus-visible {
 .parameter-color-value { width: min(100%, 102px); }
 .control-list,
 .control-record { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
-.control-list .parameter-right,
-.control-record .parameter-right { grid-column: 1 / -1; width: 100%; }
+.control-list > .parameter-right,
+.control-record > .parameter-right { grid-column: 1 / -1; width: 100%; }
 .parameter-structured { min-width: 0; width: 100%; }
 .parameter-structured-summary {
   min-height: 20px;
@@ -786,20 +866,6 @@ button:focus-visible, textarea:focus-visible {
 .parameter-list-actions button:not(:disabled):focus-visible { outline: 1px solid #62666f; }
 .parameter-list-actions .icon { width: 11px; height: 11px; }
 .parameter-record-fields { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
-.parameter-record-field {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 58px minmax(0, 1fr);
-  align-items: center;
-  gap: 7px;
-}
-.parameter-record-field > span:first-child {
-  overflow: hidden;
-  color: #6f737c;
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .parameter-structured-footer {
   min-height: 30px;
   display: flex;
@@ -818,10 +884,10 @@ button:focus-visible, textarea:focus-visible {
   font: 10px/1 var(--font-ui);
 }
 .parameter-structured-footer button:disabled { color: #454850; background: #16171a; }
-.parameter-structured-footer button.primary:not(:disabled) { border-color: #555962; background: #292b30; color: #e0e2e6; }
 .parameter-structured-add { display: inline-flex; align-items: center; gap: 4px; }
 .parameter-structured-add .icon { width: 11px; height: 11px; }
-.parameter-structured-decisions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.parameter-structured-notice { margin-top: 6px; color: var(--text-3); font: 10px/1.4 var(--font-ui); }
+.parameter-structured-notice[hidden] { display: none; }
 .parameter-select { position: relative; width: 100%; min-width: 0; }
 .parameter-select-trigger {
   width: 100%;
@@ -1016,10 +1082,13 @@ button:focus-visible, textarea:focus-visible {
   transform: translateY(-50%);
 }
 .track-tone-blue { --track: var(--tone-blue); --rail: var(--tone-blue-rail); }
+.track-tone-blue-muted { --track: var(--tone-blue-muted); --rail: var(--tone-blue-muted-rail); }
 .track-tone-green { --track: var(--tone-green); --rail: var(--tone-green-rail); }
+.track-tone-green-muted { --track: var(--tone-green-muted); --rail: var(--tone-green-muted-rail); }
 .track-tone-teal { --track: var(--tone-teal); --rail: var(--tone-teal-rail); }
 .track-tone-violet { --track: var(--tone-violet); --rail: var(--tone-violet-rail); }
 .track-tone-magenta { --track: var(--tone-magenta); --rail: var(--tone-magenta-rail); }
+.track-tone-magenta-muted { --track: var(--tone-magenta-muted); --rail: var(--tone-magenta-muted-rail); }
 .track-tone-orange { --track: var(--tone-orange); --rail: var(--tone-orange-rail); }
 .track-tone-orange-muted { --track: var(--tone-orange-muted); --rail: var(--tone-orange-muted-rail); }
 .track-tone-neutral { --track: var(--tone-neutral); --rail: var(--tone-neutral-rail); }
@@ -1083,8 +1152,10 @@ button:focus-visible, textarea:focus-visible {
   height: var(--semantic-band-height);
   overflow: hidden;
   background: var(--lane);
+  box-shadow: inset 0 -1px var(--line);
+  isolation: isolate;
 }
-.semantic-band-intent { border-bottom: 0; }
+.semantic-band:last-child { box-shadow: none; }
 .lane-attached {
   border-left: 0;
   background: var(--lane);
@@ -1104,12 +1175,12 @@ button:focus-visible, textarea:focus-visible {
   border: 0;
   border-radius: 0;
   background: var(--semantic-cell);
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #ffffff12;
   color: var(--text);
   text-align: left;
   cursor: default;
 }
-.semantic-cell:focus-visible { outline: 0; }
+.semantic-cell:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px #ffffff60; }
 .semantic-segment {
   --semantic-cell: var(--semantic-segment);
 }
@@ -1120,11 +1191,9 @@ button:focus-visible, textarea:focus-visible {
   --semantic-cell: var(--semantic-intent);
   color: #fff;
 }
-.semantic-cell.selected,
-.semantic-cell.live { z-index: 4; filter: brightness(1.22); }
-.semantic-segment.selected { box-shadow: none; }
-.semantic-segment.live.selected { filter: brightness(1.22); }
-.semantic-moment.selected { z-index: 4; filter: brightness(1.22); }
+.semantic-cell.live { filter: brightness(1.12); }
+.semantic-cell.selected { z-index: 4; filter: brightness(1.16); box-shadow: inset 0 0 0 1px #ffffff60; }
+.semantic-moment.selected { z-index: 5; filter: brightness(1.16); box-shadow: inset 0 0 0 1px #ffffff60; }
 .semantic-segment-label {
   flex: 1 1 auto;
   min-width: 0;
@@ -1170,21 +1239,19 @@ button:focus-visible, textarea:focus-visible {
 .semantic-word .semantic-cell-content { padding: 0 5px; }
 .semantic-moment {
   position: absolute;
-  top: 4px;
-  width: 14px;
-  height: 14px;
-  transform: translateX(-7px) rotate(45deg);
+  top: calc((var(--semantic-band-height) - 9px) / 2);
+  z-index: 1;
+  width: 9px;
+  height: 9px;
+  transform: translateX(-50%) scaleX(.6) rotate(45deg);
   border-radius: 0;
   padding: 0;
-  border: 0;
-  background: var(--semantic-intent);
+  border: 1px solid var(--lane);
+  background: var(--semantic-moment);
 }
 .semantic-moment:focus-visible { outline: 0; }
-.track-label-semantic { position: sticky; top: var(--timeline-ruler-height); z-index: 8; border-bottom: 1px solid var(--line); background: #111216; }
-.track-label-semantic::before {
-  border-radius: 0;
-  background: #181a1f;
-}
+.track-label-semantic { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid var(--line); background: #111216; }
+.track-label-semantic::before { display: none; }
 .track-label-attached {
   /* The branch marker occupies the same 18px prefix as a root icon;
      attached and root labels therefore share one exact text column. */
@@ -1207,7 +1274,6 @@ button:focus-visible, textarea:focus-visible {
   display: block;
   padding: 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--track) 48%, var(--lane));
   border-radius: var(--timeline-item-radius);
   background: var(--item-body);
   box-shadow: none;
@@ -1215,8 +1281,7 @@ button:focus-visible, textarea:focus-visible {
   text-align: left;
   cursor: default;
 }
-/* The edge affordance is intentionally visual-only for now. Actual trim and
-   writeback remain disabled until their SVML mapping is implemented. */
+/* Only Companion-declared editable intervals enable edge gestures. */
 #app .clip::before,
 #app .clip::after {
   content: "";
@@ -1244,10 +1309,19 @@ button:focus-visible, textarea:focus-visible {
 }
 .clip.editing { box-shadow: 0 0 0 1px #fff; }
 .clip:focus-visible { outline: 0; }
+/* Draw above thumbnails and text without changing interval geometry. */
+.clip-boundary {
+  position: absolute;
+  z-index: 5;
+  inset: 0;
+  border: 1px solid #ffffff20;
+  border-radius: inherit;
+  pointer-events: none;
+}
 .clip-selection {
   position: absolute;
   z-index: 6;
-  inset: calc(-1 * var(--timeline-selection-stroke));
+  inset: 0;
   display: none;
   border: var(--timeline-selection-stroke) solid var(--timeline-selection-color);
   border-radius: var(--timeline-selection-radius);
@@ -1256,20 +1330,21 @@ button:focus-visible, textarea:focus-visible {
 .clip-selection::before, .clip-selection::after {
   content: "";
   position: absolute;
-  top: -1px;
-  bottom: -1px;
+  top: 0;
+  bottom: 0;
   width: var(--timeline-selection-edge);
   background: var(--timeline-selection-color);
 }
 .clip-selection::before {
-  left: calc(-1 * var(--timeline-selection-stroke));
+  left: 0;
   border-radius: var(--timeline-selection-radius) 0 0 var(--timeline-selection-radius);
 }
 .clip-selection::after {
-  right: calc(-1 * var(--timeline-selection-stroke));
+  right: 0;
   border-radius: 0 var(--timeline-selection-radius) var(--timeline-selection-radius) 0;
 }
 .clip.selected > .clip-selection { display: block; }
+.clip.selected > .clip-boundary { border-color: var(--timeline-selection-color); }
 .clip-head {
   position: absolute;
   z-index: 3;
@@ -1288,6 +1363,7 @@ button:focus-visible, textarea:focus-visible {
 }
 .clip-body {
   position: absolute;
+  z-index: 1;
   top: var(--timeline-item-header-height);
   right: 0;
   bottom: 0;
@@ -1346,10 +1422,13 @@ button:focus-visible, textarea:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 .clip-tone-blue { --track: var(--tone-blue); }
+.clip-tone-blue-muted { --track: var(--tone-blue-muted); }
 .clip-tone-green { --track: var(--tone-green); }
+.clip-tone-green-muted { --track: var(--tone-green-muted); }
 .clip-tone-teal { --track: var(--tone-teal); }
 .clip-tone-violet { --track: var(--tone-violet); }
 .clip-tone-magenta { --track: var(--tone-magenta); }
+.clip-tone-magenta-muted { --track: var(--tone-magenta-muted); }
 .clip-tone-orange { --track: var(--tone-orange); }
 .clip-tone-orange-muted { --track: var(--tone-orange-muted); }
 .clip-tone-neutral { --track: var(--tone-neutral); }
@@ -1503,14 +1582,96 @@ button:focus-visible, textarea:focus-visible {
 .stage-audio-wave { width: 85%; padding: 24px 12px; border-radius: 2px; color: #b5c2bb; background: #202824; text-align: center; }
 .stage-audio-wave img { display: block; width: 100%; height: 100px; }
 .stage-media-error { position: absolute; bottom: 12px; padding: 8px; background: #24262b; color: #cacdd4; font-size: 11px; }
-.stage-scrubber { flex: none; width: 100%; height: 10px; padding: 0; margin: -5px 0; z-index: 2; appearance: none; background: transparent; cursor: pointer; }
+.stage-progress { position: relative; flex: none; height: 0; z-index: 2; }
+.stage-progress[hidden], .scrub-preview[hidden] { display: none; }
+.stage-scrubber { position: absolute; inset: -5px 0 auto; width: 100%; height: 10px; padding: 0; margin: 0; appearance: none; background: transparent; cursor: pointer; }
 .stage-scrubber::-webkit-slider-runnable-track { height: 2px; background: #676c75; }
 .stage-scrubber::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; border-radius: 50%; margin-top: -3px; background: #e1e4e9; }
 .stage-scrubber::-moz-range-track { height: 2px; background: #676c75; }
 .stage-scrubber::-moz-range-thumb { width: 8px; height: 8px; border: 0; background: #e1e4e9; }
+.stage-review .stage-scaler, .stage-review .stage-viewport { cursor: pointer; }
+.stage-review .stage-progress { height: 24px; margin: 0 20px; }
+.stage-review .stage-scrubber { top: 0; height: 24px; }
+.stage-review .stage-scrubber::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #565b64; }
+.stage-review .stage-scrubber::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
+.stage-review .stage-scrubber::-moz-range-track { height: 4px; border-radius: 2px; background: #565b64; }
+.stage-review .stage-scrubber::-moz-range-thumb { width: 12px; height: 12px; }
+.scrub-preview { position: absolute; bottom: calc(100% + 8px); padding: 3px; border: 1px solid #4b4f56; border-radius: 4px; background: #1b1d21; box-shadow: 0 4px 16px #0006; pointer-events: none; }
+.scrub-preview-picture { position: relative; display: grid; place-items: center; overflow: hidden; background: #111215; }
+.scrub-preview-picture iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; pointer-events: none; }
+.scrub-preview-picture span { padding: 8px; color: var(--text-3); font: 10px var(--font-ui); text-align: center; }
+.scrub-preview-picture span[hidden] { display: none; }
+.scrub-preview-time { padding: 5px 3px 2px; color: #d5d8df; font: 10px var(--font-mono); text-align: center; }
 
 .preview-unavailable .artifact-type { position: static; width: auto; height: auto; clip-path: none; color: #9298a2; font-size: 10px; }
 
 .artifact-card.selected .artifact-preview { background: var(--artifact-selection); border-radius: 3px; }
 .artifact-card.selected .artifact-name-text { color: #f1f2f5; background: var(--artifact-selection); }
 .library-continuation { grid-column: 1 / -1; height: 28px; display: grid; place-items: center; color: #777e89; font-size: 10px; }
+
+.timeline-overlap-menu, .selection-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 160px;
+  max-width: 280px;
+  max-height: 240px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--line-strong);
+  border-radius: 5px;
+  background: var(--panel-raised);
+  box-shadow: 0 6px 20px #0006;
+}
+.timeline-overlap-menu button, .selection-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 9px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.timeline-overlap-menu button:hover,
+.timeline-overlap-menu button:focus-visible,
+.selection-menu button:hover,
+.selection-menu button:focus-visible { background: var(--field); outline: none; }
+
+/* Compact authored rules keep interval geometry without a thumbnail body. */
+.clip-chrome-compact > .clip-head {
+  height: 100%;
+  border-bottom: 0;
+  border-radius: var(--timeline-item-radius);
+  background: var(--item-head);
+}
+.clip-chrome-compact > .clip-body,
+.clip-chrome-compact .clip-meta { display: none; }
+.clip-chrome-compact .clip-name { font-size: 11px; font-weight: 500; }
+
+/* Track-internal bands share one label and meet without child-track gutters. */
+.timeline-track-banded { padding: var(--timeline-item-inset-y) 0; }
+.timeline-track-banded > .track-band { border-bottom: 0; }
+.timeline-track-banded > .track-band > .clip {
+  height: 100%;
+  margin-top: 0;
+  border-radius: 0;
+}
+.timeline-track-banded > .track-band:first-child > .clip {
+  border-top-left-radius: var(--timeline-item-radius);
+  border-top-right-radius: var(--timeline-item-radius);
+}
+.timeline-track-banded > .track-band:last-child > .clip {
+  border-bottom-left-radius: var(--timeline-item-radius);
+  border-bottom-right-radius: var(--timeline-item-radius);
+}
+.track-band .clip-head, .track-band .clip-body { border-radius: inherit; }
+.track-band-label .clip-head {
+  height: 100%;
+  border-bottom: 0;
+  background: var(--item-head);
+}
+.track-band-label .clip-body, .track-band-label .clip-meta { display: none; }