/* Web Awesome components as CMBOT uses them: layout glue + ::part() styling. Design tokens live in cmbot-theme.css. */

/* A read-only, five-star editorial estimate shared by clip cards and lists. */
.clip-viral-score { display: inline-flex; max-width: 100%; vertical-align: middle; }
.clip-viral-score[data-score-tier=low] { --clip-score-color: var(--wa-color-danger-on-quiet); }
.clip-viral-score[data-score-tier=fair] { --clip-score-color: var(--wa-color-warning-on-quiet); }
.clip-viral-score[data-score-tier=good] { --clip-score-color: light-dark(var(--wa-color-blue-30), var(--wa-color-blue-80)); }
.clip-viral-score[data-score-tier=strong] { --clip-score-color: var(--wa-color-success-on-quiet); }
.clip-viral-score[data-score-tier=excellent] { --clip-score-color: light-dark(var(--wa-color-purple-30), var(--wa-color-purple-80)); }
.clip-score-pill {
  display: inline-flex; align-items: center; gap: var(--wa-space-2xs); max-width: 100%;
  padding: var(--wa-space-3xs) var(--wa-space-xs); border-radius: var(--wa-border-radius-pill);
  color: var(--clip-score-color); background: color-mix(in srgb, var(--clip-score-color) 10%, var(--wa-color-surface-default));
  font-size: var(--wa-font-size-s); line-height: var(--wa-line-height-normal); white-space: nowrap;
}
.clip-score-pill:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
.clip-score-pill wa-rating { --symbol-color-active: var(--clip-score-color); --symbol-color: color-mix(in srgb, var(--clip-score-color) 30%, var(--wa-color-surface-border)); }
.clip-score-value { font-weight: var(--wa-font-weight-bold); font-variant-numeric: tabular-nums; }
/* ---- wa-button ------------------------------------------------------------------------------------------------
   Buttons are drawn by the library: variant (brand | neutral | danger), appearance (accent | filled | outlined |
   plain) and size (xs | s | m | l) are set by ui.js from the legacy modifier classes. This block only handles what
   the library leaves to the page: filling a host that a layout stretched, and compact/icon-only sizing. */
wa-button { vertical-align:middle; max-width:100%; }
wa-button::part(base) { width:100%; }
wa-button.btn--block { display:flex; width:100%; }
wa-button[disabled] { cursor:not-allowed; }

/* A label never overflows its button: it wraps (the button grows a line) instead of being clipped. The library fixes the
   height and a one-line line-height; keep the single-line size and let longer text take more lines. */
wa-button:not([data-ui-layout=custom])::part(base) {
  height:auto; min-height:var(--wa-form-control-height); min-width:0; max-width:100%;
  white-space:normal; text-align:center; line-height:1.25;
  padding-block:calc((var(--wa-form-control-height) - 1.25em) / 2);
}
wa-button:not([data-ui-layout=custom])::part(label) { min-width:0; overflow-wrap:break-word; }

/* A button that holds only a wa-icon is square (the library flags it with :state(icon-button)). */
wa-button:state(icon-button) { flex:none; }
wa-button:state(icon-button):not([data-ui-layout=custom])::part(base) { aspect-ratio:1; padding-inline:0; width:auto; min-width:var(--wa-form-control-height); }

/* Layout-only wa-buttons (nav items, tiles, canvas handles, cards): they keep the library's keyboard / focus /
   disabled behaviour but lay their own content out, so the inner button passes the host's layout through. */
wa-button[data-ui-layout=custom]::part(base) {
  display:inherit; align-items:inherit; justify-content:inherit; flex-direction:inherit; flex-wrap:inherit;
  place-items:inherit; place-content:inherit; justify-items:inherit; align-content:inherit; overflow:inherit;
  grid-template-columns:subgrid; grid-template-rows:subgrid; grid-auto-flow:inherit;
  grid-column:1 / -1; grid-row:1 / -1; flex:1 1 auto;
  width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:inherit;
  color:inherit; background:transparent; box-shadow:none; font:inherit; gap:inherit;
  line-height:inherit; text-align:inherit; white-space:inherit;
}
wa-button[data-ui-layout=custom]::part(label) { display:contents; }
wa-button[data-ui-layout=custom]::part(start), wa-button[data-ui-layout=custom]::part(end) { display:none; }
/* ---- form controls --------------------------------------------------------------------------------------------
   Look = library tokens (--wa-form-control-*, set once in cmbot-theme.css); a field that needs another look gets
   the token on its own host, never a ::part() colour override. */
wa-input, wa-select, wa-textarea { display:block; min-width:0; }
:is(wa-input, wa-select, wa-textarea):is(.input, .select, .textarea) { width:100%; }
wa-textarea::part(textarea) { min-height:5.5em; }

/* A label a design doesn't show is still announced: visually hidden, never removed. */
[data-ui-label=hidden]::part(form-control-label), [data-ui-label=hidden]::part(label) {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

wa-checkbox, wa-switch { flex:none; vertical-align:middle; }
wa-slider { display:block; flex:1 1 auto; min-width:60px; }
/* Web Awesome centres the thumb on the track's ends, so at the minimum / maximum half of it hung outside the slider's
   box, over the label or button beside it. The track is inset by half a thumb: the thumb always stays inside. */
wa-slider::part(slider) { padding-inline: calc(var(--thumb-width) / 2); }
wa-color-picker { flex:none; }

/* ---- feedback ---- */
wa-spinner.spinner { font-size:1rem; --indicator-color:var(--primary); --track-width:2px; flex:0 0 auto; }
wa-spinner.spinner--lg { font-size:1.5rem; }
/* Skeletons (core.js skeleton()): shaped like what they stand in for. Web Awesome draws the bar fully rounded, which
   turned pictures and blocks into capsules: lines get a small radius, pictures their card's, pills stay pills. The
   colour is the library's neutral fill, visible on cards and page in both light and dark. */
wa-skeleton.skeleton { --color: var(--wa-color-neutral-fill-normal); --sheen-color: var(--wa-color-neutral-fill-quiet); }
wa-skeleton.skeleton::part(indicator) { border-radius: var(--wa-border-radius-s); }
wa-skeleton.skeleton--text { height: var(--wa-space-s); width: 70%; }
wa-skeleton.skeleton--title { height: var(--wa-space-m); width: 50%; }
wa-skeleton.skeleton--line { height: var(--wa-form-control-height); width: 100%; }
wa-skeleton.skeleton--block { height: var(--wa-space-3xl); width: 100%; }
wa-skeleton.skeleton--thumb { aspect-ratio: 16 / 9; width: 100%; height: auto; }
wa-skeleton.skeleton--phone { aspect-ratio: 9 / 16; width: 100%; height: auto; }
wa-skeleton.skeleton--stat { height: 4rem; }
wa-skeleton.skeleton--pill { height: var(--wa-space-l); width: 5rem; }
:is(wa-skeleton.skeleton--thumb, wa-skeleton.skeleton--phone, wa-skeleton.skeleton--stat, wa-skeleton.skeleton--block)::part(indicator) { border-radius: var(--wa-border-radius-m); }
wa-skeleton.skeleton--pill::part(indicator) { border-radius: var(--wa-border-radius-pill); }
.skeleton-card { display: flex; flex-direction: column; gap: var(--wa-space-s); padding: var(--wa-space-m);
  background: var(--wa-color-surface-default); border: var(--wa-border-width-s) solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); }
.calendar-loading-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
wa-button.story-media-drop::part(base) { border-style:dashed; padding:var(--wa-space-s); }
.story-media-dropzone.is-dragover wa-button::part(base) {
  background:var(--wa-color-neutral-fill-quiet); border-color:var(--wa-color-neutral-border-loud);
}
wa-tooltip.cmbot-info-tip { --max-width:min(340px, calc(100vw - 20px)); white-space:pre-line; font-size:var(--wa-font-size-xs); line-height:1.55;
  --wa-tooltip-background-color:var(--wa-color-surface-raised); --wa-tooltip-content-color:var(--wa-color-text-normal); --wa-tooltip-border-color:var(--wa-color-surface-border); }
wa-details { --spacing:var(--wa-space-s); font-size:var(--wa-font-size-s); }
wa-details.shape-details::part(base) { border:0; }
@media (prefers-reduced-motion:reduce) {
  :root { --wa-transition-fast:0ms; --wa-transition-normal:0ms; --wa-transition-slow:0ms; }
}
/* ---- dialog / drawer / toast ---------------------------------------------------------------------------------
   The library owns the top layer, focus trap, Escape, backdrop and focus restore. Sizes use its documented
   custom properties. */
wa-dialog.modal { --width:min(640px, 92vw); }
wa-dialog.modal--sm { --width:min(440px, 90vw); }
wa-dialog.modal--md { --width:min(640px, 92vw); }
wa-dialog.modal--lg { --width:min(880px, 94vw); }
wa-dialog.modal--wide { --width:min(960px, 94vw); }
wa-dialog.modal--xl { --width:min(1340px, 96vw); }
wa-dialog.modal--full { --width:min(1600px, 98vw); }
wa-drawer.drawer { --size:min(420px, 100vw); }
wa-dialog::part(dialog) { max-height:min(88vh, 100% - 2rem); }
wa-toast { z-index:10000; --width:min(420px, calc(100vw - 24px)); }
/* Layout cards (.card, .sb-card, .stat-card, .video-card): the legacy markup lays its own content out, so the
   library card contributes its surface token and passes the body through. */
wa-card[data-ui-layout=custom] { --spacing:0; }
wa-card[data-ui-layout=custom]::part(body) { display:contents; padding:0; }
/* Empty start/end slots are flex-friendly in the library defaults, but must not
   consume grid cells in CMBOT's specialised card buttons. */
wa-button[data-ui]::part(start), wa-button[data-ui]::part(end) { display:none; }
wa-button[data-ui]:has(> [slot=start])::part(start), wa-button[data-ui][with-start]::part(start),
wa-button[data-ui]:has(> [slot=end])::part(end), wa-button[data-ui][with-end]::part(end) { display:flex; }
/* Transcript rows stay compact and inherit the cut / hidden / active line colours: a chrome-less field. */
wa-textarea.subed__text {
  --wa-form-control-background-color:transparent; --wa-form-control-border-width:0; --wa-form-control-border-radius:0;
  --wa-form-control-padding-inline:0; --wa-form-control-padding-block:var(--wa-space-2xs);
  --wa-form-control-value-color:inherit; font:inherit; line-height:1.5;
}
wa-textarea.subed__text::part(textarea) {
  min-height:0;
  direction:inherit;
  text-align:start;
  unicode-bidi:isolate;
}
/* Transcript actions use library buttons/icons, with timecodes kept on one line. */
wa-button.subed__time { flex: none; }
wa-button.subed__time::part(label) { font-family: var(--wa-font-family-code); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Badges and tags never spill out of their box: a long label (a folder path, a story title) ends in an ellipsis and the
   element keeps the full text in its title. Clipped on the inline axis only, so accents (É) above the line stay whole.
   wa-badge prints its label in the base part; wa-tag's content slot is
   display:contents, so a tag's text goes in a light-DOM span (.wa-tag-text) that truncates. */
wa-badge { max-width: 100%; min-width: 0; }
wa-badge::part(base) { min-width: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; }

wa-tag { max-width: 100%; min-width: 0; }
wa-tag > .wa-tag-text { min-width: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================================================
   UI KIT (js/ui-kit.js) — the shared building blocks. Spacing, alignment and truncation are decided here, once.
   ===================================================================================================== */
/* icon actions: one size, a pressed toggle drawn in the accent colour */
wa-button.kit-action { flex: none; }
wa-button.kit-action[aria-pressed=true] { color: var(--wa-color-brand-on-quiet); }
/* header: lead · title (takes the free width, wraps or truncates) · actions on the title's line */
.kit-head { display: flex; align-items: center; gap: var(--wa-space-xs); min-width: 0; }
.kit-head > :not(.kit-head__title, .kit-head__titles, .kit-head__actions) { flex: none; }
.kit-head__titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--wa-space-3xs); }
.kit-head__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.kit-head__title.is-truncated { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }
.kit-head__sub { margin: 0; font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); }
.kit-head__actions { flex: none; display: flex; align-items: center; gap: var(--wa-space-3xs); margin-inline-start: auto; }
/* meta line: facts that wrap as a group, the closing action on the end edge */
.kit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); min-width: 0; font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); }
.kit-meta__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--wa-space-xs); }
/* a count on a button */
.kit-count__slot { display: inline-flex; }
wa-badge.kit-count { font-size: var(--wa-font-size-2xs); }
/* thumbnails */
.kit-thumb { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: 3rem; height: 3rem; border-radius: var(--wa-border-radius-m); background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-quiet); }
.kit-thumb--tall { width: 2.25rem; height: 4rem; }
.kit-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* list rows */
.kit-row { display: flex; gap: var(--wa-space-s); align-items: flex-start; min-width: 0; padding: var(--wa-space-s); border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-default); border: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.kit-row.is-link { cursor: pointer; }
.kit-row.is-link:hover { border-color: var(--wa-color-neutral-border-normal); }
.kit-row--danger { border-color: var(--wa-color-danger-border-quiet); }
.kit-row--brand { border-color: var(--wa-color-brand-border-quiet); }
.kit-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--wa-space-2xs); }
.kit-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); min-width: 0; }
.kit-row__top > :not(.kit-row__title) { flex: none; }
.kit-row__title { flex: 1 1 10rem; min-width: 0; font-weight: var(--wa-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kit-row__meta { font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.kit-row wa-progress-bar { --track-height: var(--wa-space-2xs); margin-top: var(--wa-space-2xs); }
/* group headings */
.kit-section { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-xs); min-height: var(--wa-form-control-height); }
.kit-section__actions { display: flex; align-items: center; gap: var(--wa-space-2xs); }
/* empty states */
.kit-empty { display: flex; flex-direction: column; align-items: center; gap: var(--wa-space-xs); padding: var(--wa-space-l) var(--wa-space-s); text-align: center; color: var(--wa-color-text-quiet); }
.kit-empty p { margin: 0; font-size: var(--wa-font-size-s); }
.kit-empty__ic { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-neutral-fill-quiet); }
.kit-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wa-space-xs); }
.kit-empty__title { margin: 0; color: var(--wa-color-text-normal); }
.kit-empty__art { display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; color: var(--wa-color-text-quiet); }
.kit-empty__art svg, .kit-empty__art wa-icon { width: 100%; height: 100%; font-size: 6rem; }
/* a whole view is empty: more room, a heading, centred in a readable measure */
.kit-empty--page { max-width: 28rem; margin-inline: auto; padding-block: var(--wa-space-3xl); gap: var(--wa-space-s); }
.kit-empty--page p { font-size: var(--wa-font-size-m); }
/* rows that open something: a visible focus ring for keyboard users; a selected option is drawn in the brand colour */
.kit-row.is-link:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
.kit-row.is-selected { border-color: var(--wa-color-brand-border-normal); background: var(--wa-color-brand-fill-quiet); }
/* tiles: picture on top, title (two lines), meta; one button */
wa-button.kit-tile { flex: none; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--wa-space-xs);
  padding: var(--wa-space-s); text-align: start; color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default); border: var(--wa-border-width-s) solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); }
wa-button.kit-tile:hover { border-color: var(--wa-color-neutral-border-normal); background: var(--wa-color-neutral-fill-quiet); }
wa-button.kit-tile:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
.kit-tile__media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--wa-border-radius-m); background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-quiet); }
.kit-tile--tall .kit-tile__media { aspect-ratio: 9 / 16; }
.kit-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-tile__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); line-height: var(--wa-line-height-condensed); min-height: calc(2em * var(--wa-line-height-condensed)); }
.kit-tile__meta { margin-top: auto; font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); }
/* a row inside a card: no box of its own, a divider between rows */
.kit-row--flat { background: none; border: 0; border-radius: 0; padding-inline: 0; border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.kit-row--flat:last-child { border-bottom: 0; }
/* a long task in progress (taskProgress): stage + %, the current step with its spinner on the first line, a real bar,
   the finished steps as a quiet disclosure (not a field) */
.kit-progress { display: flex; flex-direction: column; gap: var(--wa-space-xs); min-width: 0; font-size: var(--wa-font-size-s); }
.kit-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wa-space-xs); }
.kit-progress__pct { font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); font-variant-numeric: tabular-nums; }
.kit-progress__now { display: flex; align-items: flex-start; gap: var(--wa-space-xs); }
.kit-progress__now wa-spinner { flex: none; margin-block-start: calc((1lh - 1em) / 2); }
.kit-progress__now-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kit-progress wa-progress-bar { --track-height: var(--wa-space-2xs); }
.kit-progress wa-progress-bar::part(indicator) { transition: width 0.6s ease; }
wa-details.kit-progress__done { font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); }
wa-details.kit-progress__done::part(base) { border: 0; background: none; }
wa-details.kit-progress__done::part(header) { padding: 0; color: var(--wa-color-text-quiet); }
wa-details.kit-progress__done::part(content) { padding: var(--wa-space-2xs) 0 0; }

/* Story maker — press-and-hold selection rectangle: drawn in screen coordinates (it may start beside the story) */
.deco-marquee--screen { position: fixed; z-index: 1000; }
.post-preview__frame.is-marquee { cursor: crosshair; }
.deco-layer { -webkit-touch-callout: none; }

/* Story assistant — the progress block of a running request, with its Cancel button on the end edge */
.story-agent-cancel { align-self: flex-end; }

/* Story maker music — the library block and the Instagram block are separate: only the latter needs the connection */
.mu-ig.is-disabled { opacity: .5; pointer-events: none; }
.mu-row.is-current .mu-title { color: var(--wa-color-brand-text-normal, var(--primary)); }

/* Réglages: the «Stockage» entry (another screen, not a panel) reads like the tabs above it */
.settings-storage-link { width: 100%; }
.settings-storage-link::part(base) { justify-content: flex-start; padding-inline: calc(var(--wa-space-m) + var(--wa-space-s)); }   /* lines its icon up with the tab icons */
.settings-storage-link::part(label) { display: flex; align-items: center; gap: var(--wa-space-2xs); }

/* Réglages → Organisation: the colour chip next to a colour field */
.org-swatch { flex: none; inline-size: var(--wa-space-xl); block-size: var(--wa-space-xl); border: 1px solid var(--border-strong); border-radius: var(--wa-border-radius-s); }

/* A native reel reshare: the shared reel fills the story (Instagram draws the live reel; the studio shows its cover) */
.deco-chip--ig-media.is-full { inline-size: 100%; max-inline-size: none; block-size: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; cursor: grab; touch-action: none; }
.deco-chip--ig-media.is-full .ig-post__img.is-full { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; background-size: cover; background-position: center; }


/* Studio: the zones of the source clips are taken from (timeline + list) */
.studio-ranges { display: grid; gap: var(--wa-space-m); }
.studio-ranges.hidden { display: none; }
.ranges-track { position: relative; block-size: var(--wa-space-2xl); border-radius: var(--wa-border-radius-m); background: var(--wa-color-neutral-fill-quiet);
  border: 1px solid var(--wa-color-surface-border); cursor: crosshair; touch-action: none; user-select: none; overflow: hidden; }
.ranges-zone { position: absolute; inset-block: 0; background: color-mix(in srgb, var(--wa-color-text-normal) 24%, transparent);
  border-inline: 1px solid var(--wa-color-text-normal); }
.ranges-zone.is-draft { background: color-mix(in srgb, var(--wa-color-text-normal) 14%, transparent); border-style: dashed; }
.ranges-zone__edge { position: absolute; inset-block: 0; inline-size: var(--wa-space-s); cursor: ew-resize; }
.ranges-zone__edge--start { inset-inline-start: 0; }
.ranges-zone__edge--end { inset-inline-end: 0; }
.ranges-zone__edge::after { content: ""; position: absolute; inset-block: var(--wa-space-xs); inset-inline: 50% auto; inline-size: 2px; border-radius: 1px; background: var(--wa-color-text-normal); }
.ranges-track__head { position: absolute; inset-block: 0; inline-size: 2px; background: var(--wa-color-text-normal); pointer-events: none; }
.ranges-track__pending { position: absolute; inset-block: 0; inline-size: 2px; background: var(--wa-color-text-quiet); pointer-events: none; }
.ranges-list { display: grid; gap: var(--wa-space-xs); }
.ranges-row { display: flex; align-items: center; gap: var(--wa-space-s); flex-wrap: wrap; min-inline-size: 0; }
.ranges-row .ranges-time { flex: 0 0 auto; inline-size: 11ch; min-inline-size: 0; }
.studio-ranges { margin-block-start: var(--wa-space-m); }
.studio-ranges .kit-head__title { font-size: var(--wa-font-size-m); }
.ranges-row__len { margin-inline-start: auto; }
.ranges-track-wrap { position: relative; }
.ranges-tip { position: absolute; inset-block-end: calc(100% + var(--wa-space-xs)); z-index: 2; display: grid; justify-items: center; gap: var(--wa-space-3xs);
  padding: var(--wa-space-2xs); border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-raised); border: 1px solid var(--wa-color-surface-border);
  box-shadow: var(--wa-shadow-m); pointer-events: none; }
.ranges-tip.hidden { display: none; }
.ranges-tip__video { display: block; inline-size: 11rem; max-inline-size: 100%; max-block-size: 9rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-neutral-fill-quiet); object-fit: contain; }
.ranges-tip__time { color: var(--wa-color-text-normal); font-size: var(--wa-font-size-xs); }
.ranges-tip__frame { display: block; border-radius: var(--wa-border-radius-s); background-repeat: no-repeat; background-color: var(--wa-color-neutral-fill-quiet); }
.ranges-tip__frame.hidden, .ranges-tip__video.hidden { display: none; }

/* Phone preview: a b-roll's transition (light leak, film strip, glitch) is the real clip, screen-blended over the footage like the render does */
.phone-frame__broll[data-style] { transition: none; }
.phone-frame__broll .phone-frame__broll-vid {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.phone-frame__broll-leak {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;                       /* with the cutaway, above it by DOM order, below stickers / dates / logo — the render blends it in right after the cutaway */
}
/* hidden = invisible, NOT display:none: a display:none video is not kept ready, so the first frames of a transition arrived late (a hitch).
   The layer stays in the page, loaded and parked on its first frame, and just stops showing. */
.phone-frame__broll-leak.hidden { opacity: 0; }

/* B-roll row: the transition clip chosen for the cutaway, looping in a small square next to its picker */
/* A transparent wrapper (its own dark background bled through the anti-aliased rounded border as dark corners) with the video clipped to the inner radius. */
.broll-fx { flex: 0 0 auto; inline-size: var(--wa-space-2xl); block-size: var(--wa-space-2xl); padding: 0; cursor: pointer; border-radius: var(--wa-border-radius-s);
  overflow: hidden; background: transparent; border: 1px solid var(--wa-color-surface-border); }
.broll-fx:hover { border-color: var(--wa-color-neutral-border-loud); }
.broll-fx:focus-visible { outline: 2px solid var(--wa-color-text-normal); outline-offset: 2px; }
.broll-fx__video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: calc(var(--wa-border-radius-s) - 1px); }

/* The transition picker: every clip of the style, looping; the chosen one is ringed */
.broll-fxpick { gap: var(--wa-space-l); }
.broll-fxpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--wa-space-s); }
.broll-fxpick__video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.broll-fxpick__opt { border-radius: var(--wa-border-radius-m); }
.broll-fxpick__opt.is-on { outline: 2px solid var(--wa-color-text-normal); outline-offset: 2px; }
.broll-fx.is-empty .broll-fx__video { visibility: hidden; }

/* the stand-in at the end of a long transcript: the lines below are mounted as you scroll to them */
.subed__more { padding: var(--wa-space-s) var(--wa-space-m); text-align: center; }
/* Direction follows the content of each field/label, keeping UI controls and
   timecodes in their original order. Exported story/clip artwork is excluded. */
[data-text-direction="rtl"]::part(input),
[data-text-direction="rtl"]::part(textarea),
[data-text-direction="rtl"]::part(display-input),
[data-text-direction="rtl"]::part(label) { direction: rtl; text-align: start; unicode-bidi: isolate; }
[data-text-direction="ltr"]::part(input),
[data-text-direction="ltr"]::part(textarea),
[data-text-direction="ltr"]::part(display-input),
[data-text-direction="ltr"]::part(label) { direction: ltr; text-align: start; unicode-bidi: isolate; }

/* the transcript's retry button while the AI re-listens to a line */
.subed__retry.is-busy wa-icon { animation: spin 1s linear infinite; }
/* ...and while it waits its turn in the queue */
.subed__retry.is-queued wa-icon { opacity: .45; animation: subed-queued 1.4s ease-in-out infinite; }
@keyframes subed-queued { 50% { opacity: .9; } }
/* ...and the whole line fills like a progress bar (--retry, 0 → 1, set by the editor) behind its text */
.subed__row.is-retrying { position: relative; isolation: isolate; }
.subed__row.is-retrying::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: -1; pointer-events: none;
  width: calc(var(--retry, 0) * 100%);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-inline-end: 2px solid var(--primary);
  transition: width .12s linear, opacity .3s ease .05s;
}
.subed__row.is-retrying .subed__text { opacity: .6; }

/* the gap between two subtitles: a dashed line on the row's top (or bottom) edge, and on hover or focus the button that fills it */
.subed__row { position: relative; }
.subed__gap { position: absolute; inset-inline: 0; top: 0; z-index: 3; height: var(--wa-space-l); display: flex; justify-content: center; align-items: flex-start; }
.subed__gap--after { top: auto; bottom: 0; align-items: flex-end; }
.subed__gap.hidden { display: none; }
.subed__gap-line { position: absolute; inset-inline: var(--wa-space-m); top: 0; border-top: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent); }
.subed__gap--after .subed__gap-line { top: auto; bottom: 0; }
.subed__gap-bar { position: absolute; inset-inline-start: var(--wa-space-m); top: 0; height: 2px; width: calc(var(--gap-p, 0) * (100% - 2 * var(--wa-space-m))); background: var(--primary); transition: width .2s linear; }
.subed__gap--after .subed__gap-bar { top: auto; bottom: 0; }
.subed__gap-btn { position: relative; opacity: 0; translate: 0 -50%; transition: opacity .15s ease; }
.subed__gap--after .subed__gap-btn { translate: 0 50%; }
.subed__gap--first .subed__gap-btn { translate: 0 var(--wa-space-3xs); }
.subed__gap:hover .subed__gap-btn, .subed__gap:focus-within .subed__gap-btn, .subed__gap.is-filling .subed__gap-btn { opacity: 1; }
.is-gap-busy .subed__gap:not(.is-filling) .subed__gap-btn { pointer-events: none; opacity: 0; }

/* the retranscription to review: what the AI proposes, ticked or not, line by line */
.subed__review { display: flex; flex-direction: column; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.subed__review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wa-space-xs) var(--wa-space-m); min-width: 0; }
.subed__review-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); }
.subed__review-spacer { flex: 1 1 auto; }
.subed__review-list { display: flex; flex-direction: column; max-height: 24rem; overflow: auto; border-top: 1px solid var(--border); }
.subed__review-row { display: grid; grid-template-columns: auto 7rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--wa-space-s); align-items: start; padding: var(--wa-space-xs) 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); min-width: 0; }
.subed__review-row.is-suspect { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.subed__review-kind { color: var(--muted); }
.subed__review-line { overflow-wrap: anywhere; }
.subed__review-old .subed__review-line { text-decoration: line-through; opacity: .6; }
@media (max-width: 640px) { .subed__review-row { grid-template-columns: auto minmax(0, 1fr); } .subed__review-old, .subed__review-new { grid-column: 2; } }

/* « Tout retranscrire »: one bar for the whole extrait, under the tools */
.subed__batch { display: flex; align-items: center; gap: var(--wa-space-m); padding: var(--wa-space-xs) var(--wa-space-m); min-width: 0; }
.subed__batch-bar { flex: 1 1 auto; min-width: 0; }
.subed__batch-text { flex: none; white-space: nowrap; }

/* a hand-picked extrait: « Début » / « Fin » on each line of the full transcript, and the bar that follows the two marks */
.subed__tail { display: flex; align-items: center; gap: var(--wa-space-2xs); min-width: 0; }
.subed__marks { display: flex; gap: var(--wa-space-3xs); opacity: 0; transition: opacity .12s; }
.subed__row:hover .subed__marks, .subed__row:focus-within .subed__marks, .subed.is-drafting .subed__marks,
.subed__row.is-clip-start .subed__marks, .subed__row.is-clip-end .subed__marks { opacity: 1; }
@media (hover: none) { .subed__marks { opacity: 1; } }
.subed__row.is-clip-start { box-shadow: inset 0 2px 0 var(--primary); }
.subed__row.is-clip-end { box-shadow: inset 0 -2px 0 var(--primary); }
.subed__row.is-clip-start.is-clip-end { box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary); }
.subed__row.is-clip-start, .subed__row.is-clip-end, .subed__row.is-clip-range { background: var(--primary-soft); }
.subed__draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-m); padding: var(--wa-space-xs) var(--wa-space-m); border: 1px solid var(--primary); border-radius: var(--r-sm); background: var(--primary-soft); min-width: 0; }
.subed__draft[hidden] { display: none; }
.subed__draft-title { font-weight: 600; }
.subed__draft-part { font-variant-numeric: tabular-nums; white-space: nowrap; }
.subed__draft-gap { flex: 1 1 auto; }

/* the logo's centred positions (the corners are in styles.css): same margin as the corners, centred on the frame */
.phone-frame__logo--top-center { top: 3.7cqw; left: 50%; translate: -50% 0; }
.phone-frame__logo--bottom-center { bottom: 3.7cqw; left: 50%; translate: -50% 0; }

/* Cadrage: the defaults panel's contact sheet — one mini phone per source format, its picture placed by the same window the render uses */
.phone-frame--blackpad { background: #000; }
.framing-panel__hint { margin: 0; }
.framing-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--wa-space-m) var(--wa-space-s); }
.framing-tile { margin: 0; display: flex; flex-direction: column; gap: var(--wa-space-2xs); min-width: 0; }
.framing-phone { position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate; background: #000;
  border-radius: var(--wa-border-radius-m); box-shadow: 0 0 0 1px var(--border); }
.framing-phone__back { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  filter: blur(6px) brightness(.45); transform: scale(1.15); }
.framing-phone.is-outside:not(.is-black) .framing-phone__back { display: block; }
.framing-phone__stage { position: absolute; left: 0; top: 0; transform-origin: top left; }
.framing-phone.is-outside .framing-phone__stage { box-shadow: 0 var(--wa-space-2xs) var(--wa-space-m) rgba(0, 0, 0, .6); }
.framing-phone__pic { display: block; width: 100%; height: 100%; }
.framing-tile__cap { display: flex; flex-direction: column; min-width: 0; font-size: var(--wa-font-size-xs); line-height: 1.3; }
.framing-tile__hint, .framing-tile__share { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.framing-panel__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--wa-space-m); }
.framing-legend { display: inline-flex; align-items: center; gap: var(--wa-space-xs); flex-wrap: wrap; }
.framing-legend__dot { display: inline-block; width: var(--wa-space-s); height: var(--wa-space-s); border-radius: 50%; }

/* Couleur d'accent: the palette the AI picks from, then a free colour */
.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); }
.accent-row.is-inactive .accent-swatch { opacity: .55; }
.accent-swatch { padding: var(--wa-space-3xs); }
.accent-swatch__dot { display: block; width: var(--wa-space-xl); height: var(--wa-space-xl); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .55); }
.accent-swatch[aria-pressed="true"] .accent-swatch__dot { outline: 2px solid var(--primary); outline-offset: 2px; }
.accent-row__custom { display: inline-flex; align-items: center; gap: var(--wa-space-xs); color: var(--muted); font-size: var(--wa-font-size-s); }
.accent-picker { width: var(--wa-space-2xl); height: var(--wa-space-xl); padding: 0; border: 0; background: none; cursor: pointer; }
.accent-note { margin: 0; }

/* Réglages › Création: the defaults editor — a sticky preview, a footer on every card, and a save bar that says whether there is anything to save */
.defaults-editor { gap: var(--wa-space-xl); align-items: flex-start; }
.defaults-preview { gap: var(--wa-space-xs); flex: 0 0 auto; align-items: center; position: sticky; top: var(--wa-space-m); }
.defaults-group { margin-top: var(--wa-space-s); }
.defaults-apply { flex-wrap: wrap; gap: var(--wa-space-s); margin-top: var(--wa-space-m); padding-top: var(--wa-space-s);
  border-top: 1px solid var(--border); }
.defaults-apply__hint { flex: 1 1 14rem; min-width: 0; }
.defaults-bar { position: sticky; bottom: 0; z-index: 2; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--wa-border-radius-l); }
.defaults-bar__status { color: var(--muted); font-size: var(--wa-font-size-s); }
.defaults-bar__status.is-dirty { color: var(--text); font-weight: var(--wa-font-weight-semibold); }

/* A long panel name yields space to its independent switch and chevron. */
.clip-panel__toggle { min-inline-size: 0; gap: var(--wa-space-xs); }
.clip-panel__toggle > wa-icon { flex: 0 0 auto; color: var(--wa-color-text-quiet); }
.clip-panel__toggle .kit-head__actions { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--wa-space-s); }
/* Settings uses four short tabs; secondary forms stay folded and lazy. */
.settings-view { max-inline-size: 70rem; min-inline-size: 0; }
wa-tab-group.settings-workspace { inline-size: 100%; max-inline-size: 100%; }
wa-tab-group.settings-workspace[placement=top]::part(body) { padding-inline: 0; padding-block-start: var(--wa-space-m); }
.settings-view .settings-panel { max-inline-size: none; gap: var(--wa-space-m); }
.settings-view .settings-card { min-inline-size: 0; padding: var(--wa-space-m); }
.settings-view .settings-card__head { margin-block-end: var(--wa-space-s); gap: var(--wa-space-xs); align-items: stretch; }
.settings-view .settings-card__help { margin: 0; }
.settings-fold::part(summary) { font-size: var(--wa-font-size-m); font-weight: var(--wa-font-weight-semibold); }
.settings-fold::part(content) { padding: var(--wa-space-m); }
.settings-defaults-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-m); }
.settings-defaults-grid > * { min-inline-size: 0; }
.settings-defaults-actions { grid-column: 1 / -1; justify-content: space-between; }
.settings-view .defaults-bar.is-clean { display: none; }
.settings-view .defaults-preview wa-details { inline-size: 100%; }
.settings-view .defaults-editor { align-items: flex-start; gap: var(--wa-space-m); }
.settings-view .defaults-preview { inline-size: min(100%, 16rem); }
.settings-render-group::part(content) { padding: var(--wa-space-s); }
@media (max-width: 600px) {
  .settings-defaults-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-workspace > wa-tab wa-icon { display: none; }
  .settings-workspace > wa-tab::part(base) { padding-inline: var(--wa-space-xs); font-size: var(--wa-font-size-s); }
}

/* Studio › the generation pipeline's « Annuler » */
.pipeline__cancel { display: flex; justify-content: center; margin-top: var(--wa-space-s); }


.publication-player { width:100%; min-width:0; }
.cmp-stage:has(.publication-player:not(.hidden)) > .cmp-tl { display:none; }

.deco-chip--ig-media.is-full video { pointer-events:none; user-select:none; }