/* shell.css - the app after the panel (5 Sep 2026). The left nav and the two
   homes from mockup-5sep-app.html. Loads after styles.css and overrides it. */
.app { --honey: #F7CE46; --fg: 14, 14, 12; }
.app.dark { --fg: 250, 250, 250; }

/* ── The nav: an icon rail, the word under each icon ─────────────────── */
.app.shell-sep.has-leftnav { grid-template-columns: 84px minmax(0, 1fr); }
.app.shell-sep .left-nav { padding: 18px 8px 26px; gap: 12px; border-right: 1px solid rgba(var(--fg), .09); align-items: stretch; }
.app.shell-sep .ln-wm { margin: 2px auto 18px; height: 16px; }
.app.shell-sep .ln-wm img { height: 16px; width: auto; display: block; }
.app.shell-sep .ln-wm .brand-img-light { display: none; }
.app.shell-sep.dark .ln-wm .brand-img-dark { display: none; }
.app.shell-sep.dark .ln-wm .brand-img-light { display: block; }
.app.shell-sep .ln-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 9px 2px 8px; border-radius: 10px;
  font-size: 11px; line-height: 1; color: var(--ink); font-weight: 400; letter-spacing: 0;
}
.app.shell-sep .ln-item svg { width: 20px; height: 20px; }
.app.shell-sep .ln-item em { display: none; }
.app.shell-sep .ln-item:hover { background: rgba(var(--fg), .05); color: var(--ink); }
.app.shell-sep .ln-item.is-active, .app.shell-sep .ln-item.is-active:hover { background: var(--ink); color: var(--paper); font-weight: 500; }
.app.shell-sep .ln-gap { display: none; }   /* evenly spaced (Mark, 5 Sep) */
.app.shell-sep .ln-foot { margin-top: auto; border-top: 1px solid rgba(var(--fg), .09); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.app.shell-sep .ln-theme { width: 32px; height: 32px; min-height: 0; padding: 0; margin: 0 auto; justify-content: center; border-radius: 50%; }   /* light or dark, the icon alone (21 Sep 2026) */
.app.shell-sep .ln-theme svg { width: 18px; height: 18px; }
/* The nav wears the wordmark; the top bar's copy retires. */
.app.shell-sep .topbar .brand-chrome .brand { display: none; }

/* ── Home: no nav, no top bar. The band is the way in. ───────────────── */
.app.shell-sep.mode-home.home-sep { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr); }
.app.shell-sep.mode-home.home-sep > .topbar, .app.shell-sep.mode-home.home-sep > .left-nav { display: none; }
.app.shell-sep.mode-home.home-sep > .workspace { grid-row: 1; grid-column: 1; }
.app.home-sep.mode-home .workspace > .main { padding: 0; background: var(--bg); }
.app.home-sep .home { max-width: none; margin: 0; padding: 0; }
.app.home-sep .home > :not(.hsep) { display: none !important; }
.hsep { color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* :where() keeps this reset at zero specificity, so the rooms, pills and
   tools below can set their own borders and padding (a plain `.hsep button`
   outranked `.hs-room` and stripped the hairlines and spacing the mock has). */
:where(.hsep button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.hsep em { font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; }
.hs-sp { flex: 1; }
.hs-band { background: var(--honey); color: #0E0E0C; padding: 22px 40px 34px; }
.hs-btop { display: flex; align-items: center; gap: 22px; height: 38px; font-size: 13px; color: rgba(14, 14, 12, .7); }
.hs-btop img { height: 20px; width: auto; display: block; }
.hs-btop button:hover { color: #0E0E0C; }
.hs-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 44px; }
.hs-room {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid rgba(14, 14, 12, .32); padding: 12px 0 14px; transition: padding .18s;
}
.hs-room:hover { padding-left: 12px; }
.hs-room span { font-size: 60px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.hs-room em { color: rgba(14, 14, 12, .65); text-align: right; max-width: 220px; }
.hs-room.is-dim span, .hs-room.is-dim em { color: rgba(14, 14, 12, .42); }
.hs-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.hs-shead b { font-size: 15px; font-weight: 500; }
.hs-shead em { color: rgba(var(--fg), .5); }
.hs-shead.hs-rule { border-top: 1px solid var(--ink); padding-top: 18px; }
.hs-shead.hs-rule em { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; }
.hs-today { padding: 34px 40px 0; }
.hs-feed { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 14px; }
.hs-fitem { display: block; min-width: 0; }
.hs-fth { display: block; position: relative; aspect-ratio: 1.6; border-radius: 10px; overflow: hidden; background: #E8E6E0; }
.hs-fth img, .hs-cv { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #E8E6E0; }
.hs-fitem > span:last-child { display: block; margin-top: 8px; font-size: 12.5px; color: rgba(var(--fg), .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-play { position: absolute; left: 10px; bottom: 10px; width: 22px; height: 22px; border-radius: 50%; background: rgba(14, 14, 12, .65); }
.hs-play::after { content: ''; position: absolute; left: 8px; top: 6px; border-left: 8px solid #FAFAFA; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.hs-tools { padding: 40px 40px 44px; }
.hs-t3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; }
.hs-t3.hs-t4 { grid-template-columns: repeat(4, 1fr); }   /* Studio makes four (17 Sep 2026) */
.hs-tool { display: block; min-width: 0; }
/* Studio's panel: a phone standing on the floor, its capture on the screen */
.hs-stage .hs-floor { position: absolute; left: 0; right: 0; bottom: 21%; border-top: 1px solid rgba(14, 14, 12, .1); }
.app.dark .hs-stage .hs-floor { border-top-color: rgba(255, 255, 255, .1); }
.hs-phone { position: absolute; left: 50%; bottom: 21%; width: 19%; aspect-ratio: .49; transform: translateX(-50%); border-radius: 12% / 6%; background: #1A1A1C; isolation: isolate; box-shadow: 0 22px 34px -16px rgba(14, 14, 12, .6); }
.hs-phone::before { content: ''; position: absolute; left: -22%; right: -22%; bottom: -3%; height: 6%; border-radius: 50%; background: rgba(14, 14, 12, .3); filter: blur(5px); z-index: -1; }
.hs-phone .hs-cv { position: absolute; left: 8%; right: 8%; top: 4%; bottom: 4%; width: auto; height: auto; border-radius: 9% / 4.5%; }   /* the bezel in the phone's own measure */
.hs-tp { aspect-ratio: 1.76; background: #EFEDE7; border-radius: 12px; position: relative; overflow: hidden; }
.app.dark .hs-tp { background: rgba(255, 255, 255, .06); }
.hs-one img, .hs-one .hs-blank { position: absolute; left: 11%; bottom: 0; width: 78%; height: 84%; border-radius: 8px 8px 0 0; box-shadow: 0 26px 46px -20px rgba(14, 14, 12, .45); }
.hs-grid4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 26px; }
.hs-grid4 .hs-cv { height: 100%; }
.hs-grid4 .hs-cv { border-radius: 6px; min-height: 0; }
.hs-film { padding: 30px 26px; }
.hs-strip { display: flex; gap: 6px; height: 42%; }
.hs-strip .hs-cv { border-radius: 4px; flex: 1; min-width: 0; }
.hs-strip .hs-cv:first-child { flex: 2.4; }
.hs-strip .is-dim { opacity: .55; }
.hs-blank { background: #E8E6E0; }
.hs-prog { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.hs-prog i { height: 3px; background: var(--ink); flex: 38; }
.hs-prog i.rest { background: rgba(var(--fg), .16); flex: 62; }
.hs-prog em { color: rgba(var(--fg), .6); flex: none; }
.hs-tcap { margin-top: 14px; }
.hs-tcap b { font-size: 15px; font-weight: 500; display: block; }
.hs-tcap p { font-size: 13px; color: rgba(var(--fg), .6); margin: 6px 0 0; line-height: 1.5; }
.hs-smp { position: absolute; left: 14px; top: 14px; color: rgba(var(--fg), .5); z-index: 2; }
/* first run */
.hs-intro { display: grid; grid-template-columns: 1fr minmax(360px, 620px); gap: 56px; padding: 38px 40px 0; align-items: start; }
.hs-eb { color: rgba(var(--fg), .45); letter-spacing: .16em; font-size: 10px; }
.hs-intro h1 { font-size: 38px; font-weight: 500; letter-spacing: -.022em; line-height: 1.1; max-width: 440px; margin: 10px 0 0; }
.hs-intro p { font-size: 15px; color: rgba(var(--fg), .7); max-width: 430px; margin: 16px 0 0; line-height: 1.5; }
.hs-irow { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 13px; color: rgba(var(--fg), .6); }
/* One button shape across the app (Mark, 5 Sep): the rounded rectangle the
   app's .ghost-btn already wears (radius 8, soft fill). Ink for the one
   thing to do. Pills are for Record and Rehearse on the panel only. */
.hs-pill { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 400; letter-spacing: .01em; white-space: nowrap; background: transparent; color: var(--ink); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.hs-pill.hs-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 500; }
.hs-ihr { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(var(--fg), .12); font-size: 13.5px; color: rgba(var(--fg), .6); max-width: 440px; }
.hs-ihr button { color: var(--ink); font-weight: 500; }
.hs-video { display: block; width: 100%; height: 430px; background: #EFEDE7; border-radius: 12px; position: relative; overflow: hidden; }
.app.dark .hs-video { background: rgba(255, 255, 255, .06); }
.hs-play-big { position: absolute; left: 30px; bottom: 96px; width: 62px; height: 62px; border-radius: 50%; background: var(--honey); box-shadow: 0 12px 30px -8px rgba(14, 14, 12, .45); display: flex; align-items: center; justify-content: center; }
.hs-play-big i { width: 0; height: 0; border-left: 16px solid #0E0E0C; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.hs-vcap { position: absolute; left: 30px; bottom: 30px; }
.hs-vcap b { font-size: 14px; font-weight: 500; display: block; }
.hs-vcap em { color: rgba(var(--fg), .5); display: block; margin-top: 4px; }
@media (max-width: 1100px) {
  .hs-feed { grid-template-columns: repeat(3, 1fr); }
  .hs-t3, .hs-t3.hs-t4 { grid-template-columns: 1fr; }
  .hs-intro { grid-template-columns: 1fr; }
  .hs-room span { font-size: 44px; }
}
/* The top bar's Library / Guide / Settings cluster retires: the nav holds them. */
.app.shell-sep #topbarNav { display: none; }
/* The guide's first section: the same intro, on the guide's page width. */
.g2-first { margin: 8px 0 34px; }
.g2-first .hs-intro { padding: 0; grid-template-columns: 1fr minmax(320px, 520px); gap: 40px; }
.g2-first .hs-video { height: 340px; }
/* No top bar on Home, so the workspace takes the whole height (the 62px the
   bar used to hold was showing as a blank band at the foot). */
.app.shell-modetop.shell-sep.mode-home.home-sep .workspace { height: 100vh; }
/* Wide windows: the band runs edge to edge, the content inside it and below
   holds the mock's measure (1440 minus its gutters) so nothing balloons. */
.hs-band > *, .hs-today, .hs-tools, .hs-intro { max-width: 1520px; margin-left: auto; margin-right: auto; }
.hs-band > .hs-rooms { margin-top: 44px; }
/* The source bar is retired (5 Sep 2026): capture happens on the page. The
   tab picker it carried stays, as a sheet under the top bar, for a Layouts
   slot that captures on the go. */
.app.shell-sep #sourceBar .source-pill { display: none; }
.app.shell-sep #sourceBar { position: static; }
.app.shell-sep .source-picker { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 60; }

/* ── Library (5 Sep 2026): the mock's page, with today's filters ─────────
   Second pass (Mark: "too many lines, things not together"): the tab row has no
   rule and no search; the title and its line; then ONE control row, filters
   left, search and Style / Delete right, one hairline under it, like Style and
   Sequence. Folders / Sites / dates are plain labels, no rules. */
.app.shell-sep .panel[data-panel="history-all"], .app.shell-sep .panel[data-panel="history-sets"],
.app.shell-sep .panel[data-panel="history-layouts"], .app.shell-sep .panel[data-panel="history-reels"] { max-width: 1240px; margin: 0 auto; padding-top: 0; }
.app.shell-sep .lib-head-util { align-items: center; border-bottom: 0; margin-bottom: 0; min-height: 0; }
.app.shell-sep .lib-tabs { gap: 26px; }
/* the active tab keeps its underline (Mark), on the word alone, no row rule */
.app.shell-sep .lib-tab { font-size: 13.5px; font-weight: 400; color: rgba(var(--fg), .5); padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; margin: 0; }
.app.shell-sep .lib-tab.is-active { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.app.shell-sep .lib-crumb-sep, .app.shell-sep .lib-crumb-here { margin-bottom: 0; }
/* the search moves to the control row (CSS order; the input itself stays put) */
.app.shell-sep .lib-head-util > .lib-search { display: none; }
.app.shell-sep .lib-head-title { flex-wrap: wrap; align-items: flex-end; margin-top: 26px; margin-bottom: 0; row-gap: 22px; }
.app.shell-sep .lib-head-name { flex-wrap: wrap; align-items: center; gap: 0 12px; }
.app.shell-sep .lib-title { font-size: 40px; font-weight: 500; letter-spacing: -.025em; line-height: 1; }
/* the count sits beside the title, on its baseline (Mark, 5 Sep: "doesnt look
   good having just a number under") */
.app.shell-sep .lib-head-name { align-items: baseline; }
.app.shell-sep .lib-title-count { flex-basis: auto; font-family: var(--sans); font-size: 14.5px; color: rgba(var(--fg), .55); margin: 0 0 0 4px; }
.app.shell-sep .history-filters { flex-basis: 100%; display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding-bottom: 20px; border-bottom: 1px solid rgba(var(--fg), .12); }
.app.shell-sep .history-controls { display: contents; }
.app.shell-sep .history-filters .lib-act-div { order: 4; margin-left: auto; background: transparent; width: 0; }
.app.shell-sep .history-filters .lib-search-row { order: 5; }
.app.shell-sep .history-filters .lib-select-toggle { order: 6; }
/* the row pins as the grid scrolls, 24px past it each side, a shadow once it is (21 Sep 2026, Mark: "Library still has the floating bar?") */
.app.shell-sep .panel > .history-filters { position: sticky; top: -22px; z-index: 5; background: var(--bg); margin: 22px -24px 0; padding: 12px 24px 14px; flex-basis: auto; transition: box-shadow .15s; }
.app.shell-sep .panel > .history-filters.is-stuck { box-shadow: 0 10px 18px -12px rgba(14,14,12,.32); border-radius: 12px; border-bottom-color: transparent; }   /* rounded like the app's (Mark); top -22px: main's own 32px of padding stands above the page and the pin rests at its content edge, so this leaves 10px of air as Style's has (Mark: "why does library sticky have a big gap at top?") */
.app.shell-sep .history-filters .lib-selctl { order: 6; display: inline-flex; align-items: center; gap: 8px; }
.app.shell-sep .history-filters .lib-selctl:empty { display: none; }
.app.shell-sep .history-filters .lib-sel-count { font-family: var(--sans); font-size: 12.5px; color: rgba(var(--fg), .6); white-space: nowrap; margin-right: 4px; }
.app.shell-sep .history-filters .lib-sel-actions { display: inline-flex; align-items: center; gap: 8px; }
.app.shell-sep .history-filters .lib-sel-div { width: 1px; height: 18px; background: rgba(var(--fg), .12); margin: 0 4px; }
.app.shell-sep .history-filters .lib-selctl .ghost-btn { border-radius: 8px; padding: 8px 14px; font-size: 13px; background: transparent; }
#history-controls .lib-selctl .ghost-btn.is-quiet { border-color: transparent; color: rgba(var(--fg), .6); font-weight: 400; }   /* on the id: the shell's ghost rule counts six classes */
.app.shell-sep .history-filters .lib-selctl .ghost-btn.is-quiet:hover { color: var(--ink); }
.app.shell-sep .history-filters .lib-selctl .ghost-btn:disabled { opacity: .4; }
.app.shell-sep .lib-search { border-radius: 8px; height: 34px; padding: 0 12px; width: 220px; font-size: 13px; border-color: rgba(var(--fg), .16); margin: 0; }
.app.shell-sep .lib-chips { margin-top: 14px; }
.app.shell-sep .history-grid { margin-top: 26px; }
/* the way in: folders row then site cards, plain labels */
.app.shell-sep .libu-sec { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 500; padding: 0; border: 0; margin: 0 0 12px; color: var(--ink); }
.app.shell-sep .libu-row { margin-bottom: 28px; }
.app.shell-sep .lib-folder-grid { grid-template-columns: repeat(5, 1fr); gap: 22px 18px; margin: 0 0 30px; }
.app.shell-sep .lib-folder { border: 0; box-shadow: 0 0 0 1px rgba(var(--fg), .1); border-radius: 12px; background: #fff; }
.app.dark.shell-sep .lib-folder, .app.dark.shell-sep .lib-card { background: rgba(255, 255, 255, .04); }
.app.shell-sep .lib-folder:hover { box-shadow: 0 0 0 2px var(--ink); }
.app.shell-sep .lib-folder-thumb { aspect-ratio: 1 / 1; height: auto; }
.app.shell-sep .lib-folder-info { padding: 13px; gap: 10px; }
.app.shell-sep .lib-folder-info .lib-fav { width: 20px; height: 20px; border-radius: 5px; }
.app.shell-sep .lib-folder-info .lib-fav-mono { background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.app.shell-sep .lib-folder-info .lib-fav-on { background: var(--honey); color: var(--ink); }
.app.shell-sep .lib-folder-name { font-size: 14px; }
.app.shell-sep .lib-folder-count { font-size: 10.5px; letter-spacing: .12em; color: rgba(var(--fg), .45); }
/* date sections and cards */
.app.shell-sep .lib-sec { margin-top: 26px; }
.app.shell-sep .lib-sec:first-of-type { margin-top: 0; }
.app.shell-sep .lib-sec-head { justify-content: space-between; padding-bottom: 0; border-bottom: 0; margin-bottom: 12px; }
.app.shell-sep .lib-sec-title { font-size: 13px; }
.app.shell-sep .lib-sec-count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--fg), .45); }
.app.shell-sep .lib-grid { grid-template-columns: repeat(5, 1fr); gap: 20px 18px; }
.app.shell-sep .lib-card { border: 0; box-shadow: 0 0 0 1px rgba(var(--fg), .1); border-radius: 12px; background: #fff; }
.app.shell-sep .lib-card:hover { box-shadow: 0 0 0 1px rgba(var(--fg), .1), 0 10px 30px -18px rgba(var(--fg), .4); }
.app.shell-sep .lib-card.is-selected { box-shadow: 0 0 0 2px var(--ink); }
.app.shell-sep .lib-card-body { padding: 12px 13px 14px; }
/* capture thumbnails fill the square from the top (Molly, 5 Sep: no white space at the sides); the library's Fit switch (10 Sep 2026) turns this off and the base rule shows the whole capture, tall pages from the top with the fade */
.app.shell-sep:not(.lib-fit) .lib-thumb .lib-thumb-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: top center; }
.app.shell-sep.lib-fit .lib-thumb:not(.is-tall) .lib-thumb-fade { display: none; }
.app.shell-sep .lib-fit-seg .lib-seg-btn { padding: 0 11px; font-size: 12px; }
.app.shell-sep .lib-card-title { font-size: 14px; font-weight: 500; }
.app.shell-sep .lib-card-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--fg), .35); margin-top: 8px; }
@media (max-width: 1250px) { .app.shell-sep .lib-grid, .app.shell-sep .lib-folder-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .app.shell-sep .lib-grid, .app.shell-sep .lib-folder-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── The capture page ──────────────────────────────────────────────────── */
.app.shell-sep .panel[data-panel="capture-view"] { max-width: 1240px; margin: 0 auto; padding-top: 8px; }
.capv { color: var(--ink); font-family: var(--sans); }
:where(.capv button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.capv-crumb { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(var(--fg), .6); }
.capv-crumb i { color: rgba(var(--fg), .3); font-style: normal; }
.capv-crumb button:hover { color: var(--ink); }
.capv-crumb > span:not(.hs-sp) { color: var(--ink); font-weight: 500; }
.capv-crumb .hs-pill + .hs-pill { margin-left: 4px; }
.hs-pill.hs-sm { padding: 6px 12px; font-size: 12.5px; }
.hs-pill.hs-lg { padding: 11px 18px; font-size: 14px; }
.hs-pill.hs-quiet { border-color: transparent; color: rgba(var(--fg), .5); }
.hs-pill[disabled] { opacity: .4; cursor: default; }
.hs-pill:not(.hs-ink):not([disabled]):hover { border-color: var(--ink); color: var(--ink); }
.hs-pill.hs-ink:not([disabled]):hover { opacity: .88; }
.capv-stage { padding: 22px 0 0; display: flex; justify-content: center; }
/* The plate is the capture's own size (Mark: phones sat in a white box; and
   no rounded corners on a review). Square corners, the shadow alone. */
.capv-plate { position: relative; display: inline-flex; width: auto; max-width: 1000px; border-radius: 0; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(var(--fg), .45); background: transparent; align-items: center; justify-content: center; min-height: 120px; max-height: 70vh; }
.capv-plate img, .capv-plate video { display: block; max-width: 1000px; max-height: 70vh; width: auto; height: auto; object-fit: contain; }
.capv-plate.is-video { width: 100%; }
.capv-plate.can-zoom { cursor: zoom-in; }
/* the Freeze / Scroll note under the plate (9 Sep 2026) */
.capv-repair { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px auto -4px; padding: 0; max-width: 1000px; font-size: 13px; color: rgba(var(--fg), .55); }
.capv-repair > span:first-child { flex: 0 1 auto; min-width: 0; line-height: 1.45; }
.capv-repair .hs-sp { display: none; }
/* zoom (9 Sep 2026): the capture at its own pixels */
.capv-zoom { position: fixed; inset: 0; z-index: 1200; background: var(--bg2, #FAFAFA); }
.capv-zoom-scroll { position: absolute; inset: 0; overflow: auto; cursor: grab; padding: 24px; box-sizing: border-box; text-align: center; }
.capv-zoom-scroll:active { cursor: grabbing; }
.capv-zoom-scroll img { display: inline-block; max-width: none; box-shadow: 0 30px 60px -24px rgba(var(--fg), .45); cursor: zoom-in; user-select: none; }
.capv-zoom-close { position: fixed; top: 18px; right: 22px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--paper, #fff); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.capv-zoom-bar { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 100px; background: var(--paper, #fff); border: 1px solid var(--border); box-shadow: 0 10px 30px -12px rgba(var(--fg), .35); }
.capv-zoom-bar button { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 50%; font-size: 16px; color: var(--ink); cursor: pointer; }
.capv-zoom-bar button:hover:not([disabled]) { background: rgba(var(--fg), .06); }
.capv-zoom-bar button[disabled] { opacity: .35; cursor: default; }
.capv-zoom-val { font: 500 13px var(--sans); min-width: 44px; text-align: center; }
.capv-plate.is-video video, .capv-plate.is-video img { width: 100%; max-width: 100%; }
.capv-more em, .capv-shead em { font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: rgba(var(--fg), .45); }
.capv-dur { position: absolute; right: 14px; bottom: 14px; font: 11px var(--mono); color: var(--paper); background: rgba(14, 14, 12, .6); border-radius: 4px; padding: 6px 10px; }
.capv-note { position: absolute; left: 14px; bottom: 14px; font-size: 12px; color: var(--paper); background: rgba(14, 14, 12, .6); border-radius: 4px; padding: 6px 10px; }
.capv-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 0 22px; border-bottom: 1px solid rgba(var(--fg), .12); flex-wrap: wrap; }
.capv-info h2 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.capv-info h2 span { color: rgba(var(--fg), .5); font-weight: 400; }
.capv-info p { font-size: 13.5px; color: rgba(var(--fg), .55); margin: 6px 0 0; }
.capv-acts { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; }
.capv-gap { width: 14px; }
.capv-more { padding-top: 16px; }
.capv-shead { padding-bottom: 10px; border-bottom: 1px solid rgba(var(--fg), .12); }
.capv-shead b { font-size: 15px; font-weight: 500; }
.capv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 18px; margin: 14px 0 26px; }
.capv-card { text-align: left; min-width: 0; }
.capv-th { display: block; position: relative; aspect-ratio: 1.6; border-radius: 10px; overflow: hidden; background: #E8E6E0; box-shadow: 0 0 0 1px rgba(var(--fg), .1); }
.capv-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.capv-card b { display: block; font-size: 14px; font-weight: 500; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capv-card small { display: block; font: 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--fg), .35); margin-top: 4px; }

/* ── Style, Layouts, Sequence: one head voice with the Library ─────────── */
.app.shell-sep .lay-gal-h { font-family: var(--sans); font-size: 40px; font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.app.shell-sep .lay-gal-sub { font-size: 14.5px; color: rgba(var(--fg), .55); margin-top: 12px; }

/* Layouts: on the go, then Start a new one with the shape tabs */
.lay-gal-onthego { margin: 26px 0 30px; }
.lay-gal-onthego[hidden] { display: none; }
.lay-otg-head { padding-bottom: 10px; border-bottom: 1px solid rgba(var(--fg), .12); }
.lay-otg-head b { font-size: 15px; font-weight: 500; }
.lay-otg-head em { font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: rgba(var(--fg), .45); }
.lay-otg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
.lay-otg { display: flex; align-items: center; gap: 16px; text-align: left; padding: 14px; border: 1px solid rgba(var(--fg), .12); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.app.dark .lay-otg { background: rgba(255, 255, 255, .04); }
.lay-otg:hover { border-color: var(--ink); }
.lay-otg-th { flex: none; width: 190px; height: 120px; border-radius: 8px; overflow: hidden; background: #E8E6E0; }
.lay-otg-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lay-otg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lay-otg-txt b { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-otg-txt span { font-size: 13.5px; color: rgba(var(--fg), .55); }
.lay-otg-txt em { font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; color: rgba(var(--fg), .4); margin-top: 8px; }
.app.shell-sep .lay-gal-start { font-size: 15px; font-weight: 500; margin-right: 22px; align-self: center; }
@media (max-width: 1100px) { .lay-otg-row { grid-template-columns: 1fr; } }
/* NO TOP BAR (Mark, 5 Sep: "keep the timeline and everything as is. just have
   the buttons top right"). The bar is no longer a row of the grid: the nav runs
   the full height and the canvas takes the column. The bar's element stays
   (the app fills #topbar-actions-slot from many places) but floats over the
   top right of the main column, transparent, holding only the actions;
   shellTopbarSync keeps its right edge at the canvas's right edge. */
.app.shell-sep:not(.mode-home) { grid-template-rows: 1fr; }
.app.shell-sep:not(.mode-home) > .left-nav, .app.shell-sep:not(.mode-home) > .workspace { grid-row: 1; }
.app.shell-modetop.shell-sep .workspace { height: 100vh; }
.app.shell-sep:not(.mode-home) > .topbar {
  position: fixed; top: 14px; left: auto; right: var(--acts-right, 316px); z-index: 60;
  height: auto; min-height: 0; padding: 0; background: transparent; border: 0; width: auto; gap: 0;
}
.app.shell-sep:not(.mode-home) > .topbar > :not(.topbar-utils) { display: none; }
.app.shell-sep:not(.mode-home) > .topbar .topbar-utils { margin: 0; height: auto; }
.app.shell-sep.topbar-off:not(.mode-home) > .topbar { display: none; }
/* The floating bar is as wide as its buttons, so the slot's old overflow clip
   (a truncation guard from the full-width bar) only cut off what hangs below
   it: the Export quality menu (8 Sep 2026, Mark: "the export button does nothing"). */
.app.shell-sep:not(.mode-home) > .topbar #topbar-actions-slot { overflow: visible; }
.app.shell-sep .reel-host { min-height: calc(100vh - 16px); max-height: calc(100vh - 16px); }
.app.shell-sep .source-picker { top: 20px; }
/* trim */
.capv-trim { max-width: 1000px; margin: 18px auto 0; }
.capv-trim-row { display: flex; align-items: center; gap: 14px; }
.capv-trim-row > em { flex: none; width: 52px; color: rgba(var(--fg), .6); }
.capv-trim-row > em:last-child { text-align: right; }
.capv-track { position: relative; flex: 1; height: 34px; border-radius: 8px; background: rgba(var(--fg), .06); }
.capv-dim { position: absolute; top: 0; bottom: 0; background: rgba(var(--fg), .10); border-radius: 8px; pointer-events: none; }
.capv-dim-a { left: 0; } .capv-dim-b { right: 0; }
.capv-keep { position: absolute; top: 0; bottom: 0; border: 2px solid var(--ink); border-radius: 8px; box-sizing: border-box; pointer-events: none; }
.capv-h { position: absolute; top: -4px; bottom: -4px; width: 14px; margin-left: -7px; border-radius: 6px; background: var(--ink); cursor: ew-resize; touch-action: none; }
.capv-h::after { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--paper); border-radius: 1px; }
.capv-h.is-drag, .capv-h:focus-visible { outline: 2px solid var(--honey); outline-offset: 1px; }
.capv-trim-acts { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.capv-trim-len { font-size: 13px; color: rgba(var(--fg), .55); }

/* The bar, when a page has one, runs the full width; both rails sit under it
   (Mark, 5 Sep: "just make it like the left rail under the top"). */
/* Sequence: until captures are picked there is nothing to set, so the settings
   column and the Save / Export pair wait. */
.app.shell-sep.seq-door-open .workspace > .preview-panel { display: none; }
.app.shell-sep.seq-door-open .workspace { grid-template-columns: 0 minmax(0, 1fr) !important; }
.app.shell-sep.seq-door-open #topbar-actions-slot .action-footer { display: none; }
.app.shell-sep.lay-gal-open #topbar-actions-slot .action-footer { display: none; }
.app.shell-sep .lib-search-row .lib-search { width: 220px; max-width: none; flex: none; }

/* ── One search box everywhere (5 Sep 2026, Mark: "three different search
   boxes across the modes"): the Library's. Style and Sequence pickers, the
   Layouts gallery and the Guide all take it. ───────────────────────────── */
.app.shell-sep .lib-search, .app.shell-sep .layouts-pk-search, .app.shell-sep .lay-gal-search, .app.shell-sep .g2-search input, .app.shell-sep .lib-cloud-q {
  height: 34px; width: 220px; max-width: none; flex: none; min-width: 0;
  padding: 0 12px; border-radius: 8px; border: 1px solid rgba(var(--fg), .16);
  background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink); outline: none; box-shadow: none;
}
.app.shell-sep .lib-search::placeholder, .app.shell-sep .layouts-pk-search::placeholder, .app.shell-sep .lay-gal-search::placeholder, .app.shell-sep .g2-search input::placeholder { color: rgba(var(--fg), .45); }
.app.shell-sep .lib-search:focus, .app.shell-sep .layouts-pk-search:focus, .app.shell-sep .lay-gal-search:focus, .app.shell-sep .g2-search input:focus { border-color: var(--ink); }
.app.shell-sep .lay-gal-searchwrap { margin-bottom: 8px; }
.app.shell-sep .lay-gal-searchwrap svg { display: none; }
.app.shell-sep .g2-search { max-width: none; }
.app.shell-sep .g2-search > svg { display: none; }
/* Library controls in the pickers' voice: sans 13px, 34px tall, radius 8 */
.app.shell-sep .lib-dd { font-family: var(--sans); font-size: 13px; height: 34px; padding: 0 12px; border-radius: 8px; border-color: rgba(var(--fg), .16); }
.app.shell-sep .lib-seg { height: 34px; border-radius: 8px; border-color: rgba(var(--fg), .16); }
.app.shell-sep .lib-seg-btn { font-size: 13px; padding: 0 11px; display: inline-flex; align-items: center; }
.app.shell-sep .lib-fav-filter, .app.shell-sep .lib-select-toggle { height: 34px; border-radius: 8px; font-size: 13px; }
.app.shell-sep .lib-select-toggle { padding: 0 12px; }
.app.shell-sep .lib-fav-filter { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.app.shell-sep .lib-fav-filter svg { display: block; }
.app.shell-sep .layouts-pk-search, .app.shell-sep .layouts-pk-site { height: 34px; border-radius: 8px; }
/* Saved setups: nothing feeds it now that capture happens on the page (5 Sep 2026,
   Mark: "only demo and flow are worth having save for", to come). Hidden, data kept. */
.app.shell-sep .lib-tab[data-crumb-panel="history-sets"] { display: none; }

/* Library shelves as sub-rows under the Library row */
/* the tab row leaves the page; the big title leads */
.app.shell-sep .lib-tabs-row { display: flex; flex-basis: 100%; align-items: center; gap: 26px; margin: 22px 0 0; border-bottom: 1px solid rgba(var(--fg), .09); }
.app.shell-sep .lib-tabs-row .lib-tab { padding: 4px 0 13px; margin-bottom: -1px; font-size: 13px; color: rgba(var(--fg), .65); }
.app.shell-sep .lib-tabs-row .lib-tab:hover { color: var(--ink); }
.app.shell-sep .lib-tabs-row .lib-tab.is-active { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.app.shell-sep .lib-head-title { row-gap: 18px; }
.app.shell-sep .history-filters { border-bottom: 0; padding-bottom: 0; }
.app.shell-sep .history-grid { margin-top: 22px; }
.app.shell-sep .panel[data-panel="history-all"] .lib-head-util { display: none; }
.app.shell-sep .lib-head-util { justify-content: flex-end; }
.app.shell-sep .lib-head-title { margin-top: 4px; }
/* a picked capture in the Style and Sequence pickers reads at once */
.app.shell-sep .lib-card.is-picked { box-shadow: 0 0 0 2px var(--ink); }
.app.shell-sep .lib-card.is-picked::after { content: ''; position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); z-index: 4; }
.app.shell-sep .lib-card.is-picked::before { content: ''; position: absolute; left: 15.5px; top: 12px; width: 5px; height: 9px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); z-index: 5; }
.app.shell-sep .lib-card { position: relative; }
/* crop on the plate: the tool's bar sits under the picture, nothing clipped */
.capv-plate.is-cropping { overflow: visible; margin-bottom: 96px; }
.capv-plate.is-cropping .lb-crop-bar { bottom: -84px; }

/* ── One button shape (Mark, 5 Sep) ───────────────────────────────────────
   The app's buttons are rounded rectangles (radius 8), the .ghost-btn shape.
   The pills that had crept in on live surfaces come into line here: the
   primary button, the confirm modal's buttons, Style's Save and Export,
   the Sequence page's chips and banner. Tags and chips (a filter chip, a
   badge) stay round, they are not buttons. */
/* Two tiers, as the app has always had them: the PRIMARY action (Export, the
   Capture and Record buttons, the one ink button on a page) is a pill; every
   secondary button is the rounded rectangle. */
.app.shell-sep .topbar-actions-slot > .styleset-foot [data-ss-save],
.app.shell-sep .reel-door-banner-a .ghost-btn,
.app.shell-sep .reel-door-acts .ghost-btn,
.app.shell-sep .reel-empty-doors .ghost-btn { border-radius: 8px; }
.hs-pill.hs-ink { border-radius: 100px; padding: 8px 18px; }
/* Grey fills read as disabled next to the ink button (Mark, 5 Sep: "change the
   grey buttons to outline"). Neutral buttons are outlined, the Library's way. */
.app.shell-sep .ghost-btn:not(.is-choice):not(.is-add):not(.is-selected) { background: transparent; border: 1px solid var(--border); color: var(--ink); }
.app.shell-sep .ghost-btn:not(.is-choice):not(.is-add):not(.is-selected):hover { background: transparent; border-color: var(--ink); color: var(--ink); }
/* the picker's Style (or Add) button is the action, so it is ink once something is chosen; the ghost rule above outranked
   styles.css's and kept it an outline (21 Sep 2026, Mark: "I dont think it does go black") */
.app.shell-sep #layouts-pk-done.ghost-btn:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }   /* by id: the ghost rule counts six classes and beat five */
.app.shell-sep #layouts-pk-done.ghost-btn:not(:disabled):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: .86; }
/* Sequence's host was sized for a top bar (100vh - 78px). Without one the
   page stopped 62px short of the window (Mark: "still have a blank space at
   bottom"). Fill the column: main's 10px above and 6px below are all that
   stay. */

/* The floating actions: paper-backed so the outline reads on the wash, the
   app's rectangle everywhere (the slot's own id rules made Export a pill),
   and the canvas starts below them (Mark: "not enough space below and cant
   see the outline"). */
.app.shell-sep:not(.mode-home) > .topbar .ghost-btn,
.app.shell-sep:not(.mode-home) > .topbar .styleset-foot [data-ss-save] { border-radius: 8px; }
.app.shell-sep:not(.mode-home) > .topbar .ghost-btn:not(.is-choice):not(.is-add):not(.is-selected),
.app.shell-sep:not(.mode-home) > .topbar .styleset-foot [data-ss-save] { background: var(--paper); border: 1px solid rgba(var(--fg), .18); color: var(--ink); }
.app.shell-sep:not(.mode-home) > .topbar .ghost-btn:disabled { opacity: .45; }
.app.shell-sep:not(.mode-home):not(.topbar-off) .workspace > .main { padding-top: 72px; }
.app.shell-sep:not(.topbar-off) .reel-host { min-height: calc(100vh - 96px); max-height: calc(100vh - 96px); }

/* The rail's mode title goes (Mark, 5 Sep: "the left nav clearly shows it").
   What was the sub-heading beneath it, the template's name in Layouts, the
   set in Style, wears the title size instead. */
.app.shell-sep .layouts-panel-head, .app.shell-sep .rail-mode-title, .app.shell-sep .styleset-title { display: none; }
.app.shell-sep .layouts-cgroup-h { font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; margin: 0 0 8px; }

/* Layouts' queue strip: tiles sized by how many there are (--qs-w set by
   layoutsBuildQueueStrip: 76 to 6, 64 to 9, 54 beyond). */
.app.shell-sep .layouts-qstrip .qs-cell { width: var(--qs-w, 52px); height: calc(var(--qs-w, 52px) * .66); }
.app.shell-sep .layouts-qstrip .qs-add { width: var(--qs-w, 52px); height: calc(var(--qs-w, 52px) * .66); font-size: 10px; }
/* The Layouts stage stopped 44px short of the column (Mark, 5 Sep: "on wide
   layouts there is a bit of room at the bottom", then "timeline is touching
   the bottom"). Layouts and Sequence both end 24px above the fold, so the
   transport, or the strip beneath it, always has that much air. */
.app.shell-sep .layouts-stage { min-height: calc(100vh - 96px); max-height: calc(100vh - 96px); }

/* Folders row (5 Sep): places you open, and one small chip to add a place */
.app.shell-sep .libu-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.app.shell-sep .libu-row > .libu-folder { flex: 0 1 236px; min-width: 200px; }
.app.shell-sep .libu-row-bare { margin-bottom: 30px; }
.app.shell-sep .libu-chip { display: inline-flex; align-items: center; gap: 8px; align-self: center; border: 1px dashed rgba(var(--fg), .3); border-radius: 8px; background: transparent; color: rgba(var(--fg), .55); font: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer; }
.app.shell-sep .libu-chip:hover { border-color: var(--ink); color: var(--ink); }
.app.shell-sep .libu-chip .libu-glyph { width: 15px; height: 15px; }
.app.shell-sep .libu-uploads .libu-thumbs { flex: none; display: flex; gap: 3px; }
.app.shell-sep .libu-uploads .libu-thumbs img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; background: rgba(var(--fg), .06); box-shadow: 0 0 0 1px rgba(var(--fg), .08); }
.app.shell-sep .libu-uploads .libu-thumbs .libu-glyph { width: 17px; height: 17px; }
.app.shell-sep .history-filters [data-lib-import] { order: 6; }

/* Guide and Settings wear the modes' head (Mark, 5 Sep: "need to style guide
   and settings so everything is consistent"): no eyebrow, the 40px title, the
   grey line under it, the same column width. */
.app.shell-sep .guide2-panel, .app.shell-sep .settings-panel { max-width: 1240px; margin: 0 auto; padding-top: 0; }
.app.shell-sep .g2-eyebrow, .app.shell-sep .settings-panel > .eyebrow { display: none; }
.app.shell-sep .g2-title, .app.shell-sep .settings-panel > .title { font-family: var(--sans); font-size: 40px; font-weight: 500; letter-spacing: -.025em; line-height: 1; margin: 0; }
.app.shell-sep .settings-panel > .title em { display: none; }
.app.shell-sep .g2-lede, .app.shell-sep .settings-panel > .subtitle { font-size: 14.5px; line-height: 1.5; color: rgba(var(--fg), .55); margin: 12px 0 0; max-width: 60ch; }
.app.shell-sep .g2-hero { max-width: none; margin: 0 0 34px; }
.app.shell-sep .g2-search { margin-top: 22px; }
.app.shell-sep .settings-cols { margin-top: 30px; }
.app.shell-sep .settings-section { background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(var(--fg), .1); border-radius: 12px; }
.app.dark.shell-sep .settings-section { background: rgba(255, 255, 255, .04); }

/* THE SELECTION BAR FLOATS (Mark, 5 Sep: the grid of everything runs below the
   sites, so the count and the actions were at the top of a page you had
   scrolled away from). One bar at the foot of the column, in the transport's
   voice, for all three shelves: count, Select all, Clear | Style, Delete, Done. */
.app.shell-sep .lib-select-bar {
  position: fixed; bottom: 24px; left: calc(50% + 42px); transform: translateX(-50%); z-index: 45;
  width: auto; max-width: calc(100vw - 84px - 48px); margin: 0; padding: 8px 8px 8px 20px;
  background: var(--paper); border: 1px solid rgba(var(--fg), .1); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(14, 14, 12, .04), 0 14px 36px rgba(14, 14, 12, .16);
  display: flex; align-items: center; gap: 16px;
}
.app.dark.shell-sep .lib-select-bar { background: #1c1c1a; }
.app.shell-sep .lib-select-bar[hidden] { display: none; }
.app.shell-sep .lib-sel-count { font-size: 13px; font-weight: 500; white-space: nowrap; }
.app.shell-sep .lib-sel-actions { gap: 6px; margin-left: 0; }
.app.shell-sep .lib-sel-div { width: 1px; height: 18px; background: rgba(var(--fg), .12); margin: 0 6px; flex: none; }
.app.shell-sep .lib-select-bar .ghost-btn:not(.is-choice):not(.is-add):not(.is-selected) { border-radius: 8px; padding: 8px 14px; font-size: 13px; background: transparent; border: 1px solid var(--border); color: var(--ink); font-weight: 500; }
.app.shell-sep .lib-select-bar .ghost-btn:not(.is-choice):not(.is-add):not(.is-selected):hover { border-color: var(--ink); }
.app.shell-sep .lib-select-bar .ghost-btn.is-quiet:not(.is-choice):not(.is-add):not(.is-selected) { border-color: transparent; color: rgba(var(--fg), .6); font-weight: 400; }
.app.shell-sep .lib-select-bar .ghost-btn.is-quiet:not(.is-choice):not(.is-add):not(.is-selected):hover { color: var(--ink); border-color: transparent; background: rgba(var(--fg), .05); }
.app.shell-sep .lib-select-bar .ghost-btn:disabled { opacity: .4; }
/* the tick on every card: on hover it invites a selection; in select mode it is the state */
.app.shell-sep .lib-check.lib-pick { pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.app.shell-sep .lib-card:hover .lib-check.lib-pick, .app.shell-sep .lib-check.lib-pick:focus-visible { opacity: 1; }
.app.shell-sep .lib-check.lib-pick:hover { background: var(--ink); }
.app.shell-sep .lib-check.lib-pick:hover::after { opacity: 1; }
.app.shell-sep .lib-card.is-selectable .lib-check { pointer-events: auto; cursor: pointer; }
/* room at the foot so the last row clears the bar */
.app.shell-sep .lib-select-bar:not([hidden]) ~ .history-grid { padding-bottom: 80px; }

/* Sequence's carry-on row: Layouts' row, under the intro, above the picker */
.app.shell-sep .reel-carryon { margin: 6px auto 30px; max-width: 1240px; }
.app.shell-sep .reel-carryon .lay-otg-txt em { font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; color: rgba(var(--fg), .4); margin-top: 8px; }

/* device glyph on the cards, a touch bigger (Mark, 5 Sep) */
.app.shell-sep .lib-card-dev svg { width: 18px; height: 18px; }   /* a bit bigger (21 Sep 2026, Mark: "make the device icon on the library/picker cards a bit bigger"); this rule sits over styles.css's */
.app.shell-sep .lib-card-dev { color: rgba(var(--fg), .6); }
/* Clear on the set strip, quiet */
.app.shell-sep .style-thumb-clear { align-self: center; margin-left: 4px; padding: 6px 10px; border: 0; background: transparent; color: rgba(var(--fg), .5); font: inherit; font-size: 12.5px; cursor: pointer; border-radius: 6px; }
.app.shell-sep .style-thumb-clear:hover { color: var(--ink); background: rgba(var(--fg), .05); }
/* the motion button in Layouts' transport row: outlined, not grey */
.app.shell-sep .layouts-toolbar .lt-btn { background: transparent; border: 1px solid var(--border); color: var(--ink); padding: 6px 12px; font-size: 12.5px; }
.app.shell-sep .layouts-toolbar .lt-btn:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.app.shell-sep .layouts-toolbar .lt-btn.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.app.shell-sep .layouts-toolbar .lt-btn[disabled]:hover { border-color: var(--border); color: var(--ink); }
/* The star sat on the same corner as the tick, so the tick's white square
   showed through it as a pale border (Mark, 5 Sep). The star joins the menu
   at the top right; the tick owns the top left. */
.app.shell-sep .lib-fav-star { left: auto; right: 34px; top: 6px; }
.app.shell-sep .lib-fav-star.on, .app.shell-sep .lib-fav-star.is-on { opacity: 1; }

/* ── Cinematic: the Shots row in the Layouts panel (7 Sep 2026) ── */
.cine-shots { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; }
.cine-shot { border-radius: 10px; }
.cine-shot.is-open { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cine-shot-head { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 8px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
.cine-shot-head:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cine-shot.is-open .cine-shot-head:hover { background: none; }
.cine-n { width: 18px; height: 18px; border-radius: 50%; background: var(--ink, #0e0e0c); color: #fff; font-size: 10px; display: grid; place-items: center; }
.cine-shot.is-open .cine-n { background: #F7CE46; color: #0e0e0c; }
.cine-w { min-width: 0; }
.cine-w b { display: block; font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cine-w span { display: block; color: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 11px; }
.cine-shot-head em { font-style: normal; font-size: 10.5px; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.cine-shot-body { padding: 0 8px 10px 38px; }
.cine-moves { flex-wrap: wrap; gap: 4px; }
.cine-moves .pill { font-size: 11px; padding: 4px 8px; }
.cine-fine { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: color-mix(in srgb, var(--ink) 60%, transparent); flex-wrap: wrap; }
.cine-fine b { font-weight: 500; color: var(--ink, #0e0e0c); min-width: 34px; text-align: center; }
.cine-step { width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 6px; background: var(--paper, #fbfaf8); font: inherit; font-size: 13px; line-height: 1; color: inherit; cursor: pointer; }
.cine-step:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.cine-sp { flex: 1; }
.cine-lnk { border: 0; background: none; font: inherit; font-size: 11.5px; color: color-mix(in srgb, var(--ink) 55%, transparent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cine-lnk:hover { color: var(--ink, #0e0e0c); }
.cine-tools { display: flex; gap: 8px; margin-top: 12px; }
.cine-tools .ghost-btn { font-size: 12px; padding: 7px 12px; }
.cine-page { display: flex; align-items: center; gap: 12px; padding: 4px 8px 10px; font-size: 12px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.cine-page > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink, #0e0e0c); }
/* FOUR GROUPS IN THE LAYOUTS RAIL (10 Sep 2026): Captures, Layout, Style,
   Export. A small mono head over a rule; the first sits under the panel title
   with no rule of its own. */
.layouts-grp { margin-top: 6px; }
.layouts-grp-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 42%, transparent); padding: 26px 0 8px; }   /* no rule between groups (10 Sep 2026, Mark: "too many lines"); the space does it */
.app.shell-sep .layouts-rail-name { margin: 0 0 26px; }   /* outranks the cgroup-h margin above */
.layouts-rail-name + .layouts-grp { margin-top: 0; }
.layouts-rail-name + .layouts-grp > .layouts-grp-head { padding-top: 0; }
.layouts-grp .option-row:last-child { border-bottom: 0; }
/* THE PLACES (10 Sep 2026): one row per place in the rail, one line each,
   the label, a device-shaped thumb (the dashed outline of the shape the place
   wants while it is empty), and the actions, always visible: Change / Remove
   as quiet text links, the add as the app's dashed control. The selected
   row's shade is inset into the gutters with its own radius, never cut at the
   text's edge. */
/* The Layers head folds the rows (10 Sep 2026): the word, the count and a
   chevron, one face; the group's + Add is a dashed row at the foot. */
.lplace-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.lplace-fold { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
.lplace-fold .option-chevron { width: 10px; height: 10px; transform: rotate(90deg); transition: transform .12s; flex: none; }
.layouts-grp.is-folded .lplace-fold .option-chevron { transform: rotate(0deg); }
.lplace-addrow { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 10px; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink, #0e0e0c); cursor: pointer; }
.lplace-addrow:hover { border-color: color-mix(in srgb, var(--ink) 60%, transparent); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lplace-rows[hidden] { display: none; }
/* drag to reorder: the marker rides the edge the drop would land on */
.lplace-row.is-dragging { opacity: .4; }
.lplace-row.is-over-top { box-shadow: inset 0 2px 0 var(--ink, #0e0e0c); }
.lplace-row.is-over-bottom { box-shadow: inset 0 -2px 0 var(--ink, #0e0e0c); }
.lplace-row[draggable="true"] .lplace-line { cursor: grab; }
.lplace-row { border-bottom: 1px solid var(--ink08, color-mix(in srgb, var(--ink) 8%, transparent)); }
.lplace-row.is-tx .lplace-line { min-height: 44px; gap: 10px; }
.lplace-tbadge { flex: none; width: 24px; height: 24px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); display: inline-flex; align-items: center; justify-content: center; font: 500 11px var(--mono); color: color-mix(in srgb, var(--ink) 60%, transparent); }
.lplace-tline { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.lplace-tline.is-empty { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.lplace-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 56px; cursor: default; border-radius: 8px; }
.lplace-row[data-lplace] .lplace-line { cursor: pointer; }
.lplace-row.is-sel .lplace-line { background: color-mix(in srgb, var(--ink) 4%, transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.lplace-line .option-label { flex: 1; min-width: 0; }
.lplace-val { display: inline-flex; align-items: center; flex: none; }
.lplace-cnt { flex: none; }   /* the count in the head's own face */
.lplace-do { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 6px; }
.lplace-ico { width: 28px; height: 28px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--ink) 60%, transparent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lplace-ico:hover, .lplace-ico.is-on { border-color: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink, #0e0e0c); }
.lplace-ico svg { width: 14px; height: 14px; }
.lplace-addrow.is-inline { flex: 1; max-width: 62%; margin: 0; }   /* an empty place's add, beside its label */
.lplace-thm { flex: none; display: inline-block; border-radius: 3px; overflow: hidden; background: var(--bg2, #e8e6e0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.lplace-thm img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lplace-thm.is-desktop { width: 72px; height: 45px; }
.lplace-thm.is-tablet { width: 38px; height: 48px; }
.lplace-thm.is-phone { width: 23px; height: 48px; }
.lplace-thm.is-page { width: 36px; height: 50px; }
.lplace-thm.is-empty { background: transparent; box-shadow: none; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
/* Capture now, the first card of the picker (10 Sep 2026) */
.lib-card.lpk-capnow { box-shadow: none; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; }
.lib-card.lpk-capnow .lib-thumb { background: transparent; }
.lib-card.lpk-capnow:hover { border-color: color-mix(in srgb, var(--ink) 60%, transparent); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lpk-capnow-plus { font-size: 26px; font-weight: 300; line-height: 1; color: var(--ink, #0e0e0c); }
.option-value-trunc { display: inline-block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }   /* a capture's title in a value column: one line */
.cine-page > .cine-lbl { flex: none; width: 54px; color: color-mix(in srgb, var(--ink) 60%, transparent); }   /* a scene's card by place: Middle, Left, Right */
.cine-page > span > i { font-style: normal; color: color-mix(in srgb, var(--ink) 45%, transparent); }
/* the page map beside the stage (7 Sep 2026) */
.layouts-stage.has-cine-map { padding-left: 236px; }
.cine-map { position: absolute; left: 20px; top: 70px; width: 200px; }
.cine-map-lbl { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 45%, transparent); margin: 0 0 8px 2px; }
.cine-map-page { position: relative; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); user-select: none; touch-action: none; cursor: crosshair; }
.cine-map-page img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.cine-map-shots { position: absolute; inset: 0; }
.cine-map-shot { position: absolute; border: 1.5px solid rgba(14,14,12,.55); border-radius: 3px; box-sizing: border-box; pointer-events: none; }
/* the box body lets the pointer through (so a shot can be drawn over a page the
   proposals already cover); its number is the handle that selects and moves,
   its foot the handle that resizes */
.cine-map-shot i, .cine-map-shot b { pointer-events: auto; }
.cine-map-shot i { cursor: grab; }
.cine-map-shot.is-whole { border-color: rgba(14,14,12,.22); pointer-events: none; }
.cine-map-shot.is-sel { border-color: #F7CE46; border-width: 2px; }   /* one line, the honey: the shot under the camera */
.cine-map-shot i { position: absolute; left: -22px; top: -1px; width: 16px; height: 16px; border-radius: 50%; background: #0e0e0c; color: #fff; font: 500 9.5px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-style: normal; display: grid; place-items: center; }
.cine-map-shot.is-sel i { background: #F7CE46; color: #0e0e0c; }
.cine-map-shot b { position: absolute; left: 35%; right: 35%; bottom: -4px; height: 7px; border-radius: 3px; cursor: ns-resize; }
.cine-map-shot.is-sel b { background: #fff; border: 1.5px solid #0e0e0c; height: 6px; }
.cine-map-draw { position: absolute; border: 1.5px dashed rgba(14,14,12,.7); background: rgba(247,206,70,.18); border-radius: 3px; box-sizing: border-box; pointer-events: none; }
.cine-map-shot.is-whole b { display: none; }   /* the whole-page shot is a frame, not a handle: no foot, its number on the right */
.cine-map-shot.is-whole i { left: auto; right: 4px; top: 4px; }
/* Cinematic · Lift row (8 Sep 2026) */
.cine-lifts { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
.cine-lift { display: flex; align-items: center; gap: 10px; padding: 5px 4px; }
.cine-lift-w { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cine-lift-w b { font-weight: 500; font-size: 12.5px; color: var(--ink, #0e0e0c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cine-lift-w span { font-size: 11px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.cine-note { font-size: 12px; color: color-mix(in srgb, var(--ink) 60%, transparent); margin: 6px 4px 4px; line-height: 1.45; }
.cine-map-lift { position: absolute; border: 1px dashed rgba(14,14,12,.45); border-radius: 2px; box-sizing: border-box; pointer-events: none; }
/* Lift board: one box on the map, moved by dragging anywhere on the page */
.cine-map.is-lift .cine-map-page { cursor: grab; }
.cine-map.is-lift .cine-map-shot i, .cine-map.is-lift .cine-map-shot b { display: none; }
/* Cinematic shot row, tidied (8 Sep 2026): one grid of label + control, a Move menu instead of nine pills */
.cine-shot-body { padding: 4px 10px 12px 38px; }
.cine-grid { display: grid; grid-template-columns: 44px 1fr; align-items: center; row-gap: 8px; column-gap: 10px; }
.cine-lbl { font-size: 12px; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.cine-dd { display: block; }
#previewPanel .cine-dd .reel-dd-btn { height: 30px; font-size: 12.5px; padding: 0 12px; }
.cine-steps { display: flex; align-items: center; gap: 6px; }
.cine-steps b { font-weight: 500; font-size: 12.5px; color: var(--ink, #0e0e0c); min-width: 40px; text-align: center; }
.cine-shot-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.cine-lift-sw { display: inline-flex; align-items: center; gap: 8px; }