/* Clips under the player (matter-workspace-clips.js), on the working screen's
   own type and control tokens (matter-workspace.css): one family, the scale
   13 secondary / 14 body at 400 / 500 / 600, sentence case, tabular numerals
   for every time, hierarchy from size, weight and space. Controls are filled
   pills like every other control on the screen; Save clip is the one primary
   action (the filled ink pill, like Ask). No outlined boxes, no section rules:
   sections are set apart by space. The range on the timeline is a flat square
   tint in the ink (monochrome); the open clip's tint is inset inside the pane.
   "Clip this moment" sits in the stage's clock row beside ✓ / ✕ (styled there,
   matter-workspace.css); between moments it keeps its place, hidden. */
.ws-clipnow.is-idle{visibility:hidden}
/* The range on the timeline: a flat tint across the track's full height with a square tick at each end
   (the ticks stand above and below the track, so they show even where the playhead's fill covers the tint).
   A clip playing from the list is a lighter tint underneath, with no ticks. */
.ws-clipband{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ink) 45%,transparent);pointer-events:none;box-sizing:border-box}
.ws-clipband::before,.ws-clipband::after{content:"";position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.ws-clipband::before{left:0}
.ws-clipband::after{right:0}
.ws-clipband.is-point{width:2px;background:none}
.ws-clipband.is-point::before{left:0}
.ws-clipband.is-point::after{display:none}
.ws-clipband.is-playing{background:color-mix(in srgb,var(--ink) 20%,transparent)}
.ws-clipband.is-playing::before,.ws-clipband.is-playing::after{display:none}
/* the maker */
.ws-clip{display:flex;flex-direction:column;gap:10px;padding-top:28px}
.ws-cliphead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ws-clipt{font-size:var(--t-sec);font-weight:600;line-height:1.4;letter-spacing:0;color:var(--soft)}
.ws-clipt:focus{outline:none}
.ws-cliprange{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.ws-clipend{display:inline-flex;align-items:center;gap:4px}
/* Start I  02:08  −1 s  +1 s: filled pills, the key a soft hint set apart by a gap, the time tabular */
.ws .ws-clipmark,.ws .ws-cliptime,.ws .ws-clipnudge{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px!important;border:0!important;border-radius:8px;
  background-color:var(--fill)!important;font-size:var(--t-sec);font-weight:500;line-height:1;letter-spacing:0;color:var(--ink)!important;white-space:nowrap;transition:background .12s}
.ws .ws-clipmark:hover:not(:disabled),.ws .ws-cliptime:hover:not(:disabled),.ws .ws-clipnudge:hover:not(:disabled){background-color:var(--fill-2)!important}
.ws .ws-clipmark{gap:6px}
.ws-clipkey{color:var(--soft);font-weight:400}
.ws .ws-cliptime{min-width:60px;font-size:var(--t-body);font-variant-numeric:tabular-nums}
.ws .ws-cliptime:disabled{opacity:1;color:var(--soft)!important;cursor:default}
.ws .ws-clipnudge{padding:0 8px!important;color:var(--soft)!important;font-variant-numeric:tabular-nums}
.ws .ws-clipnudge:hover:not(:disabled){color:var(--ink)!important}
.ws .ws-clipmark:disabled,.ws .ws-clipnudge:disabled{opacity:.45;cursor:default}
.ws-cliplen{font-size:var(--t-sec);letter-spacing:0;color:var(--soft);font-variant-numeric:tabular-nums}
.ws-clipsave{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.ws-clipll{font-size:var(--t-sec);letter-spacing:0;color:var(--soft)}
.ws-clipin{flex:1 1 260px;min-width:0;max-width:440px;height:36px;padding:0 12px;font:inherit;font-size:var(--t-body);letter-spacing:-.003em;color:var(--ink);background:var(--fill);border:0;border-radius:8px;outline:none}
.ws-clipin::placeholder{color:var(--soft);opacity:1}
/* the one primary action: the filled ink pill, like Ask */
.ws .ws-clipgo{min-height:36px;padding:0 16px!important;border:0!important;border-radius:8px;background-color:var(--ink)!important;color:var(--on-ink)!important;font-size:var(--t-sec);font-weight:600;letter-spacing:0;white-space:nowrap}
.ws .ws-clipgo:hover:not(:disabled){opacity:.88}
.ws .ws-clipgo:disabled{opacity:.45;cursor:default}
.ws-clipnote{font-size:var(--t-sec);letter-spacing:0;color:var(--soft)}
.ws-clipmsg{flex:1 1 100%;font-size:var(--t-sec);line-height:1.45;letter-spacing:0;color:var(--soft);min-height:19px;overflow-wrap:anywhere}
.ws-clipmsg:empty{min-height:0}
.ws-clipmsg.is-error,.ws-clips .ws-fine.is-error{color:var(--ink);font-weight:500}
/* the list */
.ws-clips{display:flex;flex-direction:column;gap:4px;padding-top:24px}
.ws-clipsub{font-size:var(--t-sec);font-weight:500;letter-spacing:0;color:var(--soft);margin:12px 0 0}
.ws-cliplist{display:flex;flex-direction:column}
.ws-clipi{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 14px;padding:8px 0}
/* The open clip's tint is inset inside the pane, never running to its edge (like the open card). */
.ws-clipi.is-on{margin-inline:-8px;padding-inline:8px;border-radius:10px;background:var(--sel)}
.ws-clipb{display:flex;flex-direction:column;gap:2px;min-width:0}
.ws-clipl{font-size:var(--t-body);font-weight:500;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.ws-clipm{font-size:var(--t-sec);letter-spacing:0;color:var(--soft);font-variant-numeric:tabular-nums}
.ws-clipfile{font-size:var(--t-cap);letter-spacing:0;color:var(--soft);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ws-clipst{font-size:var(--t-sec);letter-spacing:0;color:var(--soft);white-space:nowrap}
.ws-clipst.is-ready{color:var(--ink);font-weight:500}
.ws-clipst.is-failed{color:var(--ink);white-space:normal}
.ws-clipa{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ws-clipdl{text-decoration:none}
.ws-clipi>.ws-clipmsg{grid-column:1/-1;min-height:0}
.ws-clipmeta{font-variant-numeric:tabular-nums}
.ws-clipthis{color:var(--ink)!important}
/* no keyboard: no key hints */
@media (hover:none){.ws-clipkey{display:none}}
@media (max-width:760px){
  .ws-cliprange{gap:8px 12px}
  .ws-clipin{flex:1 1 100%;max-width:none;height:44px;font-size:16px}
  /* touch: every control at least 44 px to the finger (the pills keep their 32 px look through a transparent band,
     like every other pill on the screen); the nudges and times at least 44 px wide */
  .ws .ws-clipmark,.ws .ws-cliptime,.ws .ws-clipnudge{min-height:44px;min-width:44px;border:solid transparent!important;border-width:6px 0!important;border-radius:8px/14px;background-clip:padding-box!important}
  .ws .ws-clipgo{min-height:44px}
  .ws-clipi .ws-tbtn{padding:0 12px!important}
  /* a phone: label and meta, then the status, then the buttons — each on its own line */
  .ws-clipi{grid-template-columns:minmax(0,1fr);gap:4px}
  .ws-clipst,.ws-clipst.is-failed{white-space:normal}
  .ws-clipa{justify-content:flex-start;margin-top:2px}
}