so we CAN add a ::before
label for them. */
.prj-contractor-row > .prj-num-in { text-align: right; padding-right: 14px; }
.prj-contractor-row > [data-row-label] {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 6px;
border-top: 1px dashed rgba(var(--navy-rgb), .12);
font-weight: 700;
}
.prj-contractor-row > [data-row-label]::before {
content: attr(data-row-label);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(var(--navy-rgb), .55);
}
.dark-mode .prj-contractor-row > [data-row-label] {
border-top-color: rgba(255, 255, 255, .08);
}
.dark-mode .prj-contractor-row > [data-row-label]::before {
color: #8a9ab0;
}
/* 2. Hide the "· May 15, 2026" date on bills/receipts/music
license rows on mobile. */
.prj-ci-uploaded-date,
.prj-music-row-display .muted.tiny { display: none; }
/* 4. MARK PAID button — lighter red on dark mode so it reads
clearly against the deep page. */
.dark-mode .prj-ci-paid {
background: rgba(255, 107, 107, 0.15);
border-color: rgba(255, 107, 107, 0.5);
color: #ff9999;
}
.dark-mode .prj-ci-paid:hover {
background: rgba(255, 107, 107, 0.22);
border-color: rgba(255, 107, 107, 0.7);
color: #ffb3b3;
}
}
/* ═══════════════════════════════════════════════════════════════
LINKED DOCS — drop zone (primary) + inline "+ URL" chip
Desktop-first design: the drop zone is the primary action and
occupies the full width of the field with a generous drop
target + the full "Drop files here or click to upload to X"
message. The "+ URL" button is a small ghost chip pinned in
the drop zone's top-right corner — secondary affordance for
paste-a-URL workflows.
The chip is a SIBLING of the drop zone (not inside it) so
clicks on the chip don't bubble into the drop zone's click
handler that opens the file picker.
═══════════════════════════════════════════════════════════════ */
.prj-link-files-bar {
position: relative;
margin-top: 10px;
/* The parent .prj-link-row variants for Music/CI/Receipts use
`display: contents` on .prj-link-body, which makes our bar a
direct grid child of the 3-col row (100px label | 1fr body |
160px actions). Without an explicit column it lands in col 1
and gets squeezed into the 100px label slot. Span body+actions. */
grid-column: 2 / 4;
}
/* Drop zone — full-width primary drop target. */
.prj-link-files-bar .prj-drop {
width: 100%;
min-height: 64px;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1.5px dashed rgba(var(--navy-rgb), .22);
border-radius: 10px;
background: rgba(var(--navy-rgb), .02);
color: var(--text-muted);
cursor: pointer;
transition: background .15s, border-color .15s;
grid-column: auto; /* unset legacy .prj-drop grid-column: 2 / 4 */
margin-top: 0;
}
.dark-mode .prj-link-files-bar .prj-drop {
border-color: rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .025);
color: var(--text-muted);
}
.prj-link-files-bar .prj-drop:hover {
border-color: rgba(var(--navy-rgb), .45);
background: rgba(var(--navy-rgb), .04);
border-style: solid;
}
.dark-mode .prj-link-files-bar .prj-drop:hover {
border-color: rgba(255, 255, 255, .35);
background: rgba(255, 255, 255, .05);
}
.prj-link-files-bar .prj-drop-msg {
display: inline;
font-size: 12px;
letter-spacing: .1px;
}
.prj-link-files-bar .prj-drop-msg strong {
color: var(--text-body);
font-weight: 600;
}
/* "+ URL" — small inset chip pinned to the drop zone's top-right
corner. Sibling of .prj-drop (not child) so it doesn't trigger
the drop zone's click → file-picker handler. */
#view-project-form .setup-body .prj-link-files-bar .btn-add-row,
#view-project-form .setup-body .prj-link-files-bar .prj-add-url-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
height: auto;
min-height: 0;
padding: 4px 10px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
border-radius: 12px;
background: var(--surface-card);
border: 1px solid rgba(var(--navy-rgb), .22);
color: rgba(var(--navy-rgb), .65);
cursor: pointer;
white-space: nowrap;
transition: all .12s;
box-shadow: none;
}
.dark-mode .prj-link-files-bar .btn-add-row,
.dark-mode .prj-link-files-bar .prj-add-url-btn {
background: rgba(0, 0, 0, .25);
border-color: rgba(255, 255, 255, .2);
color: rgba(255, 255, 255, .75);
}
#view-project-form .setup-body .prj-link-files-bar .btn-add-row:hover,
#view-project-form .setup-body .prj-link-files-bar .prj-add-url-btn:hover {
background: var(--btn-fill);
border-color: var(--btn-fill);
color: var(--btn-text);
}
/* Progress / success / error states preserve the same shape and
just swap the message — no special collapsed mode. */
.prj-link-files-bar .prj-drop[data-state="uploading"],
.prj-link-files-bar .prj-drop[data-state="ok"],
.prj-link-files-bar .prj-drop[data-state="error"] {
cursor: progress;
}
.prj-link-files-bar .prj-drop[data-state="ok"] { border-color: rgba(67,160,71,.55); border-style: solid; background: rgba(67,160,71,.07); }
.prj-link-files-bar .prj-drop[data-state="error"] { border-color: rgba(229,57,53,.55); border-style: solid; background: rgba(229,57,53,.05); }
/* Mobile (≤ 720px) — drop zone shrinks slightly and the chip
becomes a touch larger for finger tapping. */
@media (max-width: 720px) {
.prj-link-files-bar .prj-drop {
min-height: 56px;
padding: 14px 20px;
}
#view-project-form .setup-body .prj-link-files-bar .btn-add-row,
#view-project-form .setup-body .prj-link-files-bar .prj-add-url-btn {
top: 8px;
right: 8px;
padding: 5px 12px;
font-size: 10px;
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE ROUND 15 — collaborator & contractor row compaction
Collaborator row had cost + bill + hours visible but the × wrapped
onto its own line. Contractor row stacked 7 fields straight down.
Both now fit their controls onto a single horizontal action line
(smaller numeric fields, × pinned right) with the wide text inputs
stacked above.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* ── Collaborators ── */
.prj-collab-row,
.prj-collab-head {
grid-template-columns: minmax(0, 1fr) 46px 46px 38px 22px !important;
gap: 6px !important;
align-items: center;
}
/* Show cost rate + bill rate + hours + ×; hide computed cost $ /
revenue $ cells (children 5, 6). */
.prj-collab-row > :nth-child(5),
.prj-collab-row > :nth-child(6),
.prj-collab-head > :nth-child(5),
.prj-collab-head > :nth-child(6) { display: none !important; }
.prj-collab-row > :nth-child(7) { justify-self: end; }
.prj-collab-row .prj-num-in {
text-align: right;
padding: 6px 8px;
font-size: 12px;
}
.prj-collab-row > .prj-num {
font-size: 11px;
text-align: right;
color: rgba(var(--navy-rgb), .65);
}
.dark-mode .prj-collab-row > .prj-num { color: rgba(255,255,255,.55); }
/* ── Contractor invoice ── */
.prj-contractor-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 56px 56px 56px 22px !important;
grid-template-areas:
"service service service service del"
"desc desc desc desc desc"
"hours crate brate . ."
"cost cost bill bill bill" !important;
gap: 6px 8px !important;
align-items: center;
}
/* The 9 children in source order: service_type, description,
hours, cost_rate, bill_rate, cost (div), bill (div), del. */
.prj-contractor-row > :nth-child(1) { grid-area: service; }
.prj-contractor-row > :nth-child(2) { grid-area: desc; }
.prj-contractor-row > :nth-child(3) { grid-area: hours; }
.prj-contractor-row > :nth-child(4) { grid-area: crate; }
.prj-contractor-row > :nth-child(5) { grid-area: brate; }
.prj-contractor-row > :nth-child(6) { grid-area: cost; }
.prj-contractor-row > :nth-child(7) { grid-area: bill; }
.prj-contractor-row > :nth-child(8) { grid-area: del; justify-self: end; }
.prj-contractor-row .prj-num-in {
text-align: right;
padding: 6px 8px !important;
font-size: 12px;
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE — music license row: pin × on the same line as the
filename link. The row has 3 children (link, notes input, ×);
the prior 1fr/auto grid wrapped the × onto its own row, where
it floated dead-center looking unattached. Use grid-template-
areas to put link + × on row 1 and notes on row 2.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.prj-music-row-upload {
grid-template-columns: minmax(0, 1fr) 22px !important;
grid-template-areas:
"link del"
"notes notes" !important;
align-items: center;
row-gap: 6px;
}
.prj-music-row-upload > .prj-ci-uploaded { grid-area: link; min-width: 0; }
.prj-music-row-upload > .prj-music-notes { grid-area: notes; width: 100%; }
.prj-music-row-upload > .prj-ci-del { grid-area: del; justify-self: end; }
}
/* ═══════════════════════════════════════════════════════════════
CLOSE CHECKLIST — per-item visual separation
The flat dashed-line separator made items with nested content
(Frame.io links, RAID picker) bleed into the next item. Each
.prj-check-item now reads as its own subtle card: faint inset
background, rounded corners, generous gap between items. Items
with extra content visibly contain that content.
═══════════════════════════════════════════════════════════════ */
.prj-stage .prj-check-item {
padding: 12px 14px;
border-top: none;
border-radius: 10px;
background: rgba(var(--navy-rgb), 0.04);
margin-top: 8px;
}
.prj-stage .prj-check-item:first-of-type { margin-top: 12px; }
.dark-mode .prj-stage .prj-check-item {
background: rgba(255, 255, 255, 0.04);
}
/* Items with nested content (Frame.io links, RAID picker, Vault
HDD inputs) want a little more breathing room above the inputs. */
.prj-stage .prj-check-item .prj-check-extra {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(var(--navy-rgb), 0.12);
}
.dark-mode .prj-stage .prj-check-item .prj-check-extra {
border-top-color: rgba(255, 255, 255, 0.08);
}
/* ═══════════════════════════════════════════════════════════════
CUSTOMIZE TAB — sidebar-driven theme picker + per-token controls
═══════════════════════════════════════════════════════════════ */
.cz-shell {
max-width: 720px;
margin: 0 auto;
padding: 24px 32px 64px;
}
.cz-head { margin-bottom: 24px; }
.cz-head-title {
font-size: 22px;
font-weight: 700;
letter-spacing: -.3px;
color: var(--text-body);
margin-bottom: 4px;
}
.cz-head-sub {
font-size: 12px;
color: var(--text-muted);
}
.cz-head-sub strong { color: var(--text-body); font-weight: 600; }
.cz-head-hint { opacity: .75; }
/* Theme picker row at top — uses surface tokens so changing
"Card surface" / "Card border" / "Card radius" / "Blur" updates
this panel along with the rest of the admin's cards. */
.cz-theme-row {
background: var(--surface-card);
border: 1px solid var(--surface-card-border);
border-radius: var(--card-radius, 12px);
backdrop-filter: blur(var(--blur-intensity, 12px));
-webkit-backdrop-filter: blur(var(--blur-intensity, 12px));
padding: 16px 18px;
margin-bottom: 24px;
}
.cz-theme-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-label);
margin-bottom: 10px;
}
.cz-theme-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.cz-theme-chip {
padding: 7px 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
border: 1px solid rgba(var(--navy-rgb), 0.18);
border-radius: 14px;
background: transparent;
color: var(--text-body);
cursor: pointer;
transition: all .12s;
}
.dark-mode .cz-theme-chip {
border-color: rgba(255, 255, 255, 0.15);
}
.cz-theme-chip:hover {
background: rgba(var(--navy-rgb), 0.08);
border-color: rgba(var(--navy-rgb), 0.32);
}
.dark-mode .cz-theme-chip:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
.cz-theme-chip.is-active {
background: var(--btn-fill);
color: var(--btn-text);
border-color: var(--btn-fill);
}
.cz-theme-hint {
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
}
/* Group panels — also bound to the card surface tokens so the
user sees their surface choice apply consistently. */
.cz-group {
border: 1px solid var(--surface-card-border);
border-radius: var(--card-radius, 10px);
margin-bottom: 12px;
background: var(--surface-card);
backdrop-filter: blur(var(--blur-intensity, 12px));
-webkit-backdrop-filter: blur(var(--blur-intensity, 12px));
overflow: hidden;
}
.cz-group-head {
list-style: none;
cursor: pointer;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--text-label);
user-select: none;
}
.cz-group-head::-webkit-details-marker { display: none; }
.cz-group-head::before {
content: "▸";
margin-right: 10px;
opacity: .55;
transition: transform .15s;
display: inline-block;
}
.cz-group[open] .cz-group-head::before { transform: rotate(90deg); }
.cz-group-count {
font-size: 10px;
font-weight: 600;
letter-spacing: .5px;
opacity: .55;
background: rgba(var(--navy-rgb), 0.08);
padding: 2px 7px;
border-radius: 8px;
}
.dark-mode .cz-group-count { background: rgba(255, 255, 255, 0.08); }
.cz-group-body {
padding: 4px 16px 14px;
}
/* Individual row */
.cz-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 10px 0;
border-top: 1px dashed rgba(var(--navy-rgb), 0.08);
}
.dark-mode .cz-row { border-top-color: rgba(255, 255, 255, 0.06); }
.cz-row:first-child { border-top: none; }
.cz-row.is-disabled { opacity: .42; pointer-events: none; }
.cz-row-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.cz-row-label {
font-size: 13px;
font-weight: 500;
color: var(--text-body);
}
.cz-row.is-overridden .cz-row-label::after {
content: " ●";
color: var(--accent-green);
font-size: 10px;
vertical-align: middle;
}
.cz-row-tag {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-muted);
opacity: .7;
}
.cz-row-controls {
display: flex;
align-items: center;
gap: 8px;
}
/* Color picker swatch */
.cz-color {
appearance: none;
-webkit-appearance: none;
width: 36px;
height: 28px;
border: 1px solid rgba(var(--navy-rgb), 0.20);
border-radius: 6px;
background: transparent;
cursor: pointer;
padding: 0;
overflow: hidden;
}
.dark-mode .cz-color { border-color: rgba(255, 255, 255, 0.18); }
.cz-color::-webkit-color-swatch-wrapper { padding: 0; }
.cz-color::-webkit-color-swatch { border: none; border-radius: 5px; }
.cz-color::-moz-color-swatch { border: none; border-radius: 5px; }
.cz-color-text {
width: 140px;
padding: 5px 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
background: var(--surface-input);
border: 1px solid var(--surface-input-border);
border-radius: 5px;
color: var(--text-body);
}
.cz-color-text:focus {
outline: none;
border-color: var(--surface-input-border-focus);
}
/* Alpha + generic slider */
.cz-alpha,
.cz-slider {
appearance: none;
-webkit-appearance: none;
width: 120px;
height: 4px;
background: rgba(var(--navy-rgb), 0.18);
border-radius: 4px;
outline: none;
}
.dark-mode .cz-alpha,
.dark-mode .cz-slider { background: rgba(255, 255, 255, 0.15); }
.cz-alpha::-webkit-slider-thumb,
.cz-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--btn-fill);
cursor: pointer;
border: none;
}
.cz-alpha::-moz-range-thumb,
.cz-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--btn-fill);
cursor: pointer;
border: none;
}
.cz-slider-val,
.cz-alpha-val {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: var(--text-muted);
min-width: 40px;
text-align: right;
}
.cz-alpha-val { min-width: 36px; }
/* Toggle (on/off switch) */
.cz-toggle {
position: relative;
display: inline-block;
width: 34px;
height: 18px;
cursor: pointer;
}
.cz-toggle input { opacity: 0; width: 0; height: 0; }
.cz-toggle-track {
position: absolute;
inset: 0;
background: rgba(var(--navy-rgb), 0.20);
border-radius: 18px;
transition: background .15s;
}
.dark-mode .cz-toggle-track { background: rgba(255, 255, 255, 0.18); }
.cz-toggle-track::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
transition: transform .15s;
}
.cz-toggle input:checked + .cz-toggle-track {
background: var(--accent-green);
}
.cz-toggle input:checked + .cz-toggle-track::before {
transform: translateX(16px);
}
/* Font select */
.cz-font-select {
padding: 5px 10px;
font-size: 12px;
background: var(--surface-input);
border: 1px solid var(--surface-input-border);
border-radius: 5px;
color: var(--text-body);
font-family: var(--font-active);
min-width: 180px;
}
.cz-font-select:focus {
outline: none;
border-color: var(--surface-input-border-focus);
}
/* Reset button — only visible when row is overridden */
.cz-reset {
appearance: none;
background: transparent;
border: 1px solid rgba(var(--navy-rgb), 0.20);
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 13px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .12s;
}
.dark-mode .cz-reset { border-color: rgba(255, 255, 255, 0.18); }
.cz-reset:hover {
color: var(--text-body);
border-color: rgba(var(--navy-rgb), 0.40);
}
.dark-mode .cz-reset:hover { border-color: rgba(255, 255, 255, 0.4); }
/* ═══════════════════════════════════════════════════════════════
CUSTOMIZE TAB — two-column layout + live preview panel
═══════════════════════════════════════════════════════════════ */
.cz-shell {
/* Override the narrower single-column max-width for the two-up layout. */
max-width: 1200px;
padding: 24px 32px 64px;
}
.cz-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 32px;
align-items: start;
}
@media (max-width: 1080px) {
.cz-layout { grid-template-columns: minmax(0, 1fr); }
}
.cz-controls { min-width: 0; }
/* ── Live preview surface ────────────────────────────────────── */
.cz-preview {
position: sticky;
top: 88px;
align-self: start;
}
.cz-preview-sticky {
display: flex;
flex-direction: column;
gap: 16px;
}
.cz-preview-head {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-label);
padding: 0 4px;
}
/* ── Mini-app preview ──────────────────────────────────────────
A scaled-down admin shell that shows where each colour /
surface / effect actually lives. Every element references
semantic tokens directly. */
/* The outer mini-app frame — same surface + radius + blur as a
real admin card so the user's surface choices land here too. */
.cz-pv-app {
background: var(--surface-page);
border: 1px solid var(--surface-card-border);
border-radius: var(--card-radius, 12px);
overflow: hidden;
font-family: var(--font-active);
color: var(--text-body);
}
/* HEADER BAR — brand-primary surface, brand-secondary text. */
.cz-pv-app-header {
background: var(--brand-primary);
color: var(--brand-secondary);
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.cz-pv-app-logo {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.cz-pv-app-logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1.5px solid var(--brand-secondary);
border-radius: 50%;
font-size: 10px;
font-weight: 800;
letter-spacing: -.5px;
color: var(--brand-secondary);
}
.cz-pv-app-logo-text {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
color: var(--brand-secondary);
}
.cz-pv-app-header-btn {
background: transparent;
color: var(--brand-secondary);
border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, transparent);
border-radius: 4px;
padding: 4px 8px;
font-family: var(--font-active);
font-size: 9px;
font-weight: 700;
letter-spacing: .8px;
cursor: pointer;
}
/* BODY: sidebar + main */
.cz-pv-app-body {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
}
.cz-pv-app-side {
background: color-mix(in srgb, var(--brand-primary) 92%, #000 8%);
padding: 10px 6px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 320px;
}
.cz-pv-nav-item {
padding: 7px 10px;
font-size: 10px;
font-weight: 600;
letter-spacing: .2px;
color: color-mix(in srgb, var(--brand-secondary) 70%, transparent);
border-radius: 4px;
cursor: pointer;
}
.cz-pv-nav-item:hover {
background: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
}
/* Active tab — the brand-secondary fades into a soft accent strip.
This is the highest-traffic recurring element so we want it
to read clearly in the preview. */
.cz-pv-nav-item.is-active {
background: color-mix(in srgb, var(--brand-secondary) 14%, transparent);
color: var(--brand-secondary);
border-left: 2px solid var(--brand-accent);
padding-left: 8px;
}
.cz-pv-app-main {
background: var(--surface-page);
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* PROJECT CARD — exercises every card-surface token. */
.cz-pv-card {
background: var(--surface-card);
border: 1px solid var(--surface-card-border);
border-radius: var(--card-radius, 12px);
backdrop-filter: blur(var(--blur-intensity, 12px));
-webkit-backdrop-filter: blur(var(--blur-intensity, 12px));
box-shadow: 0 4px 18px rgba(0, 0, 0, var(--shadow-opacity, 0.08));
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cz-pv-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cz-pv-label {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--text-label);
}
.cz-pv-title {
font-size: 13px;
font-weight: 600;
color: var(--text-body);
line-height: 1.3;
}
.cz-pv-muted {
font-size: 10.5px;
color: var(--text-muted);
}
/* FORM SECTION — exercises text + input + buttons all at once. */
.cz-pv-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.cz-pv-flabel {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--text-label);
}
.cz-pv-input {
width: 100%;
padding: 7px 10px;
font-size: 11px;
font-family: var(--font-active);
background: var(--surface-input);
border: 1px solid var(--surface-input-border);
border-radius: var(--card-radius, 6px);
color: var(--text-body);
}
.cz-pv-input:focus {
outline: none;
border-color: var(--surface-input-border-focus);
}
.cz-pv-input-sm { padding: 5px 8px; font-size: 10.5px; }
.cz-pv-input-num { text-align: right; max-width: 64px; }
.cz-pv-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cz-pv-btn-primary,
.cz-pv-btn-ghost,
.cz-pv-btn-danger {
padding: 5px 10px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 3px;
cursor: pointer;
font-family: var(--font-active);
text-transform: uppercase;
}
.cz-pv-btn-primary {
background: var(--btn-fill);
color: var(--btn-text);
border: 1px solid var(--btn-fill);
}
.cz-pv-btn-ghost {
background: transparent;
color: var(--text-body);
border: 1px solid var(--btn-ghost-border);
}
.cz-pv-btn-danger {
background: transparent;
color: var(--status-danger);
border: 1.5px solid color-mix(in srgb, var(--status-danger) 40%, transparent);
}
/* DATA ROW — the contractor / line-item pattern. Exercises
small input + row-del × button. */
.cz-pv-data-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 70px 22px;
gap: 6px;
align-items: center;
}
.cz-pv-row-del {
background: transparent;
border: none;
font-size: 16px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0;
}
.cz-pv-row-del:hover { color: var(--status-danger); }
/* CHECKLIST ROW — exercises brand-accent (the "Done" check) +
text-body. */
.cz-pv-check-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
}
.cz-pv-checkbox {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1.5px solid color-mix(in srgb, var(--text-body) 35%, transparent);
position: relative;
flex-shrink: 0;
}
.cz-pv-checkbox-on {
background: var(--brand-accent);
border-color: var(--brand-accent);
}
.cz-pv-checkbox-on::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
.cz-pv-check-label {
font-size: 11px;
color: var(--text-body);
}
/* STATUS BADGES */
.cz-pv-status-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.cz-pv-status {
display: inline-flex;
padding: 3px 8px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-family: var(--font-active);
}
.cz-pv-status-success {
background: color-mix(in srgb, var(--status-success) 20%, transparent);
color: var(--status-success);
}
.cz-pv-status-warning {
background: color-mix(in srgb, var(--status-warning) 20%, transparent);
color: var(--status-warning);
}
.cz-pv-status-danger {
background: color-mix(in srgb, var(--status-danger) 20%, transparent);
color: var(--status-danger);
}
.cz-pv-status-info {
background: color-mix(in srgb, var(--status-info) 20%, transparent);
color: var(--status-info);
}
/* Legend strip below the preview app. */
.cz-pv-legend {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 4px;
font-size: 10px;
color: var(--text-muted);
}
.cz-pv-legend span {
display: flex;
align-items: center;
gap: 6px;
}
.cz-pv-key {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
border: 1px solid var(--surface-card-border);
}
/* Ambient gradient mini-stage — only shows in dark mode. */
.cz-pv-ambient {
position: relative;
height: 120px;
border-radius: var(--card-radius, 12px);
background: var(--surface-page);
border: 1px solid var(--surface-card-border);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 10px 12px;
}
.cz-pv-ambient::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 25% 30%,
color-mix(in srgb, var(--ambient-hue-1) calc(40% * var(--ambient-enabled, 1)), transparent) 0%,
transparent 70%),
radial-gradient(ellipse 60% 70% at 75% 60%,
color-mix(in srgb, var(--ambient-hue-2) calc(40% * var(--ambient-enabled, 1)), transparent) 0%,
transparent 70%),
radial-gradient(ellipse 45% 55% at 50% 85%,
color-mix(in srgb, var(--ambient-hue-3) calc(45% * var(--ambient-enabled, 1)), transparent) 0%,
transparent 70%);
pointer-events: none;
}
.cz-pv-ambient-label {
position: relative;
z-index: 1;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-label);
}
/* ═══════════════════════════════════════════════════════════════
BILL ↔ SOURCE LINK chip + navigate-to-source flash
When a Bills entry was created by attaching an invoice to a
collaborator / contractor / external-cost row, a small chip
shows the source name. Clicking jumps to that row in the Costs
tab and briefly pulses it so the user can see where it landed.
═══════════════════════════════════════════════════════════════ */
.prj-ci-source {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 8px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: .3px;
border-radius: 999px;
background: rgba(var(--navy-rgb), 0.06);
color: rgba(var(--navy-rgb), 0.75);
border: 1px solid rgba(var(--navy-rgb), 0.10);
cursor: pointer;
font-family: var(--font-active);
white-space: nowrap;
transition: background .12s, border-color .12s;
}
.dark-mode .prj-ci-source {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.80);
border-color: rgba(255, 255, 255, 0.12);
}
.prj-ci-source:hover {
background: rgba(var(--navy-rgb), 0.12);
border-color: rgba(var(--navy-rgb), 0.25);
}
.dark-mode .prj-ci-source:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
}
.prj-ci-source .muted { color: inherit; opacity: .65; }
.prj-ci-source.is-orphan {
cursor: default;
background: rgba(229, 57, 53, 0.10);
border-color: rgba(229, 57, 53, 0.25);
color: rgba(229, 57, 53, 0.85);
}
/* Navigate-to-source flash — applied to the destination row for
~1.5s after a source-chip click. Soft accent glow so the user
can spot it without the page redrawing. */
@keyframes prj-link-flash {
0% { background-color: color-mix(in srgb, var(--brand-accent) 22%, transparent); }
100% { background-color: transparent; }
}
.is-link-flash {
animation: prj-link-flash 1.5s ease-out;
}
/* ═══════════════════════════════════════════════════════════════
ATTACH PANEL — inline annex below a cost row holding its
attached invoices + a drop zone for adding more.
The panel sits as a sibling of the row inside a .prj-*-rowgroup
wrapper. Indented slightly + uses the same drop-zone visual
vocabulary as Linked Docs so the user only learns one pattern.
═══════════════════════════════════════════════════════════════ */
/* The .prj-ec-rowgroup gets its own block-card treatment further
down. Collab + contractor rowgroups originally collapsed via
display:contents but are now ALSO cards (commit applying the
EC pattern); leaving the prior rule disabled here so the card
rules below win. */
.prj-collab-rowgroup,
.prj-contractor-rowgroup,
.prj-ec-rowgroup {
display: block;
}
.prj-attach-bar {
/* Compact annex — the cost row is primary; this strip should
read as a one-line affordance, not its own card. */
padding: 3px 0 8px 12px;
border-left: 2px solid color-mix(in srgb, var(--brand-accent) 25%, transparent);
margin: 0 0 10px 8px;
display: flex;
flex-direction: column;
gap: 3px;
}
.dark-mode .prj-attach-bar {
border-left-color: color-mix(in srgb, var(--brand-accent) 25%, transparent);
}
/* Paid-state border tint — subtle status reflection on the cost
row itself so the user knows at a glance whether everything's
paid without expanding the panel. */
.prj-attach-bar.paid-all-paid {
border-left-color: color-mix(in srgb, var(--status-success) 65%, transparent);
}
.prj-attach-bar.paid-partial {
border-left-color: color-mix(in srgb, var(--status-warning) 65%, transparent);
}
.prj-attach-bar.paid-all-unpaid {
border-left-color: color-mix(in srgb, var(--status-warning) 45%, transparent);
}
.prj-attach-bar.paid-none {
/* No attachments — keep the muted accent so the user sees the
drop affordance is available. */
border-left-color: color-mix(in srgb, var(--text-muted) 25%, transparent);
}
/* Attached-bill row inside the panel. Compact — single line. */
.prj-attach-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 0;
}
.prj-attach-item {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 8px;
font-size: 11px;
border-radius: 4px;
}
.prj-attach-link,
.prj-attach-link:link,
.prj-attach-link:visited,
.prj-attach-link:active {
color: var(--link-color, #6ab9ff) !important;
text-decoration: none !important;
font-weight: 500;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prj-attach-link:hover { text-decoration: underline !important; }
.prj-attach-link.is-noref,
.prj-attach-link.is-noref:visited {
color: var(--text-muted) !important;
cursor: default;
}
.prj-attach-date {
font-size: 10px;
color: var(--text-muted);
flex-shrink: 0;
}
.prj-attach-paid,
.prj-attach-unpaid,
.prj-attach-awaiting {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
flex-shrink: 0;
font-family: var(--font-active);
line-height: 1;
}
.prj-attach-paid {
background: color-mix(in srgb, var(--status-success) 18%, transparent);
color: var(--status-success);
}
.prj-attach-unpaid {
background: color-mix(in srgb, var(--status-warning) 18%, transparent);
color: var(--status-warning);
}
/* "Awaiting" pill — rendered on contractor + collaborator rows
that don't have an invoice attached yet. Quieter than Unpaid
(no action is overdue, we're just waiting on the contractor to
send paperwork) so a muted gray tint instead of the warning
amber. */
.prj-attach-awaiting {
background: color-mix(in srgb, var(--text-muted) 14%, transparent);
color: var(--text-muted);
}
/* Toggle variant — rendered as a