/* Brand > Editing > Create your own style, Brand > References > What we'll take from them, and the side-by-side preview
   (js/own-style.js). Uses the page's own tokens and its .seg pills; nothing here restyles the page. */
.own-style, .ref-traits { --osp-card: #5D79B8; --osp-panel: #7C9A6E; --osp-camera: #C9894B; --osp-corner: #8C6FB0; --osp-fullscreen: #2F3B57; }
.osb, .ort { display: grid; gap: 16px; min-width: 0; }
.osb-lead, .osb-plain { margin: 0; color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 13px; line-height: 1.45; }
.osb-plain { margin-top: 6px; }
.osb-field { display: grid; gap: 6px; font-size: 13px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osb-name .input { max-width: 22rem; }
.osb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.osb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.osb-row h4, .osb-pv-h, .ort-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--s-ink, var(--dk-ink, #1F1F21)); }
.osb-sub { font-weight: 400; color: var(--s-ink-2, var(--dk-t-636366, #636366)); margin-left: 4px; }
.osb-k { display: block; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); margin-bottom: 4px; }
.osb .seg, .ort .seg { max-width: 100%; }
.osb-seg .seg-opt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.osb-modes { display: grid; gap: 8px; }
.osb-mode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 160px) 42px; align-items: center; gap: 10px; }
.osb-mode-t { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.osb-mode-t i { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.osb-mode-t b { font-size: 13px; font-weight: 600; }
.osb-mode-t small { grid-column: 2; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osb-mode input[type="range"] { width: 100%; accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.osb-mode output { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.osb-capprev { margin-top: 10px; max-width: 15rem; border-radius: 10px; overflow: hidden; }
.osb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--s-hair, var(--dk-l-1f1f21a8, rgba(31,31,33,.08))); }
.osb-state { flex: 1 1 14rem; font-size: 13px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osb-preview { padding-top: 12px; border-top: 1px solid var(--s-hair, var(--dk-l-1f1f21a8, rgba(31,31,33,.08))); min-width: 0; }

/* the mode colours (timeline, chips, legend) */
.osp-m-card { background: var(--osp-card); } .osp-m-panel { background: var(--osp-panel); } .osp-m-camera { background: var(--osp-camera); }
.osp-m-corner { background: var(--osp-corner); } .osp-m-fullscreen { background: var(--osp-fullscreen); } .osp-m-document { background: #9a9a9a; }

/* the side-by-side preview */
.osp { display: grid; gap: 12px; min-width: 0; }
.osp-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.osp-col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border-radius: 12px; background: var(--s-canvas, var(--dk-b-f3f2ed, #F3F2ED)); }
.osp-col.is-mine { background: var(--s-peri-soft, rgba(135,153,195,.16)); box-shadow: inset 0 0 0 1px rgba(76,95,146,.25); }
.osp-h { margin: 0; font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.osp-tag { font-weight: 400; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--dk-paper, #fff); color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
  box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 4% 5%; overflow: hidden; }
.osp-cap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 5%; max-width: 80%; padding: 1% 2.4%; border-radius: 4px; background: rgba(20,20,22,.78);
  color: #fff; font-size: 4cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osp-cap--top { top: 5%; bottom: auto; } .osp-cap--side { left: auto; right: 4%; transform: none; }
.osp-cap--pop { background: var(--dk-paper, #fff); color: var(--dk-ink, #1F1F21); } .osp-cap--rule { background: transparent; text-decoration: underline 2px var(--osp-camera); text-shadow: 0 1px 3px var(--dk-l-000000, #000); }
.osp-cap--sweep { background: linear-gradient(90deg, rgba(135,153,195,.95) 55%, rgba(20,20,22,.78) 55%); }
.osp-cap--karaoke { color: #FFD66B; }
.osp-tl { position: relative; height: 18px; border-radius: 4px; background: var(--dk-paper, #fff); overflow: hidden; box-shadow: inset 0 0 0 1px var(--s-hair, rgba(31,31,33,.08)); }
.osp-tl-cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #D2554B 0 2px, transparent 2px 4px); opacity: .85; }
.osp-tl-g { position: absolute; top: 4px; bottom: 4px; border-radius: 2px; }
.osp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0; }
.osp-stats div { display: grid; }
.osp-stats dt { font-size: 11px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osp-stats dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.osp-stats small { font-weight: 400; font-size: 11px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osp-mix { display: flex; flex-wrap: wrap; gap: 4px; }
.osp-chip { font-size: 11px; color: #fff; padding: 2px 7px; border-radius: 999px; background-color: #8a8a8e; }
.osp-chip.osp-m-card { background: var(--osp-card); } .osp-chip.osp-m-panel { background: var(--osp-panel); } .osp-chip.osp-m-camera { background: var(--osp-camera); }
.osp-chip.osp-m-corner { background: var(--osp-corner); } .osp-chip.osp-m-fullscreen { background: var(--osp-fullscreen); }
.osp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.osp-legend .osp-tl-cut-key { background: repeating-linear-gradient(135deg, #D2554B 0 2px, transparent 2px 4px); }
.osp-diff { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.osp-diff li { font-size: 13px; line-height: 1.35; padding: 8px 10px; border-radius: 8px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--s-hair, rgba(31,31,33,.08));
  border-left: 3px solid var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.osp-diff li:first-child { font-weight: 600; }
.osp-note, .osp-same { margin: 0; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); line-height: 1.45; }
.osp-err { margin: 0; font-size: 13px; color: var(--dk-t-a3372e, #A3372E); }

/* references */
.ort-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ort-link { display: flex; gap: 8px; flex: 1 1 18rem; min-width: 0; }
.ort-link .input { flex: 1; min-width: 0; }
.ort-up { cursor: pointer; }
.ort-list { display: grid; gap: 10px; }
.ort-empty { margin: 0; font-size: 13px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-card { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--s-hair, rgba(31,31,33,.08)); min-width: 0; }
.ort-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.ort-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.ort-title { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.ort-sub { font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-x { margin-left: auto; font-size: 12px; }
.ort-busy { margin: 0; font-size: 13px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); display: flex; gap: 8px; align-items: center; }
.ort-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ort-trait label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; cursor: pointer; }
.ort-trait input { margin-top: 2px; accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.ort-trait small { display: block; color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 12px; margin-top: 1px; }
.ort-trait:not(.is-on) span { opacity: .65; }
.ort-un { margin: 0; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-show { justify-self: start; font-size: 12px; }
/* a YouTube link read as metadata only: a calm note, not an error (Parker 2026-10-22: no downloads from YouTube) */
.ort-meta { margin: 0; font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; color: var(--s-ink, inherit);
  background: color-mix(in srgb, var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)) 9%, transparent); }
.ort-card.is-meta .ort-trait span { opacity: 1; }

@media (max-width: 720px) {
  .osb-grid, .osb-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .osp-cmp { grid-template-columns: minmax(0, 1fr); }
  .osb-seg[data-n="5"] { display: flex; flex-wrap: wrap; height: auto; }
  .osb-seg[data-n="5"] .seg-opt { flex: 1 1 30%; }
  .osb-mode { grid-template-columns: minmax(0, 1fr) 110px 38px; }
}

/* ---- the plan-driven preview: rhythm strip, real library graphics, captions (js/own-style.js previewHtml) ---- */
.osp-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.osp-tl { height: 26px; }
.osp-tl-g { animation: osp-hit 12s linear infinite; transform-origin: center; }
.osp-tl-head { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: var(--dk-inv, #1F1F21); animation: osp-run 12s linear infinite; }
@keyframes osp-run { from { left: 0; } to { left: 100%; } }
@keyframes osp-hit { 0% { transform: scaleY(1.7); filter: brightness(1.25); } 4%, 100% { transform: scaleY(1); filter: none; } }
.osp-tl-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); margin-top: -4px; }
.osp-gfx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.osp-g-tile { margin: 0; display: grid; gap: 3px; min-width: 0; }
.osp-g-tile figcaption { font-size: 11px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.osp-g-tile figcaption i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.osp-g-pic { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--dk-b-e6e3dd, #e6e3dd); }
.osp-g-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.osp-g-pic.is-cycling img { opacity: 0; animation: osp-cycle 3.6s steps(1, end) infinite; }
@keyframes osp-cycle { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
.osp-g-missing { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--dk-t-636366, #636366); }
.osp-none, .osp-capoff, .osp-capnote { margin: 0; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osp-capf { border-radius: 8px; overflow: hidden; max-width: 100%; }
.osp-capf--plain { position: relative; aspect-ratio: 16 / 5; background: var(--dk-b-e6e3dd, #e6e3dd); container-type: inline-size; }
@media (prefers-reduced-motion: reduce) { .osp-tl-g, .osp-tl-head { animation: none; } .osp-g-pic.is-cycling img { animation: none; opacity: 0; } .osp-g-pic.is-cycling img:nth-child(2) { opacity: 1; } }
.osb-seed { border-radius: 10px; background: var(--s-canvas, var(--dk-b-f3f2ed, #F3F2ED)); padding: 10px 12px; }
.osb-seed summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.osb-seed .ort-link { margin-top: 8px; }
.ort-sum { margin: 0; font-size: 13px; line-height: 1.45; }
.ort-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ort-frames figure { margin: 0; }
.ort-frames img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
.ort-frames figcaption { font-size: 10px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-trait { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ort-ev { display: flex; gap: 3px; }
.ort-ev img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
@media (max-width: 720px) { .ort-trait { grid-template-columns: minmax(0, 1fr); } .ort-ev img { width: 30%; } .ort-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Brand > Editing style cards: each profile's reel (assets/samples/reels/<id>.mp4, no person); until the clip plays, the library
   stills it is cut from cycle underneath as a still-reel (js/editing-styles.js clipHtml) */
.profile-reel { background-color: var(--dk-b-e6e3dd, #e6e3dd); background-size: cover; background-position: center; animation: profile-reel 3.6s steps(1, end) infinite; }
@keyframes profile-reel { 0% { background-image: var(--r1); } 33.33% { background-image: var(--r2); } 66.66% { background-image: var(--r3); } }
@media (prefers-reduced-motion: reduce) { .profile-reel { animation: none; background-image: var(--r1); } }

/* ---- a style made from a reference: where it came from, what was fitted, per-trait mix (js/own-style.js) ---- */
.osb-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.osb-top .osb-name .input { max-width: none; }
.osb-origin { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--s-peri-soft, rgba(135,153,195,.16)); box-shadow: inset 0 0 0 1px rgba(76,95,146,.2); }
.osb-based { margin: 0; font-size: 13px; }
.osb-notes { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.4; }
.osb-mix { display: grid; gap: 6px; }
.osb-mixrow { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.osb-mixrow .seg { max-width: 18rem; }
.osb-origin [data-osb-reset] { justify-self: start; font-size: 13px; }
.osb-row--wide { grid-column: 1 / -1; }
.osb-exact { display: grid; grid-template-columns: auto minmax(90px, 220px) auto; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.osb-exact input[type="range"] { accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); width: 100%; }
.osb-exact output { font-variant-numeric: tabular-nums; color: var(--s-ink, var(--dk-ink, #1F1F21)); }
.osb-pv-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.osb-pv-h .seg { max-width: 20rem; }
.ort-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ort-note { font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-trait { grid-template-columns: minmax(0, 1fr) auto; font-size: 13px; }
.ort-trait small { display: block; color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 12px; margin-top: 1px; }
@media (max-width: 720px) { .osb-top { grid-template-columns: minmax(0, 1fr); } .osb-mixrow { grid-template-columns: minmax(0, 1fr); } }
.osb-grid--3 .seg-opt { font-size: 12px; padding: 0 2px; }

/* integration (rs-wire): in Brand's single column the two- and three-up grids stack once the panel is narrow, and a
   choice's label wraps rather than ending in an ellipsis */
.own-style { container-type: inline-size; }
@container (max-width: 720px) {
  .osb-grid, .osb-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
.osb-seg { height: auto; min-height: 32px; }
.osb-seg .seg-opt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; min-height: 28px; padding: 4px; text-align: center; }
/* phones: the link field takes its own line, so its placeholder is never cut */
@media (max-width: 760px) {
  .ort-link { flex-wrap: wrap; }
  .ort-link > .input { flex: 1 1 100%; width: 100%; min-width: 0; }
}
/* the graphic tiles' captions: the mode's colour square stays beside its words; headings never end on one word */
.osp-g-tile figcaption { flex-wrap: nowrap; }
.osp-g-tile figcaption i { flex: none; }
.osb-row h4 { text-wrap: pretty; }
/* a reference, simplified: the one Matched line, its colour switch, Use this style / Adjust, the measurements one tap away */
.ort-match { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--s-ink, var(--dk-ink, #1F1F21)); }
.ort-colours { display: grid; gap: 6px; }
.ort-switch { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; justify-self: start; }
.ort-switch input { accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); margin: 0; }
.ort-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ort-sw { display: grid; justify-items: center; gap: 3px; padding: 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; }
.ort-sw:hover, .ort-sw:focus-visible { background: var(--s-wash, var(--dk-b-1f1f21a5, rgba(31,31,33,.05))); }
.ort-sw i { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31,31,33,.15); }
.ort-sw small, .ort-cnote { font-size: 11px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-inuse { font-size: 13px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.ort-more > summary { cursor: pointer; font-size: 12px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.ort-more[open] > summary { margin-bottom: 8px; }
.ort-more { display: grid; gap: 8px; }