@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500;600&family=Jost:ital,wght@0,400;0,500;1,400&display=swap');
/* ── Reset + tokens ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── VL-BRAND-001: New token system — Sage spec 2026-06-13 ── */
:root {
/* ── Canvas ───────────────────────────────────────────── */
--parchment: #F2EFE9; /* page background — warm oatmeal canvas */
--vellum: #FAF7F2; /* card surface — lighter parchment */
--linen: #EDE8DF; /* sidebar, nested surface */
--seam: #DDD5C8; /* border — warm sand */
/* ── Ink ─────────────────────────────────────────────── */
--charcoal: #2C2620; /* primary text — warm near-black */
--slate: #7A7068; /* secondary/muted text */
--ash: #A89E94; /* placeholder text, disabled */
/* ── Accent — editorial olive/sage ───────────────────── */
--olive: #4A5240; /* primary accent — Velvet dark olive/sage */
--olive-muted: rgba(74,82,64,0.08); /* tint for hover states */
--olive-mid: #6B7560; /* secondary accent / active states */
/* ── Mira ─────────────────────────────────────────────── */
--mira-bg: #2C2620; /* Mira pill background */
--mira-text: #FAF7F2; /* Mira pill text */
--mira-dot: #8FAE78; /* Mira status indicator — living green */
/* ── Status ───────────────────────────────────────────── */
--success: #3D6B3A; /* deep editorial green */
--danger: #8B2E2E; /* warm editorial red */
--amber: #8B6A1A; /* warm amber */
--amber-dim: rgba(139,106,26,0.10);
/* ── Overlays ─────────────────────────────────────────── */
--overlay-bg: rgba(44,38,32,0.55); /* modal backdrop — warm dark */
/* ── VL-REDESIGN-005: Warmth tokens ──────────────────── */
--canvas-warm: #FAF8F5;
--surface-card-warm: #F5F2EE;
--surface-mira: #1C1A17;
--text-mira: #EDE8E2;
--label-muted: #9E8E7E;
--accent-cognac: #8B5E3C;
--text-body: #2C2420;
--rule-subtle: rgba(44, 36, 32, 0.08);
/* ── Ghost frames ─────────────────────────────────────── */
--ghost-bg: #E8E2D8; /* image placeholder fill */
--ghost-border: #CEC6BA; /* image placeholder border */
/* ── Approval badges (kept, retokenized) ─────────────── */
--approval-loved-bg: rgba(61,107,58,0.12);
--approval-loved-text: #3D6B3A;
--approval-pass-bg: rgba(122,112,104,0.12);
--approval-pass-text: #7A7068;
--approval-saved-bg: rgba(139,106,26,0.12);
--approval-saved-text: #8B6A1A;
/* ── Radius ──────────────────────────────────────────── */
--radius: 2px; /* editorial default — all cards, buttons, inputs */
--radius-modal: 4px; /* modal dialogs only */
--radius-pill: 9999px; /* pills and Mira nav element only */
/* ── Shadows ─────────────────────────────────────────── */
--shadow: 0 2px 12px rgba(44,38,32,0.07); /* subtle lift */
/* ── Typography (reference) ──────────────────────────── */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
/* ── Backward-compat aliases ─────────────────────────── */
--bg: var(--parchment);
--surface: var(--vellum);
--surface2: var(--linen);
--border: var(--seam);
--text: var(--charcoal);
--muted: var(--slate);
--accent: var(--olive);
--sidebar-bg: var(--linen);
--auth-card-bg: var(--vellum);
--modal-overlay-bg: var(--overlay-bg);
--card-dark: var(--ghost-bg);
--white: #fff;
}
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background-color 0.2s ease; }
h1, h2, h3, .sidebar-logo, .client-name-large, .detail-heading { font-family: var(--font-display); }
a { color: var(--olive); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
* { outline-color: var(--seam); }
input, textarea, select { font-family: inherit; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 10px 14px; font-size: 0.9rem; width: 100%; outline: none; transition: border-color 0.15s; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.auth-form input.error { border-color: var(--danger); }
/* A-4: Input error state — Cael ELEVATE fix */
.input-error { border-color: #e57373 !important; box-shadow: 0 0 0 2px rgba(229,115,115,0.2); }
.auth-form input.input-error { border-color: #e57373 !important; box-shadow: 0 0 0 2px rgba(229,115,115,0.2); }
label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
.field { margin-bottom: 16px; }
/* ── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--radius); font-size: 0.87rem; font-weight: 600; border: none; transition: all 0.15s; }
.btn-primary { background: #1a1714; color: #faf8f5; border: none; }
.btn-primary:hover { background: #2c2620; border: none; }
.btn-primary:active { opacity: 0.85; transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-ghost { background: transparent; color: var(--charcoal); border: 1px solid var(--seam); }
.btn-ghost:hover { border-color: var(--olive); color: var(--olive); background: var(--olive-muted); }
.btn-ghost:active { opacity: 0.8; }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: rgba(139,46,46,0.06); }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
/* ── Layout ───────────────────────────────────────────────── */
#app { min-height: 100vh; }
.screen { display: none !important; }
.screen.active { display: block !important; }
#screen-app.active { display: flex !important; }
#screen-auth.active { display: flex !important; }
/* ── Auth screen ─────────────────────────────────────────── */
/* ── Auth screen — polished ─────────────────────────────── */
/* ── VL-ANNA-003: Split-screen auth ─────────────────────────────────────── */
#screen-auth {
display: flex; align-items: stretch;
min-height: 100vh; padding: 0;
background: var(--parchment);
}
.auth-image-panel {
flex: 1;
min-height: 100vh;
overflow: hidden;
display: none;
}
.auth-image-panel img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
}
.auth-right-panel {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 48px 48px;
background: var(--parchment);
}
@media (min-width: 900px) {
.auth-image-panel { display: block; flex: 0 0 50%; max-width: 50%; }
.auth-right-panel { flex: 0 0 50%; width: 50%; }
}
.auth-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
width: 100%; max-width: 420px;
box-shadow: none;
backdrop-filter: none;
transition: none;
}
.auth-wordmark {
display: flex; flex-direction: column; align-items: center;
margin-bottom: 32px;
}
.auth-wordmark img { height: 40px; width: auto; }
.auth-wordmark-text {
font-family: var(--font-display);
font-style: italic;
font-weight: 400; letter-spacing: -0.02em; font-size: 2.8rem;
color: var(--text); margin: 0;
}
.auth-sub { display: none; }
.auth-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.auth-tab { flex: 1; text-align: center; padding: 12px; font-size: 0.8rem; font-weight: 400; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
.auth-tab.active { color: var(--charcoal); border-bottom-color: var(--charcoal); }
.auth-tab:hover:not(.active) { color: var(--charcoal); background: var(--olive-muted); border-bottom-color: var(--charcoal); }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form .field { margin-bottom: 16px; }
.auth-form label { font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 8px; font-weight: 400; }
.auth-form input { padding: 12px 14px; font-size: 0.92rem; border-radius: var(--radius); }
.auth-form .btn-primary {
display: block;
margin: 0 auto;
background: transparent;
color: var(--charcoal);
border: 1px solid var(--charcoal);
font-size: 0.88rem; font-weight: 400; letter-spacing: 0.08em;
text-transform: uppercase;
padding: 12px 32px; border-radius: 0;
min-width: 180px;
width: auto;
box-shadow: none;
transition: all 0.2s;
}
.auth-form .btn-primary:hover { background: var(--charcoal); color: var(--parchment); filter: none; box-shadow: none; }
.auth-form .btn-primary:active { opacity: 0.85; transform: translateY(1px); }
.auth-form .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* L-5: Loading state pulse on auth submit button */
@keyframes authBtnPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.auth-form .btn-primary.loading {
pointer-events: none;
animation: authBtnPulse 1.2s ease-in-out infinite;
cursor: not-allowed;
}
.auth-error { color: var(--danger); font-size: 0.82rem; margin-top: 8px; display: none; }
.auth-forgot-link { display: block; text-align: center; margin-top: 16px; font-size: 0.8rem; color: var(--muted); cursor: pointer; transition: color 0.15s; }
.auth-forgot-link:hover { color: var(--olive); }
.auth-divider { display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:0.75rem; }
.auth-divider::before,.auth-divider::after { content:'';flex:1;height:1px;background:var(--border); }
.auth-magic-btn { width:100%;padding:12px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--text);font-size:0.88rem;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px; }
.auth-magic-btn:hover { border-color:var(--olive);color:var(--olive); }
.auth-magic-btn:active { opacity: 0.8; transform: translateY(1px); }
.auth-magic-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
#form-magic { display:none; }
#form-magic.active { display:block; }
.auth-magic-sent { text-align:center;padding:24px 0; }
.auth-magic-sent-icon { font-size:2rem;margin-bottom:12px; }
.auth-magic-sent-title { font-weight:600;margin-bottom:8px; }
.auth-magic-sent-sub { font-size:0.82rem;color:var(--muted);line-height:1.6; }
/* Forgot + Reset forms */
#form-forgot, #form-reset { display: none; }
#form-forgot.active, #form-reset.active { display: block; }
.auth-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--muted); cursor: pointer; margin-bottom: 20px; transition: color 0.15s; }
.auth-back-link:hover { color: var(--olive); }
.auth-success { color: var(--success); font-size: 0.85rem; margin-top: 8px; display: none; }
/* ── App shell ───────────────────────────────────────────── */
#screen-app { display: none; }
#screen-auth { opacity: 0; transition: opacity 0.15s; }
#screen-auth.active { opacity: 1; }
#screen-app.active { display: flex; min-height: 100vh; align-items: flex-start; }
.sidebar { width: 176px; background: var(--linen); border-right: 1px solid var(--seam); display: flex; flex-direction: column; flex-shrink: 0; transition: background-color 0.2s ease; position: sticky; top: 0; height: 100vh; overflow-y: auto; align-items: stretch; }
.sidebar-logo { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--accent); letter-spacing: -0.02em; padding: 20px 4px 14px; border-bottom: 1px solid var(--border); text-align: center; width: 100%; }
.sidebar-stylist { display: flex; flex-direction: column; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.sidebar-stylist strong { display: block; color: var(--text); font-size: 0.85rem; }
.sidebar-tagline { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.01em; margin-top: 2px; line-height: 1.3; }
.sidebar-nav { flex: 1; padding: 12px 0; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 0.84rem; font-weight: 400; letter-spacing: 0.01em; color: var(--muted); cursor: pointer; transition: all 0.15s; border-radius: 0; }
.nav-item:hover, .nav-item.active { background: rgba(74,82,64,0.06); color: var(--text); }
.nav-item.active { color: var(--accent); font-weight: 500; }
.nav-item svg { flex-shrink: 0; transition: color 0.15s; }
.nav-item.active svg { color: var(--olive); }
.nav-item:not(.active) svg { color: var(--ash); }
.sidebar-bottom { padding: 16px 20px; border-top: 1px solid var(--border); }
/* VL-ANNA-ASHFORD-001 (P1 finding #7): min-width:0 is required on flex
items that contain negative-margin "bleed" children (e.g. .vl-hero-zone's
margin:0 -32px) — without it, a flex item's default min-width:auto lets
it grow to fit its widest descendant's intrinsic content size instead of
respecting the flex container's available space. Confirmed live: .main
was measuring 452px inside a 375px viewport on Meredith's client detail
(rich Mira summary banner pushes .vl-hero-zone wide), cascading into
~77–93px horizontal overflow on every child. This is the actual root
cause, not .vl-hero-zone itself — Devon (no rich summary) showed zero
overflow with the identical template, confirming it's a content-length-
triggered flex sizing bug, not a template-wide layout bug. */
.main { flex: 1; overflow-y: auto; min-width: 0; }
.page { display: none; padding: 32px; }
.page:not(.active) { display: none !important; }
#page-client-detail:not(.active), #page-invoices-all:not(.active) { display: none !important; }
.page.active { display: block; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.page-title {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 400;
font-style: italic;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--charcoal);
}
/* ── Cards ───────────────────────────────────────────────── */
.card { background: var(--vellum); border: 1px solid var(--seam); border-radius: var(--radius); padding: 20px; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease; }
.card:hover { border-color: var(--olive); box-shadow: none; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } /* VL-REGRESSION-002: wider min so long names (Wangenheim) fit without truncation */
.client-card { background: var(--vellum); border: 1px solid var(--seam); border-radius: var(--radius); padding: 20px; cursor: pointer; box-shadow: none; transition: all 0.15s; }
.client-card:hover { border-color: var(--olive); box-shadow: none; }
.client-name { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.client-meta { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* ── P2-1: Editorial client cards — VL-WALL-001 ────── */
.client-card-editorial {
padding: 0;
border: none;
box-shadow: none;
border-radius: var(--radius);
background: var(--vellum);
overflow: hidden;
}
.client-card-color-bar {
height: 8px;
width: 100%;
border-radius: 0;
}
.client-card-body {
padding: 20px 24px 20px;
}
.client-card-season-chip {
display: inline-block;
font-size: 0.7rem;
font-family: 'Jost', sans-serif;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 6px 0 10px;
opacity: 0.75;
}
/* ── VL-VISUAL-001: Motion — client card hover reveal ── */
.client-card .client-brief-line {
font-family: 'Jost', sans-serif;
font-style: italic;
font-size: 0.82rem;
color: var(--slate);
line-height: 1.4;
opacity: 0;
transform: translateY(4px);
transition: opacity 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.client-card:hover .client-brief-line {
opacity: 1;
transform: translateY(0);
}
.client-avatar-ring { flex-shrink: 0; }
.client-avatar-lg { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; background: var(--card-dark); border: 1.5px solid var(--seam); }
.client-avatar-initials-lg { width: 52px; height: 52px; border-radius: 4px; background: rgba(74,82,64,0.09); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 500; color: var(--accent); flex-shrink: 0; letter-spacing: 0.5px; }
.client-name-editorial { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; font-style: italic; color: var(--text); margin-bottom: 3px; white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; }
.client-last-seen { font-family: var(--font-ui); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.01em; }
.client-email { font-family: var(--font-ui); font-size: 0.82rem; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; margin-bottom: 10px; }
.client-active-tag {
font-family: var(--font-ui);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--olive-mid);
background: none;
border: none;
padding: 0;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.client-counts { display: flex; gap: 12px; margin-top: 12px; }
.client-counts {
font-size: 0.75rem;
color: var(--ash);
margin-top: 8px;
letter-spacing: 0.01em;
}
.count-chip {
background: none;
border: none;
padding: 0;
font-size: 0.75rem;
color: var(--ash);
border-radius: 0;
}
.count-chip + .count-chip::before {
content: ' · ';
color: var(--seam);
}
/* ── Client detail ───────────────────────────────────────── */
.back-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; margin-bottom: 20px; cursor: pointer; }
.back-btn:hover { color: var(--text); }
.detail-tabs { display: flex; gap: 4px; margin-bottom: 24px; padding-bottom: 0; border-bottom: 1px solid var(--border); }
.detail-tab { padding: 8px 16px; font-size: 0.85rem; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
.detail-tab.active { color: var(--charcoal); border-bottom-color: var(--olive); }
.detail-pane { display: none; }
.detail-pane.active { display: block; }
/* ── Wardrobe ─────────────────────────────────────────────── */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.item-thumb { background: var(--vellum); border: 1px solid var(--seam); border-radius: 2px; overflow: hidden; transition: transform 0.15s, border-color 0.15s; display: flex; flex-direction: column; box-shadow: none; }
.item-thumb:hover { border-color: var(--olive); box-shadow: none; transform: translateY(-2px); }
.item-thumb img { width: 100%; aspect-ratio: 3/4; height: auto; object-fit: contain; object-position: center; display: block; background: var(--vellum); flex-shrink: 0; padding: 8px 8px 4px 8px; box-sizing: border-box; image-orientation: from-image; }
.item-thumb .no-img { width: 100%; aspect-ratio: 3/4; background: var(--ghost-bg); border-bottom: 1px solid var(--ghost-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* .item-thumb-info padding set below */
.item-thumb-name { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 400; color: var(--charcoal); margin-top: 6px; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.item-thumb-cat { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.item-thumb-info { padding: 16px 20px 20px; }
.cat-badge { display: inline-block; background: var(--card-dark); color: var(--muted); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; padding: 2px 7px; }
@keyframes spin { from { display: inline-block; transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.img-shimmer { background: linear-gradient(90deg, var(--ghost-bg) 25%, var(--ghost-border) 50%, var(--ghost-bg) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; }
.item-status-badge { display: inline-block; font-size: 0.65rem; padding: 1px 6px; border-radius: 999px; margin-top: 4px; }
.badge-pending { background: var(--amber-dim); color: var(--amber); }
.badge-done { background: rgba(134,239,172,0.15); color: var(--success); }
.badge-failed { background: rgba(248,113,113,0.15); color: var(--danger); }
.badge-needs-reupload { background: rgba(248,113,113,0.15); color: var(--danger); cursor: pointer; }
/* ── Boards ───────────────────────────────────────────────── */
.board-card { background: var(--vellum); border: 1px solid var(--seam); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.board-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.board-card-name { font-weight: 600; }
.board-card-meta { font-size: 0.75rem; color: var(--muted); }
.board-items-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.board-item-thumb { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--card-dark); image-orientation: from-image; }
.status-pill { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.pill-draft { background: rgba(100,116,139,0.2); color: var(--muted); }
.pill-shared { background: rgba(134,239,172,0.15); color: var(--success); }
/* ── Invoices ─────────────────────────────────────────────── */
.invoice-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.invoice-row:last-child { border-bottom: none; }
.invoice-amount { font-weight: 700; font-size: 1rem; }
.invoice-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.pill-paid { background: rgba(134,239,172,0.15); color: var(--success); }
.pill-sent { background: var(--olive-muted); color: var(--olive); }
/* ── Batch selection ────────────────────────────────────── */
.item-thumb.selected { border-color: var(--olive) !important; }
.item-thumb.selected::after { content: '✓'; position: absolute; top: 6px; right: 6px; background: var(--olive); color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.item-thumb { position: relative; }
.select-mode .item-thumb { cursor: crosshair !important; }
/* ── Context menu ───────────────────────────────────────── */
.ctx-item {
padding: 8px 16px; font-size: 0.87rem; font-weight: 500;
cursor: pointer; color: var(--text); transition: background 0.12s;
display: flex; align-items: center; gap: 10px;
user-select: none; -webkit-user-select: none;
}
.ctx-item:hover { background: var(--olive-muted); }
.ctx-danger { color: var(--danger); }
/* ── Upload zone ─────────────────────────────────────────── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 40px; text-align: center; cursor: pointer; transition: all 0.15s; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--olive); background: var(--olive-muted); }
.upload-zone p { color: var(--muted); font-size: 0.87rem; margin-top: 8px; }
/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-overlay-bg); z-index: 500; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--vellum); border: 1px solid var(--seam); border-radius: var(--radius-modal); padding: 28px; width: 100%; max-width: 480px; box-shadow: 0 8px 32px rgba(44,38,32,0.15); }
.modal h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* VL-INVOICE-CREATE-UI-001 — invoice creation modal, matches branded PDF/email design language */
.modal-invoice { max-width: 520px; }
.invoice-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 4px; }
.invoice-modal-subhead { font-family: var(--font-ui); font-size: 0.88rem; color: var(--slate); margin-bottom: 14px; }
.invoice-modal-notice { font-family: var(--font-ui); font-size: 0.78rem; color: var(--olive); background: var(--olive-muted); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 20px; }
.invoice-section-label { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin: 18px 0 10px; }
.li-row { position: relative; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--seam); border-radius: var(--radius); padding: 14px 34px 14px 14px; margin-bottom: 10px; background: var(--vellum); }
.li-row .field { margin-bottom: 0; }
.li-desc-field { flex: 1.6; }
.li-amount-field { flex: 1; }
.li-remove-btn { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: transparent; color: var(--ash); font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: var(--radius-pill); }
.li-remove-btn:hover { color: var(--danger); background: var(--olive-muted); }
.invoice-total-box { display: flex; justify-content: space-between; align-items: center; background: var(--olive-muted); border-radius: var(--radius); padding: 14px 18px; margin: 6px 0 4px; }
.invoice-total-label { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive-mid); }
.invoice-total-amount { font-family: var(--font-display); font-size: 1.6rem; color: var(--olive); }
/* ── Portal link ─────────────────────────────────────────── */
.portal-link-box { background: rgba(74,82,64,0.05); border: 1px solid var(--seam); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.portal-link-url { flex: 1; font-size: 0.78rem; color: var(--charcoal); word-break: break-all; }
.copy-btn { flex-shrink: 0; }
/* ── Toast ───────────────────────────────────────────────── */
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; font-size: 0.85rem; box-shadow: var(--shadow); transform: translateY(100px); opacity: 0; transition: all 0.25s; z-index: 200; }
#toast.show { transform: translateY(0); opacity: 1; }
/* ── Empty state ─────────────────────────────────────────── */
.empty { text-align: center; padding: 64px 24px; color: var(--slate); }
.empty-icon { font-size: 2.5rem; margin-bottom: 12px; display: none; }
.empty p { font-size: 0.9rem; margin-bottom: 16px; }
/* ── Loading ─────────────────────────────────────────────── */
.spinner { width: 20px; height: 20px; border: 2px solid var(--seam); border-top-color: var(--olive); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Filter buttons ─────────────────────────────────────── */
.filter-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.active { background: rgba(74,82,64,0.08); border-color: var(--accent); color: var(--accent); }
/* ── Commission chart bars ── */
.chart-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-bar { width: 100%; background: var(--olive); border-radius: 4px 4px 0 0; min-height: 2px; opacity: 0.85; }
.chart-label { font-size: 0.65rem; color: var(--muted); text-align: center; white-space: nowrap; }
/* ── Outfit slot cards ── */
.outfit-slot { border: 2px dashed var(--border); border-radius: var(--radius); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden; background: var(--surface); }
.outfit-slot:hover { border-color: var(--olive); }
.outfit-slot.filled { border-style: solid; border-color: var(--olive-mid); }
.outfit-slot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; image-orientation: from-image; }
.outfit-slot-label { font-size: 0.75rem; color: var(--muted); text-transform: capitalize; font-weight: 500; position: relative; z-index: 1; }
.outfit-slot.filled .outfit-slot-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: var(--white); padding: 4px 8px; font-size: 0.7rem; text-align: center; z-index: 2; }
.slot-clear-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.55); color: var(--white); border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.outfit-slot.filled .slot-clear-btn { display: flex; }
.outfit-list-item { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; font-size: 0.85rem; transition: all 0.12s; }
.outfit-list-item:hover, .outfit-list-item.active { border-color: var(--olive); background: var(--olive-muted); color: var(--olive); }
/* ── Look generation section (VELVET-LOOK-UI) ── */
.look-section { margin-top:20px; border:1px solid var(--seam); border-radius:var(--radius); overflow:hidden; background:var(--vellum); }
.look-section-body { padding:20px 18px; }
.look-empty-icon { display:none; }
.look-empty-title { font-size:0.92rem; font-weight:600; margin-bottom:4px; color:var(--text); }
.look-empty-sub { font-size:0.82rem; color:var(--muted); margin-bottom:14px; line-height:1.45; }
.look-progress-bar { width:100%; height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin:10px 0 6px; }
.look-progress-fill { height:100%; background:var(--olive); border-radius:2px; animation:look-progress 2s ease-in-out infinite; width:60%; }
@keyframes look-progress { 0%,100%{width:20%;margin-left:0} 50%{width:55%;margin-left:20%} }
.look-generating-label { font-size:0.8rem; color:var(--muted); }
.look-generating-sub { font-size:0.75rem; color:var(--muted); margin-top:4px; }
.look-image { width:100%; display:block; object-fit:contain; border-radius:var(--radius-sm); background:var(--card-dark); image-orientation: from-image; }
.look-attribution { font-size:0.76rem; color:var(--muted); margin-top:8px; }
.look-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.look-error-wrap { display:flex; align-items:center; gap:10px; padding:14px 18px; background:rgba(220,38,38,0.06); border-top:1px solid var(--border); }
.look-error-msg { font-size:0.82rem; color:var(--danger); flex:1; }
/* ── Lookbook cards (VL-018) ── */
.lookbook-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 480px) { .lookbook-grid { grid-template-columns: 1fr; } }
.lookbook-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; }
.lookbook-card:hover { border-color: var(--olive); box-shadow: none; }
.lookbook-cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--card-dark); }
.lookbook-cover-swatch { width: 100%; aspect-ratio: 4/3; background: var(--linen); border: 1px solid var(--seam); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.lookbook-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lookbook-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookbook-meta { font-size: 0.73rem; color: var(--muted); }
.lookbook-footer { padding: 0 12px 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lb-share-btn { font-size: 0.72rem; }
/* ── Mobile ──────────────────────────────────────────────── */
.hamburger { display: none !important; background: none; border: none; color: var(--text); font-size: 1.4rem; padding: 4px 8px; cursor: pointer; }
.mobile-header { display: none; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 16px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; transition: background-color 0.2s ease; }
.mobile-logo { font-size: 1rem; font-weight: 600; color: var(--charcoal); font-family: var(--font-display); font-style: italic; letter-spacing: 0.1em; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg); z-index: 29; }
.sidebar-overlay.open { display: block; }
@media (max-width: 640px) {
/* VL-ANNA-ASHFORD-001 (P1 findings #7, #8): root cause of the mobile
horizontal-overflow bugs on both the client detail hero and the
client list toolbar. #screen-app.active's base rule (line ~236) sets
align-items:flex-start for the desktop row layout (sidebar aligned to
top). Switching to flex-direction:column here for mobile flips the
cross-axis to horizontal — and flex-start on that axis means .main
sizes to its own widest descendant's intrinsic content width instead
of stretching to fill the 100vw column, so any wide content (a search
input, a bled hero zone) drags the whole page wider than the
viewport. align-items:stretch (the flex default, but needed here
since the desktop rule sets flex-start explicitly) makes .main
actually respect 100% of the column's width, matching every child's
own overflow-safe CSS instead of overriding it. Confirmed live:
eliminated 977px client-list overflow and ~93px client-detail
overflow at 375px viewport width. */
#screen-app.active { flex-direction: column !important; align-items: stretch !important; }
.sidebar { display: none; }
.sidebar.open { left: 0; }
.sidebar-overlay { display: none !important; }
.mobile-header { display: flex; }
.hamburger { display: block; }
.main { flex: 1; overflow-y: auto; }
.page { padding: 20px 16px 100px; }
.card-grid { grid-template-columns: 1fr 1fr; }
.items-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Password show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 38px; width: 100%; box-sizing: border-box; }
.pw-toggle {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; padding: 0;
color: var(--olive); line-height: 1; font-size: 1rem;
display: flex; align-items: center; opacity: 0.6;
}
.pw-toggle svg { color: var(--accent); }
.pw-toggle:hover { opacity: 1; }
.pw-toggle:active { opacity: 0.9; transform: scale(0.92); }
/* ── Dark mode toggle ──────────────────────────────────── */
.theme-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 8px 0; cursor: pointer; background: none; border: none;
color: var(--muted); font-size: 0.78rem; font-family: inherit;
transition: color 0.15s;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle-label { display: flex; align-items: center; gap: 8px; }
.theme-toggle-icon { width: 18px; height: 18px; flex-shrink: 0; }
.theme-toggle-track {
width: 32px; height: 18px; border-radius: 9px;
background: var(--border); position: relative;
transition: background 0.2s ease; flex-shrink: 0;
}
.theme-toggle-thumb {
position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--white); transition: transform 0.2s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* ── Mira nav pill (VL-BRAND-001) ─────────────────────── */
.mira-nav-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
margin: 12px 16px 8px;
background: var(--mira-bg);
color: var(--mira-text);
border-radius: var(--radius-pill);
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.12s ease;
}
.mira-nav-pill:hover { background: var(--olive); }
.mira-nav-pill::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mira-dot);
flex-shrink: 0;
animation: mira-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes mira-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.75); }
}
.mira-thinking-dot {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 999px;
background: currentColor;
opacity: 0.45;
animation: miraThinkPulse 1.2s ease-in-out infinite;
vertical-align: middle;
}
@keyframes miraThinkPulse {
0%, 100% { opacity: 0.25; transform: scale(0.9); }
50% { opacity: 0.75; transform: scale(1); }
}
/* ── P2-3: Mira floating overlay ──────────────────────── */
.mira-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(44,38,32,0.35);
backdrop-filter: blur(1px);
display: flex; justify-content: flex-end;
animation: mira-overlay-in 0.18s ease;
}
@keyframes mira-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.mira-drawer {
width: 380px; max-width: 96vw;
height: 100vh; overflow-y: auto;
background: var(--surface);
border-left: 1px solid var(--seam);
box-shadow: -4px 0 24px rgba(44,38,32,0.12);
display: flex; flex-direction: column;
animation: mira-drawer-in 0.22s cubic-bezier(0.25,0,0,1);
}
@keyframes mira-drawer-in { from { transform: translateX(380px); } to { transform: translateX(0); } }
@keyframes mira-drawer-out { from { transform: translateX(0); } to { transform: translateX(380px); } }
@keyframes mira-overlay-out { from { opacity: 1; } to { opacity: 0; } }
.mira-drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 20px 16px;
border-bottom: 1px solid var(--seam);
flex-shrink: 0;
}
.mira-drawer-title {
font-family: var(--font-display); font-style: italic; font-size: 1.3rem;
font-weight: 400; color: var(--text); letter-spacing: 0.01em;
}
.mira-drawer-close {
background: none; border: none; cursor: pointer;
color: var(--muted); font-size: 1rem; padding: 4px 8px;
border-radius: var(--radius); transition: color 0.12s;
}
.mira-drawer-close:hover { color: var(--text); }
.mira-drawer-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.mira-drawer-hint { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin: 0; }
.mira-drawer-input-row { display: flex; gap: 8px; }
.mira-drawer-input { flex: 1; padding: 10px 12px; font-size: 0.88rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--vellum); color: var(--text); }
.mira-drawer-input:focus { outline: none; border-color: var(--olive); }
.mira-drawer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mira-drawer-result { background: var(--mira-bg); border-radius: var(--radius); padding: 16px 18px; }
.mira-drawer-result-text { color: var(--mira-text); font-size: 0.88rem; line-height: 1.65; white-space: pre-wrap; }
.mira-drawer-history { display: flex; flex-direction: column; gap: 12px; }
.mira-history-item { background: rgba(74,82,64,0.05); border-radius: var(--radius); padding: 12px 14px; }
.mira-history-q { font-size: 0.78rem; font-weight: 500; color: var(--olive-mid); margin-bottom: 6px; }
.mira-history-a { font-size: 0.85rem; color: var(--text); line-height: 1.6; }
/* ── Ghost frame (VL-BRAND-001) ──────────────────────── */
.ghost-frame {
width: 100%;
aspect-ratio: 1;
background: var(--ghost-bg);
border: 1px solid var(--ghost-border);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
}
.ghost-frame::after {
content: '';
width: 38%;
height: 52%;
background: var(--ghost-border);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 85% 100%, 15% 100%, 0% 20%);
opacity: 0.5;
}
/* ── Empty state (VL-BRAND-001) ──────────────────────── */
.empty-kicker {
font-family: var(--font-ui);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ash);
margin-bottom: 10px;
}
.empty-message {
font-family: var(--font-display);
font-size: 1.1rem;
font-style: italic;
font-weight: 300;
color: var(--slate);
margin-bottom: 16px;
}
/* Input/modal/toast dark transitions */
input, textarea, select { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.modal { transition: background-color 0.2s ease; }
#toast { transition: background-color 0.2s ease, transform 0.25s, opacity 0.25s; }
/* ── VL-011: Client Brief ─────────────────────────────────── */
.brief-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; transition: background-color 0.2s ease; overflow: hidden; }
.brief-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; user-select: none; }
.brief-header-left { display: flex; align-items: center; gap: 10px; }
.brief-title { font-size: 0.82rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.brief-summary { font-size: 0.82rem; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.brief-header-right { display: flex; align-items: center; gap: 10px; }
.brief-status-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.5px; flex-shrink: 0; }
.brief-status-complete { background: rgba(22,163,74,0.12); color: var(--success); }
.brief-status-partial { background: var(--amber-dim); color: var(--amber); }
.brief-chevron { color: var(--muted); transition: transform 0.2s ease; flex-shrink: 0; }
.brief-chevron.open { transform: rotate(180deg); }
.brief-body { padding: 0 20px 20px; display: none; }
.brief-body.open { display: block; }
.brief-sections { display: flex; flex-direction: column; gap: 12px; }
.brief-section { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s; }
.brief-section:hover { border-color: var(--olive); }
.brief-section.editing { border-color: var(--olive); }
.brief-section-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 8px 14px 4px; }
.brief-field-display { padding: 4px 14px 10px; font-size: 0.88rem; line-height: 1.55; color: var(--text); cursor: text; min-height: 32px; word-break: break-word; }
.brief-field-display:empty::after { content: attr(data-placeholder); color: var(--border); font-style: italic; font-size: 0.82rem; }
/* ANNA-REVIEW-001: "Mira is drafting…" state — distinct from true-empty so
the ~3-4s auto-draft window reads as loading, not broken. Subtle shimmer
on the placeholder text itself, no layout shift. */
.brief-field-display.brief-field-drafting:empty::after {
color: var(--olive);
font-style: italic;
opacity: 0.75;
animation: briefDraftingPulse 1.3s ease-in-out infinite;
}
@keyframes briefDraftingPulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.9; }
}
.brief-field-display.brief-readonly { cursor: default; }
.brief-readonly-note { font-size: 0.7rem; color: var(--muted); padding: 0 14px 8px; font-style: italic; }
.brief-section.brief-ai-section { background: var(--vellum); border-radius: var(--radius); }
.brief-section.brief-ai-section .brief-section-label::after { content: ' ❆'; font-size: 0.65rem; color: var(--accent); vertical-align: super; }
/* VL-MIRA-BRIEF-001: Mira auto-draft indicator */
.mira-draft-mark { color: #B8A98A; font-size: 0.68rem; opacity: 0.8; vertical-align: middle; pointer-events: none; user-select: none; letter-spacing: 0; font-weight: 400; text-transform: none; }
.brief-field-edit { display: none; padding: 0 14px 12px; }
.brief-field-edit textarea { border: none; border-top: 1px solid var(--border); background: var(--surface); resize: vertical; font-size: 0.88rem; line-height: 1.55; padding: 10px 0; border-radius: 0; width: 100%; min-height: 72px; outline: none; color: var(--text); transition: none; }
.brief-field-edit textarea:focus { border-color: transparent; }
.brief-section.editing .brief-field-display { display: none; }
.brief-section.editing .brief-field-edit { display: block; }
.brief-empty-state { text-align: center; padding: 28px 20px 8px; }
.brief-empty-icon { display: none; }
.brief-empty-text { font-size: 0.85rem; color: var(--slate); line-height: 1.5; margin-bottom: 16px; }
/* P2-4: Editorial brief empty state */
.brief-empty-editorial { text-align: left; padding: 20px 4px 12px; }
.brief-empty-editorial-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--slate); line-height: 1.6; margin: 0 0 16px; }
.brief-empty-input-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.brief-empty-input { width: 100%; padding: 10px 12px; font-size: 0.88rem; line-height: 1.55; border: 1px solid var(--seam); border-radius: var(--radius); background: var(--vellum); color: var(--text); resize: vertical; font-family: var(--font-ui); }
.brief-empty-input:focus { outline: none; border-color: var(--olive); }
/* Brief badge on client cards */
.brief-badge { font-size: 0.65rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; display: inline-block; margin-top: 6px; }
.brief-badge-complete { background: rgba(22,163,74,0.12); color: var(--success); }
.brief-badge-partial { background: var(--amber-dim); color: var(--amber); }
@media (max-width: 640px) {
.brief-summary { max-width: 160px; }
.brief-body { padding: 0 14px 16px; }
}
/* ── VL-013: Client Photo ────────────────────────────────── */
.client-photo-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 20px 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.client-photo-circle {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--surface);
border: 2px solid var(--border);
}
.client-photo-placeholder {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--card-dark);
border: 2px dashed var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
flex-shrink: 0;
}
.client-photo-label {
font-size: 0.78rem;
color: var(--muted);
margin-top: 8px;
margin-bottom: 10px;
}
.client-photo-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.client-photo-url-row {
display: flex;
gap: 6px;
align-items: center;
margin-top: 8px;
width: 100%;
max-width: 320px;
justify-content: center;
}
.client-photo-url-row input {
flex: 1;
min-width: 0;
font-size: 0.82rem;
padding: 7px 10px;
}
.client-photo-url-status {
font-size: 0.78rem;
color: var(--muted);
margin-top: 6px;
text-align: center;
}
.client-photo-error {
font-size: 0.78rem;
color: var(--danger);
margin-top: 6px;
text-align: center;
}
.client-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--card-dark);
border: 1px solid var(--border);
flex-shrink: 0;
}
.client-avatar-initials {
width: 44px;
height: 44px;
border-radius: 4px;
background: rgba(74,82,64,0.09);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
letter-spacing: 0.5px;
}
/* ── Palette Section ── */
.palette-section { cursor: default; padding: 4px 0; }
.palette-section .brief-section-label { padding: 8px 14px 6px; }
#palette-container { padding: 0 14px 12px; }
.palette-empty { text-align: center; padding: 16px 0; }
.palette-empty .palette-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.palette-confirmed-badge { display: inline-block; background: var(--success); color: #fff; font-size: 11px; font-weight: 600; border-radius: var(--radius); padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.palette-axes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.palette-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; background: var(--surface-2, var(--border)); border: 1.5px solid transparent; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .15s; }
.palette-pill:hover { border-color: var(--accent); }
.palette-pill .axis-label { color: var(--muted); font-size: 11px; }
.palette-pill .axis-value { color: var(--text); font-weight: 600; }
.palette-confidence { font-size: 11px; color: var(--muted); margin: 4px 0 10px; }
.palette-confirm-btns { display: flex; gap: 8px; margin-top: 10px; }
.palette-notes { width: 100%; margin-top: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; background: var(--surface); color: var(--text); resize: vertical; }
.palette-swatches { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;align-items:flex-start; }
.palette-swatch { display:inline-flex;flex-direction:column;align-items:center;margin-right:0;margin-bottom:6px;cursor:default;min-width:48px; transition: transform 150ms ease; }
.palette-swatch:hover { transform: scale(1.15); }
.swatch-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); }
.swatch-name { font-size: 10px; color: var(--muted); max-width: 48px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 11px; border-radius: 6px; padding: 5px 8px; white-space: nowrap; z-index: 10; min-width: 120px; text-align: center; }
.palette-swatch:hover .swatch-tooltip { display: block; }
.palette-avoid-row { opacity: .65; }
.palette-summary { font-style: italic; color: var(--muted); font-size: 13px; border-left: 3px solid var(--accent); padding-left: 10px; margin: 10px 0; }
.palette-action-btns { display: flex; gap: 8px; margin-top: 8px; }
/* ── Client Jump Nav ──────────────────────────────── */
/* SMS thread styles */
.sms-bubble { display:flex; flex-direction:column; max-width:78%; margin-bottom:10px; }
.sms-bubble.outbound { align-self:flex-end; align-items:flex-end; }
.sms-bubble.inbound { align-self:flex-start; align-items:flex-start; }
.sms-bubble-body { padding:9px 13px; border-radius:16px; font-size:0.85rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.sms-bubble.outbound .sms-bubble-body { background:var(--accent,#2C2825); color:#fff; border-bottom-right-radius:4px; }
.sms-bubble.inbound .sms-bubble-body { background:var(--surface-2,#F0EDE8); color:var(--text); border-bottom-left-radius:4px; }
.sms-bubble-meta { font-size:0.68rem; color:var(--muted); margin-top:3px; padding:0 2px; }
.client-jump-nav {
display: flex;
gap: 4px;
padding: 10px 0 0 0;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
position: sticky;
top: 0;
background: var(--surface);
z-index: 10;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.client-jump-nav::-webkit-scrollbar { display: none; }
.client-jump-nav-pill {
padding: 7px 16px;
font-size: 0.84rem;
font-weight: 500;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.client-jump-nav-pill.active {
color: var(--charcoal);
border-bottom-color: var(--olive);
}
.palette-generating { text-align: center; padding: 12px; color: var(--muted); font-size: 13px; }
@media (max-width: 600px) {
.detail-client-meta { white-space: normal; }
}
/* ── Search ── */
.search-wrap { position:relative; flex:1; max-width:400px; }
.search-wrap input { width:100%; padding:7px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; outline:none; }
.search-wrap input:focus { border-color:var(--accent); }
.search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.1); max-height:400px; overflow-y:auto; z-index:200; }
.search-section-label { font-size:11px; font-weight:600; color:var(--muted); padding:10px 14px 4px; text-transform:uppercase; letter-spacing:.04em; }
.search-item-row { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; }
.search-item-row:hover { background:var(--card-dark); }
.search-item-thumb { width:36px; height:36px; border-radius:6px; object-fit:cover; background:var(--border); flex-shrink:0; }
.search-item-name { font-size:13px; font-weight:500; }
.search-item-meta { font-size:11px; color:var(--muted); }
.search-client-row { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; }
.search-client-row:hover { background:var(--card-dark); }
.search-client-avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0; }
.search-empty { padding:20px; text-align:center; color:var(--muted); font-size:13px; }
/* ── Search in sidebar ── */
.sidebar-search { padding:10px 16px 4px; }
/* ── Edit Modal + Results ── */
.edit-outfits { display:flex; flex-direction:column; gap:16px; margin-top:4px; }
.edit-outfit-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.edit-outfit-title { font-weight:700; font-size:14px; margin-bottom:6px; }
.edit-outfit-items { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.edit-outfit-item-tag { background:var(--card-dark); border:1px solid var(--border); border-radius:var(--radius-modal); padding:3px 10px; font-size:12px; }
.edit-outfit-note { font-style:italic; font-size:13px; color:var(--muted); border-left:3px solid var(--accent); padding-left:10px; }
.edit-generating { text-align:center; padding:24px; color:var(--muted); font-size:14px; }
.edit-history-row { padding:10px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.edit-history-row:hover { opacity:.8; }
.edit-history-meta { font-size:11px; color:var(--muted); }
/* ── VL-EDIT: The Edit ───────────────────────────────────── */
.edits-section { margin-top:32px; }
.edits-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.edits-section-label { font-size:0.82rem; font-weight:600; color:var(--slate); letter-spacing:0.04em; text-transform:uppercase; }
/* ── VL-VISUAL-001: Motion — Edit arrival sequence ── */
@keyframes editItemArrive {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.edit-card {
animation: editItemArrive 200ms ease forwards;
opacity: 0;
}
.edit-card { background:var(--vellum); border:1px solid var(--seam); border-radius:var(--radius); padding:16px 18px; margin-bottom:10px; }
.edit-card-title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; font-style: italic; color: var(--charcoal); }
.edit-card-meta { font-size:0.78rem; color:var(--slate); margin-top:4px; }
.edit-card-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.edit-card-actions .btn { font-size:0.75rem; padding:5px 10px; }
.edit-status { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-pill); font-size:0.68rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
.edit-status-draft { background:rgba(74,82,64,0.10); color:var(--olive); }
.edit-status-sent { background:rgba(61,107,58,0.12); color:var(--success); }
.edit-status-archived { background:rgba(122,112,104,0.10); color:var(--slate); }
.edit-status-pending_review { background:rgba(139,106,26,0.12); color:var(--amber); }
.edit-status-needs_revision { background:rgba(139,46,46,0.12); color:var(--danger); }
.edit-status-published { background:rgba(61,107,58,0.14); color:var(--success); }
/* VL-EDIT-V2 */
.edit-v2-editor-overlay{position:fixed;inset:0;background:var(--overlay-bg);z-index:120;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.edit-v2-editor-overlay{align-items:center}}
.edit-v2-editor-panel{background:var(--vellum);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:680px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:640px){.edit-v2-editor-panel{border-radius:var(--radius);max-height:88vh}}
.edit-v2-editor-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--seam);flex-shrink:0}
.edit-v2-editor-title{font-family:var(--font-display);font-size:1.1rem;font-weight:400;color:var(--charcoal)}
.edit-v2-editor-body{flex:1;overflow-y:auto;padding:18px 20px}
.edit-v2-editor-footer{padding:14px 20px;border-top:1px solid var(--seam);display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.ev2-item-row{border:1px solid var(--seam);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.ev2-item-header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--linen);cursor:pointer;user-select:none}
.ev2-item-thumb{width:44px;height:44px;object-fit:cover;border-radius:var(--radius);background:var(--ghost-bg);flex-shrink:0}
.ev2-item-name{flex:1;font-size:.88rem;font-weight:500;color:var(--charcoal);line-height:1.3}
.ev2-item-finalized-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:.68rem;font-weight:600;letter-spacing:.03em}
.ev2-item-finalized-yes{background:rgba(61,107,58,.12);color:var(--success)}
.ev2-item-finalized-no{background:rgba(122,112,104,.10);color:var(--slate)}
.ev2-item-body{padding:12px 14px;display:none}
.ev2-item-body.open{display:block}
.ev2-copy-textarea{width:100%;min-height:80px;resize:vertical;font-family:var(--font-ui);font-size:.85rem;line-height:1.6;border:1px solid var(--seam);border-radius:var(--radius);padding:9px 11px;background:var(--vellum);color:var(--charcoal);transition:border-color .15s;margin-bottom:8px}
.ev2-copy-textarea:focus{outline:none;border-color:var(--olive)}
.ev2-day-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.ev2-day-row input,.ev2-day-row select{font-size:.82rem;padding:7px 9px;border:1px solid var(--seam);border-radius:var(--radius);background:var(--vellum);color:var(--charcoal);width:100%}
.ev2-day-row input:focus,.ev2-day-row select:focus{outline:none;border-color:var(--olive)}
.ev2-field-label{font-size:.68rem;color:var(--slate);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px;font-weight:600}
.ev2-item-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ev2-cael-panel{margin-top:20px;padding-top:18px;border-top:1px solid var(--seam)}
.ev2-cael-panel-label{font-size:.72rem;color:var(--slate);letter-spacing:.05em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.ev2-cael-pending{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--linen);border:1px solid var(--seam);border-radius:var(--radius);font-size:.85rem;color:var(--slate)}
.ev2-cael-verdict{padding:14px 16px;border-radius:var(--radius);font-size:.85rem;line-height:1.5}
.ev2-cael-pass{background:rgba(61,107,58,.10);border:1px solid rgba(61,107,58,.20);color:var(--success)}
.ev2-cael-elevate{background:var(--amber-dim);border:1px solid rgba(139,106,26,.25);color:var(--amber)}
.ev2-cael-block{background:rgba(139,46,46,.09);border:1px solid rgba(139,46,46,.22);color:var(--danger)}
.ev2-cael-verdict-label{font-weight:600;margin-bottom:4px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.ev2-cael-verdict-rationale{font-size:.84rem;line-height:1.55}
.ev2-cael-notes{margin-top:8px;font-size:.79rem;color:var(--slate);font-style:italic}
.ev2-preflight-error{background:rgba(139,46,46,.08);border:1px solid rgba(139,46,46,.2);border-radius:var(--radius);padding:10px 12px;font-size:.82rem;color:var(--danger);margin-top:8px;line-height:1.5}
.edit-format-card{border:2px solid var(--seam);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .12s;margin-bottom:10px}
.edit-format-card:hover{border-color:var(--olive-mid);background:var(--olive-muted)}
.edit-format-card.selected{border-color:var(--olive);background:var(--olive-muted)}
.edit-format-card-title{font-weight:600;font-size:.92rem;color:var(--charcoal);margin-bottom:3px}
.edit-format-card-desc{font-size:.78rem;color:var(--slate);line-height:1.45}
.collection-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--seam);border-radius:var(--radius);margin-bottom:8px;background:var(--vellum)}
.collection-item-name{flex:1;font-size:.88rem;font-weight:500;color:var(--charcoal)}
.collection-item-meta{font-size:.74rem;color:var(--slate)}
.edit-reactions { margin-top:10px; padding-top:10px; border-top:1px solid var(--seam); }
.edit-reaction-summary { display:flex; gap:12px; font-size:0.8rem; color:var(--slate); flex-wrap:wrap; cursor:pointer; }
.edit-reaction-summary:hover { color:var(--charcoal); }
.reaction-detail { display:none; margin-top:10px; }
.reaction-detail.open { display:block; }
.reaction-look-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--seam); }
.reaction-look-item:last-child { border-bottom:none; }
.reaction-look-thumb { width:48px; height:48px; object-fit:cover; border-radius:var(--radius); background:var(--ghost-bg); flex-shrink:0; }
.reaction-look-caption { flex:1; font-size:0.82rem; color:var(--charcoal); line-height:1.4; }
.reaction-look-emoji { font-size:1rem; width:28px; text-align:center; flex-shrink:0; }
.edit-mira-insight { font-size:0.82rem; font-style:italic; color:var(--slate); margin-top:10px; padding:10px 14px; background:rgba(74,82,64,0.05); border-left:2px solid var(--olive); border-radius:var(--radius); line-height:1.5; }
.edits-empty { padding:20px 0; }
.edits-empty-title { font-size:0.9rem; font-weight:600; color:var(--charcoal); margin-bottom:5px; }
.edits-empty-sub { font-size:0.82rem; color:var(--slate); line-height:1.5; }
.edit-link-box { background:rgba(61,107,58,0.06); border:1px solid rgba(61,107,58,0.20); border-radius:var(--radius); padding:14px 16px; margin-top:14px; }
.edit-link-label { font-size:0.72rem; color:var(--success); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:6px; }
.edit-link-url { font-size:0.78rem; color:var(--charcoal); word-break:break-all; margin-bottom:10px; }
.create-edit-modal { max-width:540px; }
.create-edit-step { display:none; }
.create-edit-step.active { display:block; }
.create-edit-step-label { font-size:0.7rem; color:var(--ash); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.look-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; max-height:300px; overflow-y:auto; margin:12px 0 4px; }
.look-picker-card { position:relative; border:2px solid var(--seam); border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:4/5; background:var(--ghost-bg); transition:border-color 0.12s; -webkit-tap-highlight-color:transparent; }
.look-picker-card:hover { border-color:var(--olive-mid); }
.look-picker-card.selected { border-color:var(--olive); }
.look-picker-check { display:none; position:absolute; top:5px; right:5px; width:18px; height:18px; background:var(--olive); color:var(--vellum); border-radius:50%; font-size:10px; font-weight:700; align-items:center; justify-content:center; }
.look-picker-card.selected .look-picker-check { display:flex; }
/* ── VL-LOOKS-GALLERY: Looks gallery ────────────────────── */
.looks-gallery-section { margin-bottom:32px; }
.looks-gallery-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.looks-gallery-section-label { font-size:0.82rem; font-weight:600; color:var(--slate); letter-spacing:0.04em; text-transform:uppercase; }
.looks-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.look-gallery-card { background:var(--vellum); border:1px solid var(--seam); border-radius:var(--radius); overflow:hidden; transition:box-shadow 0.15s; }
.look-gallery-card:hover { box-shadow: none; border-color: var(--olive); }
.look-gallery-img-wrap { aspect-ratio:4/5; overflow:hidden; background:var(--ghost-bg); border-bottom:1px solid var(--seam); }
.look-gallery-img { width:100%; height:100%; object-fit:cover; display:block; }
.look-gallery-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.look-gallery-body { padding:10px 12px 12px; }
.look-gallery-name { font-family:var(--font-display); font-size:0.95rem; font-weight:400; color:var(--charcoal); line-height:1.2; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.look-gallery-meta { font-size:0.72rem; color:var(--ash); margin-bottom:8px; }
.looks-gallery-empty { padding:20px 0; }
.looks-gallery-empty-title { font-size:0.9rem; font-weight:600; color:var(--charcoal); margin-bottom:5px; }
.looks-gallery-empty-sub { font-size:0.82rem; color:var(--slate); line-height:1.5; }
/* ── Instagram post button on look card ─────────── */
.look-card-ig-btn { display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--slate);border-radius:var(--radius);padding:0;cursor:pointer;transition:color 0.15s,background 0.12s;flex-shrink:0; }
.look-card-ig-btn:hover { color:var(--charcoal);background:var(--olive-muted); }
.look-gallery-card-actions { display:flex;align-items:center;justify-content:flex-end;margin-top:6px;padding-top:4px; }
/* ── Instagram post modal ─────────────────────── */
#modal-instagram-post .modal { max-width:760px;width:100%;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:92vh; }
.ig-modal-layout { display:grid;grid-template-columns:220px 1fr;min-height:0;flex:1;overflow:hidden; }
@media(max-width:640px){ .ig-modal-layout{grid-template-columns:1fr;} .ig-modal-left{max-height:200px;} }
.ig-modal-left { background:var(--ghost-bg);border-right:1px solid var(--seam);display:flex;align-items:center;justify-content:center;overflow:hidden; }
.ig-modal-left img { width:100%;height:100%;object-fit:cover;display:block; }
.ig-modal-left-placeholder { display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:200px;color:var(--ash); }
.ig-modal-right { display:flex;flex-direction:column;overflow:hidden; }
.ig-modal-header { display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--seam);flex-shrink:0; }
.ig-modal-header h3 { font-family:var(--font-display);font-size:1.1rem;font-weight:400;color:var(--charcoal); }
.ig-modal-body { flex:1;overflow-y:auto;padding:18px 20px; }
.ig-loading-state { display:flex;align-items:center;gap:10px;padding:20px 0;color:var(--slate);font-size:0.88rem; }
.ig-loading-state .mira-dot-pulse { width:8px;height:8px;border-radius:50%;background:var(--mira-dot);flex-shrink:0;animation:mira-pulse 1.4s ease-in-out infinite; }
@keyframes mira-pulse { 0%,100%{opacity:1;}50%{opacity:0.35;} }
.ig-caption-label { font-size:0.72rem;color:var(--muted);letter-spacing:0.05em;text-transform:uppercase;font-weight:600;margin-bottom:6px; }
#ig-caption-textarea { width:100%;resize:vertical;min-height:100px;font-family:var(--font-ui);font-size:0.88rem;line-height:1.6;border:1px solid var(--seam);border-radius:var(--radius);padding:10px 12px;background:var(--vellum);color:var(--charcoal);transition:border-color 0.15s; }
#ig-caption-textarea:focus { outline:none;border-color:var(--olive); }
.ig-section { margin-top:14px; }
.ig-hashtag-row { display:flex;flex-wrap:wrap;gap:6px;margin-top:6px; }
.ig-hashtag-chip { display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--olive-muted);color:var(--olive);font-size:0.75rem;font-weight:500;border-radius:var(--radius-pill);cursor:default;border:1px solid rgba(74,82,64,0.15); }
.ig-hashtag-chip button { border:none;background:none;color:var(--olive);cursor:pointer;padding:0;line-height:1;font-size:0.9rem;opacity:0.6;display:flex;align-items:center; }
.ig-hashtag-chip button:hover { opacity:1; }
.ig-add-tag-btn { display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:transparent;color:var(--muted);font-size:0.75rem;border:1px dashed var(--seam);border-radius:var(--radius-pill);cursor:pointer;transition:all 0.15s; }
.ig-add-tag-btn:hover { border-color:var(--olive);color:var(--olive); }
.ig-shopmy-row { display:flex;flex-direction:column;gap:6px;margin-top:6px; }
.ig-shopmy-item { display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--charcoal); }
.ig-shopmy-item a { color:var(--olive);font-size:0.78rem;word-break:break-all; }
.ig-voice-warning { display:none;align-items:flex-start;gap:8px;background:var(--amber-dim);border:1px solid rgba(139,106,26,0.2);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;color:var(--amber);font-size:0.8rem;line-height:1.5; }
.ig-voice-warning.visible { display:flex; }
.ig-modal-footer { padding:14px 20px;border-top:1px solid var(--seam);display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap; }
.btn-post-ig { opacity:0.5;cursor:not-allowed !important; }
/* ── Settings Instagram Voice ────────────────── */
.ig-voice-status { display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--charcoal);margin-bottom:14px; }
.ig-voice-status-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--ash); }
.ig-voice-status-dot.active { background:var(--mira-dot); }
.ig-upload-progress { font-size:0.82rem;color:var(--muted);margin-top:8px;display:none; }
.ig-upload-progress.visible { display:block; }
.look-picker-img { width:100%; height:100%; object-fit:cover; display:block; }
.look-picker-name { position:absolute; bottom:0; left:0; right:0; background:rgba(44,38,32,0.65); color:#fff; font-size:0.62rem; padding:3px 5px; line-height:1.2; }
.look-picker-count { font-size:0.78rem; color:var(--slate); margin-top:4px; min-height:18px; }
.look-order-list { display:flex; flex-direction:column; gap:6px; margin:10px 0; max-height:220px; overflow-y:auto; }
.look-order-item { display:flex; align-items:center; gap:10px; background:var(--linen); border:1px solid var(--seam); border-radius:var(--radius); padding:7px 10px; }
.look-order-thumb { width:36px; height:36px; object-fit:cover; border-radius:var(--radius); background:var(--ghost-bg); flex-shrink:0; }
.look-order-name { flex:1; font-size:0.82rem; color:var(--charcoal); }
.look-order-arrows { display:flex; flex-direction:column; gap:1px; }
.look-order-btn { background:transparent; border:1px solid var(--seam); border-radius:2px; width:20px; height:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--slate); font-size:0.6rem; transition:border-color 0.1s; padding:0; }
.look-order-btn:hover { border-color:var(--olive); color:var(--olive); }
.look-order-btn:disabled { opacity:0.2; cursor:default; }
/* ── E-1: Sidebar nav — 6 primary items, utility overflow ─ */
#nav-invoices, #nav-commissions { display: none; }
.sidebar-utility-zone {
margin-top: auto;
padding: 12px 16px 16px;
border-top: 1px solid var(--seam);
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar-utility-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-family: var(--font-ui);
font-size: 0.78rem;
color: var(--slate);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s;
text-align: left;
width: 100%;
}
.sidebar-utility-btn:hover { color: var(--charcoal); border-color: var(--seam); background: var(--olive-muted); }
/* ── P1-2: Three-section client detail ────────────────── */
.detail-tabs { display: none !important; }
.detail-pane { display: block; }
/* pane-ai and pane-profile removed from DOM; invoices/orders/edits in collapsible More section */
/* VL-CLIENT-DETAIL-CONTRAST-FIX-001: same collision as the hero zone, one
level down. .client-section / .brief-card and everything inside them
(Client Photos, Color Portrait, Body & Fit, Goals, Budget, Sizing,
Taste, Off Limits, Freestyle Patterns, Freeform Notes) are styled with
light-theme tokens (--surface, --muted, --text-body) but they sit
inside #page-client-detail.active, which forces the whole page to
background:#15110d (near-black) the instant the Intel File mounts.
Light-theme content was rendering dark-on-dark, nearly illegible —
confirmed live via direct screenshot. Give the whole Brief tab content
wrapper its own explicit light background so it's isolated from the
page-level dark override, same fix pattern as .vl-hero-zone. */
.client-section {
margin-bottom: 48px;
background: var(--canvas-warm);
position: relative;
z-index: 2;
}
.client-section:first-of-type {
padding-top: 8px;
}
/* ── VL-REDESIGN-003: Briefing Book editorial CSS ─────── */
/* Editorial header strip */
.client-editorial-header {
padding: 28px 0 20px;
border-bottom: 1px solid var(--seam);
margin-bottom: 24px;
}
.client-editorial-name {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(2rem, 5vw, 3rem);
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--charcoal);
margin-bottom: 6px;
}
.client-editorial-meta {
font-size: 0.8rem;
color: var(--ash);
margin-bottom: 4px;
}
.client-editorial-facts {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate, var(--muted));
margin-top: 6px;
line-height: 2;
}
.client-editorial-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding-top: 14px;
}
/* Briefing anchor nav */
.briefing-anchors {
display: flex;
gap: 28px;
padding: 10px 0 18px;
border-bottom: 1px solid var(--seam);
margin-bottom: 28px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
position: sticky;
top: 0;
background: var(--surface);
z-index: 10;
}
.briefing-anchors::-webkit-scrollbar { display: none; }
.briefing-anchor {
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ash);
text-decoration: none;
transition: color 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.briefing-anchor:hover { color: var(--charcoal); }
/* Hide old pill nav in briefing-book mode */
.briefing-book-mode .client-jump-nav { display: none !important; }
/* Hide old page-header in briefing-book mode */
.briefing-book-mode .page-header { display: none !important; }
/* Flat brief sections — no boxes */
#client-brief-card {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Hide the accordion toggle header — content always open */
#client-brief-card .brief-header {
display: none !important;
}
/* Always show brief body */
#client-brief-card .brief-body {
display: block !important;
padding: 0 !important;
}
/* Flat brief sections — no card borders */
#client-brief-card .brief-section {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
margin-bottom: 0 !important;
}
#client-brief-card .brief-sections {
gap: 0 !important;
}
#client-brief-card .brief-section + .brief-section {
border-top: 1px solid var(--seam) !important;
padding-top: 14px !important;
margin-top: 14px !important;
}
#client-brief-card .brief-section-label {
font-family: var(--font-ui);
font-size: 0.65rem !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--ash) !important;
padding: 0 0 4px 0 !important;
margin-bottom: 4px !important;
}
#client-brief-card .brief-field-display {
padding: 2px 0 8px 0 !important;
}
#client-brief-card .brief-field-edit textarea {
border-left: none !important;
border-right: none !important;
padding: 8px 0 !important;
}
/* Mira brief header — always full width, deliberate */
.mira-brief-header {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Client photo horizontal scroll strip */
.client-photos-strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 0 12px;
scrollbar-width: none;
-ms-overflow-style: none;
margin-bottom: 8px;
}
.client-photos-strip::-webkit-scrollbar { display: none; }
.client-photo-thumb-strip {
flex-shrink: 0;
width: 100px;
height: 140px;
object-fit: cover;
object-position: center top;
border-radius: 2px;
cursor: pointer;
display: block;
}
/* Override photo-thumb in strip context */
.client-photos-strip .photo-thumb {
width: 100px !important;
height: 140px !important;
border-radius: 2px !important;
border: none !important;
flex-shrink: 0 !important;
}
.client-photos-strip .photo-thumb img {
height: 100% !important;
object-position: center top !important;
}
/* Photo section — left-aligned editorial, no centering */
#client-photo-section {
align-items: flex-start !important;
padding: 0 0 16px 0 !important;
border-bottom: 1px solid var(--seam) !important;
margin-bottom: 16px !important;
}
/* Sections now always visible — scroll dividers */
.client-section + .client-section {
border-top: none;
}
/* Section anchor targets get scroll-margin for sticky nav */
#section-client,
#section-color-portrait,
#section-wardrobe,
#section-looks,
#section-messages {
scroll-margin-top: 60px;
}
.section-label {
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ash);
text-transform: none;
margin-bottom: 16px;
padding-bottom: 8px;
padding-left: 2px; /* VL-REGRESSION-002: prevents narrow-glyph (I) clipping at left edge */
border-bottom: 1px solid var(--seam);
display: block;
}
.client-more-section { margin-top: 24px; margin-bottom: 48px; }
.client-more-toggle {
font-family: var(--font-ui);
font-size: 0.82rem;
color: var(--slate);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 6px;
}
.client-more-toggle:hover { color: var(--charcoal); }
.client-more-content { display: none; margin-top: 20px; }
.client-more-content.open { display: block; }
/* ── P1-4: Mira inline panels ─────────────────────────── */
.mira-panel {
background: var(--mira-bg);
color: var(--mira-text);
padding: 14px 18px;
border-radius: 2px;
margin-bottom: 20px;
}
.mira-panel-label {
font-family: var(--font-display);
font-style: italic;
font-size: 0.78rem;
color: var(--mira-text);
opacity: 0.7;
display: block;
margin-bottom: 6px;
}
.mira-context-line {
display: block;
font-size: 0.72rem;
color: var(--muted);
font-style: italic;
margin-bottom: 8px;
letter-spacing: 0.02em;
line-height: 1.4;
}
.mira-context-line:empty {
display: none;
}
.mira-panel-content {
font-family: var(--font-ui);
font-size: 0.88rem;
line-height: 1.6;
color: var(--mira-text);
}
.mira-panel--empty .mira-panel-content { opacity: 0.6; font-size: 0.82rem; }
/* ── Color Portrait UI — VELVET-COLOR-PORTRAIT-V1-UI ──────── */
.portrait-panel {
background: var(--vellum);
border: 1px solid var(--seam);
border-radius: var(--radius);
padding: 32px 32px 28px;
margin-bottom: 48px;
transition: background-color 0.2s ease;
}
.portrait-panel-label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ash);
margin-bottom: 16px;
display: block;
}
.portrait-headline {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 400;
font-style: italic;
color: var(--charcoal);
letter-spacing: -0.01em;
line-height: 1.2;
margin-bottom: 14px;
}
.portrait-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.portrait-chip {
display: inline-flex;
flex-direction: column;
gap: 2px;
background: var(--linen);
border: 1px solid var(--seam);
border-radius: var(--radius-pill);
padding: 5px 12px 6px;
}
.portrait-chip-label {
font-size: 0.63rem;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ash);
line-height: 1;
}
.portrait-chip-value {
font-size: 0.82rem;
font-weight: 500;
color: var(--charcoal);
line-height: 1.2;
text-transform: capitalize;
}
.portrait-summary {
font-size: 0.92rem;
color: var(--slate);
line-height: 1.7;
margin: 0;
}
.portrait-palette-section {
margin-bottom: 20px;
}
.portrait-palette-section:last-child { margin-bottom: 0; }
.portrait-palette-tier-label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ash);
margin-bottom: 12px;
}
.portrait-swatch-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.portrait-swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: default;
position: relative;
transition: transform 150ms ease;
}
.portrait-swatch:hover {
transform: scale(1.15);
}
.portrait-swatch-circle {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(44,38,32,0.10);
flex-shrink: 0;
}
.portrait-swatch-name {
font-size: 0.7rem;
color: var(--charcoal);
text-align: center;
max-width: 60px;
line-height: 1.3;
font-weight: 500;
}
.portrait-swatch-note {
font-size: 0.63rem;
color: var(--ash);
text-align: center;
max-width: 64px;
line-height: 1.3;
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--charcoal);
color: var(--vellum);
padding: 5px 8px;
border-radius: var(--radius);
white-space: nowrap;
max-width: 200px;
white-space: normal;
z-index: 10;
pointer-events: none;
}
.portrait-swatch:hover .portrait-swatch-note { display: block; }
.portrait-avoid-section {
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid var(--seam);
}
.portrait-avoid-group {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.portrait-avoid-group-name {
font-size: 0.72rem;
font-weight: 600;
color: var(--slate);
min-width: 72px;
padding-top: 2px;
flex-shrink: 0;
}
.portrait-avoid-swatches {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.portrait-avoid-chip {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgba(44,38,32,0.10);
opacity: 0.75;
}
.portrait-avoid-reason {
font-size: 0.75rem;
color: var(--ash);
line-height: 1.5;
flex: 1;
min-width: 140px;
}
/* Outfits panel — EDITORIAL. Cael reviews this. */
.portrait-outfits-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.portrait-outfit-card {
padding: 24px 0;
border-bottom: 1px solid var(--seam);
}
.portrait-outfit-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.portrait-outfit-name {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 300;
font-style: italic;
color: var(--charcoal);
margin-bottom: 12px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.portrait-outfit-colors {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 12px;
flex-wrap: wrap;
}
.portrait-outfit-color-item {
display: flex;
flex-direction: column;
align-items: center;
width: 64px;
}
.portrait-outfit-circle {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
border-radius: 50%;
border: 1px solid rgba(44,38,32,0.10);
flex-shrink: 0;
flex-grow: 0;
margin-bottom: 6px;
display: block;
}
.portrait-outfit-color-name {
font-size: 0.68rem;
color: var(--slate);
text-align: center;
max-width: 64px;
line-height: 1.25;
}
.portrait-outfit-desc {
font-size: 0.87rem;
color: var(--slate);
line-height: 1.65;
font-style: normal;
margin: 0;
}
.portrait-strategy-text {
font-size: 0.95rem;
color: var(--charcoal);
line-height: 1.8;
white-space: pre-wrap;
}
.portrait-approved-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 600;
color: var(--success);
background: var(--approval-loved-bg);
border-radius: var(--radius-pill);
padding: 5px 12px;
}
.portrait-analyze-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.portrait-error-msg {
font-size: 0.8rem;
color: var(--danger);
margin-top: 6px;
display: none;
}
.text-link { text-decoration: underline; cursor: pointer; }
/* ── VL-WF-V1: Session Notes Panel ──────────────────────── */
.session-notes-panel {
background: var(--vellum);
border: 1px solid var(--seam);
border-left: 3px solid var(--olive);
border-radius: var(--radius);
margin-bottom: 24px;
overflow: hidden;
}
.session-notes-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px 10px;
border-bottom: 1px solid var(--seam);
}
.session-notes-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.session-notes-title {
font-family: var(--font-ui);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
}
.session-notes-date {
font-size: 0.72rem;
color: var(--ash);
}
.session-notes-body {
padding: 16px 18px;
}
.session-notes-empty {
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.session-notes-empty-text {
font-family: var(--font-display);
font-style: italic;
font-size: 1.0rem;
color: var(--slate);
line-height: 1.55;
margin: 0;
}
.session-notes-fields {
display: flex;
flex-direction: column;
gap: 10px;
}
.session-note-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.session-note-field-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ash);
}
.session-note-field-value {
font-size: 0.88rem;
color: var(--charcoal);
line-height: 1.55;
}
/* Debrief modal textarea override */
/* ── Client photo thumbnail grid ─────────────────────────── */
.photo-thumb-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.photo-thumb {
position: relative;
width: 72px;
height: 72px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
flex-shrink: 0;
}
.photo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.15s ease;
}
.photo-thumb:hover img { filter: brightness(0.82); }
/* VL-IRIS-PHOTOLIGHTBOX-001: photo-thumb redesign — click img = lightbox, × btn = delete */
.photo-thumb-del {
display: none; /* legacy — replaced by photo-thumb-del-btn */
}
.photo-thumb-confirm-overlay {
display: none; /* legacy overlay removed — was causing accidental deletes */
}
.photo-thumb-del-btn {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: rgba(10,10,15,0.65);
color: rgba(255,255,255,0.9);
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, background 0.15s ease;
padding: 0;
z-index: 2;
}
.photo-thumb:hover .photo-thumb-del-btn {
opacity: 1;
pointer-events: auto;
}
.photo-thumb-del-btn:hover {
background: rgba(160,35,35,0.85);
}
#debrief-textarea {
min-height: 140px;
resize: vertical;
}
/* Debrief extracted fields */
.debrief-field-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
.debrief-field-item {
background: var(--linen);
border-radius: var(--radius);
padding: 10px 14px;
}
.debrief-field-item-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--olive-mid);
margin-bottom: 4px;
}
.debrief-field-item-val {
font-size: 0.86rem;
color: var(--charcoal);
line-height: 1.5;
}
/* ── VL-WF-V1: Comment Thread ────────────────────────────── */
.comment-thread-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: var(--muted);
cursor: pointer;
padding: 3px 0;
border: none;
background: none;
font-family: inherit;
transition: color 0.12s;
}
.comment-thread-toggle:hover { color: var(--charcoal); }
.comment-thread-toggle .ct-count {
background: var(--olive-muted);
color: var(--olive);
border-radius: 999px;
padding: 1px 6px;
font-size: 0.68rem;
font-weight: 600;
}
.comment-thread-wrap {
display: none;
margin-top: 10px;
border-top: 1px solid var(--seam);
padding-top: 12px;
}
.comment-thread-wrap.open {
display: block;
}
.comment-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.comment-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.comment-item.is-mira {
border-left: 2px solid var(--olive);
padding-left: 10px;
}
.comment-author-row {
display: flex;
align-items: center;
gap: 6px;
}
.comment-author {
font-size: 0.72rem;
font-weight: 600;
color: var(--olive-mid);
letter-spacing: 0.01em;
}
.comment-time {
font-size: 0.68rem;
color: var(--ash);
}
.comment-body {
font-size: 0.85rem;
color: var(--charcoal);
line-height: 1.55;
}
.comment-status-pill {
display: inline-block;
font-size: 0.65rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.03em;
}
.csp-purchased { background: rgba(61,107,58,0.12); color: var(--success); }
.csp-wrong_size { background: var(--amber-dim); color: var(--amber); }
.csp-love_it { background: rgba(61,107,58,0.12); color: var(--success); }
.csp-not_for_me { background: rgba(122,112,104,0.12); color: var(--slate); }
.comment-input-area {
display: flex;
flex-direction: column;
gap: 8px;
}
.comment-status-picker {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.comment-status-btn {
font-size: 0.68rem;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--seam);
background: transparent;
color: var(--muted);
cursor: pointer;
transition: all 0.12s;
font-family: inherit;
}
.comment-status-btn.selected {
border-color: var(--olive);
background: var(--olive-muted);
color: var(--charcoal);
}
.comment-input-row {
display: flex;
gap: 6px;
align-items: flex-end;
}
.comment-input-row textarea {
flex: 1;
min-height: 38px;
padding: 8px 10px;
font-size: 0.85rem;
border: 1px solid var(--seam);
border-radius: var(--radius);
background: var(--vellum);
color: var(--charcoal);
resize: none;
line-height: 1.45;
font-family: var(--font-ui);
}
.comment-input-row textarea:focus {
outline: none;
border-color: var(--olive);
}
/* ── VL-WF-V1: Activity Feed ─────────────────────────────── */
.activity-list {
display: flex;
flex-direction: column;
}
.activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--seam);
cursor: pointer;
transition: background 0.1s;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--olive-muted); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.activity-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--olive-mid);
flex-shrink: 0;
margin-top: 6px;
}
.activity-dot.dot-session_note { background: var(--olive); }
.activity-dot.dot-edit { background: var(--olive-mid); }
.activity-dot.dot-comment { background: var(--ash); }
.activity-dot.dot-look { background: var(--seam); }
.activity-dot.dot-product_suggestion { background: var(--amber); }
.activity-content { flex: 1; }
.activity-client-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--olive);
margin-bottom: 2px;
}
.activity-text {
font-size: 0.85rem;
color: var(--charcoal);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.activity-time {
font-size: 0.7rem;
color: var(--ash);
margin-top: 3px;
}
.activity-load-more {
text-align: center;
padding: 16px;
}
.text-link { text-decoration: underline; cursor: pointer; }
/* ── P1-5: Look Builder split panel ───────────────────── */
.outfit-editor-split { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; }
.outfit-items-list-col { width: 240px; flex-shrink: 0; }
.outfit-canvas-col { flex: 1; min-width: 0; }
.outfit-item-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid var(--seam);
cursor: pointer; transition: background 0.12s;
}
.outfit-item-row:hover { background: var(--olive-muted); }
.outfit-item-num { font-family: var(--font-ui); font-size: 0.72rem; color: var(--slate); width: 20px; flex-shrink: 0; text-align: right; }
.outfit-item-thumb-sm { width: 44px; height: 44px; border-radius: 2px; object-fit: cover; background: var(--ghost-bg); flex-shrink: 0; border: 1px solid var(--seam); image-orientation: from-image; }
.outfit-item-thumb-placeholder { width: 44px; height: 44px; border-radius: 2px; background: var(--ghost-bg); border: 1px solid var(--seam); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ash); font-size: 1rem; }
.outfit-item-name-sm { font-family: var(--font-ui); font-size: 0.82rem; color: var(--charcoal); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outfit-item-remove { font-size: 0.78rem; color: var(--ash); cursor: pointer; flex-shrink: 0; padding: 4px; border: none; background: none; transition: color 0.12s; }
.outfit-item-remove:hover { color: var(--danger); }
.outfit-add-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--seam); cursor: pointer; color: var(--slate); font-family: var(--font-ui); font-size: 0.82rem; transition: color 0.12s; }
.outfit-add-row:hover { color: var(--olive); }
@media (max-width: 640px) {
.outfit-editor-split { flex-direction: column; }
.outfit-items-list-col { width: 100%; }
}
.brief-empty-text { font-size: 0.85rem; color: var(--slate); line-height: 1.6; }
/* ═══════════════════════════════════════════
VSA ONBOARDING OVERLAY
═══════════════════════════════════════════ */
#onboarding-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
#onboarding-overlay.active { display: flex !important; }
.ob-backdrop {
position: absolute;
inset: 0;
background: rgba(10,10,15,0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ob-panel {
position: relative;
z-index: 1;
background: var(--surface, #13131a);
border: 1px solid rgba(201,169,110,0.2);
border-radius: 16px;
padding: 48px 40px;
max-width: 480px;
width: 100%;
box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.ob-skip {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.04em;
cursor: pointer;
padding: 4px 8px;
transition: color 0.15s;
}
.ob-skip:hover { color: var(--text); }
.ob-step-eyebrow {
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--olive, #c9a96e);
margin-bottom: 16px;
}
.ob-headline {
font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 400;
font-style: italic;
color: var(--text);
line-height: 1.15;
margin-bottom: 12px;
}
.ob-body {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.65;
margin-bottom: 28px;
}
.ob-form .field { margin-bottom: 16px; }
.ob-form label {
display: block;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.ob-form input, .ob-form textarea {
width: 100%;
padding: 11px 14px;
font-size: 0.9rem;
border-radius: var(--radius, 8px);
border: 1px solid var(--border);
background: var(--bg, #0a0a0f);
color: var(--text);
font-family: var(--font-body, 'DM Sans', sans-serif);
}
.ob-form input:focus, .ob-form textarea:focus {
outline: none;
border-color: rgba(201,169,110,0.5);
}
.ob-error {
color: var(--danger);
font-size: 0.8rem;
margin-bottom: 12px;
}
.ob-next-btn {
width: 100%;
justify-content: center;
margin-top: 8px;
}
.ob-step-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.ob-upload-hint {
display: flex;
align-items: center;
gap: 12px;
border: 1px dashed rgba(201,169,110,0.3);
border-radius: 8px;
padding: 20px 16px;
cursor: pointer;
color: var(--muted);
font-size: 0.88rem;
margin-bottom: 16px;
transition: border-color 0.15s, background 0.15s;
}
.ob-upload-hint:hover {
border-color: rgba(201,169,110,0.55);
background: rgba(201,169,110,0.04);
}
.ob-upload-hint svg { color: rgba(201,169,110,0.5); flex-shrink: 0; }
.ob-item-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
min-height: 0;
}
.ob-item-thumb {
width: 64px;
height: 64px;
border-radius: 6px;
object-fit: cover;
border: 1px solid rgba(201,169,110,0.2);
}
.ob-done-icon {
font-size: 2.5rem;
color: var(--olive, #c9a96e);
margin-bottom: 16px;
}
.ob-client-name-inline {
font-style: italic;
color: var(--olive, #c9a96e);
}
@media (max-width: 520px) {
.ob-panel { padding: 36px 24px; }
}
/* ── Mira Look Completeness Flag ─────────────────────────────────────── */
.mira-completeness-flag {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: rgba(201, 169, 110, 0.75); /* velvet gold, muted */
padding: 4px 0 2px;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.4;
}
.mira-flag-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(201, 169, 110, 0.6);
flex-shrink: 0;
}
/* ── Settings Tabs ─────────────────────────────────── */
.settings-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
padding-bottom: 0;
}
.settings-tab {
padding: 8px 16px;
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: var(--font-body, inherit);
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.settings-tab-panel { display: none; max-width: 520px; }
.settings-tab-panel.active { display: block; }
/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
--parchment: #0a0a0f;
--vellum: rgba(255,255,255,0.04);
--linen: #111118;
--seam: rgba(201,169,110,0.18);
--charcoal: #e8e0d4;
--slate: rgba(232,224,212,0.55);
--ash: rgba(232,224,212,0.35);
--olive: #c9a96e;
--olive-muted: rgba(201,169,110,0.10);
--olive-mid: #b8966a;
--mira-bg: rgba(201,169,110,0.12);
--mira-text: #e8e0d4;
--success: #8FAE78;
--danger: #c97070;
--amber: #c9a96e;
--amber-dim: rgba(201,169,110,0.10);
--overlay-bg: rgba(0,0,0,0.72);
--ghost-bg: rgba(255,255,255,0.06);
--ghost-border: rgba(255,255,255,0.10);
--approval-loved-bg: rgba(143,174,120,0.14);
--approval-loved-text: #8FAE78;
--approval-pass-bg: rgba(232,224,212,0.10);
--approval-pass-text: rgba(232,224,212,0.55);
--approval-saved-bg: rgba(201,169,110,0.14);
--approval-saved-text: #c9a96e;
--shadow: 0 2px 12px rgba(0,0,0,0.30);
/* aliases */
--bg: var(--parchment);
--surface: var(--vellum);
--surface2: var(--linen);
--border: var(--seam);
--text: var(--charcoal);
--muted: var(--slate);
--accent: var(--olive);
--sidebar-bg: var(--linen);
--auth-card-bg: var(--vellum);
--modal-overlay-bg: var(--overlay-bg);
--card-dark: var(--ghost-bg);
--white: #fff;
}
[data-theme="dark"] input:not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: var(--muted);
}
/* ── Theme toggle button ──────────────────────────────────────────────────── */
.theme-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 16px;
background: none;
border: none;
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
text-align: left;
transition: color 0.15s;
font-family: var(--font-ui, 'DM Sans', sans-serif);
margin-bottom: 2px;
}
.theme-toggle:hover { color: var(--text); }
/* ══════════════════════════════════════════════════════════
Presence / Content Engine — VL-PRESENCE-001
══════════════════════════════════════════════════════════ */
/* Brief form */
.ce-form { max-width: 640px; }
.ce-form .field label { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; }
.ce-form .field input,
.ce-form .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 11px 14px; font-size: 0.9rem; color: var(--text); font-family: var(--font-body); transition: border-color 0.15s; }
.ce-form .field input:focus,
.ce-form .field textarea:focus { outline: none; border-color: var(--accent); }
.ce-form .field textarea { min-height: 88px; resize: vertical; }
.ce-form .field { margin-bottom: 20px; }
.ce-form .field-hint { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.ce-generate-btn { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 13px 32px; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: opacity 0.15s; }
.ce-generate-btn:hover { opacity: 0.88; }
.ce-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ce-generating-msg { font-size: 0.85rem; color: var(--muted); margin-top: 14px; font-style: italic; min-height: 20px; }
/* Review — two-column */
.ce-review { display: grid; grid-template-columns: 55fr 45fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .ce-review { grid-template-columns: 1fr; } }
/* Journal column */
.ce-journal-header { margin-bottom: 20px; }
.ce-journal-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.25; color: var(--text); border: none; background: transparent; width: 100%; resize: none; padding: 0; outline: none; }
.ce-journal-title:focus { outline: none; }
.ce-journal-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ce-read-badge { font-size: 0.72rem; color: var(--muted); background: var(--linen); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; letter-spacing: 0.03em; }
.ce-tag-chip { font-size: 0.72rem; color: var(--muted); background: var(--linen); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.ce-body-container { font-size: 0.93rem; line-height: 1.78; color: var(--text); margin-bottom: 24px; }
.ce-body-container h1, .ce-body-container h2, .ce-body-container h3 { font-family: var(--font-display); font-weight: 400; margin: 1.4em 0 0.5em; }
.ce-body-container h2 { font-size: 1.2rem; }
.ce-body-container p { margin-bottom: 1em; }
.ce-body-container ul, .ce-body-container ol { margin: 0 0 1em 1.4em; }
.ce-body-container li { margin-bottom: 0.3em; }
.ce-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ce-btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 9px 18px; font-size: 0.83rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ce-btn-secondary:hover { border-color: var(--accent); background: rgba(74,82,64,0.04); }
/* Instagram column */
.ce-ig-header { margin-bottom: 16px; }
.ce-ig-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--text); }
.ce-ig-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.ce-caption-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.ce-caption-day { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.ce-caption-type { display: inline-block; font-size: 0.68rem; background: var(--linen); color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; margin-bottom: 8px; letter-spacing: 0.02em; }
.ce-caption-text { font-size: 0.85rem; line-height: 1.65; color: var(--text); margin-bottom: 10px; white-space: pre-wrap; }
.ce-caption-hashtags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ce-hashtag { font-size: 0.68rem; color: var(--olive); background: rgba(74,82,64,0.07); border-radius: 3px; padding: 2px 7px; }
.ce-image-prompt { font-size: 0.75rem; color: var(--ash); font-style: italic; margin-top: 6px; }
.ce-stories-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.ce-stories-toggle { font-size: 0.78rem; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; user-select: none; }
.ce-stories-header { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; margin-top: 4px; }
.ce-story-card { background: var(--linen); border-radius: 5px; padding: 12px; margin-bottom: 8px; font-size: 0.82rem; color: var(--text); line-height: 1.55; }
.ce-ltk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; margin-top: 16px; }
.ce-ltk-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ce-ltk-theme { font-size: 0.88rem; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.ce-ltk-detail { font-size: 0.78rem; color: var(--muted); }
/* Section header inside Presence page */
.presence-header { margin-bottom: 28px; }
.presence-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--text); margin-bottom: 4px; }
.presence-subtitle { font-size: 0.83rem; color: var(--muted); }
/* ── Run history ─────────────────────────────────────────── */
.ce-run-history { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); max-width: 640px; }
.ce-run-history-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); margin-bottom: 12px; }
.ce-run-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ce-run-card:hover { border-color: var(--accent); background: var(--olive-muted); }
.ce-run-topic { font-size: 0.87rem; color: var(--text); font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-run-date { font-size: 0.75rem; color: var(--ash); flex-shrink: 0; }
/* ── Caption inline edit ──────────────────────────────────── */
.ce-caption-edit { width: 100%; background: transparent; border: none; border-bottom: 1px dashed var(--border); color: var(--text); font-size: 0.85rem; line-height: 1.65; font-family: inherit; resize: none; padding: 0 0 4px 0; outline: none; transition: border-color 0.15s; }
.ce-caption-edit:focus { border-bottom-color: var(--accent); background: rgba(74,82,64,0.03); }
.ce-caption-copy { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; padding: 4px 10px; font-size: 0.72rem; cursor: pointer; transition: all 0.12s; margin-top: 8px; }
.ce-caption-copy:hover { border-color: var(--accent); color: var(--accent); background: var(--olive-muted); }
.ce-caption-copy.copied { border-color: var(--success); color: var(--success); }
/* ── Story card with copy ─────────────────────────────────── */
.ce-story-card { background: var(--linen); border-radius: 5px; padding: 12px; margin-bottom: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ce-story-text { font-size: 0.82rem; color: var(--text); line-height: 1.55; flex: 1; }
.ce-story-copy { flex-shrink: 0; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; padding: 4px 10px; font-size: 0.72rem; cursor: pointer; transition: all 0.12s; }
.ce-story-copy:hover { border-color: var(--accent); color: var(--accent); }
/* ── btn-sm ───────────────────────────────────────────────── */
.ce-btn-sm { padding: 6px 12px !important; font-size: 0.78rem !important; }
/* nav sub-item styling (re-use nav-item, slight indent) */
.nav-sub-item { padding-left: 36px !important; font-size: 0.81rem !important; }
/* ── VELVET-CONTENT-APPROVAL-001-UI: Content tab ────────────── */
.content-week-card {
background: var(--vellum);
border: 1px solid var(--seam);
border-radius: var(--radius);
margin-bottom: 24px;
overflow: hidden;
}
.content-week-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--seam);
gap: 12px;
flex-wrap: wrap;
}
.content-week-meta {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
}
.content-week-number {
font-family: var(--font-ui);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ash);
}
.content-week-dates {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
color: var(--charcoal);
line-height: 1.2;
}
.content-journal-link {
font-size: 0.8rem;
color: var(--olive);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 4px;
}
.content-journal-link:hover { text-decoration: underline; }
.content-journal-title {
font-size: 0.8rem;
color: var(--slate);
margin-top: 4px;
}
.content-week-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
/* Approval seal — feels final */
.content-approved-seal {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.content-approved-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--success);
display: flex;
align-items: center;
gap: 5px;
}
.content-approved-label::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
}
.content-approved-date {
font-size: 0.72rem;
color: var(--ash);
text-align: right;
}
.badge-pending-review {
background: var(--amber-dim);
color: var(--amber);
font-size: 0.68rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-pill);
letter-spacing: 0.04em;
white-space: nowrap;
}
/* Post cards grid */
.content-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: var(--seam);
}
@media (max-width: 640px) {
.content-posts-grid { grid-template-columns: 1fr; }
}
.content-post-card {
background: var(--vellum);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.content-post-card.state-approved {
background: rgba(61,107,58,0.03);
}
.content-post-card.state-change-requested {
background: rgba(139,106,26,0.04);
}
.content-post-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.content-post-day {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--slate);
}
.content-post-type-badge {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: var(--radius-pill);
background: rgba(74,82,64,0.10);
color: var(--olive-mid);
white-space: nowrap;
}
/* Post image */
.content-post-image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius);
display: block;
background: var(--ghost-bg);
}
/* Placeholder for null asset_url */
.content-post-placeholder {
width: 100%;
aspect-ratio: 1;
background: var(--ghost-bg);
border: 1px solid var(--ghost-border);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.content-post-placeholder-label {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ash);
}
.content-post-placeholder svg { opacity: 0.25; }
/* Caption — sacred, full text */
.content-post-caption {
font-family: var(--font-ui);
font-size: 0.875rem;
line-height: 1.65;
color: var(--charcoal);
white-space: pre-wrap;
word-break: break-word;
}
/* Post status badges */
.content-post-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-pill);
}
.content-post-status-approved {
background: rgba(61,107,58,0.10);
color: var(--success);
}
.content-post-status-change {
background: var(--amber-dim);
color: var(--amber);
}
.content-post-status-published {
background: rgba(61,107,58,0.10);
color: var(--success);
border-radius: var(--radius-pill);
padding: 3px 8px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.content-post-status-failed {
background: rgba(139,44,44,0.10);
color: var(--danger);
border-radius: var(--radius-pill);
padding: 3px 8px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.content-ig-permalink {
font-size: 0.72rem;
color: var(--olive);
text-decoration: none;
margin-top: 2px;
display: inline-block;
letter-spacing: 0.01em;
}
.content-ig-permalink:hover { text-decoration: underline; }
/* Flag flow */
.content-flag-note {
font-size: 0.82rem;
font-style: italic;
color: var(--amber);
line-height: 1.5;
padding: 8px 10px;
background: var(--amber-dim);
border-radius: var(--radius);
border-left: 2px solid var(--amber);
}
.content-flag-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.content-flag-form textarea {
font-size: 0.85rem;
line-height: 1.55;
min-height: 72px;
resize: none;
border-radius: var(--radius);
border: 1px solid var(--seam);
padding: 9px 11px;
background: var(--vellum);
color: var(--charcoal);
font-family: var(--font-ui);
}
.content-flag-form textarea:focus { outline: none; border-color: var(--olive); }
.content-flag-actions { display: flex; gap: 6px; align-items: center; }
.content-post-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
}
.btn-flag {
background: transparent;
border: 1px solid var(--seam);
color: var(--ash);
font-size: 0.72rem;
padding: 4px 10px;
border-radius: var(--radius);
cursor: pointer;
font-family: inherit;
font-weight: 500;
letter-spacing: 0.02em;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 5px;
}
.btn-flag:hover { border-color: var(--amber); color: var(--amber); }
/* Skeleton loading */
.content-skeleton-week {
background: var(--vellum);
border: 1px solid var(--seam);
border-radius: var(--radius);
margin-bottom: 24px;
overflow: hidden;
}
.content-skeleton-header {
padding: 18px 20px;
border-bottom: 1px solid var(--seam);
display: flex;
flex-direction: column;
gap: 8px;
}
.content-skeleton-bar {
border-radius: 3px;
background: linear-gradient(90deg, var(--ghost-bg) 25%, var(--ghost-border) 50%, var(--ghost-bg) 75%);
background-size: 800px 100%;
animation: shimmer 1.4s infinite linear;
}
.content-skeleton-posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: var(--seam);
}
@media (max-width: 640px) {
.content-skeleton-posts { grid-template-columns: 1fr; }
.content-week-header { flex-direction: column; }
.content-week-actions { align-items: flex-start; }
.content-approved-date { text-align: left; }
}
.content-skeleton-post {
background: var(--vellum);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.content-skeleton-img {
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius);
}
.content-empty-state {
padding: 64px 24px;
text-align: center;
}
.content-empty-kicker {
font-family: var(--font-ui);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ash);
margin-bottom: 12px;
}
.content-empty-message {
font-family: var(--font-display);
font-size: 1.25rem;
font-style: italic;
font-weight: 300;
color: var(--slate);
line-height: 1.55;
max-width: 380px;
margin: 0 auto;
}
/* ── Presence sub-tab pills (VELVET-CONTENT-ELEVATE-001) ────────────────── */
.presence-subtab-bar {
display: flex;
gap: 6px;
margin: 0 0 24px 0;
padding: 0;
}
.presence-subtab-pill {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
border: 1px solid var(--seam);
background: transparent;
color: var(--ash);
cursor: pointer;
transition: all 0.15s;
user-select: none;
}
.presence-subtab-pill:hover {
color: var(--charcoal);
border-color: var(--border);
}
.presence-subtab-pill.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.presence-subview {
display: none;
}
.presence-subview.active {
display: block;
}
/* ── VL-IA-001: Three-mode nav Today · Clients · Content ── */
.tri-nav {
display: flex; flex-direction: column; gap: 2px; padding: 12px 0; flex: 1;
}
.tri-nav-item {
display: flex; flex-direction: row; align-items: center; gap: 12px;
padding: 12px 20px; border-radius: 0; cursor: pointer;
transition: all 0.15s; color: var(--slate); font-size: 0.84rem;
font-weight: 400; letter-spacing: 0.01em; text-transform: none;
border: none; background: transparent; width: 100%;
border-left: 2px solid transparent;
}
.tri-nav-item svg { transition: color 0.15s; color: var(--ash); }
.tri-nav-item:hover { background: var(--linen); color: var(--charcoal); border-left-color: transparent; }
.tri-nav-item:hover svg { color: var(--charcoal); }
.tri-nav-item.active { background: rgba(74,82,64,0.06); color: var(--charcoal); font-weight: 500; border-left-color: var(--olive); outline: none; }
.tri-nav-item:focus { outline: none; }
.tri-nav-item:focus-visible { outline: 1px solid var(--seam); }
.tri-nav-item.active svg { color: var(--olive); }
.tri-nav-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: rgba(74,82,64,0.09); border: 1.5px solid rgba(74,82,64,0.14);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 0.7rem; font-weight: 700; color: var(--accent);
margin: 0 auto 2px; transition: all 0.15s;
}
.tri-nav-avatar:hover { background: rgba(74,82,64,0.16); border-color: var(--olive); }
/* ── VL-IA-001: Today Surface ── */
.today-view { max-width: none; } /* VELVET-LAYOUT-FIX-001: was 720px dead cap from pre-Atelier-Wall single-column era; caused hero + wall to clip at ~65% viewport width in wide browsers */
.today-greeting {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 300;
letter-spacing: -0.025em;
font-style: italic;
color: var(--charcoal);
line-height: 1.0;
margin-bottom: 48px;
}
.today-date {
font-family: 'Jost', sans-serif;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ash);
text-transform: none;
margin-top: 8px;
margin-bottom: 40px;
}
.today-section-label {
font-family: var(--font-ui);
font-size: 0.63rem;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--muted);
margin-bottom: 10px;
margin-top: 28px;
}
.today-mira-signal {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(74,82,64,0.05) 0%, rgba(74,82,64,0.02) 100%);
border: 1px solid rgba(74,82,64,0.12);
border-radius: var(--radius);
margin-bottom: 28px;
}
.today-mira-signal-label {
font-size: 0.63rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--olive);
flex-shrink: 0;
margin-top: 3px;
}
.today-mira-signal-text {
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: var(--slate);
line-height: 1.5;
font-weight: 400;
flex: 1;
}
.today-mira-signal-cta {
font-size: 0.74rem;
color: var(--olive);
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
margin-top: 4px;
align-self: flex-end;
opacity: 0.8;
}
.today-mira-signal[style*='cursor: pointer']:hover {
border-color: rgba(74,82,64,0.28);
background: linear-gradient(135deg, rgba(74,82,64,0.09) 0%, rgba(74,82,64,0.05) 100%);
}
.today-mira-signal[style*='cursor: pointer']:active {
opacity: 0.82;
transform: translateY(1px);
}
.today-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px 20px; margin-bottom: 8px; display: flex; align-items: center;
gap: 14px; cursor: pointer; transition: all 0.15s;
}
.today-card:hover { border-color: var(--olive); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.today-card:active { transform: translateY(1px); }
.today-card-avatar {
width: 42px; height: 42px; border-radius: 4px;
background: rgba(74,82,64,0.09);
display: flex; align-items: center; justify-content: center;
font-size: 0.78rem; font-weight: 500; color: var(--accent); flex-shrink: 0;
}
.today-card-body { flex: 1; min-width: 0; }
.today-card-headline { font-size: 0.88rem; font-weight: 500; color: var(--text); margin-bottom: 2px; line-height: 1.35; }
.today-card-sub { font-size: 0.77rem; color: var(--muted); }
.today-card-action { font-size: 0.74rem; color: var(--accent); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.today-content-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 15px 20px; margin-bottom: 9px; display: flex; align-items: center; gap: 14px;
}
.today-content-thumb {
width: 46px; height: 46px; border-radius: 4px; background: var(--ghost-bg);
border: 1px solid var(--seam); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; color: var(--ash);
font-size: 0.6rem; overflow: hidden;
}
.today-content-thumb img { width: 100%; height: 100%; object-fit: cover; }
.today-appt-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 15px 20px; margin-bottom: 9px; display: flex; align-items: center; gap: 14px;
}
.today-appt-icon {
width: 34px; height: 34px; border-radius: var(--radius);
background: rgba(74,82,64,0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.today-earnings-line {
font-size: 0.82rem; color: var(--muted); padding: 14px 0 4px;
border-top: 1px solid var(--border); margin-top: 10px;
}
.today-earnings-amount { color: var(--accent); font-weight: 600; }
.today-empty { max-width: 500px; padding: 44px 0; }
.today-empty-mira {
font-family: var(--font-display); font-style: italic; font-size: 1.25rem;
color: var(--slate); font-weight: 400; line-height: 1.7; margin-bottom: 26px;
}
.today-empty-cta {
display: inline-block; font-size: 0.9rem; font-weight: 500; color: var(--accent);
border: none; border-bottom: 1px solid var(--olive); padding-bottom: 2px;
cursor: pointer; background: none; transition: opacity 0.15s; font-family: var(--font-body);
}
.today-empty-cta:hover { opacity: 0.7; }
.today-loading { padding: 48px; text-align: center; color: var(--ash); font-size: 0.85rem; }
/* ── VL-IA-001: MiraBriefHeader ── */
.mira-brief-header {
background: linear-gradient(135deg, rgba(74,82,64,0.04) 0%, rgba(74,82,64,0.02) 100%);
border: 1px solid rgba(74,82,64,0.12); border-radius: var(--radius);
padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 12px;
}
.mira-brief-header-label {
font-size: 0.63rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--olive); flex-shrink: 0; margin-top: 1px;
}
.mira-brief-header-text {
font-family: var(--font-display); font-style: italic; font-size: 1.25rem;
color: var(--slate); font-weight: 400; line-height: 1.5; flex: 1;
}
.mira-brief-header:hover {
background: linear-gradient(135deg, rgba(74,82,64,0.07) 0%, rgba(74,82,64,0.04) 100%);
border-color: rgba(74,82,64,0.18);
}
.mira-brief-header:active {
opacity: 0.82; transform: translateY(1px);
}
/* ── VL-IA-001: Mobile bottom tab bar ── */
@media (max-width: 768px) {
.tri-nav { display: none; }
.bottom-tab-bar { display: flex !important; }
.page { padding-bottom: 100px; }
}
@media (max-width: 640px) {
.main { padding-bottom: 96px; }
.client-jump-nav { top: 52px; }
}
.bottom-tab-bar {
display: none; position: fixed; bottom: 0; left: 0; right: 0;
background: var(--surface); border-top: 1px solid var(--border); z-index: 50;
padding: 6px 0 max(12px, env(safe-area-inset-bottom));
}
.bottom-tab-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 5px 4px; border: none; background: transparent; cursor: pointer;
color: var(--muted); font-size: 0.6rem; font-weight: 500;
letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.15s;
}
.bottom-tab-btn svg { color: var(--ash); transition: color 0.15s; }
.bottom-tab-btn.active { color: var(--accent); }
.bottom-tab-btn.active svg { color: var(--olive); }
.mobile-avatar-btn {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(74,82,64,0.1); border: 1.5px solid rgba(74,82,64,0.18);
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--accent); font-size: 0.65rem; font-weight: 700;
}
/* ── VL-REDESIGN-002: Kill sidebar at desktop — floating pill nav takes over ── */
/* VL-TODAY-SCROLL-FIX-001 (2026-07-19): removed #app{padding-bottom:96px}.
#app is the document-root container — this padding applied unconditionally
to every desktop view regardless of actual content height, forcing 96px
of dead scroll length even when the visible page (e.g. Today with only
3 clients) had no real overflow. Pill-nav clearance is already handled
per-page by .page{padding-bottom} below (content-aware, scoped to what's
actually rendered) — this was a redundant second mechanism stacking on
top of it at the root level. */
@media (min-width: 900px) {
.sidebar { display: none !important; }
}
/* ── VL-IRIS-REDESIGN-001: Breathing Today layout ── */
.today-greeting {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 300;
letter-spacing: -0.03em;
font-style: italic;
color: var(--charcoal);
line-height: 1.1;
margin-bottom: 4px;
}
.today-date {
font-family: 'Jost', sans-serif;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: uppercase;
margin-top: 0;
margin-bottom: 32px;
}
.today-mira-signal {
display: flex;
align-items: baseline;
gap: 8px;
padding: 0 0 28px 0;
border: none;
background: none;
font-size: 0.85rem;
font-style: italic;
color: var(--text);
line-height: 1.5;
border-radius: 0;
margin-bottom: 0;
}
.today-mira-signal-label {
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-style: normal;
flex-shrink: 0;
margin-top: 0;
}
.today-mira-signal-text {
font-family: var(--font-display);
font-style: italic;
font-size: 0.88rem;
color: var(--text);
line-height: 1.5;
font-weight: 400;
flex: 1;
}
.today-mira-signal-cta {
font-style: normal;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
font-size: 0.82rem;
font-weight: 400;
white-space: nowrap;
flex-shrink: 0;
margin-top: 0;
align-self: auto;
opacity: 1;
}
.today-mira-signal[style*="cursor: pointer"]:hover { border: none; background: none; }
.today-mira-signal[style*="cursor: pointer"]:active { transform: none; opacity: 0.7; }
/* ── VL-IRIS-REDESIGN-001: Editorial client strips ── */
.today-client-strip {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid var(--seam);
cursor: pointer;
transition: opacity 0.15s;
}
.today-client-strip:last-child { border-bottom: none; }
.today-client-strip:hover { opacity: 0.72; }
.today-client-strip-photo {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: 2px;
overflow: hidden;
background: var(--card-dark, rgba(74,82,64,0.09));
}
.today-client-strip-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.today-client-strip-photo-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
font-style: italic;
color: var(--accent);
background: rgba(196,168,130,0.12);
}
.today-client-strip-name {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
font-style: italic;
letter-spacing: -0.01em;
color: var(--charcoal);
line-height: 1.1;
margin-bottom: 5px;
}
.today-client-strip-brief {
font-size: 0.82rem;
color: var(--text);
line-height: 1.4;
margin-bottom: 3px;
}
.today-client-strip-meta {
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════════════════════════════
TODAY HERO BAND — VL-TODAY-HERO-FIX-001 (2026-07-19)
Bug: .today-hero/.today-hero-img had zero CSS rules anywhere in
the codebase (confirmed via full history search — never shipped).
A raw ![]()
with no container sizing rendered at natural pixel
size (fallback asset alone is 1024x1024), pushing the greeting
and client cards below the fold and cropping oddly per source
aspect ratio. The JS hero-selection logic (_probeImageAspect,
TODAY_HERO_MIN_ASPECT) already assumes a fixed full-bleed band
with object-fit:cover — this just gives it the CSS it always
needed. Works for any source aspect ratio (square client photo,
wide seasonal fallback, portrait-safe fallback) since object-fit
center-crops regardless of source dimensions. Full-bleed via the
same margin:0 -32px break-out pattern the Atelier Wall below
already uses — do not change that pattern, keep them consistent. */
.today-hero {
position: relative;
width: 100%;
height: clamp(180px, 26vh, 260px);
margin: 0 -32px 32px;
width: calc(100% + 64px);
overflow: hidden;
background: var(--charcoal);
}
.today-hero-img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.today-hero-content {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 24px 32px 22px;
background: linear-gradient(to top, rgba(28,26,23,0.78) 0%, rgba(28,26,23,0.32) 55%, rgba(28,26,23,0) 100%);
}
.today-hero .today-greeting {
color: var(--mira-text);
margin-bottom: 2px;
}
.today-hero .today-date {
color: rgba(250,247,242,0.72);
}
@media (max-width: 900px) {
.today-hero {
height: clamp(150px, 22vh, 200px);
margin: 0 -20px 24px;
width: calc(100% + 40px);
}
.today-hero-content { padding: 18px 20px 16px; }
}
/* ═══════════════════════════════════════════════════════════════
ATELIER WALL — VL-REDESIGN-001 (Iris 2026-06-27)
Today view: Concept C. Clients view: Concept A strips.
═══════════════════════════════════════════════════════════════ */
/* Atelier wall grid */
.atelier-wall {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
background: var(--charcoal);
overflow: hidden;
margin: 0 -32px;
}
@media (max-width: 900px) {
.atelier-wall {
grid-template-columns: 1fr;
}
}
.atelier-cell {
position: relative;
overflow: hidden;
cursor: pointer;
background: var(--linen);
min-height: 240px;
}
.atelier-cell:nth-child(1) { grid-row: auto; } /* VL-REDESIGN-002: no more tall left */
.atelier-cell { min-height: 280px; }
.atelier-cell-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
transition: transform 0.4s ease;
}
.atelier-cell:hover .atelier-cell-photo {
transform: scale(1.02);
}
/* Season gradient fallbacks */
.atelier-cell[data-season="autumn"] .atelier-cell-photo-fallback {
background: linear-gradient(135deg, #C4A882 0%, #8B6A1A 40%, #4A3728 100%);
}
.atelier-cell[data-season="spring"] .atelier-cell-photo-fallback {
background: linear-gradient(135deg, #E8D5B7 0%, #C4956A 40%, #8B7355 100%);
}
.atelier-cell[data-season="summer"] .atelier-cell-photo-fallback {
background: linear-gradient(135deg, #C5CAD5 0%, #8A9BAE 40%, #4A5A6B 100%);
}
.atelier-cell[data-season="winter"] .atelier-cell-photo-fallback {
background: linear-gradient(135deg, #D0D0D8 0%, #6B6B7B 40%, #1C1C2E 100%);
}
.atelier-cell .atelier-cell-photo-fallback {
background: linear-gradient(135deg, #DDD5C8 0%, #A89E94 40%, #2C2620 100%);
}
.atelier-cell-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(44,38,32,0.82) 0%, rgba(44,38,32,0.1) 55%, transparent 100%);
}
.atelier-cell-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 28px;
}
.atelier-cell-name {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.9rem;
line-height: 1.05;
letter-spacing: -0.02em;
color: #FAF7F2;
margin-bottom: 6px;
}
.atelier-cell-brief {
font-family: var(--font-ui);
font-size: 0.78rem;
color: rgba(250,247,242,0.75);
line-height: 1.4;
margin-bottom: 4px;
}
.atelier-cell-meta {
font-family: var(--font-ui);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(250,247,242,0.5);
}
.atelier-cell-season-chip {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.64rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(250,247,242,0.9);
border: 1px solid rgba(250,247,242,0.3);
border-radius: 2px;
padding: 2px 8px;
margin-bottom: 8px;
}
/* Add client cell */
.atelier-cell-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
background: var(--linen);
border: 2px dashed var(--seam);
min-height: 180px;
transition: border-color 0.15s, background 0.15s;
}
.atelier-cell-add:hover {
border-color: var(--olive);
background: rgba(74,82,64,0.06);
}
.atelier-cell-add-icon {
font-size: 1.5rem;
color: var(--ash);
font-weight: 300;
font-family: var(--font-display);
font-style: italic;
}
.atelier-cell-add-label {
font-size: 0.72rem;
color: var(--ash);
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: var(--font-ui);
}
/* Clients page — Concept A editorial strips */
.clients-briefing-list {
display: flex;
flex-direction: column;
}
.clients-strip {
display: flex;
align-items: center;
gap: 24px;
padding: 22px 0;
border-bottom: 1px solid var(--seam);
cursor: pointer;
transition: opacity 0.15s;
text-decoration: none;
}
.clients-strip:last-child { border-bottom: none; }
.clients-strip:hover { opacity: 0.7; }
.clients-strip-photo {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 2px;
overflow: hidden;
background: var(--linen);
background-size: cover;
background-position: center top;
}
.clients-strip-photo-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.5rem;
font-style: italic;
color: var(--accent);
background: rgba(196,168,130,0.15);
}
.clients-strip-body { flex: 1; min-width: 0; }
.clients-strip-name {
font-family: var(--font-display);
font-style: italic;
font-size: 1.3rem;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--charcoal);
margin-bottom: 4px;
}
.clients-strip-brief {
font-size: 0.82rem;
color: var(--slate);
line-height: 1.4;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clients-strip-meta {
font-size: 0.7rem;
color: var(--ash);
letter-spacing: 0.04em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
}
/* VL-ANNA-ASHFORD-001 (P1 finding #14): item count as its own small badge,
separate from the status line, per Anna's THE ONE THING. flex-shrink:0 +
white-space:nowrap keep it a clean single-line pill instead of wrapping
its own text onto two lines when the row is tight (confirmed on mobile
at 390px — "5 ITEMS" was breaking into "5" / "ITEMS" stacked). */
.clients-strip-itemcount {
color: var(--olive);
border: 1px solid rgba(74,82,64,0.22);
border-radius: 2px;
padding: 1px 6px;
font-size: 0.65rem;
flex-shrink: 0;
white-space: nowrap;
}
.clients-strip-season {
flex-shrink: 0;
font-size: 0.65rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--olive);
border: 1px solid rgba(74,82,64,0.25);
padding: 2px 8px;
border-radius: 2px;
background: rgba(74,82,64,0.06);
font-family: var(--font-ui);
font-weight: 500;
}
/* VELVET-CLIENTS-EDITORIAL-001: engagement tier badge — reuses the same
restrained pill/chip language as .clients-strip-season, one badge per tier */
.clients-strip-tier {
flex-shrink: 0;
font-size: 0.65rem;
letter-spacing: 0.07em;
text-transform: uppercase;
font-family: var(--font-ui);
font-weight: 500;
padding: 2px 8px;
border-radius: 2px;
border: 1px solid transparent;
white-space: nowrap;
}
.clients-strip-tier[data-tier="active"] {
color: var(--success);
background: rgba(61,107,58,0.08);
border-color: rgba(61,107,58,0.25);
}
.clients-strip-tier[data-tier="lapsing"], .clients-strip-tier[data-tier="dormant"] {
color: var(--amber);
background: var(--amber-dim);
border-color: rgba(139,106,26,0.25);
}
.clients-strip-tier[data-tier="one_time"] {
color: var(--slate);
background: rgba(122,112,104,0.08);
border-color: rgba(122,112,104,0.25);
}
.clients-strip-photo-fallback {
background: linear-gradient(135deg, var(--ghost-bg) 0%, var(--seam) 100%);
}
/* VL-ANNA-ASHFORD-001 (P1 finding #8, follow-up): the row (photo + name/
badges + tier chip) is tight enough on phones that "UPDATED Xd AGO" and
the item-count pill were wrapping onto a second line despite the
nowrap CSS above — there just wasn't enough width. Trim the photo and
gap slightly and let the row's non-critical chip (season) drop instead
of the meta line, which is more useful at a glance. */
@media (max-width: 480px) {
.clients-strip { gap: 14px; }
.clients-strip-photo { width: 56px; height: 56px; }
.clients-strip-season { display: none; }
}
/* VELVET-CLIENTS-EDITORIAL-001: roster header — search + filter, editorial not SaaS */
.clients-roster-toolbar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 8px;
padding-bottom: 18px;
border-bottom: 1px solid var(--seam);
min-width: 0;
max-width: 100%;
}
/* VL-ANNA-ASHFORD-001 (P1 finding #8): on narrow viewports, stack search
above the filter pills instead of relying on flex-shrink math — with
4 filter pills at flex-shrink:0, the row's minimum content width is
wider than a phone viewport no matter how far the search box shrinks.
Confirmed live: client list scrollWidth 1352px vs clientWidth 375px
(977px overflow) driven by this exact row before the fix. */
@media (max-width: 640px) {
.clients-roster-toolbar {
flex-wrap: wrap;
}
.clients-roster-search {
flex-basis: 100%;
}
.clients-roster-filters {
flex-basis: 100%;
}
}
.clients-roster-search {
flex: 1;
min-width: 0;
position: relative;
}
.clients-roster-search input {
width: 100%;
border: none;
border-bottom: 1px solid var(--seam);
background: transparent;
padding: 8px 4px 8px 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: var(--charcoal);
transition: border-color 0.15s;
}
.clients-roster-search input::placeholder { color: var(--ash); opacity: 1; }
.clients-roster-search input:focus { outline: none; border-color: var(--olive); }
.clients-roster-filters {
display: flex;
gap: 6px;
flex-shrink: 0;
flex-wrap: wrap;
}
.clients-roster-filter-btn {
font-family: var(--font-ui);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
color: var(--slate);
background: transparent;
border: 1px solid var(--seam);
border-radius: var(--radius-pill);
padding: 5px 13px;
cursor: pointer;
transition: all 0.15s;
}
.clients-roster-filter-btn:hover { border-color: var(--olive); color: var(--olive); }
.clients-roster-filter-btn.active {
background: var(--olive);
border-color: var(--olive);
color: var(--vellum);
}
.clients-roster-empty {
padding: 60px 20px;
text-align: center;
}
.clients-roster-count {
font-family: var(--font-ui);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--ash);
margin-bottom: 4px;
}
/* ── VL-REDESIGN-002: Floating bottom pill nav ── */
/* VL-REDESIGN-004: hide pill nav on auth screen */
#screen-auth.active ~ nav.velvet-pill-nav,
body:not(.app-ready) .velvet-pill-nav { display: none !important; }
.velvet-pill-nav {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background: var(--charcoal);
border-radius: var(--radius-pill);
display: flex;
align-items: center;
padding: 5px;
gap: 2px;
box-shadow: 0 4px 24px rgba(44,38,32,0.22);
}
.velvet-pill-nav-item {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(250,247,242,0.55);
padding: 8px 22px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
user-select: none;
}
.velvet-pill-nav-item:hover { color: rgba(250,247,242,0.85); }
.velvet-pill-nav-item.active {
background: var(--olive);
color: #FAF7F2;
}
/* ── VELVET-SETTINGS-NAV-MISSING-001: Settings avatar, docked beside pill nav ── */
#screen-auth.active ~ .velvet-pill-nav-settings,
body:not(.app-ready) .velvet-pill-nav-settings { display: none !important; }
.velvet-pill-nav-settings {
position: fixed;
bottom: 28px;
left: calc(50% + 150px);
z-index: 100;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--charcoal);
color: rgba(250,247,242,0.75);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
cursor: pointer;
user-select: none;
box-shadow: 0 4px 24px rgba(44,38,32,0.22);
transition: background 0.15s, color 0.15s, opacity 0.2s, transform 0.2s;
}
.velvet-pill-nav-settings:hover {
background: var(--olive);
color: #FAF7F2;
}
.velvet-pill-nav-settings.scrolled {
opacity: 0.75;
transform: scale(0.92);
}
@media (max-width: 899px) {
.velvet-pill-nav-settings {
bottom: max(20px, env(safe-area-inset-bottom));
}
}
@media (max-width: 480px) {
.velvet-pill-nav-settings {
left: auto;
right: 16px;
width: 38px;
height: 38px;
font-size: 0.64rem;
letter-spacing: 0.04em;
}
}
/* ── VL-REDESIGN-002: Atelier carousel + hero picker CSS ── */
.atelier-cell-photos {
position: absolute;
inset: 0;
}
.atelier-cell-photo-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.8s ease;
}
.atelier-cell-photo-layer.active { opacity: 1; }
.atelier-cell-photo-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* VL-ANNA-ASHFORD-001: monogram treatment for clients with no photo and
no color portrait yet — keeps each dashboard card visually distinct
without breaking the editorial gradient-fallback system. */
.atelier-cell-monogram {
font-family: var(--font-display);
font-weight: 400;
font-size: 2.6rem;
letter-spacing: 2px;
color: rgba(250,247,242,0.55);
line-height: 1;
user-select: none;
}
.atelier-cell-hero-btn {
position: absolute;
top: 12px;
right: 12px;
background: rgba(250,247,242,0.15);
border: 1px solid rgba(250,247,242,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(250,247,242,0.8);
font-size: 0.75rem;
padding: 4px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: var(--font-ui);
letter-spacing: 0.06em;
opacity: 0;
transition: opacity 0.2s;
z-index: 5;
}
.atelier-cell:hover .atelier-cell-hero-btn { opacity: 1; }
/* ── VL-REDESIGN-002: Hero image picker modal ── */
.hero-picker-modal {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: var(--overlay-bg);
align-items: center;
justify-content: center;
}
.hero-picker-modal.open { display: flex; }
.hero-picker-inner {
background: var(--vellum);
border-radius: var(--radius-modal);
width: min(480px, 92vw);
max-height: 80vh;
overflow-y: auto;
padding: 32px;
position: relative;
}
.hero-picker-title {
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--charcoal);
margin-bottom: 6px;
}
.hero-picker-subtitle {
font-size: 0.8rem;
color: var(--slate);
margin-bottom: 24px;
line-height: 1.5;
}
.hero-picker-section-label {
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ash);
margin-bottom: 10px;
}
.hero-picker-url-row {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.hero-picker-url-input {
flex: 1;
font-family: var(--font-ui);
font-size: 0.85rem;
padding: 10px 14px;
border: 1px solid var(--seam);
border-radius: var(--radius);
background: var(--vellum);
color: var(--charcoal);
}
.hero-picker-url-input:focus { outline: none; border-color: var(--olive); }
.hero-picker-save-btn {
background: var(--olive);
color: #FAF7F2;
border: none;
padding: 10px 20px;
border-radius: var(--radius);
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.hero-picker-save-btn:hover { background: var(--olive-mid); }
.hero-picker-note {
font-size: 0.75rem;
color: var(--ash);
font-style: italic;
margin-top: 12px;
line-height: 1.5;
}
.hero-picker-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 1.2rem;
color: var(--ash);
cursor: pointer;
padding: 4px 8px;
}
.hero-picker-unsplash-hint {
margin-top: 20px;
padding: 16px;
background: rgba(74,82,64,0.06);
border-radius: var(--radius);
font-size: 0.8rem;
color: var(--slate);
line-height: 1.5;
}
.hero-picker-unsplash-hint a { color: var(--olive); }
@media (max-width: 899px) {
.velvet-pill-nav {
bottom: max(20px, env(safe-area-inset-bottom));
}
}
/* ════════════════════════════════════════════════════════
VL-REDESIGN-006: Pill nav clearance + hero zone
════════════════════════════════════════════════════════ */
/* Pill nav clearance — ensure content scrolls above pill.
VL-TODAY-SCROLL-FIX-001 (2026-07-19): was 80px stacked on top of the
base .page{padding:32px}, i.e. 112px of total bottom clearance versus
the pill's actual ~69px fixed footprint (bottom:28px + ~41px pill
height) from the viewport edge. That extra ~43px of dead space was
enough to force document scroll capacity even when real content
(e.g. 3 client cards on Today) didn't need it. 48px + the existing
32px base padding = 80px total, which clears the pill with a
comfortable margin without adding padding beyond what's needed. */
.page { padding-bottom: 48px !important; }
#page-client-detail { padding-bottom: 100px !important; }
/* Hero zone — VL-CLIENT-HERO-FIX-001: no longer force-fills the viewport.
The old min-height:100vh + justify-content:center pushed the client
name/meta/Mira text down toward mid-viewport, so the very first thing
visible on open was just the photo. Content now flows from the top —
name is always the first thing in view, no scroll required.
VL-CLIENT-HERO-CONTRAST-FIX-001: this zone was inheriting whatever the
page background happened to be, and #page-client-detail.active forces
background:#15110d (near-black) the instant the Intel File mounts —
which is immediate, on every openClient(). The hero's dark --text-body
text was landing on that near-black canvas with no background of its
own, reading as illegible dark-on-dark. Giving the hero zone its own
explicit light background isolates it from that page-level override. */
.vl-hero-zone {
display: flex;
flex-direction: column;
padding: 24px 32px 48px;
margin: 0 -32px 0;
position: relative;
background: var(--canvas-warm);
z-index: 2;
}
/* Palette strip in hero */
.vl-hero-palette {
display: flex;
gap: 6px;
margin: 20px 0 28px;
align-items: center;
}
.vl-hero-swatch {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}
/* Mira prose in hero — VL-REDESIGN-007: show fully, no fade */
.vl-hero-mira {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.65;
color: var(--text-body);
max-width: 640px;
}
/* New Edit button — top right of hero */
.vl-hero-new-edit {
position: absolute;
top: 40px;
right: 0;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text-body);
background: transparent;
border: 1px solid rgba(44,36,32,0.2);
padding: 8px 16px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.vl-hero-new-edit:hover {
border-color: var(--text-body);
background: rgba(44,36,32,0.04);
}
/* Pill nav scroll shrink behavior */
.velvet-pill-nav {
transition: opacity 0.2s, transform 0.2s;
}
.velvet-pill-nav.scrolled {
opacity: 0.75;
transform: translateX(-50%) scale(0.92);
}
/* ════════════════════════════════════════════════════════
VL-REDESIGN-005: Dossier rebuild
════════════════════════════════════════════════════════ */
/* Page background */
#page-client-detail {
background: var(--canvas-warm);
}
#page-client-detail::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 400px; height: 400px;
background: radial-gradient(circle at top left, rgba(184, 126, 68, 0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ── New header ─────────────────────────────────────────── */
.vl-client-header {
padding: 48px 0 0;
position: relative;
z-index: 1;
}
.vl-client-name {
font-family: var(--font-display);
font-weight: 300;
font-style: normal;
font-size: clamp(52px, 6.5vw, 68px);
letter-spacing: -0.02em;
line-height: 1.0;
color: var(--text-body);
margin-bottom: 12px;
}
.vl-client-meta {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: var(--label-muted);
letter-spacing: 0.01em;
margin-bottom: 24px;
}
.vl-client-rule {
height: 1px;
background: var(--rule-subtle);
margin-bottom: 48px;
}
.vl-client-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
padding-bottom: 16px;
}
.vl-action-link {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: var(--label-muted);
background: none;
border: none;
padding: 0;
cursor: pointer;
letter-spacing: 0.04em;
transition: color 0.15s;
}
.vl-action-link:hover { color: var(--text-body); }
.vl-action-danger { color: rgba(180, 60, 60, 0.6); }
.vl-action-danger:hover { color: rgba(180, 60, 60, 1); }
/* VL-ANNA-ASHFORD-001 (P1 finding #7): belt-and-suspenders alongside the
.main min-width:0 fix above — at narrow widths, shrink the hero's bleed
margin and let the absolutely-positioned "+ New Edit" button flow inline
above the name instead of floating in the corner, where it has more room
to collide with long client names at the clamp() floor size. */
@media (max-width: 480px) {
.vl-hero-zone {
padding: 20px 20px 40px;
margin: 0 -20px 0;
}
.vl-hero-new-edit {
position: static;
display: inline-block;
margin-bottom: 20px;
}
.vl-client-name {
font-size: clamp(36px, 10vw, 52px);
overflow-wrap: break-word;
}
}
/* ── Mira attribution ───────────────────────────────────── */
.vl-mira-attribution {
margin-top: 56px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.vl-mira-label {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--label-muted);
padding-left: 10px;
border-left: 1px solid var(--accent-cognac);
line-height: 20px;
}
/* ── Mira dark pull-quote block ─────────────────────────── */
#mira-summary-panel.mira-panel {
background: var(--surface-mira) !important;
border-radius: 0 !important;
border: none !important;
padding: 40px 48px !important;
margin: 0 0 56px 0 !important;
}
#mira-summary-panel .mira-panel-content {
font-family: var(--font-display) !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
color: var(--text-mira) !important;
}
#mira-summary-panel .mira-panel-label,
#mira-summary-panel .mira-context-line,
#mira-summary-panel > div:first-child { display: none !important; }
/* ── Hide old briefing anchors and old anchor nav — replaced by vl-tab-bar (VL-REDESIGN-007) ── */
.briefing-anchors { display: none !important; }
.vl-section-anchors { display: none !important; }
/* ── VL-REDESIGN-007: Real tab bar CSS ─────────────────── */
/* VL-CLIENT-HERO-FIX-001: same square-crop-in-wide-container bug as the
Today hero (VL-TODAY-HERO-FIX-001) — fixed height + background-size:cover
forces every photo, including square/portrait sources, into a wide
letterbox, cropping the subject. Real ![]()
+ object-fit lets JS choose
the fit dynamically once it knows the real aspect ratio. */
.vl-hero-photo {
width: 100%;
max-height: 420px;
border-radius: 4px;
margin-bottom: 32px;
position: relative;
overflow: hidden;
}
.vl-hero-photo-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 25%;
}
.vl-hero-photo.is-narrow-photo {
aspect-ratio: 1 / 1;
max-width: 420px;
}
.vl-hero-photo.is-narrow-photo .vl-hero-photo-img {
object-fit: contain;
background: var(--canvas-warm);
}
/* ── VL-CLIENT-DETAIL-REDESIGN-001: status-first single-scroll sections ──
Replaces the VL-REDESIGN-007 tab bar. One owning layout: each of the
four sections (Brief/Portrait/Wardrobe/Looks) is always present in
document order, always shows a one-line status summary, and expands
in place on click — no equal-weight tabs, no hidden panels a stylist
has to click into blind. Reuses the existing .brief-card/.brief-header/
.brief-body/.brief-chevron collapse pattern (Occam's Razor — one
collapse mechanism for the whole page, not a second one invented for
Portrait/Wardrobe/Looks). */
.vl-status-section {
margin-bottom: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.vl-status-section .brief-header { padding: 14px 20px; }
.vl-status-body { display: none; padding: 0 20px 20px; }
.vl-status-body.open { display: block; }
.vl-status-chevron { color: var(--muted); transition: transform 0.2s ease; flex-shrink: 0; }
.vl-status-chevron.open { transform: rotate(180deg); }
.vl-status-badge {
font-size: 0.68rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.5px;
flex-shrink: 0;
text-transform: uppercase;
}
.vl-status-badge.is-empty {
background: var(--linen);
color: var(--label-muted);
}
.vl-status-badge.is-started,
.vl-status-badge.is-drafted {
background: var(--amber-dim);
color: var(--amber);
}
.vl-status-badge.is-complete {
background: rgba(74,82,64,0.10);
color: var(--olive);
}
.vl-status-badge.is-sent {
background: var(--approval-loved-bg);
color: var(--approval-loved-text);
}
.vl-status-summary {
font-size: 0.82rem;
color: var(--muted);
font-family: var(--font-ui);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 320px;
}
@media (max-width: 640px) {
.vl-status-summary { max-width: 160px; }
}
/* VELVET-CHECKOUT-BRANDING-AND-UI-FIX-001 (2026-07-21): equalized top/bottom padding
(was 18px top / 8px bottom — the lopsided bottom made rows with no action button,
like Looks, read as cramped/broken next to Portrait's button-bearing row, which looked
taller purely because the button's own height + vertical centering added visual
weight the plain-text rows never got). Both edges now match so every status row has
the same breathing room whether or not it has a trailing action button. min-height
keeps the row from visually collapsing when it's just a single line of empty-state
text with nothing on the right (was the direct cause of Looks looking shorter than
Portrait in the same dashboard view). */
.vl-status-empty-prompt {
padding: 18px 0;
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.vl-status-empty-text {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
color: var(--muted);
line-height: 1.5;
}
/* ── Seam #4 — engagement chrome (retainer badge / upcoming event / history) ──
Time-series relationship data, always-visible chrome, NOT a fifth status
section — see VL-CLIENT-DETAIL-REDESIGN-001 spec Seam #4. */
.vl-engagement-chrome {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.vl-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.vl-chip-retainer {
background: rgba(74,82,64,0.10);
color: var(--olive);
}
.vl-chip-event {
background: var(--amber-dim);
color: var(--amber);
max-width: 420px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: none;
letter-spacing: 0.01em;
}
.vl-engagement-history {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--seam);
}
.vl-engagement-history-toggle {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--label-muted);
background: none;
border: none;
cursor: pointer;
padding: 4px 0;
}
.vl-engagement-history-toggle::before {
content: "◈ ";
}
.vl-engagement-history-toggle:hover { color: var(--text-body); }
.vl-engagement-history-list {
display: none;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.vl-engagement-history-list.open { display: flex; }
.vl-engagement-row {
padding: 10px 14px;
background: var(--surface-card-warm);
border: 1px solid var(--seam);
border-radius: var(--radius);
}
.vl-engagement-row-date {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--label-muted);
margin-bottom: 4px;
}
.vl-engagement-row-body {
font-size: 0.85rem;
color: var(--text-body);
line-height: 1.5;
}
/* ── Old anchor nav (kept for compat but hidden) ─────────── */
.vl-section-anchors-OLD {
display: flex;
gap: 24px;
margin-bottom: 48px;
border-bottom: 1px solid var(--rule-subtle);
padding-bottom: 16px;
position: sticky;
top: 0;
background: var(--canvas-warm);
z-index: 20;
padding-top: 12px;
margin-left: -32px;
margin-right: -32px;
padding-left: 32px;
padding-right: 32px;
}
.vl-anchor {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--label-muted);
text-decoration: none;
transition: color 0.15s;
}
.vl-anchor:hover { color: var(--text-body); }
/* ── Brief sections: 2-column grid ─────────────────────── */
#brief-sections {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 40px 48px !important;
margin-top: 0 !important;
}
@media (max-width: 768px) {
#brief-sections { grid-template-columns: 1fr !important; }
}
/* ANNA-REVIEW-001: true zero-state (Harper Quinlan pattern) — fully hide the
field grid, don't just de-emphasize it. Must beat the `display: grid
!important` above, hence the matching !important + id+class specificity. */
#brief-sections.brief-sections--zero-state {
display: none !important;
}
/* Kill any residual borders between grid items */
#client-brief-card .brief-section + .brief-section {
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Kill chevrons/accordions */
.brief-chevron, .brief-toggle, .brief-collapse-trigger { display: none !important; }
.brief-body { display: block !important; max-height: none !important; overflow: visible !important; }
/* Brief field text upgrade */
#client-brief-card .brief-section-label {
font-size: 11px !important;
letter-spacing: 0.14em !important;
color: var(--label-muted) !important;
margin-bottom: 10px !important;
}
#client-brief-card .brief-field-display {
font-family: var(--font-ui) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: var(--text-body) !important;
padding: 0 0 8px 0 !important;
}
/* VL-ANNA-ASHFORD-001 (P2 finding #15): the !important color above wins
over .brief-field-display:empty::after's placeholder color (var(--border),
italic, defined near line 758) since !important always beats
non-important regardless of selector specificity — so unfilled optional
fields (seen on Devon) were rendering at the exact same visual weight as
filled ones, making the grid look patchy/half-finished rather than
intentionally sparse. Re-assert the placeholder treatment with matching
!important so empty fields visibly recede. */
#client-brief-card .brief-field-display:empty::after {
color: var(--border) !important;
font-style: italic !important;
font-size: 14px !important;
}
/* ── Photo strip: no changes needed — client-photos-strip already handles this ── */
/* ── Hide old editorial header styles (superseded) ──────── */
.client-editorial-header { display: none !important; }
/* Mira brief header in new layout — hide (superseded by attribution+panel) */
.mira-brief-header { display: none !important; }
/* ── Velvet Page (wardrobe / looks) ─────────────────────── */
.vp-nav {
display: flex;
align-items: center;
gap: 24px;
padding: 20px 32px 16px;
background: #15110d;
border-bottom: 1px solid rgba(242,239,233,0.07);
position: sticky;
top: 0;
z-index: 10;
}
.vp-back {
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(242,239,233,0.45);
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color 0.15s;
}
.vp-back:hover { color: #F2EDE4; }
.vp-client-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
color: #F2EDE4;
letter-spacing: -0.01em;
flex: 1;
}
.vp-tabs {
display: flex;
gap: 4px;
}
.vp-tab {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(242,239,233,0.4);
padding: 6px 14px;
border-radius: 20px;
cursor: pointer;
transition: color 0.15s, background 0.15s;
border: none;
background: none;
}
.vp-tab:hover { color: #F2EDE4; }
.vp-tab.active {
color: #F2EDE4;
background: rgba(242,239,233,0.08);
}
/* ── Wardrobe filter bar ─────────────────────────────────── */
.vp-filters {
display: flex;
gap: 8px;
padding: 16px 32px;
flex-wrap: wrap;
background: #15110d;
border-bottom: 1px solid rgba(242,239,233,0.05);
align-items: center;
}
.vp-filter-btn {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(242,239,233,0.45);
background: rgba(242,239,233,0.04);
border: 1px solid rgba(242,239,233,0.08);
border-radius: 20px;
padding: 5px 12px;
cursor: pointer;
transition: all 0.15s;
}
.vp-filter-btn:hover { color: #F2EDE4; border-color: rgba(242,239,233,0.2); }
.vp-filter-btn.active {
color: #F2EDE4;
background: rgba(242,239,233,0.1);
border-color: rgba(242,239,233,0.25);
}
/* ── Item grid ───────────────────────────────────────────── */
.vp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 24px 32px;
background: #0f0c09;
min-height: calc(100vh - 120px);
}
.vp-item-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(242,239,233,0.07);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s, transform 0.15s;
}
.vp-item-card:hover {
border-color: rgba(242,239,233,0.18);
transform: translateY(-2px);
}
.vp-item-img {
width: 100%;
aspect-ratio: 3/4;
background-size: cover;
background-position: center;
background-color: rgba(242,239,233,0.04);
}
.vp-item-meta {
padding: 10px 12px 12px;
}
.vp-item-name {
display: block;
font-family: var(--font-ui);
font-size: 0.8rem;
color: #F2EDE4;
font-weight: 400;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vp-item-brand {
display: block;
font-size: 0.68rem;
color: rgba(242,239,233,0.4);
margin-top: 2px;
letter-spacing: 0.03em;
}
.vp-item-cat {
display: inline-block;
font-size: 0.62rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(193,106,58,0.8);
margin-top: 6px;
}
/* ── Looks grid ──────────────────────────────────────────── */
.vp-looks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 24px 32px;
background: #0f0c09;
min-height: calc(100vh - 120px);
}
.vp-look-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(242,239,233,0.07);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s, transform 0.15s;
}
.vp-look-card:hover {
border-color: rgba(242,239,233,0.18);
transform: translateY(-2px);
}
.vp-look-img {
width: 100%;
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
background-color: rgba(242,239,233,0.04);
}
.vp-look-footer {
padding: 12px 14px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.vp-look-name {
font-family: var(--font-display);
font-size: 1rem;
color: #F2EDE4;
font-weight: 400;
}
.vp-look-date {
font-size: 0.68rem;
color: rgba(242,239,233,0.35);
letter-spacing: 0.03em;
}
/* ── Skeleton loading ────────────────────────────────────── */
.vp-skeleton {
background: rgba(242,239,233,0.04);
border-radius: 8px;
animation: vp-pulse 1.6s ease-in-out infinite;
}
@keyframes vp-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* ── Empty state ─────────────────────────────────────────── */
.vp-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 80px 24px;
color: rgba(242,239,233,0.35);
font-family: var(--font-ui);
font-size: 0.9rem;
text-align: center;
}
.vp-empty-btn {
background: rgba(201,169,110,0.15);
border: 1px solid rgba(201,169,110,0.3);
color: #c9a96e;
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 24px;
border-radius: 24px;
cursor: pointer;
transition: all 0.15s;
}
.vp-empty-btn:hover {
background: rgba(201,169,110,0.25);
border-color: rgba(201,169,110,0.5);
}
/* ── FAB (add item / create look) ────────────────────────── */
.vp-fab {
position: fixed;
bottom: 32px;
right: 32px;
background: #c9a96e;
color: #0a0a0f;
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 14px 24px;
border-radius: 32px;
border: none;
cursor: pointer;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
transition: opacity 0.15s, transform 0.15s;
z-index: 100;
}
.vp-fab:hover { opacity: 0.88; transform: translateY(-1px); }
/* ── Wardrobe / Looks page background ────────────────────── */
#page-client-wardrobe.active,
#page-client-looks.active {
padding: 0 !important;
background: #15110d !important;
}
/* ── Photographer Preferences (Settings) ─────────────────── */
.settings-section-label {
font-family: 'DM Sans', sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(242,239,233,0.4);
margin-bottom: 8px;
}
.settings-section-desc {
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
color: rgba(242,239,233,0.5);
line-height: 1.6;
margin-bottom: 20px;
}
.vp-photo-search-wrap {
position: relative;
margin-bottom: 24px;
}
.vp-photo-search-input {
width: 100%;
background: rgba(242,239,233,0.04);
border: 1px solid rgba(242,239,233,0.12);
border-radius: 8px;
padding: 12px 16px;
font-family: 'DM Sans', sans-serif;
font-size: 0.88rem;
color: #F2EDE4;
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.vp-photo-search-input:focus {
border-color: rgba(201,169,110,0.4);
}
.vp-photo-search-input::placeholder {
color: rgba(242,239,233,0.3);
}
.vp-photo-results {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
background: #1e1a16;
border: 1px solid rgba(242,239,233,0.1);
border-radius: 8px;
overflow: hidden;
z-index: 50;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.vp-photo-result-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
transition: background 0.12s;
}
.vp-photo-result-item:hover { background: rgba(242,239,233,0.05); }
.vp-photo-result-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: rgba(242,239,233,0.06);
flex-shrink: 0;
}
.vp-photo-result-info { flex: 1; min-width: 0; }
.vp-photo-result-name {
font-family: 'DM Sans', sans-serif;
font-size: 0.85rem;
color: #F2EDE4;
font-weight: 500;
}
.vp-photo-result-username {
font-size: 0.72rem;
color: rgba(242,239,233,0.4);
letter-spacing: 0.02em;
}
.vp-photo-result-add {
font-size: 0.7rem;
color: #c9a96e;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.vp-photo-saved-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.vp-photo-saved-card {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(242,239,233,0.08);
background: rgba(242,239,233,0.02);
cursor: default;
}
.vp-photo-saved-img {
width: 100%;
aspect-ratio: 3/2;
background-size: cover;
background-position: center;
background-color: rgba(242,239,233,0.04);
}
.vp-photo-saved-footer {
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.vp-photo-saved-name {
font-family: 'DM Sans', sans-serif;
font-size: 0.75rem;
color: #F2EDE4;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.vp-photo-saved-remove {
background: none;
border: none;
color: rgba(242,239,233,0.3);
font-size: 0.9rem;
cursor: pointer;
padding: 2px 4px;
line-height: 1;
transition: color 0.12s;
flex-shrink: 0;
}
.vp-photo-saved-remove:hover { color: rgba(193,106,58,0.8); }
.vp-photo-saved-empty {
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
color: rgba(242,239,233,0.3);
padding: 20px 0;
}
/* ── VL-IRIS-P16: Billing pane (pane-billing / if-billing-embed) design-system
parity fix — this markup (velvet-billing.js) had zero CSS coverage and was
rendering with pure browser defaults inside a page otherwise built entirely
on the olive/parchment editorial system. Anna flagged the tonal/visual break
on the client-detail page (finding #16). Values below reuse the same tokens
as .card / .btn / .status-pill elsewhere — no new colors introduced. ── */
.if-billing-panel { display: flex; flex-direction: column; gap: 16px; }
.if-billing-status-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.if-billing-pill {
display: inline-flex; align-items: center;
padding: 3px 11px;
border-radius: var(--radius-pill);
font-family: var(--font-ui);
font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.03em; text-transform: uppercase;
}
.if-billing-pill-active { background: var(--approval-loved-bg); color: var(--approval-loved-text); }
.if-billing-pill-paused { background: var(--olive-muted); color: var(--olive); }
.if-billing-pill-past-due { background: rgba(139,46,46,0.10); color: var(--danger); }
.if-billing-pill-cancelled{ background: var(--approval-pass-bg); color: var(--approval-pass-text); }
.if-billing-pill-none { background: var(--approval-pass-bg); color: var(--muted); }
.if-billing-pill-pending { background: var(--amber-dim); color: var(--amber); }
.if-billing-amount {
font-family: var(--font-display);
font-size: 1.4rem; font-weight: 400;
color: var(--text); line-height: 1;
}
.if-billing-interval { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); margin-left: 2px; }
.if-billing-meta { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.if-billing-meta-warn { color: var(--danger); }
.if-billing-actions { display: flex; gap: 10px; margin-top: 2px; }
.if-ghost-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px;
border-radius: var(--radius);
border: 1px solid var(--seam);
background: transparent;
color: var(--charcoal);
font-family: var(--font-ui);
font-size: 0.78rem; font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.if-ghost-btn:hover { background: var(--olive-muted); border-color: var(--olive); }
.if-ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.if-ghost-btn-danger { color: var(--danger); }
.if-ghost-btn-danger:hover { background: rgba(139,46,46,0.08); border-color: var(--danger); }
.if-text-link-btn {
background: none; border: none; padding: 0;
font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
color: var(--olive);
text-decoration: underline; text-underline-offset: 2px;
cursor: pointer;
}
.if-text-link-btn:hover { color: var(--charcoal); }
.if-billing-gate {
padding: 20px;
background: var(--surface2);
border: 1px solid var(--seam);
border-radius: var(--radius);
}
.if-billing-gate-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); margin-bottom: 6px; }
.if-billing-gate-body { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.if-billing-link-card {
padding: 16px;
background: var(--amber-dim);
border: 1px solid rgba(139,106,26,0.25);
border-radius: var(--radius);
}
.if-billing-link-head { margin-bottom: 8px; }
.if-billing-link-body { font-size: 0.82rem; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
.if-billing-link-row { display: flex; gap: 8px; align-items: center; }
.if-billing-link-input {
flex: 1;
padding: 8px 12px;
font-family: var(--font-ui); font-size: 0.8rem;
border: 1px solid var(--seam); border-radius: var(--radius);
background: var(--vellum); color: var(--text);
}
.if-billing-start {
padding-top: 4px;
border-top: 1px solid var(--seam);
padding-top: 16px;
}
.if-billing-start-label {
font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
margin-bottom: 12px;
}
.if-billing-start-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.if-billing-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.if-billing-field label {
font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted);
}
.if-billing-field input[type="number"] {
padding: 9px 12px;
font-family: var(--font-ui); font-size: 0.88rem;
border: 1px solid var(--seam); border-radius: var(--radius);
background: var(--surface); color: var(--text);
box-sizing: border-box;
}
.if-billing-toggle {
display: inline-flex;
border: 1px solid var(--seam);
border-radius: var(--radius);
overflow: hidden;
}
.vl-billing-toggle-opt {
padding: 9px 16px;
font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500;
color: var(--muted);
background: var(--surface);
border: none;
cursor: pointer;
transition: all 0.15s;
}
.vl-billing-toggle-opt + .vl-billing-toggle-opt { border-left: 1px solid var(--seam); }
.vl-billing-toggle-opt.active { background: var(--olive); color: var(--vellum); }
.if-billing-start-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.if-billing-start-hint { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.if-billing-error {
margin-top: 10px;
padding: 10px 14px;
background: rgba(139,46,46,0.08);
border: 1px solid rgba(139,46,46,0.25);
border-radius: var(--radius);
font-size: 0.82rem;
color: var(--danger);
}
.if-loading-msg { font-size: 0.85rem; color: var(--muted); padding: 8px 0; }