/* GENERATED from Cutkit ccc4dcbdb77a6ffaf7be98873bd6759c24ea6c36 tools/studio_static/kit/tokens.css. */
/* tokens.css — the one sheet of colours and sizes. The DOM uses them as custom properties, the
   timeline canvas reads the same names through kit/tokens.js.
   No accent stripes (Mattias 2026-09-20): a row is never marked by a coloured line down its left
   edge. What is picked is lit the way a tab is, a raised background and a quiet edge all round;
   what is wrong is tinted. tests/declarations.test.mjs keeps the stripe out. */
:root {
  /* The colour plan (Mattias 2026-10-15, alternative B: "Mer färger men genomtänkta färger."; the approved type palette of
     2026-10-11 under it). Colour says what kind of thing something is, the same everywhere: a picture blue (--track-video),
     a sound pink (--track-audio), a text violet (--track-graphics), a rhythm turquoise (--beat), a moment yellow (--marker).
     A kind wears it on its own marks only (kit/kinds.css: its tile, its tag, its ring, name and line). Three more, each with
     its own shape: the template's events by level (a dot), a rating gold (only with its mark) and a problem orange (with its
     warning icon). Everything else is neutral; white is what you press to finish a view, once per view. */
  --bg: #121316;
  --fg: #f2f4f7;
  --card: #1c1d20;
  --panel: #121316;
  --raised: #1c1d20;
  --muted: #8b939e;
  --border: #2a2b2e;
  --input: #121316;
  --control: #373c44;   /* a round control's ring */
  --accent: #f2f4f7;    /* the one primary action, and focus */
  --on-accent: #121316;
  --marker: #eec649; --marker-fill: #49391d;   /* generic marker only; declared fact tones remain */
  --problem: #ff8a3d; --problem-fill: #4a2a17;   /* a problem, not an unsaved edit or a Suggested proposal: orange, so it never reads as a sound's pink */
  --fact-yellow: #ffcc33; --fact-green: #1bc279; --fact-violet: #bc80fa; --fact-blue: #3bc8f8; --fact-red: #eb483c; --fact-orange: #ff8a3d; --fact-neutral: #a6a39a;
  /* The kinds, each a colour and its faint ground: a row's ring/name, its clips' edge, its tile and tag (kit/kinds.css).
     Picture pixels and controls are never tinted. */
  --track-video: #83b0e4; --track-video-fill: #24334c; --track-video-selected: #455f81; --track-video-selected-text: #dae7f7;
  --track-graphics: #cba8ef; --track-graphics-fill: #3a2a4c; --track-graphics-selected: #6d5685; --track-graphics-selected-text: #efe5fa;
  --track-audio: #e498c1; --track-audio-fill: #47273a; --track-audio-selected: #7e4f69; --track-audio-selected-text: #f7e0ec;
  --beat: #5be2cd; --beat-fill: #1c3e3c;
  --kind-tile: 32px; --kind-tile-small: 26px; --kind-tile-tiny: 20px;   /* a kind's icon tile (kit/kind-tile.js) */
  /* The tile's look, here alone (Mattias 2026-10-16: "nuvarande boxar är fine så vi behåller dme så länge.. men försök göra
     det atomic design så det är enkelt att ändra..."): its corners (50% makes it a circle), its edge (0px: no edge) and how
     much of its kind's ground it wears (0%: the icon alone). The three variants he was shown are these values. */
  --kind-tile-radius: 8px; --kind-tile-radius-small: 7px; --kind-tile-radius-tiny: 5px; --kind-tile-edge-w: 1px; --kind-tile-ground: 100%;
  --kind-edge: 42%; --tag-edge: 46%;   /* how much of its colour a tile's and a tag's fine edge take */
  /* A film's events by their place in its template (A25; A24 makes the rest of the studio read them so): the first,
     the big event the film is built around, yellow, then green, then red. fs-contest's are exit, formation and
     breakoff; general's one is moment. The old names stay for what still says them. */
  --event-1: #ffcc33; --event-2: #1bc279; --event-3: #eb483c;
  --exit: var(--event-1);
  --break: var(--event-3);
  --hit: #b2bac5;
  --warn: var(--problem);
  --sel: #f2f4f7;
  --gold: #d9b45c;   /* what a person rated: a Must and a Favourite, on the source bar and on Mark's bar */
  --picture: #050505;   /* the ground a picture sits on: the viewer's letterbox, a frame not there yet */
  --scrim: rgba(5, 5, 5, .78);   /* words over a picture (the time, a chip), a dialog's backdrop */
  --shadow: rgba(0, 0, 0, .6);   /* under what floats, and behind words over a picture */
  --on-warn: #1f1e1d;   /* words on the warning colour */
  --radius: 10px;
  --radius-small: 6px;
  --control-h: 32px;   /* one height for the controls of the top bar, the transports and Mark's keys */
  /* The parts a view puts together (kit/parts.js Button, Panel, MenuRow; skyvw:0 §143, Mattias 2026-10-15: "man vill ju ha
     Atomic Design ... så det är lätt att ändra på det i framtiden"): their sizes and colours here alone, so a theme or a
     size changes in one place. A button with a size takes these; a primary is as wide as its word at a desk and its
     line's width on a phone (--button-reach, below), where a thumb needs it. */
  --button-h: var(--control-h); --button-h-small: 28px; --button-pad: 12px; --button-pad-small: 8px; --button-gap: 6px;
  --button-font: 13px; --button-font-small: 12px; --button-primary-min: 120px; --button-reach: auto;
  --hover: var(--raised); --accent-hover: color-mix(in oklab, var(--accent) 88%, white);
  --panel-fill: var(--card); --panel-edge: var(--border); --panel-radius: calc(var(--radius) + 2px); --panel-pad: 14px; --panel-gap: 10px;
  --panel-title: 13px; --panel-lead-title: 17px;
  --menu-fill: var(--panel); --menu-edge: var(--border); --menu-radius: 14px; --menu-pad: 6px; --menu-row-h: 36px; --menu-row-pad: 10px;
  /* One face and its mono (A28 item 10; Mattias 2026-10-01: "DESIGN SYSTEMET BEHÖVER VARA RÄTT"): every text is --font,
     a time, a key or the YAML --font-mono. The Claude look's serif (2026-09-27) went with that look. Its sizes are one
     scale: 10 a key, 11 a note, 12 a list, 13 the body, 14 a name, 16 a heading in a panel (and a phone's fields), 18 a
     page's title, 24 the line over the big prompt (tools/dev/steps/v2-type.mjs measures them). The studio's name is its
     mark, not a text: 34 alone on the boot's ground (kit/boot.css), 26 over the start's film (kit/start.css). */
  --font: ui-sans-serif, system-ui, "Inter", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* the timeline canvas reads the same sheet (kit/tokens.js) */
  --tl-bg: var(--bg); --tl-panel: var(--panel); --tl-line: var(--border); --tl-text: #f2f4f7; --tl-muted: #8b939e; --tl-wave: var(--track-audio);
  --tl-energy-low: #0d1117; --tl-energy-mid: #13171d; --tl-energy-high: #1a1f25;
  --tl-energybar-low: #656c75; --tl-energybar-mid: #9da5b0; --tl-energybar-high: #d2dae6;
  --tl-phrase: #5f656f; --tl-beat: var(--beat); --tl-louder: #cbd3df; --tl-quieter: #838b96;
  --tl-hit-bass-in: #cdd6e2; --tl-hit-drums-in: #b3bbc6; --tl-hit-vocals-in: #a0a8b3; --tl-hit-other: #89919b;
  /* A music drop is brightest; size and luminance say strength. Existing rendered debug bands keep their old bytes. */
  --band-exit: rgb(255, 204, 51); --band-breakoff: rgb(235, 72, 60); --band-music: rgb(180, 176, 166);
  --tl-music-hit-drop: #e2ebf7; --tl-music-hit-rise: #b2bac5; --tl-music-hit-phrase: #747c86; --tl-music-hit-other: #747c86;
  /* a clip's ground, seen only until its pictures arrive: a grey, not the sheet's black, so an empty tile never
     passes for a dark picture (v2-filmstrip's flat ground) */
  --tl-clip: var(--track-video-fill); --tl-clip-alt: var(--track-video-fill); --tl-clip-sel: var(--track-video-selected); --tl-breather: #302d22;
  --tl-gutter: var(--bg);
  /* who read an event's frame in a model's marks file (core/markfile.js BY): one colour each, DOM and canvas */
  --tl-mark-exit: #ffcc33; --tl-mark-usable_end: #9aa0a0;
  --tl-head: #f2f4f7; --tl-warn: var(--problem); --tl-switch: #a0a8b3; --tl-window: rgba(255,255,255,.12);
  --tl-fade: rgba(242,244,247,.33); --tl-pointer: rgba(255,255,255,.22); --tl-tip: rgba(14,16,19,.94); --tl-label-bg: rgba(14,16,19,.82);
  --tl-well: var(--bg); --tl-scrim: rgba(18,19,22,.86);   /* the inside of a round control; a marker's label */
  /* The storyline as a drawing (A25, lanes/drawing.js): a section measured by a dimension line, the music's bars a faint
     grid in its green (--track-audio) and its drops dashed lines above and below the pictures. */
  --tl-dimension: #575e67; --tl-guide-music: rgba(91, 226, 205, .24); --tl-guide-drop: rgba(91, 226, 205, .8);
  --tl-sync-guide: var(--tl-text); --tl-sync-guide-w: 1.5px; --tl-gesture-dim: .4; --tl-sync-marker-grow: 1.5px;
  /* The Cut view as the approved sketch draws it (docs/briefs/sketch-parity-2026-10-09.md, its values from the sketch's
     own source; its #e9edf2 is tl-text here, its surface #15181c is raised). A value that differs between a phone and a
     desk is a pair, -compact under 900 px and -wide from it (kit/tokens.js layoutNumber); a single name holds on both. */
  /* A: a join's capsule, one atom for a cut, a dissolve and a song's crossfade: raised, a fine tl-text edge (thicker when
     lit), its symbol filled tl-text, its length beside it */
  --tl-capsule-line: 1.4px; --tl-capsule-line-lit: 2px;
  --tl-capsule-h-compact: 24px; --tl-capsule-h-wide: 28px;
  --tl-capsule-cut-w-compact: 14px; --tl-capsule-cut-w-wide: 16px;
  --tl-capsule-bar-compact: 2px; --tl-capsule-bar-wide: 2.2px;
  --tl-capsule-min-compact: 26px; --tl-capsule-min-wide: 34px;
  --tl-capsule-tie-compact: 6px; --tl-capsule-tie-wide: 8px;   /* the bow tie's base from the capsule's side */
  --tl-crossfade-h: 24px; --tl-crossfade-drop: 4px;   /* on A1: under the lane's middle, clear of the songs' names */
  --tl-figure-font-compact: 12px ui-sans-serif, system-ui; --tl-figure-font-wide: 11px ui-sans-serif, system-ui;
  --tl-label-font-compact: 12px ui-sans-serif, system-ui; --tl-label-font-wide: 11px ui-sans-serif, system-ui;
  --tl-small-font-compact: 12px ui-sans-serif, system-ui; --tl-small-font-wide: 10px ui-sans-serif, system-ui;
  --tl-mono-font-compact: 12px ui-monospace, monospace; --tl-mono-font-wide: 11px ui-monospace, monospace;
  --tl-figure-under: 12px; --tl-figure-room: 8px;   /* a length's baseline under V1; the room it needs beyond its text */
  --tl-crossfade-figure-top: 10px;   /* a crossfade's length: its baseline under A1's top */
  /* B: V1's clips, inset at every join so a gap shows there; time and the hand's targets stay where they are */
  --tl-clip-inset-compact: 1.5px; --tl-clip-inset-wide: 2px;
  --tl-clip-radius-compact: 7px; --tl-clip-radius-wide: 9px;
  --tl-clip-edge-compact: 3px; --tl-clip-edge-wide: 3px;   /* §192: a clip's kind on its top and bottom, in its track's colour (draw.js drawEdges) */
  --tl-picked-w: 3px; --tl-picked-in: 1px;   /* the picked clip's frame in tl-text, starting 1 px inside its picture */
  --tl-covered-compact: rgba(14, 16, 19, .55); --tl-covered-wide: rgba(14, 16, 19, .5);   /* V1 under a higher layer */
  --tl-clip-hover: var(--tl-text); --tl-clip-hover-light: .6;   /* laid over the clip under the pointer in soft light: lit, not fogged */
  /* C: a picture layer's clips (V2..) */
  --tl-layer-line: #9aa8b8; --tl-layer-line-w: 2px; --tl-layer-inset: 1px; --tl-layer-gap: 4px;
  --tl-layer-radius-compact: 5px; --tl-layer-radius-wide: 6px;
  /* D: a title on T1 (its edge is track-graphics, 1 px) */
  --tl-title-fill: var(--track-graphics-fill); --tl-title-text: var(--track-graphics); --tl-title-tracking: .4px; --tl-title-radius: 5px;
  --tl-title-font-compact: 700 12px ui-sans-serif, system-ui; --tl-title-font-wide: 700 11px ui-sans-serif, system-ui;
  --tl-title-h-compact: 18px; --tl-title-h-wide: 20px; --tl-title-pad-compact: 5px; --tl-title-pad-wide: 6px;
  /* E: the markers under V1, their row's centre under the pictures; a rough one dimmed inside a fine ring of its colour,
     never dashed (Mattias 2026-10-16: "är väl bättre att det är dimmamat eller annan färg.. snarare än streckat?"); the
     one the pointer is on grows by --tl-sync-marker-grow and glows in its colour */
  --tl-marker-r-compact: 6px; --tl-marker-r-wide: 6.5px; --tl-marker-ring: 1.5px; --tl-marker-rough-fill: .3; --tl-marker-rough-ring: .8;
  --tl-marker-glow: 10px;
  --tl-marker-tick: rgba(242, 244, 247, .45); --tl-marker-row-compact: 12px; --tl-marker-row-wide: 14px;
  /* F: a sync's line down to the music (a near one dimmed as a rough marker is), its frames beside the dot; the one the
     pointer is on --tl-tie-lit wider, a near one then whole */
  --tl-sync-w-compact: 2.5px; --tl-sync-w-wide: 3px; --tl-near-w: 2px; --tl-near-alpha: .45; --tl-tie-lit: 1px;
  --tl-sync-stop-compact: 8px; --tl-sync-stop-wide: 7px;   /* where the line ends above the music's row */
  --tl-sync-figure-x-compact: 9px; --tl-sync-figure-x-wide: 10px; --tl-sync-figure-y: 4px;
  /* G: the music's dots grey, a beat a cut or a Moment lands on in the accent, the one the playing playhead reaches lit
     for a moment (Sky 2026-10-10); its hits as turned squares, the row's centre under the markers' */
  --tl-beat-r-compact: 1.6px; --tl-beat-r-wide: 1.8px; --tl-beat-flash: 200ms;
  --tl-bar-r-compact: 2.8px; --tl-bar-r-wide: 3px; --tl-phrase-r: 3.4px;
  --tl-hit-size-compact: 12px; --tl-hit-size-wide: 13px; --tl-hit-ring-gap: 2.5px;   /* a marked hit's ring outside it */
  --tl-music-row-compact: 30px; --tl-music-row-wide: 22px;
  /* H and I (E233, lsrc:4): the songs' wave and names, the clips' sound, the ruler, the playhead and the whole film */
  --tl-wave-bar-width-compact: 1.8px; --tl-wave-bar-width-wide: 2.2px;
  --tl-wave-bar-gap-compact: 2.1px; --tl-wave-bar-gap-wide: 3.7px;
  --tl-wave-alpha-compact: .85; --tl-wave-alpha-wide: .9;
  --tl-wave-reach-compact: .92; --tl-wave-reach-wide: .9;
  --tl-song-name-icon: 12px;
  --tl-song-name-radius-compact: 6px; --tl-song-name-radius-wide: 5px;
  --tl-song-name-pad-left: 4px; --tl-song-name-pad-right: 6px;   /* its ground is --tl-scrim, a label's */
  --tl-sound-wave: var(--track-audio); --tl-sound-wave-off: #7f95b5;
  --tl-sound-wave-alpha-compact: .75; --tl-sound-wave-alpha-wide: .9; --tl-sound-wave-off-alpha: .3;
  --tl-sound-row-h: 24px; --tl-sound-row-off-h: 22px; --tl-sound-row-folded-h: 14px;
  --tl-sound-off-fill: #25303f; --tl-sound-off-text: #c9d6ea;
  --tl-ruler-font-compact: 12px ui-sans-serif, system-ui; --tl-ruler-font-wide: 11px ui-sans-serif, system-ui;
  --tl-ruler-text-compact: #8a8a8a; --tl-ruler-text-wide: #8b939e; --tl-ruler-label-gap: 64px;
  --tl-head-label-offset: 12px; --tl-head-width: 1.5px; --tl-head-alpha: .9;
  --tl-overview-height-compact: 6px; --tl-overview-height-wide: 30px; --tl-overview-radius: 3px;
  --tl-overview-track: #1d1d1d; --tl-overview-window: #4a4a4a;
  /* M and N (E235, lsrc:4): a desk's timeline tools from 1100 px and its transport's chips (their edge --border, words
     --muted) */
  --tl-desktop-tools-from: 1100px; --tl-toolbar-font-size: 12px; --tl-toolbar-icon-size: 13px; --tl-toolbar-gap: 16px;
  --tl-transport-chip-font-size: 13px; --tl-transport-chip-radius: 8px; --tl-transport-chip-padding: 6px 8px;
  /* K, L and O (E236, lsrc:5): the rows' names beside the time, the note at the playhead, a phone's transport and actions */
  --tl-header-leading-compact: 12px; --tl-header-leading-wide: 60px;
  --tl-header-trailing-compact: 32px; --tl-header-trailing-wide: 0px;
  --tl-header-label-size-compact: 12px; --tl-header-label-size-wide: 11px;
  --tl-header-main-size-compact: 12px; --tl-header-main-size-wide: 13px;   /* a phone's 12 px floor */
  --tl-header-main-weight: 700; --tl-header-secondary: #8a8a8a; --tl-header-off-alpha: .45; --tl-header-icon-size: 14px;
  --tl-header-name-gap: 6px; --tl-header-cell-min-width: 44px;   /* shared name/icon slots; row height stays the lane's */
  --tl-header-width-compact: 28px; --tl-header-width-wide: 60px; --tl-header-letter-space: .06em;   /* the names' column */
  --note-width: 250px; --note-inset: 14px; --note-padding-compact: 7px 10px; --note-padding-wide: 10px;
  --note-fill: var(--raised); --note-border: var(--border);   /* a card on the sheet, as the sketch's surface */
  --phone-action-height: 40px; --phone-action-border: #333; --phone-action-icon-size: 16px; --phone-action-weight: 600;
  --phone-transport-fill: #161616; --phone-play-fill: #1f1f1f; --phone-play-text: #f2f0e9; --phone-timecode: var(--track-video);
  --agent-connect-radius: 9px;   /* P (E236): the white Connect of the Chat column with no Claude connected */
  --proposal-outline: #9aa3ad;   /* P (E236): a Suggested card's dashed edge, neutral: a proposal, not a problem */
  /* Motion (A23, Mattias 2026-09-29: "känns åvran stel"): what a person does moves, from where it was to where it
     lands, never in the way. A press answers at once, a panel or a view in about a quarter second. Reduced motion
     sets the moving durations to 0 below. */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-press: 110ms;   /* a button's own answer to a finger */
  --dur-quick: 180ms;   /* a fade, a chip, a line that comes */
  --dur-panel: 280ms;   /* a panel that opens or closes, a page that changes */
  --press-scale: .97;
  --lift: 0 6px 18px var(--shadow);   /* what is picked or held floats a little */
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-quick: 0ms; --dur-panel: 0ms; --press-scale: 1; }
}

/* Readable phone notes and metadata, shared by the edge pages and Studio. Desktop keeps its scale. */
@media (max-width: 899px) {
  :root { --button-h: 40px; --button-h-small: 40px; --button-reach: 100%; --menu-row-h: 44px; }   /* a thumb's targets */
  body :is(.note, .hint, .tag, .rail-title, .media-where, .media-song-meta, .media-again,
    .shot-range, .shot-chip, .source-bar .sb-word, .source-bar .sb-caption,
    .still .still-tile, .vcard .vauthor, .vcard .vhead .hint, .media-songs-head .part-seg button,
    .fs-time, .version-line, .status, .viewer-hud, .cut-next-tag) { font-size: 12px; }
}