/* ─────────────────────────── Episodes (Script tab) ─────────────────────────── */
/* v07zz88 — Script panel height fix. Hugo: "Make the script panel go
all the way down, why is it stopping mid page and what is this
deadspace at the bottom for?" The open episode used to cap at
`max-height: 60vh` (see .ep-body below), which stopped the scene
list mid-page and left a big cream gap underneath. Now the
.ep-list → open .ep-row → .ep-body chain flexes to fill all the
space the cream .view-page gives it, down to the bottom of the
view. `min-height: 0` at every level lets the inner scroll shrink
correctly instead of forcing the parent to grow. */
.ep-list {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1; /* fill the .view-page (flex column) */
min-height: 0; /* allow the open episode's scroll to bound itself */
}
.ep-row { padding: 0; overflow: hidden; }
/* When an episode is open it becomes the flex-grow child so its body
stretches to the bottom; collapsed rows stay their natural height. */
.ep-row.is-open {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ep-row-head {
width: 100%;
display: grid;
grid-template-columns: 80px 1fr auto auto;
gap: 16px;
align-items: center;
padding: 18px 22px;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background var(--dur-1) ease;
}
.ep-row-head:hover { background: color-mix(in srgb, var(--hi) 30%, transparent); }
.ep-row.is-open .ep-row-head { background: color-mix(in srgb, var(--hi) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--card-border) 35%, transparent); }
.ep-num {
font-family: var(--font-display);
font-size: var(--fs-28);
color: var(--ink-muted);
letter-spacing: var(--track-005);
}
.ep-title {
font-family: var(--font-display);
font-size: var(--fs-22);
color: var(--ink);
letter-spacing: var(--track-005);
}
.ep-meta {
font-size: var(--fs-11-5);
color: var(--ink-muted);
margin-top: 4px;
}
.ep-status {
text-transform: uppercase;
letter-spacing: var(--track-10);
font-weight: var(--fw-bold);
font-size: var(--fs-10);
padding: 2px 8px;
border-radius: var(--r-round);
}
.ep-status--active { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--olive-3); }
.ep-status--draft { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--ink-tan-deep); }
.ep-status--outline { background: color-mix(in srgb, var(--ink-muted) 22%, transparent); color: var(--ink-muted); }
.ep-versions {
display: flex;
gap: 4px;
}
.ep-ver-pill {
font-family: var(--font-mono);
font-size: var(--fs-10-5);
padding: 4px 10px;
border-radius: var(--r-xs);
background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--tan-deep) 25%, transparent);
color: var(--ink);
cursor: pointer;
transition: background var(--dur-0) ease;
}
.ep-ver-pill:hover { background: color-mix(in srgb, var(--nav-active) 30%, transparent); }
.ep-ver-pill.is-active {
background: color-mix(in srgb, var(--nav-active) 55%, transparent);
border-color: color-mix(in srgb, var(--nav-active) 85%, transparent);
font-weight: var(--fw-semi);
}
.ep-chev {
color: var(--ink-muted);
transition: transform 200ms ease;
}
.ep-row.is-open .ep-chev { transform: rotate(180deg); }
/* v07zz88 — was `max-height: 60vh; overflow-y: auto` which produced a
second, capped scroll container that stopped mid-page. Now the body
is a flex-grow scroll region that fills the open .ep-row down to the
bottom. The scrollbar fix: the parent .ep-row has `overflow:hidden`
+ a border-radius, which clipped the scrollbar awkwardly at the
rounded bottom corner ("janky scrollbar cut at the bottom"). Adding
`overflow-x: hidden` here keeps the scroll vertical, a thin styled
webkit scrollbar with rounded thumb reads cleanly, and a small
bottom padding keeps the last scene clear of the rounded corner. */
.ep-body {
padding: 24px 32px 28px;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--card-border) 45%, transparent) transparent;
}
.ep-body::-webkit-scrollbar { width: 9px; }
.ep-body::-webkit-scrollbar-track { background: transparent; }
.ep-body::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--card-border) 45%, transparent);
border-radius: var(--r-round);
/* inset the thumb slightly so it never collides with the rounded
panel corner — kills the "cut at the bottom" look. */
border: 2px solid transparent;
background-clip: padding-box;
}
.ep-body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--card-border) 70%, transparent); background-clip: padding-box; }
.ep-empty {
padding: 24px;
text-align: center;
color: var(--ink-muted);
font-style: italic;
}
/* shotlist with thumbnails */
.shotlist-row {
grid-template-columns: 60px 80px 50px 1fr 140px 120px;
}
.shotlist-thumb {
width: 72px;
/* v07zz51 — Hugo: shotlist tab thumbs were locked at 56×32 which forced
~16:9. Use the project aspect-ratio token (21:9 by default) so the
thumb matches the rest of the app. Height computed from aspect-ratio. */
aspect-ratio: var(--project-aspect, 21 / 9);
border-radius: 4px;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-9);
color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
letter-spacing: var(--track-04);
position: relative;
overflow: hidden;
}
/* ─────────────────────────── Big calendar (Schedule) ─────────────────────────── */
.big-cal { padding: 18px 22px; display: flex; flex-direction: column; }
.big-cal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.big-cal-title {
font-family: var(--font-display);
font-size: var(--fs-28);
color: var(--ink);
letter-spacing: var(--track-005);
}
.big-cal-nav { display: flex; gap: 6px; align-items: center; }
.big-cal-nav-btn {
width: 32px; height: 32px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--tan-deep) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--tan-deep) 25%, transparent);
color: var(--ink);
font-size: var(--fs-18);
cursor: pointer;
display: grid; place-items: center;
}
.big-cal-nav-btn:hover { background: color-mix(in srgb, var(--nav-active) 30%, transparent); }
.big-cal-today {
padding: 0 14px;
height: 32px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--leaf) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--leaf) 55%, transparent);
color: var(--olive-3);
font-weight: var(--fw-semi);
font-size: var(--fs-12);
cursor: pointer;
}
.big-cal-dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
font-size: var(--fs-10);
letter-spacing: var(--track-14);
color: var(--ink-muted);
font-weight: var(--fw-bold);
text-align: center;
padding: 6px 0;
border-bottom: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
margin-bottom: 4px;
}
.big-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
flex: 1;
min-height: 0;
}
.big-cal-cell {
background: color-mix(in srgb, var(--hi) 20%, transparent);
border-radius: var(--r-xs);
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 70px;
position: relative;
font-feature-settings: var(--tnum);
border: 1px solid transparent;
}
.big-cal-cell--empty { background: transparent; }
.big-cal-cell.is-weekend { background: color-mix(in srgb, var(--tan-deep) 6%, transparent); }
.big-cal-cell.is-today {
background: color-mix(in srgb, var(--leaf) 20%, transparent);
border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 25%, transparent);
}
.big-cal-num {
font-size: var(--fs-12);
font-weight: var(--fw-semi);
color: var(--ink);
align-self: flex-start;
}
.big-cal-cell.is-today .big-cal-num { color: var(--olive-3); font-weight: var(--fw-bold); }
.big-cal-bands {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
margin: 2px 0;
}
.big-cal-band {
height: 16px;
border-radius: 0;
position: relative;
font-size: var(--fs-9);
letter-spacing: var(--track-04);
color: color-mix(in srgb, var(--ink-deep-2) 85%, transparent);
overflow: hidden;
display: flex;
align-items: center;
padding: 0 4px;
}
.big-cal-band.band-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding-left: 6px; }
.big-cal-band.band-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.big-cal-band-label {
font-weight: var(--fw-bold);
font-size: var(--fs-9);
text-transform: uppercase;
letter-spacing: var(--track-06);
white-space: nowrap;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
}
.big-cal-event {
font-size: var(--fs-9);
letter-spacing: var(--track-02);
font-weight: var(--fw-semi);
padding: 2px 4px;
border-radius: 3px;
background: color-mix(in srgb, var(--shade-5) 75%, transparent);
color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
text-transform: uppercase;
/* v07zz51 — Was margin-top:auto which pushed events into the same
vertical band as the stacked phase bars (lanes 0..3 stack upward
from cell bottom by 26 px each). Phase 2.5 sits at lane 2 → its
band overlapped weekly check-in buttons. Pin events directly
below the day number instead and rely on the cell's extra
padding-bottom (set in the overlay rule) to keep them clear of
the bar zone. */
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.big-cal-event--milestone { background: color-mix(in srgb, color-mix(in srgb, var(--amber) 83%, var(--mix-dark)) 92%, transparent); }
.big-cal-event--review { background: color-mix(in srgb, var(--teal) 92%, transparent); }
.big-cal-event--phase { background: color-mix(in srgb, var(--leaf) 92%, transparent); color: var(--ink-on-leaf); }
.big-cal-event--checkpoint { background: color-mix(in srgb, var(--amber) 92%, transparent); color: color-mix(in srgb, var(--ink-deep-2) 96%, var(--mix-dark)); }
.big-cal-event--delivery { background: color-mix(in srgb, var(--warn-red) 92%, transparent); }
.big-cal-event--kickoff { background: color-mix(in srgb, var(--olive-3) 92%, transparent); }
/* v07zz60 — Hover-reveal + button for adding a milestone in the
calendar grid. Sits top-right of each cell, hidden until hover. */
.big-cal-add-btn {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--olive-2) 55%, transparent);
background: color-mix(in srgb, var(--cream) 85%, transparent);
color: var(--olive-3);
font-size: var(--fs-14);
line-height: 1;
font-weight: var(--fw-bold);
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
transform: scale(0.85);
transition: opacity var(--dur-1) ease, transform var(--dur-1) ease, background var(--dur-1) ease;
z-index: 6;
padding: 0;
}
.big-cal-cell:hover .big-cal-add-btn,
.big-cal-add-btn:focus-visible {
opacity: 1;
transform: scale(1);
}
.big-cal-add-btn:hover {
background: color-mix(in srgb, var(--leaf) 30%, transparent);
}
/* v07zz60 — Inline add-milestone popover anchored inside a cell.
Floats above adjacent cells via z-index 10 so the name input is
readable. */
.big-cal-add-popover {
position: absolute;
top: 28px;
left: 6px;
right: 6px;
background: color-mix(in srgb, var(--cream-2) 99%, transparent);
border: 1px solid color-mix(in srgb, var(--olive-2) 45%, transparent);
border-radius: var(--r-sm);
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 20;
box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--shadow-ink) 35%, transparent);
min-width: 180px;
}
.big-cal-add-head {
font-size: var(--fs-9-5);
letter-spacing: var(--track-14);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--ink-muted);
}
.big-cal-add-input {
font: inherit;
font-size: var(--fs-11-5);
padding: 5px 7px;
border-radius: 5px;
border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 88%, var(--mix-light)) 35%, transparent);
background: color-mix(in srgb, var(--cream-11) 90%, transparent);
color: var(--ink);
outline: none;
}
.big-cal-add-input:focus {
border-color: color-mix(in srgb, var(--olive-2) 70%, transparent);
}
.big-cal-add-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.big-cal-add-cancel,
.big-cal-add-save {
font: inherit;
font-size: var(--fs-10-5);
font-weight: var(--fw-semi);
padding: 4px 10px;
border-radius: 5px;
cursor: pointer;
border: 1px solid transparent;
}
.big-cal-add-cancel {
background: transparent;
color: var(--ink-muted);
border-color: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 88%, var(--mix-light)) 30%, transparent);
}
.big-cal-add-cancel:hover { background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 88%, var(--mix-light)) 8%, transparent); }
.big-cal-add-save {
background: color-mix(in srgb, var(--leaf) 85%, transparent);
color: var(--white);
}
.big-cal-add-save:hover:not(:disabled) { background: var(--olive-2); }
.big-cal-add-save:disabled { opacity: 0.5; cursor: not-allowed; }
.sched-cards-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sched-phase-card {
padding: 14px 16px;
position: relative;
}
.sched-phase-card-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-top-left-radius: var(--r-lg);
border-bottom-left-radius: var(--r-lg);
}
.sched-phase-card-name {
font-family: var(--font-display);
font-size: var(--fs-15);
color: var(--ink);
margin-left: 8px;
}
.sched-phase-card-meta {
font-size: var(--fs-11);
color: var(--ink-muted);
margin: 6px 0 8px 8px;
font-feature-settings: var(--tnum);
}
.sched-phase-card-amt {
font-family: var(--font-display);
font-size: var(--fs-22);
color: var(--ink);
margin-left: 8px;
letter-spacing: var(--track-005);
}
.sched-phase-card-weeks {
font-size: var(--fs-10);
letter-spacing: var(--track-10);
color: var(--ink-muted);
text-transform: uppercase;
margin-left: 8px;
margin-top: 4px;
}
/* hide old small-month grid since we now have big-cal */
.sched-cal-grid { display: none; }
/* ─────────────────────────── Crew permissions ─────────────────────────── */
.crew-perms-preview {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 10px;
}
.crew-perm-pill {
font-size: var(--fs-9-5);
padding: 2px 7px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--leaf) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--leaf) 40%, transparent);
color: var(--olive-3);
text-transform: capitalize;
font-weight: var(--fw-med);
}
.crew-perm-more {
font-size: var(--fs-9-5);
padding: 2px 7px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--ink-muted) 20%, transparent);
color: var(--ink-muted);
font-weight: var(--fw-semi);
}
.crew-modal-section {
padding-top: 4px;
}
.crew-perms-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.crew-perm-tag {
font-size: var(--fs-11);
padding: 4px 10px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--leaf) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--leaf) 40%, transparent);
color: var(--olive-3);
text-transform: capitalize;
font-weight: var(--fw-med);
}
.cms-eyebrow {
font-size: var(--fs-10);
letter-spacing: var(--track-16);
color: var(--ink-muted);
font-weight: var(--fw-bold);
margin-bottom: 6px;
}
/* ─────────────────────────── Character detail modal ─────────────────────────── */
.char-modal-backdrop {
position: fixed;
inset: 0;
/* v06p — Hugo: match the shot popup backdrop (.modal-backdrop is
rgba(0,0,0,0.35) + blur(2px)) instead of the heavier blur. The
previous blur(8px) over a saturated green tint blurred too much
and felt out of family with the rest of the modals. */
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(var(--blur-scrim-2));
-webkit-backdrop-filter: blur(var(--blur-scrim-2));
display: grid;
place-items: center;
z-index: var(--z-dropdown);
padding: 32px;
/* v07zw — Removed `animation: fadeIn 180ms ease`. The arrow
navigation remounts the modal via key={id}, and a fading
backdrop creates a visible "un-blur" flash between cards
while opacity rises from 0 → 1. Snap-in backdrops feel
glitch-free even though the inner card still slides. */
}
.char-modal {
position: relative;
/* v06p — Hugo: fixed total size so adding / removing direction
presets doesn't grow or shrink the panel. The right info
column scrolls internally when its content exceeds the
available height, and the hero image is forced square so
the layout reads cleanly at every preset count.
v07zw — Bumped height cap from 920px → 1100px so the right
info column fits without a scrollbar on common laptop /
desktop heights. Still clamps to 92vh on small viewports. */
width: min(1320px, 96vw);
height: min(1100px, 92vh);
max-width: 1320px;
max-height: 92vh;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
/* Same cream as the asset cards / shot rows — unified element-panel cream. */
background: color-mix(in srgb, var(--cream-2) 96%, transparent) !important;
border-radius: var(--r-md);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi) 55%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
0 6px 18px color-mix(in srgb, var(--shadow-ink) 20%, transparent),
0 18px 40px color-mix(in srgb, var(--shade) 30%, transparent) !important;
}
/* Wide variant — used for Locations / Refs / Archival where the hero image
is 21:9 and benefits from a roomier panel. */
.char-modal.char-modal--wide { max-width: 1320px; }
.char-modal--wide .char-modal-grid {
grid-template-columns: 1.25fr 1fr !important;
}
.char-modal--wide .char-main-img {
aspect-ratio: var(--project-aspect, 21 / 9) !important;
}
/* v07zz375 — Image-wide variant. When the hero image is widescreen (≥ 16:9) the
modal grows to a wider, more landscape shape so the picture gets far more room.
The info column keeps a comfortable width and scrolls internally if it must.
The transition animates the reshape smoothly when you flip between a portrait
and a wide group shot instead of snapping. */
/* v07zz376 — transition only AFTER the first hero image has loaded (class added in
JS) so a fresh open snaps to the right shape with no animated resize; halved to
0.14s so flips reshape fast. */
.char-modal--anim { transition: width 0.14s ease, height 0.14s ease, max-width 0.14s ease; }
.char-modal.char-modal--imgwide {
width: min(1880px, 97vw);
max-width: 1880px;
/* v07zz375 — a 21:9 hero is short, so a shorter modal keeps the cream band above
and below the image small (the info column scrolls internally if it must). */
height: min(820px, 88vh);
}
/* v06p — Character modal layout overhaul.
- Hero image gets NO forced aspect ratio. The container fills
the available column height (flex: 1) and the image is
`background-size: contain` so portraits, squares, and
landscapes all sit at their natural ratio without being
cropped or stretched. Min-height keeps tiny portraits from
collapsing the panel.
- Right column widened from 320 → 460 px so the assigned voice
name reads in full and the Direction Presets manager has
room to breathe. */
.char-modal-grid {
grid-template-columns: minmax(0, 1fr) 460px !important;
align-items: stretch !important;
/* v06p — Grid fills the remaining modal height after the gallery,
and its overflow is hidden so the right column can scroll
internally without dragging the whole modal with it. */
flex: 1 1 0;
min-height: 0;
overflow: hidden;
}
.char-modal-grid .char-media {
padding: 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
}
.char-modal-grid .char-main-img {
/* v06p — Square hero. Sizes itself off the available column
height so the picture is as large as possible without
pushing the modal taller. width: auto + max-width: 100% keeps
it from blowing past the column on very wide viewports. */
aspect-ratio: 1 / 1 !important;
height: 100%;
max-height: 100%;
width: auto;
max-width: 100%;
border-radius: var(--r-panel);
background: color-mix(in srgb, var(--tan-deep) 6%, transparent);
/* `contain` keeps the source uncropped — portraits get
letterboxed slightly on the sides; squares fill the frame
edge-to-edge. */
background-size: contain !important;
background-repeat: no-repeat;
background-position: center center;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tan-deep) 12%, transparent);
}
/* v07zz369 — Hugo: hero takes the image's NATURAL aspect ratio and shows BIG.
When an image is present we drop the forced square + background-image and let
a real ![]()
drive the size — it fills the available column at its own ratio,
capped to the column height/width so it never overflows the modal. */
.char-modal-grid .char-main-img.is-natural {
aspect-ratio: auto !important;
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
background: none !important;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
.char-main-img.is-natural .char-main-img-el {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--r-panel);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tan-deep) 12%, transparent), 0 6px 22px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
display: block;
}
/* v07m — Archival batches are widescreen footage (16:9). Square
crops them awkwardly with empty cream space top+bottom. The
modifier `.is-archival` is applied by AssetItemModal when kind ===
"archival" so the hero panel matches the source aspect. Width
becomes the constraining dimension so the hero scales with the
column and never overflows the modal height. */
.char-modal-grid.is-archival .char-main-img {
aspect-ratio: 16 / 9 !important;
height: auto;
width: 100%;
max-width: 100%;
max-height: 100%;
}
/* v07w — Asset notes section inside .char-info. Compact list +
compose box; matches the cream popup palette without
stealing visual weight from the stats grid above. */
.asset-notes .asset-notes-empty {
font-size: var(--fs-12);
font-style: italic;
color: color-mix(in srgb, color-mix(in srgb, var(--ink-tan-deep) 65%, var(--mix-dark)) 55%, transparent);
padding: 4px 0;
}
.asset-notes-list {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 220px;
overflow-y: auto;
}
.asset-notes-row {
background: color-mix(in srgb, var(--tan-deep) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
border-radius: var(--r-sm);
padding: 8px 10px;
font-size: var(--fs-12);
line-height: 1.4;
}
.asset-notes-row.is-resolved { opacity: 0.55; }
.asset-notes-body { color: var(--ink, color-mix(in srgb, var(--ink-umber-2) 47%, var(--mix-dark))); white-space: pre-wrap; word-break: break-word; }
.asset-notes-meta {
font-size: var(--fs-10-5);
margin-top: 4px;
color: color-mix(in srgb, color-mix(in srgb, var(--ink-tan-deep) 65%, var(--mix-dark)) 62%, transparent);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.asset-notes-author { font-weight: var(--fw-med); }
.asset-notes-frame {
font-family: var(--font-mono);
font-size: var(--fs-10);
opacity: 0.85;
}
.asset-notes-compose {
display: flex;
flex-direction: column;
gap: 6px;
}
.asset-notes-compose textarea {
resize: vertical;
min-height: 52px;
border: 1px solid color-mix(in srgb, var(--tan-deep) 28%, transparent);
border-radius: var(--r-sm);
padding: 8px 10px;
font-family: inherit;
font-size: var(--fs-12);
background: color-mix(in srgb, var(--cream-2) 55%, transparent);
color: var(--ink, color-mix(in srgb, var(--ink-umber-2) 47%, var(--mix-dark)));
outline: none;
}
.asset-notes-compose textarea:focus {
border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent);
background: color-mix(in srgb, var(--cream-2) 85%, transparent);
}
.asset-notes-actions { display: flex; justify-content: flex-end; }
.asset-notes-post {
background: color-mix(in srgb, color-mix(in srgb, var(--olive-3) 74%, var(--mix-light)) 85%, transparent);
border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--leaf) 64%, var(--mix-dark)) 55%, transparent);
color: color-mix(in srgb, var(--leaf) 25%, var(--mix-dark));
font-size: var(--fs-12);
font-weight: var(--fw-med);
padding: 5px 12px;
border-radius: var(--r-xs);
cursor: pointer;
}
.asset-notes-post:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* v07za — Resolve button on each asset note row. */
.asset-notes-resolve {
margin-left: auto;
background: transparent;
border: 1px solid color-mix(in srgb, var(--tan-deep) 32%, transparent);
color: color-mix(in srgb, color-mix(in srgb, var(--ink-tan-deep) 65%, var(--mix-dark)) 78%, transparent);
font-size: var(--fs-10);
font-weight: var(--fw-med);
letter-spacing: var(--track-03);
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.asset-notes-resolve:hover {
background: color-mix(in srgb, var(--tan-deep) 12%, transparent);
color: var(--ink-umber-3);
border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent);
}
.asset-notes-row.is-resolved .asset-notes-resolve {
border-color: color-mix(in srgb, color-mix(in srgb, var(--olive-3) 84%, var(--mix-light)) 55%, transparent);
color: color-mix(in srgb, color-mix(in srgb, var(--olive-3) 84%, var(--mix-light)) 95%, transparent);
}
/* v07y — Character modal notes drawer. The Notes pill (top right of
char-info, under the stats row) toggles the drawer that slides in
from the right edge of the modal. */
.char-tabs-row {
display: flex;
justify-content: flex-end;
margin: -4px 0 6px 0;
}
/* v07z — Suggest with AI now lives under the DIRECTION PRESETS
header, left-aligned (was right of the header text). */
.char-direction-suggest-row {
display: flex;
justify-content: flex-start;
margin: 6px 0 10px 0;
}
.char-notes-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--tan-deep) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--tan-deep) 28%, transparent);
color: color-mix(in srgb, var(--ink-umber-3) 78%, transparent);
font-size: var(--fs-11);
font-weight: var(--fw-med);
letter-spacing: var(--track-05);
text-transform: uppercase;
cursor: pointer;
transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.char-notes-pill:hover {
background: color-mix(in srgb, var(--tan-deep) 14%, transparent);
color: color-mix(in srgb, var(--ink-umber-3) 95%, transparent);
border-color: color-mix(in srgb, var(--tan-deep) 42%, transparent);
}
.char-notes-pill.is-open {
background: color-mix(in srgb, var(--tan-deep) 20%, transparent);
color: var(--ink-umber-3);
border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent);
}
.char-notes-badge {
display: inline-block;
background: var(--archive, color-mix(in srgb, var(--tan-deep) 96%, var(--mix-light)));
color: color-mix(in srgb, var(--gold-8) 23%, var(--mix-light));
font-size: var(--fs-9-5);
font-weight: var(--fw-semi);
border-radius: var(--r-panel);
padding: 1px 6px;
margin-left: 2px;
}
.char-notes-drawer {
position: absolute;
top: 0;
right: 0;
width: 360px;
max-width: 60%;
height: 100%;
background: color-mix(in srgb, color-mix(in srgb, var(--gold-10) 16%, var(--mix-light)) 98%, transparent);
border-left: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
box-shadow: -8px 0 24px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
transform: translateX(100%);
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 6;
display: flex;
flex-direction: column;
border-top-right-radius: var(--r-md);
border-bottom-right-radius: var(--r-md);
overflow: hidden;
}
/* v07ze — Click-outside scrim. Covers the rest of the modal while
the drawer is open so a click anywhere outside the drawer
triggers close. Slightly darkened so the drawer reads as the
active layer. */
.char-notes-drawer-scrim {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--shade-64) 18%, transparent);
z-index: 5;
cursor: pointer;
animation: char-notes-scrim-fade var(--dur-3) ease-out;
}
@keyframes char-notes-scrim-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.char-notes-drawer.is-open { transform: translateX(0); }
.char-notes-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
background: color-mix(in srgb, var(--cream-2) 95%, transparent);
}
.char-notes-drawer-title {
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--track-08);
text-transform: uppercase;
color: color-mix(in srgb, var(--ink-umber-3) 72%, transparent);
}
.char-notes-drawer-close {
background: transparent;
border: none;
color: color-mix(in srgb, var(--ink-umber-3) 55%, transparent);
cursor: pointer;
padding: 4px;
border-radius: var(--r-xs);
display: grid;
place-items: center;
}
.char-notes-drawer-close:hover {
color: color-mix(in srgb, var(--ink-umber-3) 95%, transparent);
background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
}
.char-notes-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 14px 16px;
}
/* Inside the drawer the AssetNotesSection's outer .char-section
shouldn't get padding/border AGAIN — the drawer body already has
its own padding. Strip the section heading too since the drawer
already has a title. */
.char-notes-drawer-body .asset-notes.char-section { margin: 0; height: 100%; }
.char-notes-drawer-body .asset-notes .char-section-head { display: none; }
/* v07zz — Hugo: in the full-height notes DRAWER the list was a tiny
220px box that left ~60% of the drawer empty. Make the panel fill
the whole drawer so multiple notes are visible at once, with the
list flexing to absorb the space and only the post-note form pinned
below. Scoped to the drawer so the INLINE AssetItemModal notes block
(no tall flex parent) keeps its natural content height. */
.char-notes-drawer-body .asset-notes .notes-panel { height: 100%; min-height: 0; }
.char-notes-drawer-body .asset-notes .notes-panel .notes-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.char-modal-grid.is-archival .char-media {
/* Pull the hero toward the top so the right-column info aligns
with its first row instead of floating mid-panel. The nested
gallery strip sits directly below. */
justify-content: flex-start;
gap: 12px;
}
/* v07n — When the gallery is nested inside the left column (archival
only), drop the top border + heavy padding it would otherwise wear
as a full-width footer. The hero already has its own boundary, and
the column padding is supplied by .char-media. */
.char-modal-grid.is-archival .char-gallery-wrap {
padding: 0;
border-top: none;
width: 100%;
}
.char-modal-grid.is-archival .char-gallery-strip {
/* Slightly smaller thumbs so 6-8 fit across the column without
forcing horizontal overflow on every batch. Drag-scroll still
works when the batch has more than that. */
--thumb-min: 64px;
}
/* v07o — Character / Animal modals pin the panel to a fixed 920 px
height because their right column has lots of scrollable content
(Direction Presets, voice settings, etc.). Archival's right
column is short — title, 3 stats, 2 short paragraphs — so the
fixed height left a huge empty cream slab below the hero. Let
the archival modal size to its content instead. */
/* v07zi — Archival modal layout fix (final).
Problem: .char-modal hard-codes height: min(920 px, 92vh) which
forced a huge modal regardless of content. AND the right
column had DETAILS + USED IN sections that just restated
redundant info ("Archive batch:..." / "Linked to:...") from the
title — that made the right column 200 px taller than the
16:9 hero, leaving cream dead space below the image.
Fix: archival modal sizes to content, DETAILS + USED IN hidden
on archival only (the title row + "N frames" already conveys
everything those sections said). With those gone the right
column's natural height ≈ the hero's height, so the grid
stretches both columns to the same bottom — no dead space,
no scrollbar, hero + notes panel + gallery line up cleanly. */
.char-modal.char-modal--archival {
height: auto !important;
max-height: 92vh;
}
.char-modal--archival .char-modal-grid {
flex: 0 0 auto !important;
}
.char-modal--archival .char-media {
justify-content: flex-start;
}
/* Hide the redundant DETAILS + USED IN sections for archival —
the heading area above the stats already shows the batch name
and frame count. Keeps the right column short enough to match
the 16:9 hero's height. */
.char-modal--archival .char-info .char-section:not(.asset-notes) {
display: none;
}
/* Compact the asset-notes block so the right column total fits
inside the hero height. */
.char-modal--archival .asset-notes {
margin-top: 4px;
}
.char-modal--archival .asset-notes .notes-panel {
padding: 12px 14px !important;
}
.char-modal-grid .char-info {
padding: 22px 26px;
gap: 16px;
/* Right column scrolls internally when the direction-preset
list (or anything else) exceeds the available height. */
overflow-y: auto;
scrollbar-gutter: stable;
}
.char-modal-grid .char-name { font-size: var(--fs-28); line-height: 1.05; }
.char-modal-grid .char-role { font-size: var(--fs-13); }
.char-modal-grid .char-role-text { font-size: var(--fs-13); line-height: 1.5; }
.char-modal-grid .char-stats-grid { padding: 10px 0; }
.char-modal-grid .char-stat-num { font-size: var(--fs-22); }
/* v06l — Gallery strip is now OUTSIDE `.char-modal-grid` (sits below as
a full-width row). The previous CSS rule was scoped to
`.char-modal-grid .char-gallery-strip` which no longer matches —
the strip was falling back to the base `display: grid` rule above,
which made it wrap into multiple rows. Reset and force flex/row
here with a wrap selector so the strip stays one line. !important
beats the base grid rule without needing to touch it. */
.char-gallery-wrap {
position: relative;
padding: 10px 22px 20px;
border-top: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
/* v06p — Anchored to the bottom of the modal flex column,
never grows beyond its content. */
flex: 0 0 auto;
}
.char-gallery-wrap .char-gallery-strip {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 8px;
overflow-x: auto;
overflow-y: visible;
padding: 6px 36px 8px;
scrollbar-width: none;
-ms-overflow-style: none;
/* v07zz232 — drag-scroll removed (it fought drag-to-reorder); scroll via the
mouse wheel now, so no grab cursor. Thumbs stay draggable for reordering. */
cursor: default;
user-select: none;
-webkit-user-select: none;
touch-action: pan-x;
}
.char-gallery-wrap .char-gallery-strip::-webkit-scrollbar { display: none; }
.char-gallery-wrap .char-gallery-strip.is-dragging { cursor: grabbing; }
.char-gallery-wrap .char-gallery-thumb {
/* v07zz184 — Hugo: every thumbnail should show in its REAL aspect ratio,
all sharing the row height so they line up perfectly. Fixed height +
auto width (image tiles) instead of forced squares. Non-image tiles
(empty / PDF / gradient) keep a square default so the strip reads evenly. */
flex: 0 0 auto;
height: 96px;
width: 96px;
aspect-ratio: auto;
border-radius: var(--r-sm);
overflow: hidden;
/* v06m — Hugo: any inset shadow / background colour was bleeding
past the image edges as a "ghost rectangle". Strip both; rely
entirely on the image to define the tile. Active state below
uses a hard outline (not box-shadow inset) so there's no spill. */
box-shadow: none;
background-color: transparent;
border: none;
/* v07zz148 — Hugo: don't fade the gallery thumbnails. Full opacity for all;
the active tile just gets the gold outline, and the cover star shows on
hover (handled in JSX). */
opacity: 1;
transition: opacity var(--dur-2) ease, transform var(--dur-2) ease, outline-color var(--dur-2) ease;
}
/* v07zz184 — Image tiles: the ![]()
fills the fixed height and the tile
width tracks the image's real aspect ratio, so nothing is cropped and
every tile aligns to the same height. */
.char-gallery-wrap .char-gallery-thumb.char-gallery-thumb--img {
width: auto;
display: block;
}
.char-gallery-wrap .char-gallery-thumb-img {
display: block;
height: 100%;
width: auto;
border-radius: inherit;
}
.char-gallery-wrap .char-gallery-thumb.is-active {
opacity: 1;
outline: 2px solid color-mix(in srgb, var(--nav-active) 85%, transparent);
outline-offset: 1px;
}
.char-gallery-wrap .char-gallery-thumb:hover { opacity: 1; }
.char-gallery-wrap .char-gallery-thumb.is-active:hover { opacity: 1; }
/* v07zz188 — draggable (reorderable) thumbs show a grab cursor. */
.char-gallery-wrap .char-gallery-thumb[draggable="true"] { cursor: grab; }
.char-gallery-wrap .char-gallery-thumb[draggable="true"]:active { cursor: grabbing; }
/* v07zz188 — delete image button: subtle red tint on hover so it reads as destructive. */
.char-img-delete-btn:hover { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
/* v697 — "Add image" is the only CREATE action in a row of view/download/delete
icons, and as a 6th anonymous circle Hugo couldn't find it. Labelled pill, not a
circle: auto width, the word visible, green so it reads as add rather than
another viewer control. */
.char-img-addlib-btn {
width: auto; border-radius: var(--r-round); padding: 0 10px 0 8px; gap: 5px;
display: inline-flex; align-items: center;
border-color: color-mix(in srgb, var(--leaf) 55%, transparent); color: color-mix(in srgb, var(--olive-2) 77%, var(--mix-dark));
background: color-mix(in srgb, var(--leaf) 16%, transparent);
}
.char-img-addlib-btn:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); border-color: color-mix(in srgb, var(--leaf) 85%, transparent); color: color-mix(in srgb, var(--olive-7) 64%, var(--mix-dark)); }
.char-img-addlib-label { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-04); white-space: nowrap; }
/* v705 — HERO | WIP | ARCHIVED switch on the asset gallery strip. Hugo asked for
"exactly like the shot modal, on the thumbnails, with a switch not a button top
right", so this reuses the shot modal's own .vs-pubfilter / .vs-pf-btn pills
(styles/modal.css) and its .vt-actions / .vt-move-btn hover cluster verbatim —
only the parent selector changes, from .version-tile to .char-gallery-thumb.
Fixed height on the row so switching buckets never moves the strip (#20). */
.char-gallery-funnel {
height: 22px;
display: flex;
align-items: center;
padding: 0 36px;
margin-bottom: 6px;
}
.char-gallery-funnel .vs-pubfilter { margin-left: 0; }
/* v706 — the count sits in its own span with reserved width so the pill doesn't jump
as the buckets load in (invariant #20). */
.char-gallery-funnel .vs-pf-count { display: inline-block; min-width: 3.2ch; text-align: left; }
/* v706 — a move that fails says so, right here in the fixed-height row, instead of
only in the console (and instead of a native alert — invariant #22). */
.char-gallery-funnel-err {
margin-left: 10px; font-size: var(--fs-11); line-height: 22px;
color: var(--danger, var(--red-13));
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
/* v945 — 🔄 refresh-images button pinned to the right of the fixed-height funnel
row (both asset modals). Same ghost-icon language as the shot modal's v792. */
.char-funnel-refresh {
margin-left: auto;
width: 20px; height: 20px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid color-mix(in srgb, var(--tan-deep) 28%, transparent);
border-radius: var(--r-xs);
background: transparent;
color: var(--ink-muted);
cursor: pointer;
flex: 0 0 auto;
}
.char-funnel-refresh:hover { background: color-mix(in srgb, var(--tan-deep) 10%, transparent); color: var(--ink); }
.char-funnel-refresh:active svg { transform: rotate(180deg); transition: transform 0.25s; }
/* v706 — funnelBusy is visible now: a move in flight dims the buttons and blocks
double-clicks. Paint-only — .vt-actions is already absolutely positioned. */
.char-gallery-wrap .char-gallery-thumb .vt-actions--busy .vt-move-btn {
opacity: 0.3; cursor: progress; pointer-events: none;
}
/* The end arrows centre on .char-gallery-wrap; the funnel row makes the wrap 28px
taller, so nudge them back onto the strip's own midline. */
.char-gallery-wrap:has(.char-gallery-funnel) .char-gallery-arrow { top: calc(50% + 14px); }
.char-gallery-wrap .char-gallery-thumb .vt-actions {
position: absolute; top: 5px; right: 5px; z-index: 3;
display: flex; gap: 4px; opacity: 0;
transition: opacity var(--dur-1) ease;
}
.char-gallery-wrap .char-gallery-thumb:hover .vt-actions,
.char-gallery-wrap .char-gallery-thumb:focus-within .vt-actions { opacity: 1; }
.char-gallery-wrap .char-gallery-thumb .vt-move-btn {
width: 22px; height: 22px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: color-mix(in srgb, var(--shade-7) 72%, transparent); border: 1.5px solid color-mix(in srgb, var(--hi) 55%, transparent);
color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
transition: background var(--dur-1) ease, color var(--dur-1) ease, transform 90ms ease, box-shadow var(--dur-1) ease;
}
.char-gallery-wrap .char-gallery-thumb .vt-move-btn svg { pointer-events: none; }
.char-gallery-wrap .char-gallery-thumb .vt-move-btn:hover { transform: scale(1.08); }
.char-gallery-wrap .char-gallery-thumb .vt-move-hero:hover { background: color-mix(in srgb, var(--gold-2) 95%, transparent); color: color-mix(in srgb, var(--ink-deep) 90%, var(--mix-dark)); border-color: color-mix(in srgb, var(--hi-3) 95%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--gold-2) 60%, transparent); }
.char-gallery-wrap .char-gallery-thumb .vt-move-wip:hover { background: color-mix(in srgb, var(--blue-5) 95%, transparent); color: var(--ink-blue-37); border-color: color-mix(in srgb, var(--blue-38) 95%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--blue-5) 55%, transparent); }
.char-gallery-wrap .char-gallery-thumb .vt-move-arch:hover { background: color-mix(in srgb, var(--grey-1) 95%, transparent); color: var(--grey-1-ink); border-color: color-mix(in srgb, var(--grey-2) 90%, transparent); }
/* Empty WIP / ARCHIVED bucket — same 96px row height as a thumb so the strip
doesn't collapse when you switch to a bucket with nothing in it (#20). */
.char-gallery-empty {
flex: 0 0 auto;
height: 96px;
display: flex; align-items: center;
padding: 0 6px;
font-size: var(--fs-12); font-style: italic;
color: var(--ink-muted, var(--ink-taupe-4));
white-space: nowrap;
}
/* Archived-images overlay (asset modal — "Show archived" → restore inline).
Rendered as a portal over the modal so toggling never shifts layout (#20). */
.asset-archived-modal { width: min(640px, 92vw); max-height: 84vh; display: flex; flex-direction: column; padding: 18px 20px 16px; border-radius: var(--r-card); }
.asset-archived-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.asset-archived-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--taupe-5) 28%, transparent); background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--ink-muted, var(--ink-taupe-4)); font-size: var(--fs-18); line-height: 1; cursor: pointer; }
.asset-archived-x:hover { color: var(--ink); border-color: color-mix(in srgb, var(--taupe-5) 50%, transparent); }
.asset-archived-body { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.asset-archived-empty { text-align: center; color: var(--ink-muted, var(--ink-taupe-4)); font-size: var(--fs-13); padding: 36px 0; }
.asset-archived-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.asset-archived-tile { display: flex; flex-direction: column; gap: 6px; }
.asset-archived-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-9); background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--ink-muted) 16%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-5) 20%, transparent); }
.asset-archived-restore { font: inherit; font-size: var(--fs-12); font-weight: var(--fw-bold); padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid color-mix(in srgb, var(--leaf) 50%, transparent); background: color-mix(in srgb, var(--leaf) 14%, transparent); color: var(--olive-9); transition: background var(--dur-1) ease; }
.asset-archived-restore:hover:not(:disabled) { background: color-mix(in srgb, var(--leaf) 24%, transparent); }
.asset-archived-restore:disabled { opacity: 0.5; cursor: default; }
/* End arrows — circular buttons at the left + right edges of the wrap.
They overlay the strip's gutters so they don't crowd the thumbs.
Faded by default; cursor + opacity bump on hover. */
.char-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: color-mix(in srgb, var(--cream-2) 95%, transparent);
border: 1px solid color-mix(in srgb, var(--tan-deep) 32%, transparent);
color: var(--ink);
font-family: var(--font-display);
font-size: var(--fs-22);
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
opacity: 0.78;
transition: opacity var(--dur-1) ease, background var(--dur-1) ease, transform var(--dur-1) ease;
z-index: 5;
}
.char-gallery-arrow:hover {
opacity: 1;
background: var(--cream);
transform: translateY(-50%) scale(1.05);
}
.char-gallery-arrow--left { left: 26px; }
.char-gallery-arrow--right { right: 26px; }
/* v06m — Hide arrows when the strip doesn't overflow (set by the
useDragScroll hook via `.has-overflow`). Stops dead arrows from
showing on small ref sets that already fit. */
.char-gallery-wrap:has(.char-gallery-strip:not(.has-overflow)) .char-gallery-arrow {
display: none;
}
.char-modal-close {
background: color-mix(in srgb, var(--tan-deep) 10%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent) !important;
color: var(--ink-muted) !important;
width: 28px; height: 28px;
border-radius: 50%;
}
.char-modal-close:hover { background: color-mix(in srgb, var(--tan-deep) 22%, transparent) !important; color: var(--ink) !important; }
.char-voice-btn {
background: color-mix(in srgb, var(--leaf) 85%, transparent) !important;
}
.char-modal-close {
position: absolute;
top: 14px; right: 14px;
z-index: 5;
}
/* v07zw — Swipe animation reverted. Hugo flagged that the
slide-in showed the background briefly between modals which
read as a flicker. Falls back to the original instant swap
(no animation on the modal itself; the backdrop fade still
applies on first open). */
/* v07zs — Character modal navigation arrows. Sit OUTSIDE the
.char-modal panel (positioned against the backdrop) so they
read as page-level controls, not modal-internal. Round glass
discs, leaf-tinted hover. */
.char-modal-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--shade-5) 55%, transparent);
backdrop-filter: blur(10px) saturate(1.20);
-webkit-backdrop-filter: blur(10px) saturate(1.20);
border: 1px solid color-mix(in srgb, var(--hi) 40%, transparent);
color: color-mix(in srgb, var(--ink-hi) 92%, transparent);
cursor: pointer;
z-index: var(--z-sticky);
transition: background var(--dur-2) ease, transform var(--dur-2) ease, border-color var(--dur-2) ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40);
/* v07zz375 — half the modal width; the image-wide variant overrides it (below)
so the arrows stay just outside the WIDER modal edge instead of drifting in. */
--cm-half: min(660px, 48vw);
}
/* v07zw — Hugo: align the arrows just outside the modal panel
instead of sticking them to the viewport edges. Modal width is
min(1320px, 96vw) so half-width is min(660px, 48vw). The arrow
sits 16px outside the modal's left/right edge — i.e. its inner
edge is at (50% − half_modal_width − 16px). Clamped to 8px so
on tiny viewports the arrow stays visible. */
.char-modal-nav--prev { left: max(8px, calc(50% - var(--cm-half) - 60px)); }
.char-modal-nav--next { right: max(8px, calc(50% - var(--cm-half) - 60px)); }
/* v07zz375 — when the hero is widescreen the modal is wider (≈1880px / 97vw); the
arrows track its bigger half-width so they keep sitting just outside the edge. */
.char-modal-backdrop--imgwide .char-modal-nav { --cm-half: min(940px, 48.5vw); }
/* v07zz61 — Shot modal is narrower (.modal-card max-width 880px →
half = 440px) so the arrows need their own anchor offset.
Targeting via :has() on the backdrop so we don't have to thread
a modifier class through ShotDetailModal. */
/* v07zz398 — shot modal widened to 1180px (half = 590px), so anchor the prev/next
arrows to that half-width or they sit ~150px inside the wider edge (over the content).
Scoped to .modal-card--shot so other .modal-card popups keep their own offset. */
.modal-backdrop:has(.modal-card--shot) .char-modal-nav--prev {
left: max(8px, calc(50% - min(590px, 48vw) - 60px));
}
.modal-backdrop:has(.modal-card--shot) .char-modal-nav--next {
right: max(8px, calc(50% - min(590px, 48vw) - 60px));
}
.char-modal-nav:disabled {
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
.char-modal-nav:hover {
background: color-mix(in srgb, var(--leaf) 90%, transparent);
border-color: color-mix(in srgb, var(--hi) 80%, transparent);
transform: translateY(-50%) scale(1.06);
}
.char-modal-nav:focus-visible {
outline: 2px solid color-mix(in srgb, var(--gold-2) 85%, transparent);
outline-offset: 2px;
}
/* v07zr — Edit button positioned just left of the close button.
Matches the close-button glass treatment so the two pair
visually as a small action cluster in the top-right corner. */
.modal-edit-btn.char-modal-edit {
position: absolute;
top: 14px;
right: 50px;
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--tan-deep) 10%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent) !important;
color: var(--ink-muted);
cursor: pointer;
z-index: 5;
transition: background var(--dur-2) ease, color var(--dur-2) ease;
}
.modal-edit-btn.char-modal-edit:hover {
background: color-mix(in srgb, var(--tan-deep) 22%, transparent) !important;
color: var(--ink) !important;
}
/* v07zw — Archive button sits between Edit (right:50px) and Close
(right:14px). Same glass disc treatment as Edit. */
.modal-edit-btn.char-modal-archive {
position: absolute;
top: 14px;
right: 86px;
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--tan-deep) 10%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent) !important;
color: var(--ink-muted);
cursor: pointer;
z-index: 5;
transition: background var(--dur-2) ease, color var(--dur-2) ease;
}
.modal-edit-btn.char-modal-archive:hover {
background: color-mix(in srgb, var(--danger-soft) 18%, transparent) !important;
border-color: var(--danger-border) !important;
color: var(--danger) !important;
}
/* v07zz39 — Generate is now the SAME visible green pill as the shot modal
(.md-generate-pill: lightning glyph + "GENERATE" label) per Hugo — the small
icon disc was too subtle. The pill just needs positioning in the top-right
action cluster: its right edge sits 8px left of the Archive disc (right:86 +
28 = 114) and it grows leftward; .md-generate-pill supplies the look + hover. */
.md-generate-pill.char-modal-generate {
position: absolute;
top: 13px;
right: 122px;
z-index: 5;
}
.char-modal-grid {
display: grid;
/* Default base grid — overridden by .char-modal-grid above to 1.4fr / 1fr. */
grid-template-columns: 380px 1fr;
gap: 0;
}
.char-media { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.char-main-img {
/* v07zb — Hugo: Frames popup had a height shift because the empty
state's min-height (320 px) gave it a different aspect than the
loaded image's natural aspect when aspect-ratio was auto. Pin
to the project aspect so the container height is identical
before AND after the image loads. background-size: contain
letterboxes non-21:9 refs cleanly inside the fixed box —
better than a flash of resize on every popup open. */
aspect-ratio: var(--project-aspect, 21 / 9);
max-height: 60vh;
border-radius: var(--r-md);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: color-mix(in srgb, var(--tan-deep) 6%, transparent);
display: grid;
place-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 12px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
.char-gallery-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
}
/* v06i — strip-wide image/text-drag suppression so the drag-scroll
hook owns the pointer. */
.char-gallery-strip img,
.char-gallery-strip video {
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
.char-gallery-strip .char-gallery-thumb {
user-select: none;
}
.char-gallery-thumb {
aspect-ratio: 1;
border-radius: var(--r-sm);
background-size: cover;
background-position: center top;
border: 2px solid transparent;
cursor: pointer;
display: grid;
place-items: center;
transition: border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.char-gallery-thumb:hover { transform: translateY(-1px); }
.char-gallery-thumb.is-active { border-color: color-mix(in srgb, var(--nav-active) 85%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nav-active) 30%, transparent); }
/* v07zz238 — gold drop-line for drag-reorder. Absolute → sits in the gap WITHOUT
pushing thumbs apart (Hugo: images stay put, the gold bar appears between). */
.char-gallery-thumb { position: relative; }
/* v07zz241 — strong, unmistakable gold drop-line (was faint). */
.char-gallery-thumb.drop-before::before, .char-gallery-thumb.drop-after::after {
content: ""; position: absolute; top: -1px; bottom: -1px; width: 5px; border-radius: 3px;
background: var(--gold-13); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--gold-13) 95%, transparent), 0 0 2px rgba(255,255,255,0.6) inset;
z-index: 8; pointer-events: none;
}
.char-gallery-thumb.drop-before::before { left: -6px; }
.char-gallery-thumb.drop-after::after { right: -6px; }
/* v07zz79 — PDF tile + hero affordance. PDF gallery tiles render a
document icon in the centre with a small "PDF" label so they're
visually distinct from image refs. The hero panel shows a larger
open-in-new-tab card when the active gallery item is a PDF. */
.char-gallery-thumb--pdf { color: color-mix(in srgb, var(--ink-cream) 85%, transparent); }
.char-gallery-pdf-badge {
display: grid;
grid-template-columns: auto auto;
gap: 4px;
align-items: center;
color: color-mix(in srgb, var(--ink-cream) 85%, transparent);
}
.char-gallery-pdf-label {
font-family: var(--font-display);
font-size: var(--fs-11);
letter-spacing: var(--track-10);
color: color-mix(in srgb, var(--ink-cream) 85%, transparent);
}
.char-pdf-open {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: center;
padding: 18px 22px;
border-radius: var(--r-card);
background: rgba(0, 0, 0, 0.25);
border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
color: color-mix(in srgb, var(--ink-cream) 92%, transparent);
text-decoration: none;
max-width: 320px;
transition: background var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) ease;
}
.char-pdf-open:hover {
background: rgba(0, 0, 0, 0.35);
border-color: color-mix(in srgb, var(--cream) 35%, transparent);
transform: translateY(-1px);
}
.char-pdf-open-text { display: grid; gap: 2px; }
.char-pdf-open-label {
font-family: var(--font-display);
font-size: var(--fs-16);
letter-spacing: var(--track-06);
}
.char-pdf-open-file {
font-size: var(--fs-11-5);
color: color-mix(in srgb, var(--ink-cream) 65%, transparent);
word-break: break-word;
}
.char-gallery-placeholder {
font-family: var(--font-display);
font-size: var(--fs-18);
color: color-mix(in srgb, var(--ink-hi) 50%, transparent);
}
.char-info { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.char-eyebrow {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
color: var(--ink-muted);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.char-name {
font-family: var(--font-display);
font-size: var(--fs-36);
color: var(--ink);
letter-spacing: var(--track-005);
line-height: 1;
}
.char-role {
font-size: var(--fs-14);
color: var(--ink);
font-weight: var(--fw-med);
}
.char-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 14px 0;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
/* v07zl — Hugo: row content needs to be vertically centred between
the two divider lines (not pinned to the top). */
align-items: center;
}
/* v07zk/v07zl — Each stat column centres its glyph + caption pair
both horizontally AND vertically inside the stats row. */
.char-stat {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
}
.char-stat .char-stat-cap {
margin-top: 0;
}
.char-stat-num {
font-family: var(--font-display);
font-size: var(--fs-24);
color: var(--ink);
line-height: 1;
}
.char-stat-cap {
font-size: var(--fs-9-5);
letter-spacing: var(--track-14);
color: var(--ink-muted);
font-weight: var(--fw-semi);
margin-top: 6px;
}
.char-section { display: flex; flex-direction: column; gap: 8px; }
.char-section-head {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
color: var(--ink-muted);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.char-voice-player {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 10px 12px;
background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
border-radius: var(--r-panel);
border: 1px solid color-mix(in srgb, var(--tan-deep) 20%, transparent);
}
.char-voice-btn {
width: 36px; height: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--leaf) 85%, transparent);
border: none;
color: var(--ink-on-leaf);
cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 2px 6px color-mix(in srgb, var(--leaf) 30%, transparent);
}
.char-voice-btn:hover { background: var(--leaf); }
.char-voice-btn.is-playing { background: color-mix(in srgb, var(--amber) 85%, transparent); }
.char-voice-track { overflow: hidden; }
.char-voice-waveform {
display: flex;
align-items: center;
gap: 1.5px;
height: 32px;
}
.char-voice-bar {
flex: 1;
background: color-mix(in srgb, var(--tan-deep) 55%, transparent);
border-radius: 1px;
min-height: 2px;
}
.char-voice-time {
font-family: var(--font-mono);
font-size: var(--fs-10-5);
color: var(--ink-muted);
}
.char-voice-meta {
font-size: var(--fs-11);
color: var(--ink-muted);
margin-top: 4px;
font-style: italic;
}
/* v07zz — Voice on/off switch in the VOICE section head. OFF collapses the
voice player + direction presets so a voiceless character's card isn't
cluttered; the switch stays so it can be re-enabled. */
.char-voice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.char-voice-switch { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 2px; font: inherit; color: var(--ink-muted); }
.char-voice-switch:disabled { opacity: 0.6; cursor: default; }
.char-voice-switch-track { position: relative; width: 30px; height: 17px; border-radius: var(--r-round); background: color-mix(in srgb, var(--tan-deep) 30%, transparent); transition: background var(--dur-2) ease; flex-shrink: 0; }
.char-voice-switch-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--mix-light); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform var(--dur-2) ease; }
.char-voice-switch.is-on .char-voice-switch-track { background: color-mix(in srgb, var(--olive-2) 85%, transparent); }
.char-voice-switch.is-on .char-voice-switch-knob { transform: translateX(13px); }
.char-voice-switch-txt { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-06); text-transform: uppercase; }
.char-voice-switch.is-on .char-voice-switch-txt { color: var(--olive-3); }
.char-voice-off-hint { font-size: var(--fs-11-5); color: var(--ink-muted); font-style: italic; padding: 2px 0; }
.char-role-text {
font-size: var(--fs-13-5);
color: var(--ink);
line-height: 1.5;
font-style: italic;
}
/* v06p — Direction presets manager (Voice section, character modal). */
.char-direction-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.char-direction-suggest-btn {
font: inherit;
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
padding: 5px 11px;
border-radius: var(--r-xs);
border: 1px solid color-mix(in srgb, var(--gold-15) 55%, transparent);
background: color-mix(in srgb, color-mix(in srgb, var(--nav-active) 94%, var(--mix-light)) 35%, transparent);
color: var(--ink);
cursor: pointer;
text-transform: none;
}
.char-direction-suggest-btn:hover { background: color-mix(in srgb, color-mix(in srgb, var(--nav-active) 94%, var(--mix-light)) 60%, transparent); }
.char-direction-suggest-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.char-direction-err {
font-size: var(--fs-11-5);
color: var(--danger, var(--red-24));
margin: 6px 0;
}
.char-direction-empty {
font-size: var(--fs-12);
color: var(--ink-muted);
font-style: italic;
margin: 6px 0 10px;
line-height: 1.45;
}
.char-direction-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
}
.char-direction-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--cream-2) 55%, transparent);
}
.char-direction-row--add {
border-style: dashed;
background: color-mix(in srgb, var(--cream-2) 35%, transparent);
}
.char-direction-row.is-editing {
background: color-mix(in srgb, var(--mint) 45%, transparent);
border-color: color-mix(in srgb, var(--olive-5) 55%, transparent);
}
.char-direction-body { flex: 1 1 0; min-width: 0; }
.char-direction-label {
font-size: var(--fs-11);
font-weight: var(--fw-bold);
letter-spacing: var(--track-06);
text-transform: uppercase;
color: var(--accent, var(--olive-5));
margin-bottom: 2px;
}
.char-direction-text {
font-size: var(--fs-12-5);
color: var(--ink);
line-height: 1.4;
}
.char-direction-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.char-direction-edit-btn,
.char-direction-delete-btn {
width: 24px;
height: 24px;
border-radius: 5px;
border: 1px solid transparent;
background: transparent;
color: var(--ink-muted);
font-size: var(--fs-14);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.char-direction-edit-btn:hover { background: var(--cream-2); color: var(--ink); }
.char-direction-delete-btn:hover { background: color-mix(in srgb, var(--danger-soft) 15%, transparent); color: var(--danger, var(--red-24)); }
.char-direction-edit {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.char-direction-label-input,
.char-direction-body-input {
width: 100%;
font: inherit;
font-size: var(--fs-13);
padding: 6px 8px;
border-radius: var(--r-xs);
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--cream) 85%, transparent);
color: var(--ink);
line-height: 1.4;
}
.char-direction-body-input { resize: vertical; min-height: 50px; }
.char-direction-label-input:focus,
.char-direction-body-input:focus {
outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent);
outline-offset: 1px;
}
.char-direction-edit-actions {
display: flex;
gap: 6px;
}
.char-direction-save-btn,
.char-direction-cancel-btn {
font: inherit;
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--r-xs);
cursor: pointer;
}
.char-direction-save-btn {
background: color-mix(in srgb, var(--olive-10) 85%, transparent);
color: var(--white);
border: 1px solid color-mix(in srgb, var(--olive-10) 95%, transparent);
}
.char-direction-save-btn:hover { background: var(--olive-10); }
.char-direction-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.char-direction-cancel-btn {
background: transparent;
color: var(--ink-muted);
border: 1px solid var(--card-border);
}
.char-direction-cancel-btn:hover { background: color-mix(in srgb, var(--cream-2) 85%, transparent); color: var(--ink); }
.char-direction-add-trigger {
margin-top: 8px;
font: inherit;
font-size: var(--fs-11-5);
font-weight: var(--fw-med);
letter-spacing: var(--track-02);
padding: 7px 12px;
border-radius: var(--r-7);
border: 1px dashed color-mix(in srgb, var(--card-border) 70%, transparent);
background: transparent;
color: var(--ink-muted);
cursor: pointer;
width: 100%;
text-align: center;
transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.char-direction-add-trigger:hover {
background: color-mix(in srgb, var(--cream-2) 70%, transparent);
color: var(--ink);
border-color: color-mix(in srgb, var(--tan-deep) 60%, transparent);
}
/* v06p — Suggest-with-AI prompt panel. Drops in between the
section head and the preset list when the user clicks the
button. Cream card with a small hint textarea + count selector
+ Generate / Cancel actions. */
.char-direction-suggest-panel {
margin: 8px 0;
padding: 12px;
border-radius: var(--r-panel);
border: 1px solid color-mix(in srgb, var(--gold-15) 45%, transparent);
background: color-mix(in srgb, color-mix(in srgb, var(--nav-active) 94%, var(--mix-light)) 18%, transparent);
display: flex;
flex-direction: column;
gap: 8px;
animation: fadeIn var(--dur-2) ease;
}
.char-direction-suggest-label {
font-size: var(--fs-11);
font-weight: var(--fw-bold);
letter-spacing: var(--track-06);
text-transform: uppercase;
color: var(--ink);
}
.char-direction-suggest-input {
width: 100%;
font: inherit;
font-size: var(--fs-12-5);
line-height: 1.4;
padding: 8px 10px;
border-radius: var(--r-7);
border: 1px solid color-mix(in srgb, var(--gold-15) 45%, transparent);
background: color-mix(in srgb, var(--cream) 85%, transparent);
color: var(--ink);
resize: vertical;
min-height: 60px;
}
.char-direction-suggest-input:focus {
outline: 2px solid color-mix(in srgb, var(--gold-15) 65%, transparent);
outline-offset: 1px;
}
.char-direction-suggest-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.char-direction-suggest-count {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
color: var(--ink-muted);
text-transform: uppercase;
}
.char-direction-suggest-count select {
font: inherit;
font-size: var(--fs-12);
padding: 4px 8px;
border-radius: 5px;
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--cream) 85%, transparent);
color: var(--ink);
cursor: pointer;
}
.char-direction-suggest-actions {
display: inline-flex;
gap: 6px;
}
/* v06p — Inline delete confirmation. Replaces the row's normal
body/actions split when the × button is clicked. */
.char-direction-row.is-confirming-delete {
background: color-mix(in srgb, var(--danger-soft) 10%, transparent);
border-color: var(--danger-border);
}
.char-direction-confirm {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
font-size: var(--fs-12-5);
color: var(--ink);
}
.char-direction-confirm-text {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.char-direction-confirm-text strong {
color: var(--accent, var(--olive-5));
}
.char-direction-confirm-actions {
display: inline-flex;
gap: 6px;
}
.char-direction-delete-confirm-btn {
font: inherit;
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--r-xs);
cursor: pointer;
background: color-mix(in srgb, var(--danger-soft) 85%, transparent);
color: var(--white);
border: 1px solid color-mix(in srgb, var(--danger-soft) 95%, transparent);
}
.char-direction-delete-confirm-btn:hover { background: var(--danger-soft); }
.char-direction-delete-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ─────────────────────────── Notes compose ─────────────────────────── */
.notes-add-btn {
width: 24px; height: 24px;
display: grid; place-items: center;
background: color-mix(in srgb, var(--hi) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--foil) 35%, transparent);
border-radius: var(--r-xs);
color: var(--ink-on-dark);
cursor: pointer;
transition: background var(--dur-0) ease;
}
.notes-add-btn:hover { background: color-mix(in srgb, var(--nav-active) 30%, transparent); }
.notes-compose { display: flex; flex-direction: column; gap: 8px; }
.notes-compose-body, .notes-compose-range {
background: color-mix(in srgb, var(--cream-5) 95%, transparent);
border: 1px solid color-mix(in srgb, var(--foil) 45%, transparent);
border-radius: var(--r-xs);
padding: 10px 12px;
font-family: var(--font-body);
color: var(--ink);
font-size: var(--fs-12-5);
resize: vertical;
}
.notes-compose-body:focus, .notes-compose-range:focus {
outline: none;
border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 18%, transparent);
}
.notes-compose-range { font-size: var(--fs-11-5); }
.notes-compose-actions { display: flex; justify-content: flex-end; gap: 6px; }
.notes-compose-cancel, .notes-compose-save {
font-size: var(--fs-11-5);
padding: 6px 12px;
border-radius: var(--r-xs);
cursor: pointer;
font-weight: var(--fw-semi);
border: 1px solid;
}
.notes-compose-cancel {
background: transparent;
border-color: color-mix(in srgb, var(--foil) 35%, transparent);
color: var(--ink-on-dark);
}
.notes-compose-save {
background: color-mix(in srgb, var(--leaf) 55%, transparent);
border-color: color-mix(in srgb, var(--leaf) 85%, transparent);
color: var(--ink-on-accent);
}
.notes-compose-save:hover { background: color-mix(in srgb, var(--leaf) 75%, transparent); }
.pdot { background: none; }
.pdot.active { background: var(--leaf); }
/* Quick action buttons — active state */
.sqa-btn.is-active {
background: color-mix(in srgb, var(--nav-active) 55%, transparent);
border-color: color-mix(in srgb, var(--nav-active) 85%, transparent);
color: var(--ink);
}
/* ─────────────────────────── New Project Modal ─────────────────────────── */
.np-modal-backdrop {
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--shade-5) 65%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: grid;
place-items: center;
z-index: var(--z-dropdown);
padding: 32px;
animation: fadeIn var(--dur-3) ease;
}
.np-modal {
position: relative;
max-width: 760px;
width: 100%;
max-height: 92vh;
overflow-y: auto;
padding: 32px 36px;
display: flex;
flex-direction: column;
gap: 20px;
}
.np-modal-close { position: absolute; top: 18px; right: 18px; z-index: 5; }
/* v126 — the X had ONLY that position rule: no `.modal-close` rule exists anywhere,
so the browser drew its default white button (Hugo, 15 Sep 2026: "why is the X
not styled appropriately?"). Same look as the sequence modal's close. */
.np-modal .np-modal-close {
width: 30px; height: 30px;
border-radius: 50%;
background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
color: var(--ink-muted);
cursor: pointer;
display: grid; place-items: center;
padding: 0; line-height: 1;
transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.np-modal .np-modal-close:hover { background: color-mix(in srgb, var(--tan-deep) 22%, transparent); color: var(--ink); }
.np-modal .np-modal-close svg { width: 14px; height: 14px; }
.np-modal-head { padding-right: 40px; }
.np-eyebrow {
font-size: var(--fs-11);
letter-spacing: var(--track-18);
color: var(--ink-muted);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.np-title {
font-family: var(--font-display);
font-size: var(--fs-32);
color: var(--ink);
letter-spacing: var(--track-005);
margin: 4px 0;
}
.np-sub {
font-size: var(--fs-12-5);
color: var(--ink-muted);
}
.np-fieldset { display: flex; flex-direction: column; gap: 6px; }
.np-fieldset-row {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 14px;
}
.np-label {
font-size: var(--fs-10-5);
letter-spacing: var(--track-14);
color: var(--ink-muted);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.np-input {
background: color-mix(in srgb, var(--cream-5) 85%, transparent);
border: 1px solid color-mix(in srgb, var(--foil) 45%, transparent);
border-radius: var(--r-sm);
padding: 10px 14px;
font-family: var(--font-body);
font-size: var(--fs-13-5);
color: var(--ink);
transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.np-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 18%, transparent);
}
.np-types {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
}
.np-type {
padding: 12px;
background: color-mix(in srgb, var(--hi) 40%, transparent);
border: 1.5px solid color-mix(in srgb, var(--foil) 30%, transparent);
border-radius: var(--r-panel);
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
transition: background var(--dur-0) ease, border-color var(--dur-0) ease, transform var(--dur-0) ease;
}
.np-type:hover { background: color-mix(in srgb, var(--hi) 70%, transparent); transform: translateY(-1px); }
.np-type.is-active {
background: color-mix(in srgb, var(--leaf) 20%, transparent);
border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 20%, transparent);
}
.np-type-icon { font-size: var(--fs-18); }
.np-type-name {
font-family: var(--font-display);
font-size: var(--fs-14);
color: var(--ink);
letter-spacing: var(--track-005);
}
.np-type-sub {
font-size: var(--fs-10-5);
color: var(--ink-muted);
line-height: 1.3;
}
.np-seed-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.np-seed {
padding: 12px 16px;
background: color-mix(in srgb, var(--hi) 40%, transparent);
border: 1.5px solid color-mix(in srgb, var(--foil) 30%, transparent);
border-radius: var(--r-panel);
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
}
.np-seed.is-active {
background: color-mix(in srgb, var(--leaf) 20%, transparent);
border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
}
.np-seed-name {
font-family: var(--font-display);
font-size: var(--fs-14);
color: var(--ink);
}
.np-seed-sub {
font-size: var(--fs-11);
color: var(--ink-muted);
}
.np-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.np-btn {
padding: 10px 18px;
border-radius: var(--r-sm);
font-size: var(--fs-13);
font-weight: var(--fw-semi);
cursor: pointer;
border: 1px solid;
font-family: var(--font-body);
}
.np-btn-cancel {
background: transparent;
border-color: color-mix(in srgb, var(--tan-deep) 30%, transparent);
color: var(--ink);
}
.np-btn-cancel:hover { background: color-mix(in srgb, var(--tan-deep) 10%, transparent); }
.np-btn-create {
background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 85%, transparent), color-mix(in srgb, color-mix(in srgb, var(--leaf) 76%, var(--mix-dark)) 95%, transparent));
border-color: var(--leaf);
color: var(--ink-on-accent);
box-shadow: 0 4px 12px color-mix(in srgb, var(--leaf) 30%, transparent);
}
.np-btn-create:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 95%, transparent), color-mix(in srgb, var(--leaf) 76%, var(--mix-dark))); }
/* ─────────────────────────── Style preview thumbs (Settings) ─────────────────────────── */
.style-card { padding: 12px 14px 14px; }
.style-preview {
height: 60px;
border-radius: var(--r-xs);
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.style-preview-card {
position: absolute;
top: 8px; left: 8px;
width: 60%; height: 24px;
border-radius: 4px;
}
.style-preview-bar {
position: absolute;
bottom: 8px; left: 8px;
width: 80%; height: 6px;
border-radius: 3px;
}
.style-preview--glass {
background: linear-gradient(135deg, color-mix(in srgb, var(--leaf) 30%, transparent), color-mix(in srgb, color-mix(in srgb, var(--surface-forest) 90%, var(--mix-light)) 45%, transparent));
}
.style-preview--glass .style-preview-card {
background: color-mix(in srgb, color-mix(in srgb, var(--gold-5) 18%, var(--mix-light)) 55%, transparent);
backdrop-filter: blur(var(--blur-scrim));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.style-preview--glass .style-preview-bar {
background: linear-gradient(90deg, color-mix(in srgb, var(--nav-active) 55%, transparent), color-mix(in srgb, var(--leaf) 85%, transparent));
}
.style-preview--minimal { background: var(--card-bg-light-solid); }
.style-preview--minimal .style-preview-card {
background: var(--mix-light);
border: 1px solid color-mix(in srgb, var(--paper-2) 80%, var(--mix-dark));
}
.style-preview--minimal .style-preview-bar { background: var(--bg); }
.style-preview--editorial { background: color-mix(in srgb, var(--gold-11) 22%, var(--mix-light)); }
.style-preview--editorial .style-preview-card {
background: var(--mix-light);
border-left: 3px solid var(--bg);
}
.style-preview--editorial .style-preview-bar { background: #B5563D; }
.style-preview--neon { background: #0A0E14; }
.style-preview--neon .style-preview-card {
background: rgba(20, 30, 50, 0.85);
border: 1px solid #4FE3C8;
box-shadow: 0 0 8px rgba(79, 227, 200, 0.55);
}
.style-preview--neon .style-preview-bar { background: linear-gradient(90deg, #4FE3C8, #FF6BD3); }
.style-preview--studio { background: #F4F2EE; }
.style-preview--studio .style-preview-card { background: var(--mix-light); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.style-preview--studio .style-preview-bar { background: #888; }
.style-preview--broadcast { background: #1F1F22; }
.style-preview--broadcast .style-preview-card {
background: var(--gold-13); border-left: 4px solid #1F1F22;
}
.style-preview--broadcast .style-preview-bar { background: var(--gold-13); }
/* ─────────────────────────── Glass toggle (style: minimal flattens everything) ─────────────────────────── */
body[data-style="minimal"] .glass,
body[data-style="minimal"] .glass-dark,
body[data-style="minimal"] .topbar,
body[data-style="minimal"] .shot-row {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
body[data-style="minimal"] .glass {
background: var(--card-bg-solid) !important;
border: 1px solid color-mix(in srgb, var(--tan-deep) 35%, transparent) !important;
}
body[data-style="minimal"] .glass-dark {
background: color-mix(in srgb, var(--shade-2) 85%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--hi) 10%, transparent) !important;
}
body[data-style="minimal"] .glass::before,
body[data-style="minimal"] .glass-dark::before,
body[data-style="minimal"] .topbar::before,
body[data-style="minimal"] .shot-row::before {
display: none !important;
}
body[data-style="minimal"] .nav-item.active::before,
body[data-style="minimal"] .nav-item.active::after {
display: none !important;
}
body[data-style="minimal"] .nav-item.active {
background: color-mix(in srgb, var(--nav-active) 20%, transparent) !important;
border-color: color-mix(in srgb, var(--nav-active) 65%, transparent) !important;
box-shadow: none !important;
}
.docs-role-label {
font-size: var(--fs-9-5);
letter-spacing: var(--track-16);
color: var(--ink-on-dark-muted);
font-weight: var(--fw-bold);
padding: 0 8px;
align-self: center;
}
/* ─────────────────────────── Schedule — overlapping bars + interactive ─────────────────────────── */
.big-cal-grid-wrap {
position: relative;
/* No flex:1 — let it size to its content (the grid below) */
}
.big-cal--overlay { display: flex; flex-direction: column; flex: none; min-height: 0; }
/* v07zz66 — Hugo: "phase rows are behind EVERYTHING, even behind
the days' separators." Reverting to the original setup that
keeps phase bars VISIBLE on top of cells (their natural place).
Bars naturally sit at the BOTTOM of each cell (align-self:end +
lane transform), so they don't overlap event chips which live at
the TOP of each cell. Day cells + their separators stay below
bars (so bars look continuous), while event chips render in
their own region above bars. */
.big-cal--overlay .big-cal-grid {
position: relative;
z-index: 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.big-cal--overlay .big-cal-cell { position: relative; z-index: 0; }
.big-cal-bars-layer {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
pointer-events: none;
z-index: 1; /* above cells so bars are fully visible */
}
/* Event chips need to live ABOVE bars even though they're INSIDE
cells. Promote them via a high z-index AND give them a relative
position so the z-index registers. Bars don't visually clash
because they sit at the bottom of cells while events sit at the
top. */
.big-cal--overlay .big-cal-event {
position: relative;
z-index: 10 !important;
}
.big-cal-bar {
pointer-events: auto;
align-self: end;
height: 22px;
/* v07zz64 — Hugo: "why do I have gaps of one day in between
phases?" The horizontal 2 px margin + 4 px grid gap made it
look like there was a missing day at every phase boundary.
Drop horizontal margin so adjacent phase bars at the same lane
touch each other (grid gap is still 4 px which is fine). */
margin: 0 0 8px;
border-radius: var(--r-xs);
position: relative;
display: flex;
align-items: center;
padding: 0 10px;
font-size: var(--fs-10);
font-weight: var(--fw-bold);
letter-spacing: var(--track-06);
text-transform: uppercase;
color: color-mix(in srgb, var(--ink-deep-2) 92%, transparent);
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.50),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink) 18%, transparent),
0 2px 8px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
transform: translateY(calc(var(--lane, 0) * -26px));
transition: transform var(--dur-3) ease, box-shadow var(--dur-3) ease, opacity var(--dur-3) ease, filter var(--dur-3) ease;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.big-cal-bar.is-dim { opacity: 0.30; filter: saturate(0.5); }
.big-cal-bar.is-lifted {
transform: translateY(calc(var(--lane, 0) * -26px - 4px));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink) 22%, transparent),
0 6px 16px color-mix(in srgb, var(--shadow-ink) 30%, transparent);
z-index: 3;
}
.big-cal-bar-label {
font-weight: var(--fw-bold);
font-size: var(--fs-10);
text-transform: uppercase;
letter-spacing: var(--track-06);
white-space: nowrap;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40);
overflow: hidden;
text-overflow: ellipsis;
}
/* hide old per-cell bands when in overlay mode */
.big-cal--overlay .big-cal-bands { display: none; }
/* v07zz54 — Reserve bottom padding so the 4 phase lanes don't climb
into the event chip zone, but trim from 118 → 95 px so the chip
keeps full text room. */
/* v07zz62 — Compromise cell height 130 px (down from 175) so the
calendar isn't squashing the Phase cards + Milestones strip but
keeps enough vertical room for milestone chips ABOVE the bar
lanes. padding-bottom 64 reserves space for 4 lanes × 22 px. */
.big-cal--overlay .big-cal-cell { padding-bottom: 64px; }
.big-cal--overlay .big-cal-grid { grid-auto-rows: 130px; }
/* v07zz62 — Lift event/milestone chips above the bars layer so a
bar can never cover an event card. The bars-layer is z-index:1,
.big-cal-event already z-index:5 — adding position:relative
here so it actually establishes the stacking context. */
.big-cal-event { position: relative; z-index: 6; }
/* v07zz61 — Previous/next month leading cells render dim so the
active month reads at a glance. Hugo: "Calendar is not showing
previous month's days greyed out". */
.big-cal-cell.is-out-of-month {
opacity: 0.32;
pointer-events: none;
}
.big-cal-cell.is-out-of-month .big-cal-num {
color: color-mix(in srgb, var(--ink-deep-2) 55%, transparent);
}
/* v07zz61 — Brief scripts panel (Script page). Renders the
per-episode VO + full-script .txt files from the brief/ folder. */
.brief-script-panel {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
margin-bottom: 16px;
background: color-mix(in srgb, var(--cream-11) 55%, transparent);
border-radius: var(--r-panel);
border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 88%, var(--mix-light)) 18%, transparent);
}
.brief-script-head {
font-size: var(--fs-9-5);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
}
.brief-script-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.brief-script-pill {
font: inherit;
font-size: var(--fs-11-5);
font-weight: var(--fw-semi);
padding: 5px 11px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--cream-11) 60%, transparent);
border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 88%, var(--mix-light)) 30%, transparent);
color: var(--ink);
cursor: pointer;
transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.brief-script-pill:hover { background: color-mix(in srgb, var(--leaf) 18%, transparent); border-color: color-mix(in srgb, var(--olive-2) 55%, transparent); color: var(--ink-forest-5); }
.brief-script-pill.is-active {
background: color-mix(in srgb, var(--leaf) 85%, transparent);
border-color: color-mix(in srgb, var(--olive-2) 85%, transparent);
color: var(--white);
}
.brief-script-body {
font: inherit;
font-size: var(--fs-12);
line-height: 1.6;
color: var(--ink);
background: color-mix(in srgb, var(--cream-11) 75%, transparent);
border-radius: var(--r-sm);
padding: 14px 16px;
white-space: pre-wrap;
word-break: break-word;
max-height: 60vh;
overflow-y: auto;
}
/* v07zz58 — Phase-begin event chips align with their phase bar:
pinned to the bottom-left of the cell (where bars live), height
matches the bar height, color matches the phase (set inline).
Hugo: "PHASE 1 BEGINS type cards should be on the same line level
as the actual phase row and same colour". */
.big-cal-event--phase-inline {
position: absolute !important;
left: 4px;
right: 4px;
bottom: 10px; /* matches .big-cal-bar margin-bottom:8px + nudge */
margin: 0 !important;
height: 22px;
line-height: 22px !important;
padding: 0 8px !important;
border-radius: var(--r-xs);
display: flex;
align-items: center;
font-size: var(--fs-10) !important;
font-weight: var(--fw-bold);
letter-spacing: var(--track-06);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 5;
}
/* v07zz54 — Hugo: "Cards for checkins and other events are completely
cropped up". The legacy rule chain had three colliding margin/overflow
declarations for .big-cal-event. Reset to a clean single rule: chip
sits just below the day number, wraps onto 2 lines if needed, never
clips, fixed comfortable width inside the cell padding. */
.big-cal--overlay .big-cal-event {
margin-top: 4px !important;
margin-bottom: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
align-self: stretch !important;
line-height: 1.25 !important;
font-size: var(--fs-10) !important;
padding: 4px 6px !important;
max-height: 38px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.big-cal-event {
font-size: var(--fs-9);
letter-spacing: var(--track-02);
font-weight: var(--fw-semi);
padding: 2px 5px;
border-radius: 3px;
background: color-mix(in srgb, var(--shade-5) 85%, transparent);
color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
text-transform: uppercase;
margin-top: auto;
align-self: stretch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: none;
cursor: pointer;
text-align: left;
z-index: 4;
position: relative;
}
.big-cal-event:hover { filter: brightness(1.15); }
.big-cal-event--milestone { background: color-mix(in srgb, color-mix(in srgb, var(--amber) 83%, var(--mix-dark)) 95%, transparent); }
.big-cal-event--review { background: color-mix(in srgb, var(--teal) 95%, transparent); }
.big-cal-event--phase { background: color-mix(in srgb, var(--leaf) 95%, transparent); color: var(--ink-on-leaf); }
/* ─── t07c — z-index: events render above phase bars ────────────────
The bars layer renders the long horizontal phase-bar overlay and
sits at the bottom of each row. Weekly check-in / event chips were
getting visually covered because the chips and the bars compete for
the same vertical band at the bottom of a cell. Solution: bump the
chip z-index well clear of the bars layer (which sits at z-index: 1)
and add a vertical offset so the chip floats just above the bar
when both fall on the same day. */
.big-cal-event {
z-index: 12;
position: relative;
margin-bottom: 32px; /* keeps event above the 22px bar + its 8px bottom margin */
}
/* Make absolutely sure no later rule (or specificity quirk) lifts the
bars above events. */
.big-cal-bars-layer { z-index: 1; }
.big-cal-bar { z-index: 2; }
.big-cal-bar.is-lifted { z-index: 6; } /* still below events when hovered */
.big-cal-event--checkpoint { background: color-mix(in srgb, var(--amber) 95%, transparent); color: color-mix(in srgb, var(--ink-deep-2) 96%, var(--mix-dark)); }
.big-cal-event--delivery { background: color-mix(in srgb, var(--warn-red) 95%, transparent); }
.big-cal-event--kickoff { background: color-mix(in srgb, var(--olive-3) 95%, transparent); }
.big-cal-event--weekly {
background: color-mix(in srgb, var(--tan-deep) 55%, transparent);
color: color-mix(in srgb, var(--ink-hi) 85%, transparent);
font-weight: var(--fw-med);
}
/* v07zz338 — Hugo: move every event + milestone chip to the BOTTOM of its day cell so it sits
clear of the phase bars instead of behind them. Two earlier rules defeated a simple override:
(1) the cell's padding-bottom:64px (line ~2177) shrank the content box so margin-top:auto had
almost no free space to push into; (2) line ~2282 set margin-bottom:0 !important, cancelling the
intended 32px bar clearance. Fix: drop the bottom reserve back to the base 8px padding (the
phase bars live in a SEPARATE absolute layer, so cell padding doesn't move them), then push the
in-flow chips down with margin-top:auto and lift them 32px so they clear the bar at the row's
bottom. Subsequent chips stack just above with a 4px gap. Phase-inline chips are absolutely
positioned (bottom:10px) and intentionally untouched. */
.big-cal--overlay .big-cal-cell { padding-bottom: 8px; }
.big-cal--overlay .big-cal-event:not(.big-cal-event--phase-inline) {
margin-top: auto !important;
margin-bottom: 32px !important; /* clears the 22px bar + its 8px bottom margin at lane 0 */
}
.big-cal--overlay .big-cal-event:not(.big-cal-event--phase-inline) ~ .big-cal-event:not(.big-cal-event--phase-inline) {
margin-top: 4px !important;
margin-bottom: 0 !important;
}
/* Phase strip cards under calendar — hover to highlight matching bars */
.sched-strip-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sched-strip-card {
padding: 14px 16px;
position: relative;
cursor: pointer;
transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease, opacity var(--dur-2) ease;
}
.sched-strip-card:hover, .sched-strip-card.is-hover {
transform: translateY(-2px);
}
.sched-strip-card.is-dim { opacity: 0.45; }
.sched-strip-card-bar {
height: 4px;
border-radius: var(--r-round);
margin-bottom: 10px;
}
.sched-strip-card-name {
font-family: var(--font-display);
font-size: var(--fs-14);
color: var(--ink);
letter-spacing: var(--track-005);
}
.sched-strip-card-dates {
font-size: var(--fs-11);
color: var(--ink-muted);
margin: 4px 0;
font-feature-settings: var(--tnum);
}
.sched-strip-card-amt {
font-family: var(--font-display);
font-size: var(--fs-18);
color: var(--ink);
}
/* Phases tab: full grid */
.phase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.phase-card {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.phase-card-color {
height: 5px;
border-radius: var(--r-round);
margin-bottom: 6px;
}
.phase-card-name {
font-family: var(--font-display);
font-size: var(--fs-18);
color: var(--ink);
letter-spacing: var(--track-005);
}
.phase-card-dates {
font-size: var(--fs-11-5);
color: var(--ink-muted);
font-feature-settings: var(--tnum);
}
.phase-card-meta {
font-size: var(--fs-10);
color: var(--ink-muted);
letter-spacing: var(--track-10);
text-transform: uppercase;
font-weight: var(--fw-semi);
}
.phase-card-amt {
font-family: var(--font-display);
font-size: var(--fs-26);
color: var(--ink);
letter-spacing: var(--track-005);
margin: 6px 0 4px;
}
.phase-card-cap {
font-size: var(--fs-10);
letter-spacing: var(--track-14);
color: var(--ink-muted);
font-weight: var(--fw-bold);
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.phase-card-list {
margin: 0;
padding-left: 18px;
font-size: var(--fs-12);
color: var(--ink);
line-height: 1.55;
}
.phase-milestones {
grid-column: 1 / -1;
padding: 18px 22px;
}
.phase-milestones-head {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
margin-bottom: 14px;
}
/* v1086 — schedule revisions: the Move button and the "original" line on each stage card,
the list of changes, and the Move box (it reuses the .confirm-delete-* box). */
/* The dates line keeps the button's height for everyone, so the cards match with or without it. */
.phase-card-dates { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.phase-card-move {
flex-shrink: 0;
font: inherit; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase;
padding: 4px 10px; border-radius: var(--r-round);
border: 1px solid color-mix(in srgb, var(--leaf) 55%, transparent); background: color-mix(in srgb, var(--leaf) 16%, transparent); color: var(--ink-forest-2);
cursor: pointer; opacity: 0.75; transition: opacity var(--dur-1) ease, background var(--dur-1) ease;
}
.phase-card:hover .phase-card-move, .phase-card-move:focus-visible { opacity: 1; }
.phase-card-move:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
.phase-card-orig {
font-size: var(--fs-11); color: var(--ink-muted); font-feature-settings: var(--tnum);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phase-card-orig.is-late { color: var(--late-ink); }
.phase-card-orig.is-new { font-style: italic; }
.sched-changes { padding: 18px 22px; }
.sched-changes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.sched-changes-title { font-size: var(--fs-10); letter-spacing: var(--track-18); font-weight: var(--fw-bold); color: var(--ink-muted); }
.sched-changes-total { font-size: var(--fs-12-5); font-weight: var(--fw-semi); color: var(--ink); font-feature-settings: var(--tnum); }
.sched-changes-total.is-late { color: var(--late-ink); }
.sched-change-empty { font-size: var(--fs-12-5); color: var(--ink-muted); }
.sched-changes-list { display: flex; flex-direction: column; }
.sched-change {
display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px; gap: 16px; align-items: start;
padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--card-border) 25%, transparent);
}
.sched-change:first-child { border-top: none; padding-top: 0; }
.sched-change-when { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-12-5); font-weight: var(--fw-semi); color: var(--ink); font-feature-settings: var(--tnum); }
.sched-change-when span { font-size: var(--fs-11); font-weight: var(--fw-med); color: var(--ink-muted); }
.sched-change-what { min-width: 0; font-size: var(--fs-12-5); line-height: 1.5; color: var(--ink); }
.sched-change-why { margin-top: 2px; font-size: var(--fs-12); font-style: italic; color: var(--ink-muted); }
.sched-change-days { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; color: var(--ink); }
.sched-change-days b { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 400; line-height: 1; letter-spacing: var(--track-01); }
.sched-change-days span { font-size: var(--fs-11); color: var(--ink-muted); font-feature-settings: var(--tnum); }
.sched-change-days.is-late b { color: var(--late-ink); }
.sched-move-modal { width: min(560px, 92vw); }
.sched-move-eyebrow { color: var(--olive-3); }
.sched-move-now { margin: -6px 0 14px; font-size: var(--fs-12-5); color: var(--ink-muted); font-feature-settings: var(--tnum); }
.sched-move-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sched-move-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); }
.sched-move-field input {
font: inherit; font-size: var(--fs-13); font-weight: var(--fw-med); padding: 7px 10px; border-radius: var(--r-xs);
border: 1px solid var(--card-border); background: color-mix(in srgb, var(--cream) 85%, transparent); color: var(--ink);
}
.sched-move-field input:focus { outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent); outline-offset: 1px; }
.sched-move-bumps { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--tan-deep) 12%, transparent); }
.sched-move-bumps button {
font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-semi); padding: 6px 9px; border: none; border-radius: 5px;
background: transparent; color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.sched-move-bumps button:hover:not(:disabled) { background: color-mix(in srgb, var(--hi) 85%, transparent); color: var(--ink); }
.sched-move-ripple { margin: 2px 0 4px; }
.sched-move-reason { letter-spacing: normal; }
.sched-move-reason:focus { outline-color: color-mix(in srgb, var(--leaf) 55%, transparent); border-color: color-mix(in srgb, var(--leaf) 65%, transparent); }
.sched-move-preview { margin-top: 12px; min-height: 4.5em; font-size: var(--fs-12-5); line-height: 1.5; color: var(--ink); font-feature-settings: var(--tnum); }
.sched-move-preview.is-bad { color: var(--danger); }
.sched-move-save { background: color-mix(in srgb, var(--olive-2) 92%, transparent); border-color: var(--olive-2); }
.sched-move-save:hover:not(:disabled) { background: var(--olive-3); }
/* 24 Sep 2026 (G7 review) — another project's "+ Add stage" / "+ Add payment milestone" (the Move
pill, always at full strength), the empty stage card, and the add box's colour swatches. The
heads keep one height with or without the button (#20). */
.sched-stage-head, .sched-ms-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.sched-add-btn { opacity: 1; }
.sched-stage-empty { grid-column: 1 / -1; }
.sched-add-row { margin-top: 12px; }
.sched-add-swatches { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
.sched-add-swatch {
width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
border: 2px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
.sched-add-swatch.is-on { border-color: var(--ink); }
@media (max-width: 700px) {
.sched-change { grid-template-columns: 1fr; gap: 4px; }
.sched-change-days { align-items: flex-start; text-align: left; }
}
/* Event detail modal */
.evt-modal-backdrop {
position: fixed; inset: 0;
background: color-mix(in srgb, var(--shade-5) 55%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid; place-items: center;
z-index: var(--z-dropdown);
padding: 32px;
animation: fadeIn var(--dur-3) ease;
}
.evt-modal {
position: relative;
max-width: 480px;
width: 100%;
padding: 24px 28px;
}
.evt-modal-close { position: absolute; top: 14px; right: 14px; }
.evt-modal-eyebrow {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
}
.evt-modal-title {
font-family: var(--font-display);
font-size: var(--fs-22);
color: var(--ink);
letter-spacing: var(--track-005);
margin: 8px 0;
line-height: 1.15;
}
.evt-modal-meta {
display: flex;
flex-direction: column;
gap: 4px;
margin: 12px 0;
padding: 10px 0;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
font-size: var(--fs-12);
color: var(--ink-muted);
}
.evt-modal-date { color: var(--ink); font-weight: var(--fw-med); }
.evt-modal-body {
font-size: var(--fs-13);
color: var(--ink);
line-height: 1.55;
}
/* v07zz59 — Join meeting button on event modal. Green pill matching
the rest of the app's primary-action style. */
.evt-modal-join {
display: inline-flex;
align-items: center;
margin-top: 14px;
padding: 9px 16px;
border-radius: var(--r-round);
background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 92%, transparent), color-mix(in srgb, var(--olive-2) 92%, transparent));
color: var(--ink-cream);
font-weight: var(--fw-semi);
font-size: var(--fs-12);
letter-spacing: var(--track-04);
text-transform: uppercase;
text-decoration: none;
border: 1px solid color-mix(in srgb, var(--surface-forest-6) 45%, transparent);
box-shadow: 0 2px 6px color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 15%, var(--mix-dark)) 18%, transparent);
}
.evt-modal-join:hover { filter: brightness(1.08); }
/* ─────────────────────────── Interactive cards (hover lift + outline) ─────────────────────────── */
.interactive-card {
cursor: pointer;
transition: transform var(--dur-2) ease, box-shadow 200ms ease;
}
.interactive-card:hover {
transform: translateY(-3px);
}
.interactive-card:hover::before {
background: linear-gradient(135deg,
color-mix(in srgb, var(--hi-3) 95%, transparent) 0%,
color-mix(in srgb, var(--foil) 55%, transparent) 22%,
color-mix(in srgb, var(--foil) 18%, transparent) 45%,
transparent 70%) !important;
opacity: 1 !important;
}
.character-card { cursor: pointer; transition: transform var(--dur-2) ease; }
.character-card:hover { transform: translateY(-3px); }
/* ─────────────────────────── New Project — bigger panels + aspect picker + templates ─────────────────────────── */
.np-modal--lg {
max-width: 920px;
padding: 36px 44px;
}
.np-types--lg {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.np-type--lg {
padding: 18px 18px 16px;
gap: 6px;
}
.np-type--lg .np-type-icon { font-size: var(--fs-26); line-height: 1; }
.np-type--lg .np-type-name {
font-size: var(--fs-17);
margin-top: 4px;
}
.np-type--lg .np-type-sub {
font-size: var(--fs-12);
line-height: 1.4;
color: var(--ink-muted);
}
.np-aspect-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.np-aspect {
padding: 8px 14px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--hi) 40%, transparent);
border: 1.5px solid color-mix(in srgb, var(--foil) 30%, transparent);
color: var(--ink);
font-family: var(--font-mono);
font-size: var(--fs-12);
cursor: pointer;
font-weight: var(--fw-semi);
}
.np-aspect.is-active {
background: color-mix(in srgb, var(--leaf) 20%, transparent);
border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 20%, transparent);
}
.np-seed-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.np-seed-kind {
font-size: var(--fs-9);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
margin-bottom: 4px;
}
.np-seed--previous .np-seed-kind { color: var(--olive-3); }
/* ─────────────────────────── Shot Queue full modal ─────────────────────────────
Full rebuild — matches the reference mock 1:1. The popup uses the
shared `.modal-backdrop` for dim + blur (defined in modal.css) so
open/close behaviour matches every other modal in the app. Card is
a dark forest-green glass tray with two cream-row "tables" inside
(IMAGE QUEUE + VIDEO QUEUE).
--------------------------------------------------------------------------- */
.sqm-card {
position: relative;
width: 100%;
max-width: 1300px;
max-height: 88vh;
overflow-y: auto;
/* Generous top padding so the close button has clear airspace above
the header content. Side + bottom padding tuned to leave the IMAGE
QUEUE / VIDEO QUEUE section trays comfortably inside the gold ring. */
padding: 60px 40px 40px;
display: flex;
flex-direction: column;
gap: 28px;
border-radius: var(--r-lg);
color: var(--ink-cream-10);
background:
linear-gradient(180deg,
color-mix(in srgb, color-mix(in srgb, var(--sidebar-bg) 88%, var(--mix-dark)) 92%, transparent) 0%,
color-mix(in srgb, var(--shade-20) 94%, transparent) 100%);
backdrop-filter: blur(22px) saturate(1.15);
-webkit-backdrop-filter: blur(22px) saturate(1.15);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--hi) 18%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi-2) 10%, transparent),
inset 0 -1px 0 rgba(0, 0, 0, 0.30),
0 24px 72px rgba(0, 0, 0, 0.55);
animation: modalPop 200ms var(--ease-pop);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--cream-6) 30%, transparent) transparent;
}
/* Soft warm-gold gradient ring along the top-left edge — same idiom as
the topbar's `::before` foil ring, scaled down for the modal. */
.sqm-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--hi-3) 55%, transparent) 0%,
color-mix(in srgb, var(--foil) 22%, transparent) 20%,
color-mix(in srgb, var(--foil) 6%, transparent) 45%,
transparent 65%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
}
.sqm-card::-webkit-scrollbar { width: 9px; }
.sqm-card::-webkit-scrollbar-track { background: transparent; }
.sqm-card::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, color-mix(in srgb, var(--cream-6) 45%, transparent), color-mix(in srgb, color-mix(in srgb, var(--card-border) 89%, var(--mix-dark)) 32%, transparent));
border-radius: var(--r-round);
border: 2px solid transparent;
background-clip: padding-box;
}
.sqm-close {
position: absolute;
top: 18px; right: 18px;
width: 34px; height: 34px;
border-radius: 50%;
background: color-mix(in srgb, var(--hi) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--cream-6) 30%, transparent);
color: var(--ink-cream-8);
display: grid; place-items: center;
cursor: pointer;
z-index: 3;
transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.sqm-close:hover {
background: color-mix(in srgb, var(--hi) 24%, transparent);
border-color: color-mix(in srgb, var(--cream-6) 55%, transparent);
}
/* ── Header row: title cluster on the left, two stat cards on the right.
No internal padding-right — the close button has its own absolute
placement above the modal padding, so the stat cards can run flush
to the same right edge as the IMAGE/VIDEO QUEUE section trays
underneath. ── */
.sqm-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
position: relative;
z-index: 2;
}
.sqm-header-left { display: flex; flex-direction: column; }
.sqm-eyebrow {
font-size: var(--fs-10);
letter-spacing: 0.22em;
font-weight: var(--fw-bold);
color: color-mix(in srgb, var(--ink-cream-10) 72%, transparent);
text-transform: uppercase;
}
.sqm-title {
font-family: var(--font-display);
font-size: 40px;
letter-spacing: var(--track-01);
color: color-mix(in srgb, var(--ink-hi) 83%, var(--mix-light));
margin: 10px 0 10px;
line-height: 1;
font-weight: var(--fw-med);
}
.sqm-sub {
font-size: var(--fs-12-5);
color: color-mix(in srgb, var(--ink-cream-10) 78%, transparent);
font-feature-settings: var(--tnum);
}
.sqm-stats {
display: flex;
gap: 12px;
flex: 0 0 auto;
}
.sqm-stat {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px 14px 18px;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--shade-18) 55%, transparent);
border: 1px solid color-mix(in srgb, var(--cream-6) 18%, transparent);
min-width: 158px;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--hi) 10%, transparent),
inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.sqm-stat--video {
background: color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 77%, var(--mix-dark)) 55%, transparent);
border-color: color-mix(in srgb, var(--nav-active) 30%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--hi-3) 18%, transparent),
inset 0 -1px 0 rgba(0, 0, 0, 0.20),
0 0 24px color-mix(in srgb, color-mix(in srgb, var(--gold-14) 87%, var(--mix-light)) 10%, transparent);
}
.sqm-stat-icon {
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
}
.sqm-stat--image .sqm-stat-icon {
background: linear-gradient(140deg, color-mix(in srgb, var(--leaf-bright) 30%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 72%, var(--mix-dark)) 32%, transparent) 100%);
color: color-mix(in srgb, var(--leaf-bright) 51%, var(--mix-light));
box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 27%, var(--mix-light)) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 30%, var(--mix-dark)) 25%, transparent);
}
.sqm-stat--video .sqm-stat-icon {
background: linear-gradient(140deg, color-mix(in srgb, var(--gold-2) 32%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--gold-8) 89%, var(--mix-dark)) 34%, transparent) 100%);
color: color-mix(in srgb, var(--gold-13) 54%, var(--mix-light));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hi-3) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 90%, var(--mix-dark)) 25%, transparent);
}
/* v1063 — DEPTH JOBS card: a cool slate beside the green image card and the amber video
card. Depth maps are greyscale, so the odd colour out is the depth one on purpose. */
.sqm-stat--depth {
background: color-mix(in srgb, var(--blue-36) 55%, transparent);
border-color: color-mix(in srgb, var(--blue-35) 28%, transparent);
}
.sqm-stat--depth .sqm-stat-icon {
background: linear-gradient(140deg, color-mix(in srgb, var(--blue-30) 30%, transparent) 0%, color-mix(in srgb, var(--blue-31) 34%, transparent) 100%);
color: var(--ink-blue-32);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blue-33) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--blue-34) 25%, transparent);
}
.sqm-stat-text { display: flex; flex-direction: column; gap: 2px; }
.sqm-stat-num {
font-family: var(--font-display);
font-size: var(--fs-28);
color: color-mix(in srgb, var(--ink-hi) 83%, var(--mix-light));
line-height: 1;
font-feature-settings: var(--tnum);
font-weight: var(--fw-med);
}
.sqm-stat-label {
font-size: var(--fs-9-5);
letter-spacing: var(--track-16);
font-weight: var(--fw-bold);
color: color-mix(in srgb, var(--ink-cream-10) 78%, transparent);
text-transform: uppercase;
}
/* ── Section tray: darker green pillbox holding the table. ── */
.sqm-section {
position: relative;
z-index: 2;
border-radius: var(--r-card);
padding: 18px 18px 16px;
background: color-mix(in srgb, var(--shade-19) 55%, transparent);
border: 1px solid color-mix(in srgb, var(--cream-6) 14%, transparent);
display: flex;
flex-direction: column;
gap: 8px;
}
.sqm-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 4px 4px;
}
.sqm-section-title {
font-size: var(--fs-11);
letter-spacing: 0.22em;
font-weight: var(--fw-bold);
color: color-mix(in srgb, var(--ink-cream-10) 85%, transparent);
text-transform: uppercase;
}
.sqm-chips { display: inline-flex; align-items: center; gap: 18px; }
.sqm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-11-5);
font-weight: var(--fw-semi);
color: color-mix(in srgb, var(--ink-cream-10) 82%, transparent);
font-feature-settings: var(--tnum);
}
.sqm-chip-dot {
width: 7px; height: 7px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.sqm-chip-dot--rendering { background: var(--olive-6); box-shadow: 0 0 6px color-mix(in srgb, var(--olive-6) 55%, transparent); }
.sqm-chip-dot--waiting { background: color-mix(in srgb, var(--gold-16) 88%, var(--mix-dark)); box-shadow: 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--gold-16) 88%, var(--mix-dark)) 55%, transparent); }
.sqm-chip-dot--submitting { background: var(--blue-18); box-shadow: 0 0 6px color-mix(in srgb, var(--blue-18) 55%, transparent); }
/* ── Table: column header row + cream pill data rows. Both share the
same grid template so columns line up exactly. ── */
.sqm-table { display: flex; flex-direction: column; gap: 8px; }
.sqm-table--image .sqm-cols,
.sqm-table--image .sqm-row,
.sqm-table--video .sqm-cols,
.sqm-table--video .sqm-row {
display: grid;
/* v07zz530 — Hugo: added a THUMB column (small shot preview) right after SHOT, and
HID the USER + STAGE columns (kept in the DOM behind .sqm-user / .sqm-stage
display:none so they can be un-hidden later). 9 DOM cells → 7 visible tracks:
SHOT | THUMB | (user) | MODEL | (stage) | PROGRESS | STATUS | ETA | ACTIONS */
grid-template-columns:
150px /* SHOT */
92px /* THUMB */
120px /* MODEL */
1fr /* PROGRESS */
130px /* STATUS */
60px /* ETA / WHEN */
72px /* ACTIONS */;
column-gap: 12px;
align-items: center;
}
/* Hide (not delete) USER + STAGE. Rows carry .sqm-user / .sqm-stage; headers use
bare spans (3rd + 5th child). display:none drops them from grid flow so the
remaining cells auto-place into the 7 tracks above. */
.sqm-user, .sqm-stage { display: none; }
.sqm-table--image .sqm-cols > span:nth-child(3),
.sqm-table--image .sqm-cols > span:nth-child(5),
.sqm-table--video .sqm-cols > span:nth-child(3),
.sqm-table--video .sqm-cols > span:nth-child(5) { display: none; }
/* THUMB cell — small shot preview. */
.sqm-thumb { display: inline-flex; align-items: center; justify-content: center; }
.sqm-thumb-img { width: 88px; height: 52px; object-fit: cover; border-radius: var(--r-xs); box-shadow: 0 1px 3px rgba(0,0,0,0.28); background: color-mix(in srgb, var(--taupe) 22%, transparent); }
.sqm-thumb-ph { width: 88px; height: 52px; border-radius: var(--r-xs); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--taupe) 18%, transparent), color-mix(in srgb, var(--taupe) 18%, transparent) 4px, color-mix(in srgb, var(--taupe) 10%, transparent) 4px, color-mix(in srgb, var(--taupe) 10%, transparent) 8px); }
.sqm-cols {
font-size: var(--fs-9-5);
letter-spacing: 0.20em;
font-weight: var(--fw-bold);
color: color-mix(in srgb, var(--ink-cream-10) 55%, transparent);
padding: 6px 22px;
text-transform: uppercase;
}
/* v07zz530 — column alignment for the new 9-child structure (USER=3, STAGE=5 are
display:none): 1 SHOT left · 2 THUMB centre · 4 MODEL centre · 6 PROGRESS header-left /
bar-stretch · 7 STATUS centre · 8 ETA centre · 9 ACTIONS right. Image + video share it. */
.sqm-table--image .sqm-cols > span:nth-child(2),
.sqm-table--image .sqm-cols > span:nth-child(4),
.sqm-table--image .sqm-cols > span:nth-child(7),
.sqm-table--image .sqm-cols > span:nth-child(8),
.sqm-table--image .sqm-row > span:nth-child(2),
.sqm-table--image .sqm-row > span:nth-child(4),
.sqm-table--image .sqm-row > span:nth-child(7),
.sqm-table--image .sqm-row > span:nth-child(8),
.sqm-table--video .sqm-cols > span:nth-child(2),
.sqm-table--video .sqm-cols > span:nth-child(4),
.sqm-table--video .sqm-cols > span:nth-child(7),
.sqm-table--video .sqm-cols > span:nth-child(8),
.sqm-table--video .sqm-row > span:nth-child(2),
.sqm-table--video .sqm-row > span:nth-child(4),
.sqm-table--video .sqm-row > span:nth-child(7),
.sqm-table--video .sqm-row > span:nth-child(8) {
text-align: center;
justify-self: center;
}
.sqm-cols > span:nth-child(1),
.sqm-row > span:nth-child(1) { text-align: left; justify-self: start; }
.sqm-cols > span:nth-child(9),
.sqm-row > span:nth-child(9) { text-align: right; justify-self: end; }
.sqm-cols > span:nth-child(6) { text-align: left; justify-self: start; }
.sqm-row > span:nth-child(6) { justify-self: stretch; }
.sqm-row {
padding: 14px 22px;
font-size: var(--fs-12);
font-feature-settings: var(--tnum);
border-radius: var(--r-md);
background: color-mix(in srgb, var(--cream-2) 97%, transparent);
color: var(--ink);
border: none;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
0 2px 4px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
0 6px 14px rgba(0, 0, 0, 0.18);
text-shadow: none;
transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.sqm-row:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 95%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
0 0 0 1.5px color-mix(in srgb, var(--nav-active) 60%, transparent),
0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
0 12px 24px color-mix(in srgb, var(--foil) 20%, transparent);
}
/* SHOT cell — coloured status dot + display-font ID. */
.sqm-shot {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.sqm-dot {
width: 9px; height: 9px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.sqm-dot--rendering { background: color-mix(in srgb, var(--olive-4) 96%, var(--mix-light)); box-shadow: 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--olive-4) 96%, var(--mix-light)) 55%, transparent); }
.sqm-dot--waiting { background: var(--gold-6); box-shadow: 0 0 6px color-mix(in srgb, var(--gold-6) 55%, transparent); }
.sqm-dot--submitting { background: var(--blue-17); box-shadow: 0 0 6px color-mix(in srgb, var(--blue-17) 55%, transparent); }
.sqm-shot {
display: inline-flex;
flex-direction: column;
gap: 2px;
line-height: 1;
}
.sqm-shot-id {
font-family: var(--font-display);
font-size: var(--fs-22);
letter-spacing: var(--track-02);
color: var(--ink);
line-height: 1;
white-space: nowrap;
font-weight: var(--fw-med);
}
/* v07zz17 — Submitter chip under the shot id. Tiny tertiary text so
it doesn't fight the bold shot id for visual weight. */
.sqm-shot-by {
font-size: var(--fs-9-5);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
color: var(--ink-muted);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 110px;
font-family: var(--font-body);
}
.sqm-seq {
font-size: var(--fs-9-5);
padding: 4px 10px;
border-radius: var(--r-xs);
background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 16%, transparent);
color: color-mix(in srgb, var(--ink-taupe-4) 80%, var(--mix-dark));
font-weight: var(--fw-bold);
letter-spacing: var(--track-10);
text-align: center;
width: fit-content;
white-space: nowrap; /* v07zx — keep "SEQ 02" on one line */
}
/* v07zz31 — USER column. Plain text styled like the model name so the
eye scans it as "data" rather than as a chip — chips would feel like
a filter affordance, which it isn't. Centre-aligned per the global
nth-child(2) rule. Em-dash dim when there is no submitter. */
.sqm-user {
font-family: var(--font-body);
font-size: var(--fs-12);
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.sqm-user:empty,
.sqm-user[title=""] { color: var(--ink-muted); opacity: 0.5; }
.sqm-model {
font-family: var(--font-body);
font-size: var(--fs-12-5);
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sqm-stage {
color: var(--ink);
font-size: var(--fs-12-5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sqm-eta {
color: var(--ink);
text-align: right;
font-size: var(--fs-12-5);
font-weight: var(--fw-med);
font-feature-settings: var(--tnum);
/* v07zz40 — Hugo: "I don't want the ETA line to go on 2 lines after
10min ago and make the row taller." Keep it on a single line and
truncate with ellipsis if absolutely necessary. Row height stays
stable as ETA text scales from "soon" → "11 min ago" → "1 hr ago". */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Progress cell — the most varied: bar+% for rendering, WAITING pill+#N
for waiting, dotted spinner+SUBMITTING pill for submitting. */
.sqm-progress, .sqm-submitted {
/* v07zw — Was inline-flex (sized to content). Switched to plain
flex with width:100% so the cell fills its grid column and
the bar inside stretches across the whole PROGRESS slot. */
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
width: 100%;
}
.sqm-bar {
flex: 1 1 auto;
height: 8px;
min-width: 80px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--ink-muted) 22%, transparent);
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink-muted) 10%, transparent);
display: block;
}
.sqm-bar-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, color-mix(in srgb, var(--leaf-bright) 88%, var(--mix-dark)) 0%, color-mix(in srgb, var(--leaf-bright) 92%, var(--mix-light)) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.sqm-pct {
font-size: var(--fs-12);
font-weight: var(--fw-semi);
color: var(--ink);
font-feature-settings: var(--tnum);
white-space: nowrap;
}
/* Inline status pill. Same colour family as the dot for instant
recognisability — green/orange/blue. */
.sqm-pill {
font-size: var(--fs-9-5);
padding: 4px 12px;
border-radius: var(--r-round);
font-weight: var(--fw-bold);
letter-spacing: var(--track-14);
text-align: center;
border: 1px solid;
text-transform: uppercase;
white-space: nowrap;
width: fit-content;
}
.sqm-pill--rendering { background: color-mix(in srgb, var(--leaf-bright) 22%, transparent); border-color: color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 72%, var(--mix-dark)) 65%, transparent); color: var(--ink-forest-2); }
.sqm-pill--waiting { background: color-mix(in srgb, var(--gold-16) 20%, transparent); border-color: color-mix(in srgb, var(--gold-6) 65%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); }
.sqm-pill--submitting { background: color-mix(in srgb, var(--blue-19) 20%, transparent); border-color: color-mix(in srgb, var(--blue-17) 65%, transparent); color: var(--ink-blue-20); }
/* v07zw — Terminal-state pills + row styling for completed jobs that
stay in their main image/video section until archived.
v07zz39 — Hugo: COMPLETED pill is gold foil. Reads as "done /
delivered" instead of the same green as RENDERING. Uses the same
warm-gold accent as the modal hero pill so the language is
consistent: gold = approved/locked/done. */
.sqm-pill--completed {
background: linear-gradient(135deg,
color-mix(in srgb, var(--hi-2) 92%, transparent) 0%,
color-mix(in srgb, var(--nav-active) 82%, transparent) 38%,
color-mix(in srgb, var(--foil) 66%, transparent) 70%,
color-mix(in srgb, var(--gold-deep) 55%, transparent) 100%);
border-color: color-mix(in srgb, var(--gold-deep) 85%, transparent);
color: color-mix(in srgb, var(--ink-tan-deep) 63%, var(--mix-dark));
box-shadow:
inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--hi) 76%, var(--mix-light)) 85%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--tan-deep) 20%, transparent),
0 0 0 1px color-mix(in srgb, var(--gold-3) 18%, transparent);
text-shadow: 0 1px 0 color-mix(in srgb, var(--hi) 45%, transparent);
}
.sqm-pill--failed { background: color-mix(in srgb, var(--danger-soft) 18%, transparent); border-color: color-mix(in srgb, var(--red-18) 65%, transparent); color: var(--danger); }
.sqm-pill--cancelled { background: color-mix(in srgb, var(--st-pending) 18%, transparent); border-color: color-mix(in srgb, var(--taupe-5) 55%, transparent); color: var(--st-archive-ink); }
.sqm-row--completed { opacity: 0.85; }
.sqm-row--failed { background: color-mix(in srgb, var(--danger-soft) 5%, transparent); }
.sqm-row--cancelled { opacity: 0.65; }
/* ── v952 — GROUPED rows: one row per shot, its jobs stacked as slim lines.
The group keeps the first two header tracks (SHOT 150 + THUMB 92); the
job-line grid reproduces the remaining tracks (MODEL 120 · PROGRESS 1fr ·
STATUS 130 · ETA 60 · ACTIONS 72, gap 12) so everything still lines up
under the column headers. Row tint follows the most ACTIVE job; per-line
dimming handles finished jobs inside a mixed group. ── */
.sqm-table--image .sqm-row--group {
grid-template-columns: 150px 92px 1fr;
}
.sqm-row--group > .sqm-jobs {
display: flex; flex-direction: column; gap: 0;
min-width: 0;
}
.sqm-jobline {
display: grid;
grid-template-columns: 120px 1fr 130px 60px 72px;
column-gap: 12px;
align-items: center;
padding: 5px 0;
min-width: 0;
}
.sqm-jobline + .sqm-jobline { border-top: 1px dashed color-mix(in srgb, var(--shadow-ink-2) 12%, transparent); }
.sqm-jobline > .sqm-user, .sqm-jobline > .sqm-stage { display: none; }
.sqm-jobline > .sqm-model, .sqm-jobline > .sqm-status, .sqm-jobline > .sqm-eta { text-align: center; justify-self: center; }
.sqm-jobline > .sqm-progress { justify-self: stretch; }
.sqm-jobline > .sqm-action-cell { justify-self: end; }
.sqm-jobline--completed { opacity: 0.6; }
.sqm-jobline--cancelled { opacity: 0.45; }
/* ×N job-count badge beside the shot id */
.sqm-shot-count {
font-size: var(--fs-10); font-weight: var(--fw-bold); color: color-mix(in srgb, var(--ink-deep) 55%, transparent);
background: color-mix(in srgb, var(--taupe) 14%, transparent);
border-radius: var(--r-round); padding: 1px 7px; flex: 0 0 auto;
}
/* v958 — collapsed groups: chevron + pointer; only the newest job line shows
until the card is clicked open. */
.sqm-row--expandable { cursor: pointer; }
.sqm-group-chev {
font-size: var(--fs-10); color: color-mix(in srgb, var(--ink-deep) 50%, transparent);
width: 12px; flex: 0 0 auto; text-align: center;
}
.sqm-row--expandable:hover .sqm-group-chev { color: color-mix(in srgb, var(--ink-deep) 90%, transparent); }
.sqm-row--archived { opacity: 0.7; }
/* Red X archive button per row. */
.sqm-archive-btn {
/* v07zw — Unicode ✕ + place-items:center wasn't visually
centred because the glyph has asymmetric bearings. SVG icons
are perfectly centred. */
font: inherit;
width: 22px; height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--danger-soft) 12%, transparent);
border: 1px solid var(--danger-border);
color: var(--danger);
cursor: pointer; flex-shrink: 0;
display: inline-grid; place-items: center;
padding: 0;
transition: background var(--dur-1) ease, transform var(--dur-1) ease;
}
.sqm-archive-btn svg { display: block; }
/* v07zw — Dedicated 7th column for the row's archive/restore button.
Right-aligned so the button sits near the column edge. */
.sqm-action-cell {
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.sqm-archive-btn:hover { background: color-mix(in srgb, var(--danger-soft) 30%, transparent); transform: scale(1.08); }
.sqm-archive-btn--restore {
background: color-mix(in srgb, var(--leaf) 18%, transparent);
border-color: color-mix(in srgb, var(--olive-2) 55%, transparent);
color: var(--ink-forest-2);
}
.sqm-archive-btn--restore:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
/* v07zz40 — Open-shot button in the queue rows. Green so it reads as
"navigate / proceed", not destructive like the red archive X. */
.sqm-archive-btn--open {
background: color-mix(in srgb, var(--leaf) 18%, transparent);
border-color: color-mix(in srgb, var(--olive-2) 55%, transparent);
color: var(--ink-forest-2);
}
.sqm-archive-btn--open:hover { background: color-mix(in srgb, var(--leaf) 32%, transparent); transform: scale(1.08); }
/* v07zz177 — Restart-job button on failed rows. Amber so it reads as "retry",
distinct from the green open button and the red cancel/archive X. */
.sqm-archive-btn--restart {
background: color-mix(in srgb, var(--gold-12) 18%, transparent);
border-color: color-mix(in srgb, var(--gold-12) 55%, transparent);
color: color-mix(in srgb, var(--ink-tan-deep) 88%, var(--mix-dark));
}
.sqm-archive-btn--restart:hover { background: color-mix(in srgb, var(--gold-12) 32%, transparent); transform: scale(1.08); }
/* v07zz45 — Hugo's button colour rule:
X (close/cancel/archive) = red (base .sqm-archive-btn)
Copy folder path / actions = amber (.sqm-archive-btn--copy)
Open shot / restore = green (.sqm-archive-btn--open / --restore)
The previous --cancel variant (amber) was retired here — cancel X
buttons now just use the base red class. The amber palette gets
reused for non-destructive secondary actions (currently: copy
folder path on manual-external video rows).
--cancel kept as an alias for --copy so any stragglers in older
JSX paths keep working through one cache-bust cycle. */
.sqm-archive-btn--copy,
.sqm-archive-btn--cancel {
background: color-mix(in srgb, color-mix(in srgb, var(--gold-6) 92%, var(--mix-light)) 15%, transparent);
border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-14) 88%, var(--mix-dark)) 55%, transparent);
color: color-mix(in srgb, var(--ink-tan-deep) 73%, var(--mix-dark));
}
.sqm-archive-btn--copy:hover,
.sqm-archive-btn--cancel:hover { background: color-mix(in srgb, color-mix(in srgb, var(--gold-6) 92%, var(--mix-light)) 32%, transparent); }
/* Archive section + toggle chip. */
.sqm-section--archive { opacity: 0.95; }
.sqm-chip--archive-toggle {
font: inherit; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08);
padding: 4px 9px; border-radius: var(--r-round);
background: color-mix(in srgb, var(--taupe-5) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--taupe-5) 45%, transparent);
color: var(--ink-muted);
cursor: pointer;
}
.sqm-chip--archive-toggle:hover { background: color-mix(in srgb, var(--taupe-5) 22%, transparent); color: var(--ink); }
.sqm-chip--clear {
font: inherit; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08);
padding: 4px 9px; border-radius: var(--r-round);
background: color-mix(in srgb, var(--danger-soft) 12%, transparent);
border: 1px solid var(--danger-border);
color: var(--danger);
cursor: pointer;
}
.sqm-chip--clear:hover { background: color-mix(in srgb, var(--danger-soft) 20%, transparent); }
/* v07zz116 — "Clear all" bulk-archive action. Green action tint so it
reads as a control next to the neutral Archive toggle, not a status. */
.sqm-chip--clear-all {
font: inherit; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08);
padding: 4px 9px; border-radius: var(--r-round);
background: color-mix(in srgb, var(--leaf) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--leaf) 55%, transparent);
color: var(--ink-muted);
cursor: pointer;
}
.sqm-chip--clear-all:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); color: var(--ink); }
/* v07zz180 — Resubmit-all chip. Amber so it reads as "retry", matching the
per-row restart button; sits to the left of Clear all. */
.sqm-chip--resubmit-all {
font: inherit; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08);
padding: 4px 9px; border-radius: var(--r-round);
background: color-mix(in srgb, var(--gold-12) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--gold-12) 60%, transparent);
color: color-mix(in srgb, var(--ink-tan-deep) 88%, var(--mix-dark));
cursor: pointer;
}
.sqm-chip--resubmit-all:hover { background: color-mix(in srgb, var(--gold-12) 32%, transparent); }
.sqm-empty {
padding: 12px;
color: var(--ink-muted);
font-style: italic; font-size: var(--fs-12);
text-align: center;
}
/* Small sidebar card — completed/failed row styling. */
.sb-q-row--completed .sb-q-fill { background: color-mix(in srgb, var(--ok) 85%, transparent); }
.sb-q-row--completed .sb-q-eta { color: color-mix(in srgb, var(--leaf-bright) 58%, var(--mix-light)); font-weight: var(--fw-bold); }
.sb-q-row--failed .sb-q-eta { color: color-mix(in srgb, var(--amber) 96%, var(--mix-light)); font-weight: var(--fw-bold); }
.sb-q-row--cancelled { opacity: 0.6; }
.sqm-q-tag {
font-size: var(--fs-10-5);
padding: 4px 10px;
border-radius: var(--r-round);
background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 16%, transparent);
color: color-mix(in srgb, var(--ink-taupe-4) 80%, var(--mix-dark));
font-weight: var(--fw-bold);
letter-spacing: var(--track-04);
font-feature-settings: var(--tnum);
white-space: nowrap;
}
.sqm-submitted-when {
color: var(--ink);
font-size: var(--fs-12);
font-feature-settings: var(--tnum);
white-space: nowrap;
}
.sqm-queue-cell { text-align: center; }
.sqm-dash { color: color-mix(in srgb, var(--ink-deep) 30%, transparent); font-size: var(--fs-13); }
/* ── Submitting "dots" loader — six tiny dots that breathe + a hollow
ring at the end. Pure CSS animation, no JS. ── */
.sqm-dots {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.sqm-dots-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--blue-17) 50%, transparent);
display: inline-block;
animation: sqmDot 1.4s ease-in-out infinite;
animation-delay: calc(var(--di, 0) * 0.12s);
}
.sqm-dots-ring {
width: 8px; height: 8px;
border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--blue-17) 85%, transparent);
display: inline-block;
animation: sqmRing 1.4s ease-in-out infinite;
animation-delay: 0.72s;
}
@keyframes sqmDot {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
@keyframes sqmRing {
0%, 100% { opacity: 0.50; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.sb-q-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sb-q-expand {
background: color-mix(in srgb, var(--hi) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--foil) 35%, transparent);
border-radius: var(--r-xs);
padding: 6px 10px;
color: var(--ink-on-dark);
font-size: var(--fs-9-5);
letter-spacing: var(--track-10);
font-weight: var(--fw-semi);
text-transform: uppercase;
cursor: pointer;
transition: background var(--dur-0) ease;
}
.sb-q-expand:hover { background: color-mix(in srgb, var(--nav-active) 30%, transparent); }
/* ─────────────────────────── Generation Log popout ─────────────────────────── */
.generation-log-btn {
background: none;
border: 1px solid color-mix(in srgb, var(--foil) 55%, transparent);
color: var(--ink);
font-size: var(--fs-12);
font-weight: var(--fw-semi);
padding: 8px 14px;
border-radius: var(--r-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.generation-log-btn:hover { background: color-mix(in srgb, var(--nav-active) 20%, transparent); }
.generation-log {
margin-top: 14px;
padding: 14px 18px;
border-radius: var(--r-panel);
position: relative;
}
.generation-log-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.generation-log-title {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
}
.generation-log-close {
position: relative;
top: auto;
right: auto;
width: 24px;
height: 24px;
}
.generation-log-body {
font-family: var(--font-mono);
font-size: var(--fs-11);
color: var(--ink);
line-height: 1.6;
margin: 0;
white-space: pre-wrap;
background: color-mix(in srgb, var(--shadow-ink) 6%, transparent);
padding: 12px;
border-radius: var(--r-xs);
max-height: 280px;
overflow-y: auto;
}
/* version tile button reset */
.version-tile {
border: none;
cursor: pointer;
transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.version-tile:hover { transform: translateY(-2px); }
/* shotlist row width adjustment for ID-first */
.shotlist-row {
grid-template-columns: 80px 60px 50px 1fr 140px 140px;
}
/* ─────────────────────────── Unified element-panel style ───────────────────────────
Every clickable card across the app — sequence cards, character cards, location
cards, prop cards, crew cards, media cards, archive cards, doc cards, report
cards, plan cards — uses the SAME bg / radius / shadow as a shot row.
The view-page wrapper also drops its dark backdrop blur so panels read clean. */
.sequence-card,
.character-card,
.location-card,
.prop-card,
.crew-card,
.media-card-v,
.archive-card,
.doc-card-v2,
.report-chart-card {
background: color-mix(in srgb, var(--cream-2) 92%, transparent) !important;
border-radius: var(--r-md) !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi) 55%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
0 2px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
0 6px 14px color-mix(in srgb, var(--shade) 14%, transparent) !important;
position: relative;
transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) ease;
}
.sequence-card::before,
.character-card::before,
.location-card::before,
.prop-card::before,
.crew-card::before,
.media-card-v::before,
.archive-card::before,
.doc-card-v2::before,
.report-chart-card::before { display: none !important; }
/* Gold-foil hover overlay — same as shot row hover */
.sequence-card,
.character-card,
.location-card,
.prop-card,
.crew-card,
.media-card-v,
.archive-card,
.doc-card-v2 {
cursor: pointer;
}
.sequence-card:hover,
.character-card:hover,
.location-card:hover,
.prop-card:hover,
.crew-card:hover,
.media-card-v:hover,
.archive-card:hover,
.doc-card-v2:hover {
background: color-mix(in srgb, color-mix(in srgb, var(--hi) 65%, var(--mix-light)) 98%, transparent) !important;
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 95%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi) 70%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
0 0 0 1.5px color-mix(in srgb, var(--nav-active) 85%, transparent),
0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
0 14px 32px color-mix(in srgb, var(--foil) 30%, transparent) !important;
}
/* ─────────────────────────── Documents preview content ─────────────────────────── */
.doc-card { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 20px; align-items: flex-start; }
.doc-card .doc-open { display: none; }
.doc-preview {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed color-mix(in srgb, var(--tan-deep) 30%, transparent);
font-size: var(--fs-12-5);
color: var(--ink);
line-height: 1.55;
}
.doc-preview p { margin: 0 0 8px; }
.doc-preview p:last-child { margin-bottom: 0; }
.doc-preview code {
font-family: var(--font-mono);
font-size: var(--fs-11-5);
background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
padding: 1px 5px;
border-radius: 3px;
}
.doc-preview strong { color: var(--ink); font-weight: var(--fw-semi); }
/* ─────────────────────────── Reports — chart cards ─────────────────────────── */
.report-charts-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
}
.report-chart-card {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.report-chart-card--wide { grid-column: 1 / -1; }
.rcc-head { display: flex; flex-direction: column; gap: 2px; }
.rcc-title {
font-family: var(--font-display);
font-size: var(--fs-16);
color: var(--ink);
letter-spacing: var(--track-005);
}
.rcc-sub {
font-size: var(--fs-11);
color: var(--ink-muted);
letter-spacing: var(--track-02);
}
.rcc-spark {
width: 100%;
height: 120px;
display: block;
}
.rcc-legend {
display: flex;
gap: 14px;
font-size: var(--fs-11);
color: var(--ink-muted);
flex-wrap: wrap;
}
.rcc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rcc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.rcc-burn-num {
font-family: var(--font-display);
font-size: 56px;
color: var(--ink);
letter-spacing: var(--track-005);
line-height: 1;
}
.rcc-burn-pct { font-size: var(--fs-28); color: var(--ink-muted); margin-left: 4px; }
.rcc-burn-track {
height: 8px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--ink-muted) 18%, transparent);
overflow: hidden;
}
.rcc-burn-fill {
height: 100%;
background: linear-gradient(90deg, var(--leaf-bright) 0%, color-mix(in srgb, var(--gold-3) 70%, var(--mix-light)) 60%, var(--gold-16) 100%);
box-shadow: 0 0 8px color-mix(in srgb, color-mix(in srgb, var(--gold-3) 91%, var(--mix-light)) 30%, transparent);
}
.rcc-burn-meta {
display: flex;
justify-content: space-between;
font-size: var(--fs-11);
color: var(--ink-muted);
font-feature-settings: var(--tnum);
}
.rcc-bars { display: flex; flex-direction: column; gap: 8px; }
.rcc-bar-row {
display: grid;
grid-template-columns: 180px 1fr 50px;
gap: 10px;
align-items: center;
font-size: var(--fs-12);
font-feature-settings: var(--tnum);
}
.rcc-bar-label { color: var(--ink); }
.rcc-bar-track {
height: 10px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--ink-muted) 15%, transparent);
overflow: hidden;
}
.rcc-bar-fill {
height: 100%;
border-radius: var(--r-round);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.rcc-bar-count { color: var(--ink); font-weight: var(--fw-semi); text-align: right; }
.rcc-donut-wrap {
display: grid;
grid-template-columns: 130px 1fr;
gap: 14px;
align-items: center;
}
.rcc-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-12); }
.rcc-donut-row {
display: grid;
grid-template-columns: 12px 1fr auto;
gap: 8px;
align-items: center;
font-feature-settings: var(--tnum);
}
.rcc-donut-label { color: var(--ink); }
.rcc-donut-count { color: var(--ink-muted); font-weight: var(--fw-med); }
.rcc-milestones { display: flex; flex-direction: column; gap: 8px; }
.rcc-milestone {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--hi) 30%, transparent);
}
.rcc-milestone-status {
width: 22px; height: 22px;
border-radius: 50%;
display: grid; place-items: center;
background: color-mix(in srgb, var(--ink-muted) 18%, transparent);
color: var(--ink-muted);
font-weight: var(--fw-bold);
}
.rcc-milestone--paid .rcc-milestone-status {
background: color-mix(in srgb, var(--ok) 40%, transparent);
color: color-mix(in srgb, var(--olive-4) 82%, var(--mix-dark));
}
.rcc-milestone-name { color: var(--ink); font-weight: var(--fw-med); }
.rcc-milestone-date { font-size: var(--fs-11); color: var(--ink-muted); }
.rcc-milestone-amt {
font-family: var(--font-display);
font-size: var(--fs-18);
color: var(--ink);
letter-spacing: var(--track-005);
}
/* ─────────────────────────── Documents v2 — grid + modal ─────────────────────────── */
.docs-grid-v2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.doc-card-v2 {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
min-height: 180px;
}
.doc-card-v2-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.doc-card-v2 .doc-icon {
width: 38px; height: 38px;
font-size: var(--fs-18);
background: color-mix(in srgb, var(--nav-active) 20%, transparent);
border-radius: var(--r-sm);
display: grid; place-items: center;
}
.doc-card-v2-type {
font-size: var(--fs-9-5);
letter-spacing: var(--track-16);
color: var(--ink-muted);
font-weight: var(--fw-bold);
text-transform: uppercase;
background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
padding: 3px 8px;
border-radius: var(--r-round);
}
.doc-card-v2-name {
font-family: var(--font-display);
font-size: var(--fs-17);
color: var(--ink);
letter-spacing: var(--track-005);
line-height: 1.15;
}
.doc-card-v2-summary {
font-size: var(--fs-12);
color: var(--ink-muted);
line-height: 1.45;
flex: 1;
margin-top: 4px;
}
.doc-card-v2-meta {
font-size: var(--fs-10-5);
color: var(--ink-soft);
letter-spacing: var(--track-04);
font-feature-settings: var(--tnum);
}
.doc-card-v2-access {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.doc-card-v2-access .doc-access-pill {
font-size: var(--fs-9-5);
padding: 2px 6px;
}
/* v06p — Match the standard character-modal backdrop: subtle dark
tint + 2px blur, NOT the heavy green tint that this used to
have. Keeps the whole modal family visually consistent. */
.doc-modal-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(var(--blur-scrim-2));
-webkit-backdrop-filter: blur(var(--blur-scrim-2));
display: grid; place-items: center;
z-index: var(--z-dropdown);
padding: 32px;
animation: fadeIn var(--dur-3) ease;
}
.doc-modal {
position: relative;
max-width: 720px;
width: 100%;
max-height: 88vh;
overflow-y: auto;
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 16px;
background: color-mix(in srgb, var(--cream-2) 96%, transparent) !important;
border-radius: var(--r-md);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi) 55%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
0 6px 18px color-mix(in srgb, var(--shadow-ink) 20%, transparent),
0 18px 40px color-mix(in srgb, var(--shade) 30%, transparent) !important;
}
/* v06p — X button matches the cream/brown character-modal style. */
.doc-modal-close {
position: absolute;
top: 14px; right: 14px;
background: color-mix(in srgb, var(--tan-deep) 10%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent) !important;
color: var(--ink-muted) !important;
width: 28px; height: 28px;
border-radius: 50%;
display: grid; place-items: center;
cursor: pointer;
z-index: 5;
}
.doc-modal-close:hover { background: color-mix(in srgb, var(--tan-deep) 22%, transparent) !important; color: var(--ink) !important; }
/* v06p — Action buttons row + access editing UI. */
.doc-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.doc-modal-action {
font: inherit;
font-size: var(--fs-11-5);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
padding: 7px 14px;
border-radius: var(--r-7);
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--cream) 85%, transparent);
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.doc-modal-action:hover { background: var(--cream); border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent); }
.doc-modal-action--primary {
background: color-mix(in srgb, var(--leaf) 85%, transparent);
border-color: color-mix(in srgb, var(--olive-2) 95%, transparent);
color: var(--ink-cream);
}
.doc-modal-action--primary:hover { background: var(--olive-2); }
.doc-modal-access-edit {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.doc-access-toggle {
font: inherit;
font-size: var(--fs-11);
font-weight: var(--fw-med);
padding: 4px 12px;
border-radius: var(--r-round);
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--cream) 65%, transparent);
color: var(--ink-muted);
cursor: pointer;
transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.doc-access-toggle:hover { background: color-mix(in srgb, var(--mint) 55%, transparent); color: var(--ink); }
.doc-access-toggle.is-allowed {
/* 24 Sep 2026: a solid "allowed", like the permission matrix */
background: var(--check-on-fill);
border-color: var(--check-on-fill);
color: var(--check-on-ink);
font-weight: var(--fw-semi);
}
.doc-modal-head {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: center;
padding-right: 40px;
}
.doc-modal-icon {
width: 56px; height: 56px;
font-size: var(--fs-26);
background: color-mix(in srgb, var(--nav-active) 22%, transparent);
border-radius: var(--r-md);
display: grid; place-items: center;
}
.doc-modal-eyebrow {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
}
.doc-modal-name {
font-family: var(--font-display);
font-size: var(--fs-22);
color: var(--ink);
letter-spacing: var(--track-005);
margin: 4px 0;
}
.doc-modal-meta {
font-size: var(--fs-11-5);
color: var(--ink-muted);
font-feature-settings: var(--tnum);
}
.doc-modal-summary {
font-size: var(--fs-13);
color: var(--ink);
line-height: 1.5;
font-weight: var(--fw-med);
padding: 10px 14px;
background: color-mix(in srgb, var(--nav-active) 14%, transparent);
border-radius: var(--r-sm);
border-left: 3px solid color-mix(in srgb, var(--nav-active) 65%, transparent);
}
.doc-modal-body {
font-size: var(--fs-13);
color: var(--ink);
line-height: 1.55;
}
.doc-modal-body p {
margin: 0 0 10px;
}
.doc-modal-body p:last-child { margin-bottom: 0; }
.doc-modal-access {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
/* ─────────────────────────── Pricing ─────────────────────────── */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.plan-card {
padding: 32px 28px 26px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
border-top: 4px solid var(--accent);
/* Match the brighter inner-card cream from shot rows */
background: color-mix(in srgb, var(--cream-2) 92%, transparent) !important;
/* Don't clip absolutely-positioned badges/tags at the top */
overflow: visible !important;
margin-top: 16px;
}
.plan-card.is-current {
background: color-mix(in srgb, var(--cream-2) 96%, transparent) !important;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
0 0 0 2px color-mix(in srgb, var(--leaf) 55%, transparent),
0 4px 12px color-mix(in srgb, var(--leaf) 18%, transparent) !important;
}
.pricing-grid { padding-top: 8px; }
.report-charts-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
}
.report-chart-card-wrap { display: block; min-width: 0; }
.report-chart-card-wrap--wide { grid-column: 1 / -1; }
.sortable-zone-reports .sortable-panel { display: block; min-width: 0; }
.report-chart-card-wrap > article { height: 100%; box-sizing: border-box; }
/* v07zz210 — 12-col span system + compact stat tiles + subscriptions table. */
.rcc-span-3 { grid-column: span 3; } /* stat tile — 4 per row */
.rcc-span-4 { grid-column: span 4; } /* small chart — 3 per row */
.rcc-span-6 { grid-column: span 6; } /* half */
.rcc-span-12 { grid-column: span 12; } /* full-width line chart */
@media (max-width: 1100px) { .rcc-span-3 { grid-column: span 6; } .rcc-span-4 { grid-column: span 6; } }
@media (max-width: 720px) { .report-charts-grid > * { grid-column: 1 / -1; } }
.report-chart-card--stat { padding: 14px 16px; gap: 4px; justify-content: center; min-height: 96px; }
.report-stat-inner { display: flex; flex-direction: column; gap: 3px; }
.rcc-stat-num { font-family: var(--font-display); font-size: var(--fs-30); line-height: 1; color: var(--ink, var(--ink-umber)); letter-spacing: var(--track-01); }
.rcc-stat-cap { font-size: var(--fs-10); letter-spacing: var(--track-12); text-transform: uppercase; color: color-mix(in srgb, var(--ink-deep) 84%, var(--mix-light)); font-weight: var(--fw-bold); }
.rcc-stat-sub { font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcc-subs { display: flex; flex-direction: column; gap: 2px; }
.rcc-subrow { display: grid; grid-template-columns: 1.2fr 1.4fr auto; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 14%, transparent); font-size: var(--fs-12); }
.rcc-subrow:last-child { border-bottom: 0; }
.rcc-subtool { font-weight: var(--fw-semi); color: var(--ink, var(--ink-umber)); }
.rcc-subcat { font-size: var(--fs-10); letter-spacing: var(--track-04); text-transform: uppercase; color: var(--ink-muted); }
.rcc-submo { color: var(--ink-muted); text-align: right; }
.rcc-subtd { font-weight: var(--fw-semi); color: var(--ink, var(--ink-umber)); text-align: right; }
/* ════ v07zz216 — Reports redesign (mockup-faithful dashboard) ════ */
.reports-v3 { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 48px; }
.reports-v3 .rv-row { display: grid; gap: 14px; align-items: stretch; }
.rv-row--top { grid-template-columns: 1.55fr 1.05fr 0.85fr; }
.rv-row--3 { grid-template-columns: repeat(3, 1fr); }
.rv-row--4 { grid-template-columns: repeat(4, 1fr); }
.rv-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1180px) { .rv-row--top, .rv-row--3, .rv-row--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .reports-v3 .rv-row { grid-template-columns: 1fr; } }
.rv-panel { background: var(--card-bg-solid, var(--card-bg-light-solid)); border: 1px solid color-mix(in srgb, var(--card-border) 42%, transparent); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 5%, transparent); min-width: 0; }
.rv-panel-head { display: flex; flex-direction: column; gap: 1px; }
.rv-panel-title { font-size: var(--fs-11); letter-spacing: 0.13em; text-transform: uppercase; font-weight: var(--fw-bold); color: color-mix(in srgb, var(--ink-deep) 84%, var(--mix-light)); }
.rv-panel-sub { font-size: var(--fs-10); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted); }
.rv-panel-body { flex: 1; min-width: 0; }
.rv-panel-foot { border-top: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent); padding-top: 9px; margin-top: 2px; }
.rv-link { font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--leaf); background: none; border: 0; cursor: pointer; padding: 0; letter-spacing: var(--track-02); }
.rv-link:hover { color: var(--leaf-deep); text-decoration: underline; }
/* 17 Sep 2026 - the Summary layout's "Export Report" label (was an inline style, out of a skin's reach) */
.rv-export-btn { color: var(--white); }
.rv-empty { font-size: var(--fs-12); color: var(--ink-muted); padding: 8px 0; }
/* Row 1 — Time & Usage */
.rv-panel--time .rv-time { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 16px; align-items: stretch; height: 100%; }
.rv-time-stats { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.rv-mini-label { font-size: var(--fs-10); letter-spacing: var(--track-10); text-transform: uppercase; color: color-mix(in srgb, var(--ink-deep) 84%, var(--mix-light)); font-weight: var(--fw-bold); }
.rv-mini-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--ink, var(--ink-umber)); }
.rv-mini-sub { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
.rv-time-chart { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.rv-chart-cap { font-size: var(--fs-10); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-semi); }
.rv-area { width: 100%; }
.rv-area svg { width: 100%; height: 92px; display: block; }
.rv-xaxis { display: flex; justify-content: space-between; font-size: var(--fs-9); color: var(--ink-muted); margin-top: 3px; }
.rv-combo-legend { display: flex; gap: 14px; font-size: var(--fs-10); color: var(--ink-muted); margin-top: 5px; }
.rv-combo-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rv-combo-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* Row 1 — Total Project Cost */
.rv-cost-big { font-family: var(--font-display); font-size: var(--fs-44); line-height: 1; color: var(--ink, var(--ink-umber)); }
.rv-cost-allt { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
.rv-cost-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rv-cost-card { background: color-mix(in srgb, var(--mix-light) 40%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 35%, transparent); border-radius: var(--r-panel); padding: 10px 12px; }
.rv-cost-card-label { font-size: var(--fs-9); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-bold); line-height: 1.3; min-height: 24px; }
.rv-cost-card-num { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--ink, var(--ink-umber)); margin-top: 4px; }
.rv-cost-card-pct { font-size: var(--fs-11); color: var(--olive); font-weight: var(--fw-semi); }
/* Row 1 — shot stat rows + Row 5 note rows */
.rv-panel--shots, .rv-panel--note { justify-content: center; gap: 4px; }
.rv-statrow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.rv-panel--shots .rv-statrow + .rv-statrow { border-top: 1px solid color-mix(in srgb, var(--ink-muted) 14%, transparent); }
.rv-statrow-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-9); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, color-mix(in srgb, var(--olive-4) 85%, var(--mix-light)) 14%, transparent); color: color-mix(in srgb, var(--leaf) 74%, var(--mix-dark)); }
.rv-statrow-mid { flex: 1; min-width: 0; }
.rv-statrow-label { font-size: var(--fs-10); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-bold); }
.rv-statrow-num { font-family: var(--font-display); font-size: var(--fs-28); line-height: 1; color: var(--ink, var(--ink-umber)); }
/* Donut — v07zz218: bigger ring, centred fitted text, donut fills the panel
height so it isn't a tiny circle floating in empty space. */
.rv-donut { display: flex; align-items: center; gap: 18px; height: 100%; min-height: 168px; }
.rv-donut-ring { position: relative; width: 150px; height: 150px; flex: 0 0 150px; }
.rv-donut-ring svg { width: 100%; height: 100%; display: block; }
.rv-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; }
.rv-donut-center-top { font-size: var(--fs-8-5); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-bold); max-width: 84%; line-height: 1.15; }
.rv-donut-center-big { font-family: var(--font-display); font-size: var(--fs-34); line-height: 1; color: var(--ink, var(--ink-umber)); }
.rv-donut-legend { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; }
.rv-donut-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; }
.rv-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; grid-row: 1 / 3; align-self: center; }
.rv-donut-label { grid-column: 2; grid-row: 1; color: var(--ink); font-size: var(--fs-12); font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-donut-val { grid-column: 2; grid-row: 2; color: var(--ink-muted); font-weight: var(--fw-med); font-size: var(--fs-11); white-space: nowrap; }
/* Bars */
.rv-bars { display: flex; flex-direction: column; gap: 9px; }
.rv-bar-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; font-size: var(--fs-12); }
.rv-bar-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar-track { height: 8px; background: color-mix(in srgb, var(--ink-muted) 13%, transparent); border-radius: 99px; overflow: hidden; }
.rv-bar-fill { height: 100%; border-radius: 99px; min-width: 3px; }
.rv-bar-val { color: var(--ink); font-weight: var(--fw-semi); font-size: var(--fs-11); text-align: right; white-space: nowrap; }
.rv-total-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-12); color: var(--ink-muted); }
.rv-total-val { font-weight: var(--fw-bold); color: var(--ink, var(--ink-umber)); font-size: var(--fs-14); }
.rv-foot-note { font-size: var(--fs-11); color: var(--ink-muted); font-weight: var(--fw-semi); }
/* Subscriptions table */
.rv-subs { display: flex; flex-direction: column; }
.rv-subs-head, .rv-subs-row { display: grid; grid-template-columns: 1.4fr auto auto; gap: 12px; align-items: center; }
.rv-subs-head { font-size: var(--fs-9); letter-spacing: var(--track-06); text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-bold); padding-bottom: 6px; }
.rv-subs-head span:not(:first-child), .rv-subs-row span:not(:first-child) { text-align: right; }
.rv-subs-row { font-size: var(--fs-12); padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--ink-muted) 12%, transparent); }
.rv-subs-tool { font-weight: var(--fw-semi); color: var(--ink, var(--ink-umber)); }
.rv-subs-mo { color: var(--ink-muted); }
.rv-subs-td { color: var(--ink, var(--ink-umber)); font-weight: var(--fw-semi); }
.rv-subs-total { border-top: 1.5px solid color-mix(in srgb, var(--ink-muted) 30%, transparent); margin-top: 2px; }
.rv-subs-total span { font-weight: var(--fw-bold); color: var(--ink, var(--ink-umber)); }
/* Row 3 — metric strip */
.rv-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; background: var(--card-bg-solid, var(--card-bg-light-solid)); border: 1px solid color-mix(in srgb, var(--card-border) 42%, transparent); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 5%, transparent); }
@media (max-width: 1180px) { .rv-strip { grid-template-columns: repeat(4, 1fr); row-gap: 18px; } }
@media (max-width: 720px) { .rv-strip { grid-template-columns: repeat(2, 1fr); } }
.rv-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-left: 1px solid color-mix(in srgb, var(--ink-muted) 13%, transparent); padding-left: 14px; }
.rv-strip .rv-cell:first-child { border-left: 0; padding-left: 0; }
.rv-cell-label { font-size: var(--fs-10); letter-spacing: var(--track-06); text-transform: uppercase; color: color-mix(in srgb, var(--ink-deep) 84%, var(--mix-light)); font-weight: var(--fw-bold); line-height: 1.25; }
.rv-cell-sub { font-size: var(--fs-9); color: var(--ink-muted); font-weight: var(--fw-semi); }
.rv-cell-body { flex: 1; display: flex; align-items: center; gap: 9px; }
.rv-cell-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, color-mix(in srgb, var(--olive-4) 85%, var(--mix-light)) 13%, transparent); color: color-mix(in srgb, var(--leaf) 74%, var(--mix-dark)); }
.rv-cell-ico:empty { display: none; }
.rv-cell-num { font-family: var(--font-display); font-size: var(--fs-34); line-height: 1; color: var(--ink, var(--ink-umber)); }
.rv-cell-link { font-size: var(--fs-10); }
.rv-assets { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.rv-assets div { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--ink); }
.rv-assets b { font-weight: var(--fw-bold); }
.rv-success .rv-donut { flex-direction: column; gap: 7px; align-items: center; height: auto; min-height: 0; }
.rv-success .rv-donut-ring { width: 96px; height: 96px; flex-basis: auto; }
.rv-success .rv-donut-center-big { font-size: var(--fs-22); }
.rv-success .rv-donut-legend { width: 100%; gap: 3px; }
.rv-success .rv-donut-row { font-size: var(--fs-10); }
/* Contributors */
.rv-contribs { display: flex; flex-direction: column; gap: 7px; }
.rv-contrib { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; font-size: var(--fs-12); }
.rv-contrib-av { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, color-mix(in srgb, var(--olive-4) 85%, var(--mix-light)) 20%, transparent); color: color-mix(in srgb, var(--leaf) 74%, var(--mix-dark)); display: flex; align-items: center; justify-content: center; font-size: var(--fs-10); font-weight: var(--fw-bold); overflow: hidden; flex: 0 0 26px; }
.rv-contrib-av img { width: 100%; height: 100%; object-fit: cover; }
.rv-contrib-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-contrib-num { color: var(--ink, var(--ink-umber)); font-weight: var(--fw-bold); }
.plan-badge {
position: absolute;
top: -10px;
right: 18px;
background: var(--accent);
color: var(--ink-on-leaf);
font-size: var(--fs-9-5);
letter-spacing: var(--track-16);
font-weight: var(--fw-bold);
padding: 4px 10px;
border-radius: var(--r-round);
box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 30%, transparent);
}
.plan-current-tag {
position: absolute;
top: 12px;
right: 16px;
font-size: var(--fs-9);
letter-spacing: var(--track-16);
font-weight: var(--fw-bold);
color: var(--olive-3);
background: color-mix(in srgb, var(--leaf) 30%, transparent);
padding: 3px 9px;
border-radius: var(--r-round);
}
.plan-name {
font-family: var(--font-display);
font-size: var(--fs-28);
color: var(--ink);
letter-spacing: var(--track-005);
}
.plan-desc {
font-size: var(--fs-12-5);
color: var(--ink-muted);
line-height: 1.4;
min-height: 36px;
}
.plan-price-row {
display: flex;
align-items: baseline;
gap: 8px;
margin: 8px 0;
}
.plan-price {
font-family: var(--font-display);
font-size: var(--fs-48);
color: var(--ink);
letter-spacing: var(--track-005);
line-height: 1;
}
.plan-price-per {
font-size: var(--fs-11);
color: var(--ink-muted);
letter-spacing: var(--track-02);
}
.plan-cta {
background: var(--accent);
color: var(--ink-on-leaf);
border: none;
border-radius: var(--r-panel);
padding: 12px 16px;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: var(--track-04);
cursor: pointer;
margin-bottom: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.40),
0 4px 12px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
transition: transform var(--dur-0) ease;
}
.plan-cta:hover:not(:disabled) { transform: translateY(-1px); }
.plan-cta.is-current,
.plan-cta:disabled {
background: color-mix(in srgb, var(--tan-deep) 18%, transparent);
color: var(--ink-muted);
cursor: default;
box-shadow: none;
}
.plan-features {
list-style: none;
margin: 8px 0 0;
padding: 12px 0 0;
border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
display: flex;
flex-direction: column;
gap: 6px;
}
.plan-features li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 8px;
align-items: flex-start;
font-size: var(--fs-12);
line-height: 1.4;
}
.plan-features .plan-feat-icon {
width: 18px;
text-align: center;
font-weight: var(--fw-bold);
}
.plan-features .is-ok { color: var(--ink); }
.plan-features .is-ok .plan-feat-icon { color: var(--olive-3); }
.plan-features .is-locked { color: var(--ink-soft); }
.plan-features .is-locked .plan-feat-icon { color: var(--ink-soft); }
.pricing-faq {
margin-top: 8px;
padding: 22px 26px;
background: color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 40%, transparent);
border-radius: var(--r-md);
}
.pricing-faq-head {
font-family: var(--font-display);
font-size: var(--fs-18);
color: var(--ink);
letter-spacing: var(--track-005);
margin: 0 0 16px;
}
.pricing-faq-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.pricing-faq-name {
font-size: var(--fs-11);
letter-spacing: var(--track-16);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
/* 17 Sep 2026 - each plan's name colour, moved out of the inline style (Views.jsx) so a skin can reach it */
.pricing-faq-name--free { color: var(--olive-3); }
.pricing-faq-name--pro { color: var(--ink-gold-5); }
.pricing-faq-name--ultra { color: var(--ink-forest-7); }
.pricing-faq-text {
font-size: var(--fs-12-5);
color: var(--ink);
line-height: 1.55;
}
/* Comparison table */
.pricing-compare { padding: 22px 26px; }
.pricing-compare-head, .pricing-faq-head {
font-family: var(--font-display);
font-size: var(--fs-18);
color: var(--ink);
letter-spacing: var(--track-005);
margin: 0 0 16px;
}
.pricing-compare-table { display: flex; flex-direction: column; }
.pct-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 12px;
padding: 10px 0;
font-size: var(--fs-12-5);
font-feature-settings: var(--tnum);
border-bottom: 1px solid color-mix(in srgb, var(--card-border) 22%, transparent);
}
.pct-row:last-child { border-bottom: none; }
.pct-row--head {
font-size: var(--fs-11);
letter-spacing: var(--track-14);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
border-bottom: 1.5px solid color-mix(in srgb, var(--card-border) 45%, transparent);
}
.pct-row > span { padding: 0 4px; }
.pct-feat { color: var(--ink); font-weight: var(--fw-med); }
.pct-locked { color: var(--ink-soft); }
.pct-ultra { color: var(--olive-3); }
.pct-ultra-cell { color: var(--olive-3); font-weight: var(--fw-med); }
.pct-row--head .pct-ultra { font-weight: var(--fw-bold); }
.pricing-q-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 24px;
}
.pricing-q-name {
font-size: var(--fs-13-5);
font-weight: var(--fw-semi);
color: var(--ink);
margin-bottom: 4px;
}
.pricing-q-text {
font-size: var(--fs-12-5);
color: var(--ink-muted);
line-height: 1.5;
}
.pricing-cta-strip {
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 28px;
gap: 24px;
}
.pcs-eyebrow {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
margin-bottom: 6px;
}
.pcs-title {
font-family: var(--font-display);
font-size: var(--fs-18);
color: var(--ink);
letter-spacing: var(--track-005);
}
.pcs-btn {
background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 95%, transparent) 0%, color-mix(in srgb, var(--leaf) 76%, var(--mix-dark)) 100%);
color: var(--ink-on-leaf);
border: none;
padding: 14px 22px;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: var(--track-04);
border-radius: var(--r-panel);
cursor: pointer;
white-space: nowrap;
box-shadow: 0 4px 14px color-mix(in srgb, var(--leaf) 30%, transparent);
}
.pcs-btn:hover { transform: translateY(-1px); }
/* ─────────────────────────── Shots panel — assets tab ─────────────────────────── */
.shots-assets-grid { padding: 4px 4px 12px; }
.sag-section-head {
font-size: var(--fs-10);
letter-spacing: var(--track-18);
font-weight: var(--fw-bold);
color: var(--ink-muted);
text-transform: uppercase;
margin-bottom: 10px;
}
/* ─────────────────────────── Hero play button on shot detail ─────────────────────────── */
.modal-hero-image { position: relative; }
.mhi-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* v07za — Hugo: NO opacity gate / no fade animation. Browser
handles it natively. The key={openShotId} on the img forces a
fresh DOM node per shot (no leaked bitmap from a previous
shot), and the browser paints the image the moment it's
decoded — instant on local, "appears when ready" on Railway.
No 320 ms fade tax on every open. */
/* v07zz40/41 — REVERTED that decision, then refined it. "Let the browser
handle it" flashed the previous shot's bitmap / bare gradient on open. Now:
start hidden; reveal the moment THIS src is ready. TWO reveal classes so
WARM opens are truly instant (no fade) and only COLD opens fade:
.mhi-warm — added SYNCHRONOUSLY by the ![]()
callback ref when the
image is already decoded at mount (cached/prefetched).
No transition → paints at full opacity on the first frame
→ indistinguishable from the old no-gate instant behaviour.
.mhi-loaded — added by onLoad ONLY when it wasn't already warm, i.e. a
genuinely cold image that had to fetch → 150ms fade-in. */
opacity: 0;
}
.mhi-img.mhi-warm { opacity: 1; animation: none; }
/* v07zz228 — was `transition: opacity 350ms`. A transition only animates if the
browser painted the opacity:0 start frame first — but LOCALLY /local images load
so fast that onLoad adds .mhi-loaded in the same frame as mount, so 0→1 was never
animated (hard cut = the "flicker, no fade" Hugo saw; it only worked on Railway
where the network gap let the 0 frame paint). A keyframe animation ALWAYS plays
from its `from`, so it fades reliably even on an instant local load. Warm/cached
heroes still paint instantly via .mhi-warm (no animation). */
.mhi-img.mhi-loaded { opacity: 1; animation: mhi-fade-in 350ms ease forwards; }
@keyframes mhi-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mhi-inline-video {
width: 100%;
height: 100%;
display: block;
/* v06o — Hugo: project aspect is 21:9 (matches modal-hero-image
container); using object-fit:cover fills the frame without the
letterbox black bars that appeared when source videos were 16:9. */
object-fit: cover;
background: transparent;
}
.mhi-play-btn--icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--shade-5) 55%, transparent);
backdrop-filter: blur(10px) saturate(1.30);
-webkit-backdrop-filter: blur(10px) saturate(1.30);
border: 1px solid color-mix(in srgb, var(--hi) 40%, transparent);
color: color-mix(in srgb, var(--ink-hi) 98%, transparent);
cursor: pointer;
padding: 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40);
transition: background var(--dur-2) ease, transform var(--dur-2) ease, border-color var(--dur-2) ease;
z-index: 5;
}
.mhi-play-btn--icon svg {
margin-left: 3px; /* optical centering of the play triangle */
}
.mhi-play-btn--icon:hover {
background: color-mix(in srgb, var(--leaf) 90%, transparent);
border-color: color-mix(in srgb, var(--hi) 80%, transparent);
transform: translate(-50%, -50%) scale(1.08);
}
/* ─── v01p — Schedule fixes ─────────────────────────────────────────
(1) Weekly check-in / milestone events must render ABOVE phase bars
at all times. The original .big-cal--overlay scoped fix only
fires when the parent grid carries that modifier; this rule
applies the same z-index lift unconditionally. */
.big-cal-grid-wrap .big-cal-cell { position: relative; z-index: 2; }
.big-cal-grid-wrap .big-cal-event { z-index: 5 !important; position: relative; }
/* (2) TODAY tag inside the highlighted current-day cell. Sits in the
top-right corner, leaf-green pill so it reads against any cell tint. */
.big-cal-today-tag {
position: absolute;
top: 4px;
right: 4px;
font-size: var(--fs-8-5);
font-weight: var(--fw-heavy);
letter-spacing: var(--track-10);
color: var(--ink-cream);
background: linear-gradient(180deg, var(--olive-6) 0%, var(--olive-4) 100%);
border-radius: 3px;
padding: 2px 5px 1px;
text-transform: uppercase;
z-index: 6;
pointer-events: none;
box-shadow: 0 1px 3px color-mix(in srgb, var(--surface-forest) 30%, transparent);
}
.big-cal-cell { position: relative; }
/* v06m — Per-sequence "Show more" / "Show less" button in the Media
library. Sits at the right end of the sequence header. Plain text
button styled to match the cream / leaf accent palette. */
.media-seq-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.media-seq-expand {
font: inherit;
font-family: var(--font-body);
font-size: var(--fs-11-5);
font-weight: var(--fw-semi);
letter-spacing: var(--track-04);
color: var(--olive-3);
background: color-mix(in srgb, var(--leaf) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--leaf) 40%, transparent);
border-radius: var(--r-round);
padding: 4px 12px;
cursor: pointer;
transition: background var(--dur-1) ease, filter var(--dur-1) ease;
}
.media-seq-expand:hover { background: color-mix(in srgb, var(--leaf) 20%, transparent); }
/* ===================================================================== */
/* v07zz225 — Reports kit (shared by all 5 switchable layouts) + Layout 1 */
/* ===================================================================== */
/* v07zz228 — .main-content sets color:var(--ink-on-dark) (light cream, for text on
the dark backdrop). Reports panels inherit it, so any layout text WITHOUT an
explicit colour rendered light-on-cream = invisible (the "ghosted/empty panels"
in layouts 2/3/5). Force dark ink for everything inside Reports. */
.reports-vx { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; color: var(--ink); }
.reports-vx b, .reports-vx strong, .reports-vx i { color: var(--ink); }
/* layout switcher */
.rvx-switcher { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.rvx-switcher-label { font-size: var(--fs-10-5); letter-spacing: var(--track-16); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); margin-right: 4px; }
.rvx-tab { display: inline-flex; align-items: center; gap: 7px; font: inherit; cursor: pointer; padding: 7px 13px 7px 9px; border-radius: var(--r-panel); border: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent); background: color-mix(in srgb, var(--mix-light) 42%, transparent); color: var(--ink); transition: background var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.rvx-tab b { width: 19px; height: 19px; border-radius: var(--r-xs); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-11); font-weight: var(--fw-heavy); background: color-mix(in srgb, var(--olive) 18%, transparent); color: var(--ok-deep); }
.rvx-tab span { font-size: var(--fs-12-5); font-weight: var(--fw-semi); }
.rvx-tab:hover { background: color-mix(in srgb, var(--mix-light) 70%, transparent); border-color: color-mix(in srgb, var(--olive) 50%, transparent); }
.rvx-tab.is-active { background: var(--leaf, var(--moss)); border-color: var(--leaf, var(--moss)); color: var(--ink-on-accent); box-shadow: 0 2px 8px color-mix(in srgb, color-mix(in srgb, var(--moss) 80%, var(--mix-dark)) 28%, transparent); }
.rvx-tab.is-active b { background: color-mix(in srgb, var(--mix-light) 22%, transparent); color: var(--ink-on-accent); }
.rvx-loading, .rvx-stub { padding: 60px 10px; text-align: center; color: var(--ink-muted); font-size: var(--fs-14); }
/* panel (extends .rv-panel) */
.rvk-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rvk-panel-hel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rvk-panel-act { flex: 0 0 auto; }
.rvk-panel--light { background: color-mix(in srgb, var(--cream-7) 75%, var(--mix-light)); border-color: color-mix(in srgb, var(--card-border) 40%, transparent); }
.rvk-total { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-12); color: var(--ink-muted); }
.rvk-total b { color: var(--ink); font-weight: var(--fw-bold); }
.rvk-foot-note { font-size: var(--fs-11); color: var(--ink-muted); text-align: right; }
.rvk-empty { font-size: var(--fs-12-5); color: var(--ink-muted); font-style: italic; padding: 14px 4px; }
.rvk-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; display: inline-block; }
/* donut */
.rvk-donut { display: flex; height: 100%; min-width: 0; }
.rvk-donut--right { flex-direction: row; align-items: center; gap: 18px; }
.rvk-donut--below { flex-direction: column; align-items: center; gap: 9px; }
.rvk-donut--solo { justify-content: center; align-items: center; }
.rvk-ring { position: relative; }
.rvk-ring svg { width: 100%; height: 100%; display: block; }
.rvk-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; padding: 0 8%; }
.rvk-ring-top { font-size: var(--fs-8-5); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-bold); line-height: 1.15; }
.rvk-ring-big { font-family: var(--font-display); font-size: var(--fs-32); line-height: 1; color: var(--ink, var(--ink-umber)); }
.rvk-donut--below .rvk-ring-big { font-size: var(--fs-24); }
.rvk-legend { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; }
.rvk-donut--below .rvk-legend { flex: none; width: 100%; gap: 5px; }
.rvk-legrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; min-width: 0; }
.rvk-leg-label { color: var(--ink); font-size: var(--fs-12); font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvk-leg-val { color: var(--ink-muted); font-weight: var(--fw-semi); font-size: var(--fs-11); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* horizontal bars */
.rvk-hbars { display: flex; flex-direction: column; gap: 10px; }
.rvk-hbar { display: grid; grid-template-columns: minmax(70px, 0.9fr) 1.7fr auto; align-items: center; gap: 10px; }
.rvk-hbar-label { font-size: var(--fs-12); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvk-hbar-track { height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--ink-muted) 12%, transparent); overflow: hidden; }
.rvk-hbar-fill { height: 100%; border-radius: 5px; }
.rvk-hbar-val { font-size: var(--fs-11-5); color: var(--ink); font-weight: var(--fw-semi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rvk-hbar-pct { font-style: normal; color: var(--ink-muted); font-weight: var(--fw-med); margin-left: 6px; }
.rvk-hbar-axis { display: grid; grid-template-columns: minmax(70px, 0.9fr) 1.7fr auto; font-size: var(--fs-9-5); color: var(--ink-soft); margin-top: 2px; }
.rvk-hbar-axis > :nth-child(2) { display: flex; justify-content: space-between; grid-column: 2; }
/* vertical stacked bars */
.rvk-vbars { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.rvk-vbars-plot { flex: 1; min-height: 130px; display: flex; align-items: flex-end; justify-content: space-between; gap: 5px; }
.rvk-vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.rvk-vbar-num { font-size: var(--fs-9-5); color: var(--ink-muted); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.rvk-vbar-stack { width: 76%; max-width: 30px; min-height: 3px; border-radius: 4px 4px 0 0; overflow: hidden; display: flex; flex-direction: column-reverse; }
.rvk-vbar-seg { width: 100%; }
.rvk-vbar-label { font-size: var(--fs-9); color: var(--ink-soft); white-space: nowrap; }
.rvk-vbars-legend { display: flex; gap: 14px; justify-content: center; font-size: var(--fs-10-5); color: var(--ink-muted); }
.rvk-vbars-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rvk-vbars-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* line chart */
.rvk-line { width: 100%; }
.rvk-line svg { width: 100%; height: 96px; display: block; }
.rvk-line-axis { display: flex; justify-content: space-between; font-size: var(--fs-9); color: var(--ink-soft); margin-top: 3px; }
/* gauge ring */
.rvk-gauge { position: relative; flex: 0 0 auto; }
.rvk-gauge svg { width: 100%; height: 100%; display: block; }
.rvk-gauge-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink); }
/* stat tile */
.rvk-stat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rvk-stat-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--olive) 14%, transparent); color: var(--ink-moss); }
.rvk-stat-body { min-width: 0; }
.rvk-stat-label { font-size: var(--fs-10); letter-spacing: 0.09em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); }
.rvk-stat-num { font-family: var(--font-display); font-size: var(--fs-30); line-height: 1; color: var(--ink); margin-top: 2px; }
.rvk-stat-sub { font-size: var(--fs-11); color: var(--ink-soft); margin-top: 2px; }
/* avatar */
.rvk-av { border-radius: 50%; background: color-mix(in srgb, color-mix(in srgb, var(--olive-4) 85%, var(--mix-light)) 20%, transparent); color: color-mix(in srgb, var(--leaf) 74%, var(--mix-dark)); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); overflow: hidden; }
.rvk-av img { width: 100%; height: 100%; object-fit: cover; }
/* subs table */
.rvk-subs { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.rvk-subs-head, .rvk-subs-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; gap: 8px; }
.rvk-subs-head { font-size: var(--fs-9-5); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); font-weight: var(--fw-bold); padding-bottom: 5px; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent); }
.rvk-subs-row { font-size: var(--fs-12); color: var(--ink); padding: 5px 0; }
.rvk-subs-tool { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvk-subs-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.rvk-subs-total { border-top: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent); margin-top: 3px; padding-top: 7px; font-weight: var(--fw-bold); }
.rvk-subs .ta-right { text-align: right; }
.rvk-subs .ta-left { text-align: left; }
.rvk-subs .ta-center { text-align: center; }
/* contributors */
.rvk-contribs { display: flex; flex-direction: column; gap: 9px; }
.rvk-contrib { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 9px; font-size: var(--fs-12); min-width: 0; }
.rvk-contrib-rank { width: 16px; text-align: center; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink-muted); }
.rvk-contrib-name { color: var(--ink); font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvk-contrib-bar { width: 64px; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--ink-muted) 12%, transparent); overflow: hidden; }
.rvk-contrib-bar i { display: block; height: 100%; border-radius: 4px; }
.rvk-contrib-val { font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* note + comment lists */
.rvk-notes { display: flex; flex-direction: column; gap: 11px; }
.rvk-note { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; }
.rvk-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-5); margin-top: 5px; }
.rvk-note-text { font-size: var(--fs-12-5); color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rvk-note-meta { font-size: var(--fs-10-5); color: var(--ink-soft); margin-top: 2px; }
.rvk-cmts { display: flex; flex-direction: column; gap: 12px; }
.rvk-cmt { display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: start; }
.rvk-cmt-thumb { width: 46px; height: 46px; border-radius: var(--r-sm); background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--ink-on-dark-muted) 53%, var(--mix-light)); flex: 0 0 46px; overflow: hidden; }
.rvk-cmt-thumb-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--ink-on-dark-muted) 66%, var(--mix-light)), color-mix(in srgb, var(--hi-3) 73%, var(--mix-dark))); }
.rvk-cmt-body { min-width: 0; }
.rvk-cmt-title { font-size: var(--fs-11-5); font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvk-cmt-text { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 1px 0; }
.rvk-cmt-meta { font-size: var(--fs-10-5); color: var(--ink-soft); }
/* ── Layout 1 specifics ── */
.rl1 { display: flex; flex-direction: column; gap: 14px; }
.rl1-time-grid { display: grid; grid-template-columns: 0.7fr 0.7fr 1.6fr; gap: 16px; align-items: stretch; height: 100%; }
.rl1-mini { display: flex; flex-direction: column; justify-content: center; }
.rl1-mini-lbl { font-size: var(--fs-10); letter-spacing: var(--track-08); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); }
.rl1-mini-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--ink); }
.rl1-mini-sub { font-size: var(--fs-10-5); color: var(--ink-soft); margin-top: 2px; }
.rl1-cap { font-size: var(--fs-10); letter-spacing: var(--track-08); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); margin-bottom: 4px; }
.rl1-time-chart { display: flex; flex-direction: column; justify-content: center; }
.rl1-cost-big { font-family: var(--font-display); font-size: var(--fs-44); line-height: 1; color: var(--ink); }
.rl1-cost-sub { font-size: var(--fs-11-5); color: var(--ink-muted); margin: 2px 0 12px; }
.rl1-cost-split { display: flex; flex-direction: column; gap: 9px; }
.rl1-cost-card { display: flex; align-items: center; gap: 9px; }
.rl1-cost-card .rvk-dot { margin-top: 1px; }
.rl1-cc-lbl { font-size: var(--fs-11); color: var(--ink-muted); }
.rl1-cc-num { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink); }
.rl1-cc-num i { font-style: normal; font-weight: var(--fw-med); color: var(--ink-soft); font-size: var(--fs-11); margin-left: 5px; }
.rl1-shots3 { justify-content: space-around; }
.rl1-s3 { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rl1-s3 + .rl1-s3 { border-top: 1px solid color-mix(in srgb, var(--ink-muted) 14%, transparent); }
.rl1-s3-ico { color: var(--ink-muted); display: inline-flex; flex: 0 0 auto; }
.rl1-s3-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rl1-s3 .rv-link { flex: 0 0 auto; white-space: nowrap; align-self: center; }
.rl1-s3-lbl { font-size: var(--fs-11); letter-spacing: var(--track-06); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); }
.rl1-s3-num { font-family: var(--font-display); font-size: var(--fs-30); color: var(--ok-deep); line-height: 1; }
/* trends combo chart */
.rvk-trends { width: 100%; display: flex; flex-direction: column; }
.rvk-trends svg { width: 100%; height: 132px; display: block; }
.rvk-trends-legend { display: flex; gap: 18px; justify-content: center; margin-top: 8px; font-size: var(--fs-11); color: var(--ink-muted); }
.rvk-trends-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rvk-trends-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
/* open notes / unresolved comments big-count panels */
.rl1-bigcount { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; }
.rl1-bigcount-ico { color: var(--ink-muted); display: inline-flex; margin-bottom: 4px; }
.rl1-bigcount-num { font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--ink); }
.rl1-bigcount-sub { font-size: var(--fs-11-5); color: var(--ink-soft); }
.rl1-strip-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 0.85fr) 1.2fr; gap: 14px; }
@media (max-width: 1180px) { .rl1-strip-grid { grid-template-columns: repeat(4, 1fr); row-gap: 18px; } }
@media (max-width: 720px) { .rl1-strip-grid { grid-template-columns: repeat(2, 1fr); } }
.rl1-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; border-left: 1px solid color-mix(in srgb, var(--ink-muted) 12%, transparent); padding-left: 14px; }
.rl1-strip-grid > .rl1-cell:first-child { border-left: 0; padding-left: 0; }
.rl1-cell-lbl { font-size: var(--fs-9-5); letter-spacing: 0.07em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); line-height: 1.25; }
.rl1-cell-ico { color: var(--ink-muted); }
.rl1-cell-num { font-family: var(--font-display); font-size: var(--fs-30); line-height: 1; color: var(--ink); }
.rl1-assets { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.rl1-assets > div { display: flex; justify-content: space-between; font-size: var(--fs-11); color: var(--ink-muted); }
.rl1-assets b { color: var(--ink); }
.rl1-cell--success { align-items: center; text-align: center; }
.rl1-statpanel { justify-content: center; }
.rl1-asof { text-align: center; font-size: var(--fs-11); color: var(--ink-soft); padding: 6px 0 2px; }
@media (max-width: 1180px) {
.rl1 > div[style] { grid-template-columns: 1fr 1fr !important; }
.rl1-time-grid { grid-template-columns: 1fr 1fr; }
}
/* ── v07zz252 — WIP shortlist gallery in the asset modal (3-tier funnel) ──────
Candidates sent from the Generate page's "Send to WIP" land here; Approve
copies the winner onto the asset, ↩ returns it to Generations, ✕ discards. */
.asset-wip-gallery {
margin: 14px 16px 4px;
padding: 12px 14px;
border: 1px dashed color-mix(in srgb, var(--gold-4) 60%, transparent);
border-radius: var(--r-md);
background: color-mix(in srgb, color-mix(in srgb, var(--hi-2) 75%, var(--mix-light)) 55%, transparent);
}
.asset-wip-head {
font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase;
color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
/* v07zz369 — clickable collapse toggle (tray is collapsed by default). */
width: 100%; padding: 0; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.asset-wip-gallery.is-collapsed .asset-wip-head { margin-bottom: 0; }
.asset-wip-chevron { transition: transform 0.18s ease; flex: 0 0 auto; opacity: 0.75; }
.asset-wip-gallery:not(.is-collapsed) .asset-wip-chevron { transform: rotate(90deg); }
.asset-wip-count {
display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--r-9); background: color-mix(in srgb, var(--gold-4) 85%, transparent); color: color-mix(in srgb, var(--ink-deep) 71%, var(--mix-dark)); font-size: var(--fs-10-5);
}
.asset-wip-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.asset-wip-card {
border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); border-radius: var(--r-panel); overflow: hidden;
background: color-mix(in srgb, var(--cream) 70%, transparent); display: flex; flex-direction: column;
}
/* v07zz257 — natural aspect ratio (no square crop) + click-to-zoom button. */
.asset-wip-thumb {
display: block; width: 100%; padding: 0; margin: 0; border: none;
background: var(--parchment); overflow: hidden; cursor: zoom-in; position: relative;
}
.asset-wip-thumb img { width: 100%; height: auto; object-fit: contain; display: block; }
.asset-wip-zoom {
position: absolute; bottom: 6px; right: 6px; width: 24px; height: 24px;
border-radius: var(--r-xs); display: grid; place-items: center;
background: color-mix(in srgb, var(--shade-8) 55%, transparent); color: var(--white); font-size: var(--fs-13); line-height: 1;
opacity: 0; transition: opacity var(--dur-1) ease; pointer-events: none;
}
.asset-wip-thumb:hover .asset-wip-zoom { opacity: 1; }
.asset-wip-acts { display: flex; align-items: stretch; gap: 4px; padding: 6px; }
/* v07zz258 — three equal-width icon buttons (green ✓ approve, ↩ return, ✕ discard). */
.asset-wip-btn {
flex: 1; font: inherit; font-size: var(--fs-14); font-weight: var(--fw-semi); min-height: 32px; padding: 4px; border-radius: var(--r-7);
border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); background: color-mix(in srgb, var(--cream) 90%, transparent); color: var(--ink);
cursor: pointer; display: inline-grid; place-items: center;
}
.asset-wip-btn:hover:not(:disabled) { background: color-mix(in srgb, color-mix(in srgb, var(--paper-2) 61%, var(--mix-light)) 95%, transparent); }
.asset-wip-btn:disabled { opacity: 0.45; cursor: default; }
.asset-wip-btn.approve {
flex: 1; background: linear-gradient(135deg, color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 54%, var(--mix-light)) 95%, transparent), color-mix(in srgb, var(--pale-green) 90%, transparent));
color: color-mix(in srgb, var(--leaf-bright) 32%, var(--mix-dark)); border-color: color-mix(in srgb, var(--ok) 60%, transparent);
}
.asset-wip-btn.danger { color: var(--danger); }
.asset-wip-btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-soft) 12%, transparent); border-color: color-mix(in srgb, var(--danger-soft) 50%, transparent); }
/* v07zz253 — Approved badge on a WIP card (Approve copies onto the asset but the
WIP original is NEVER cleared — copy, never move). */
.asset-wip-thumb { position: relative; }
.asset-wip-badge {
position: absolute; top: 6px; left: 6px; z-index: 2;
font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-04);
padding: 3px 7px; border-radius: var(--r-7);
background: color-mix(in srgb, var(--ok) 95%, transparent); color: color-mix(in srgb, var(--ink-forest-6) 35%, var(--mix-dark));
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.asset-wip-card.is-approved { border-color: color-mix(in srgb, var(--ok) 70%, transparent); }
.asset-wip-card.is-approved .asset-wip-btn.approve {
background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ink-forest-4); border-color: color-mix(in srgb, var(--ok) 50%, transparent);
}
/* ─── v812 — COSTS I'VE PAID (Reports) ──────────────────────────────────────
v815b — RESTYLED. The first pass was written for a DARK panel (cream text on
translucent dark fills); the Reports page is a LIGHT cream surface, so the inputs
rendered as olive-grey blocks with near-invisible text and the save button was a
lone amber. This now borrows the page's own language: .rvk-subs table rhythm,
.rvx-tab button shapes, --ink / --ink-muted / --ink-soft text, the
--card-border (mixed) border family and --leaf for the primary action. */
.rvx-costs {
background: color-mix(in srgb, var(--cream-7) 75%, var(--mix-light));
border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
border-radius: var(--r-card);
padding: 14px 16px;
margin-bottom: 2px;
}
.rvx-costs-head { display: flex; align-items: baseline; gap: 12px; }
/* v948 — fold chevron: the panel collapses to just this header row. */
.rvx-costs-fold {
border: none; background: transparent; padding: 0 2px;
font-size: var(--fs-11); line-height: 1; color: var(--ink-muted);
cursor: pointer; align-self: center;
width: 16px; flex: 0 0 auto; text-align: center;
}
.rvx-costs-fold:hover { color: var(--ink); }
.rvx-costs-title {
font-size: var(--fs-10); letter-spacing: 0.09em; text-transform: uppercase;
font-weight: var(--fw-bold); color: var(--ink-muted);
}
.rvx-costs-total {
font-family: var(--font-display);
font-size: var(--fs-26); line-height: 1; color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* Same shape as .rvx-tab, the page's own button. */
.rvx-costs-add {
margin-left: auto; font: inherit; cursor: pointer;
padding: 6px 13px; border-radius: var(--r-panel);
border: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
background: color-mix(in srgb, var(--mix-light) 42%, transparent);
color: var(--ink); font-size: var(--fs-12-5); font-weight: var(--fw-semi);
transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.rvx-costs-add:hover { background: color-mix(in srgb, var(--mix-light) 70%, transparent); border-color: color-mix(in srgb, var(--olive) 50%, transparent); }
.rvx-costs-form {
display: grid; grid-template-columns: 1.6fr 0.8fr 0.9fr 1fr 1.5fr; gap: 12px;
margin-top: 12px; padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent);
}
.rvx-costs-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rvx-costs-form label > span {
font-size: var(--fs-9-5); letter-spacing: 0.07em; text-transform: uppercase;
font-weight: var(--fw-bold); color: var(--ink-soft);
}
.rvx-costs-form input, .rvx-costs-form select {
width: 100%; padding: 7px 9px; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-12-5);
background: var(--cream-13);
border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
color: var(--ink);
}
.rvx-costs-form input::placeholder { color: var(--ink-soft); }
.rvx-costs-form input:focus, .rvx-costs-form select:focus {
outline: none; border-color: color-mix(in srgb, var(--olive) 65%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 12%, transparent);
}
.rvx-costs-note { grid-column: 1 / -1; }
.rvx-costs-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.rvx-costs-err { color: var(--danger); font-size: var(--fs-12); margin-right: auto; }
/* Primary action — the page's active-tab green, not a one-off amber. */
.rvx-costs-save {
padding: 8px 18px; border-radius: var(--r-panel); cursor: pointer;
font: inherit; font-size: var(--fs-12-5); font-weight: var(--fw-bold);
background: var(--leaf, var(--moss)); border: 1px solid var(--leaf, var(--moss));
color: var(--ink-on-accent); box-shadow: 0 2px 8px color-mix(in srgb, color-mix(in srgb, var(--moss) 80%, var(--mix-dark)) 28%, transparent);
}
.rvx-costs-save:hover { filter: brightness(1.06); }
.rvx-costs-save:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.rvx-costs-empty { margin-top: 12px; font-size: var(--fs-12-5); color: var(--ink-muted); font-style: italic; }
/* Table rhythm copied from .rvk-subs so it reads as the same family. */
.rvx-costs-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rvx-costs-table th {
text-align: left; font-size: var(--fs-9-5); letter-spacing: 0.07em; text-transform: uppercase;
color: var(--ink-soft); font-weight: var(--fw-bold); padding: 0 10px 6px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent);
}
.rvx-costs-table td { font-size: var(--fs-12); color: var(--ink); padding: 7px 10px 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 8%, transparent); }
.rvx-costs-table .rvx-num { text-align: right; font-weight: var(--fw-semi); }
.rvx-costs-sub { color: var(--ink-soft); font-style: italic; }
.rvx-costs-del {
width: 20px; height: 20px; line-height: 1; border-radius: 50%; cursor: pointer;
background: transparent; border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); color: var(--ink-muted);
}
.rvx-costs-del:hover { background: var(--danger); border-color: var(--danger); color: var(--white); }
@media (max-width: 1100px) { .rvx-costs-form { grid-template-columns: 1fr 1fr; } }
/* v1001 — asset modal: NOTES render INLINE in the right column (the slide-in
drawer is gone, because clicking the thumbnail strip landed on its scrim and
dismissed it, making per-image notes impossible to browse).
FIXED height on purpose: the "This image | All notes" switch changes how many
notes are listed, and without a reserved height the whole right column below
would jump every time it is toggled. */
.char-notes-section.char-notes-inline { padding-top: 2px; }
.char-notes-section.char-notes-inline .notes-panel { margin-top: 0; }
.char-notes-section.char-notes-inline .notes-list {
min-height: 200px;
max-height: 200px;
overflow-y: auto;
}
/* v1055 — over the original quote. Layout 1's two overrun lines (Time & Usage
sub, Total Project Cost sub) turn the existing "fail" red when the project is
past what was quoted. Colour only — no size, weight or spacing change, so the
cards cannot move when the figure crosses the line (invariant #20). */
.rl1-mini-sub.is-over,
.rl1-cost-sub.is-over { color: var(--chart-fail); opacity: 1; }