/**
 * Project Workspace Styles
 * Polite Platform :: Control Plane
 * Path: /control-plane/public/assets/reference/css/project.css
 * Description: Exact project workspace styles ported from the Admin Dashboard reference.
 * Context: UI
 * Author: Polite Platform Team
 * Date: 2026-09-06T20:52:44Z
 * Generated by: GPT-5 Codex (exact port of the Admin Dashboard reference)
 */
        /* Page-specific styles */
        body { padding: 40px 20px; }
        
        .header { 
            display: flex; 
            justify-content: space-between; 
            align-items: start; 
            margin-bottom: 30px;
            position: static;
            background: transparent;
            border: none;
            padding: 0;
        }
        
        h1 { font-size: 32px; margin-bottom: 8px; }
        h2 { font-size: 24px; margin-bottom: 15px; }
        h3 { font-size: 18px; margin-bottom: 10px; }
        .subtitle { color: var(--text-dim); font-size: 14px; }
        
        .btn { margin-left: 10px; }
        
        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 20px;
        }
        
        .card h2 { margin-bottom: 20px; }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px 30px;
        }
        
        @media (max-width: 768px) {
            .info-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .info-item { }
        .info-label { font-size: 12px; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
        .info-value { font-weight: 600; }
        
        /* Setup Items with Action Buttons */
        .setup-item-detailed {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .setup-info strong {
            font-size: 16px;
            display: block;
            margin-bottom: 8px;
        }
        
        .setup-meta {
            font-size: 13px;
            color: var(--text-dim);
        }
        
        .setup-actions {
            display: flex;
            gap: 10px;
        }
        
        .setup-actions .btn {
            margin: 0;
            padding: 10px 20px;
            font-size: 14px;
        }
        
        .badge-shared {
            display: inline-block;
            background: var(--blue);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            margin-left: 10px;
        }
        
        /* Event Grouping (for Sprint 0.4) */
        .event-group {
            margin-bottom: 25px;
        }
        
        .event-header {
            font-size: 16px;
            font-weight: 600;
            padding: 12px;
            background: var(--bg);
            border-radius: 8px;
            cursor: pointer;
            user-select: none;
        }
        
        .event-header:hover {
            background: var(--surface-hover);
        }
        
        .setups-in-event {
            margin-top: 15px;
            padding-left: 20px;
        }
        
        .hidden { display: none !important; }
        
        /* === Events Section (V5.2) === */
        
        /* Event Card */
        .event-card {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
        }
        
        .event-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .event-card.compact-single .event-card-header {
            align-items: center;
        }

        .event-card.compact-single .event-info {
            flex: 1;
            min-width: 0;
        }
        
        .event-info h3 {
            font-size: 18px;
            margin-bottom: 8px;
        }
        
        .event-meta {
            display: flex;
            gap: 16px;
            color: var(--text-dim);
            font-size: 13px;
        }
        
        .event-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Status pills live on their own row so long event names don't squeeze them */
        .event-pills {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .event-brief {
            color: var(--text-dim);
            font-size: 13px;
            line-height: 1.55;
            max-width: 72ch;
            margin: -6px 0 16px;
        }

        /* Multi-column rows for wide modals (Edit Event) */
        .form-row-2, .form-row-3 {
            display: grid;
            gap: 0 16px;
        }
        .form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

        .event-form-stack { display: grid; gap: 16px; }
        .event-form-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px;
        }
        .event-form-card.schedule-card { border-color: rgba(96,165,250,0.5); }
        .event-form-card-header {
            align-items: flex-start;
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        .event-form-card-header > i {
            color: var(--blue);
            font-size: 20px;
            margin-top: 1px;
        }
        .event-form-card-header h4 { font-size: 14px; margin: 0 0 3px; }
        .event-form-card-header p { color: var(--text-dim); font-size: 12px; margin: 0; }
        .event-form-card .form-group { margin-bottom: 16px; }
        .event-form-card .form-row-2:last-child .form-group,
        .event-form-card .form-row-3:last-child .form-group { margin-bottom: 0; }
        .crew-brief-sections { display: grid; gap: 10px; }
        .crew-brief-section-row {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
        }
        .crew-brief-section-head {
            align-items: center;
            display: flex;
            gap: 12px;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .crew-brief-section-head > label { margin: 0; }
        .crew-brief-include {
            align-items: center;
            color: var(--text-dim);
            display: inline-flex;
            font-size: 11px;
            gap: 6px;
            white-space: nowrap;
        }
        .crew-brief-include input { margin: 0; width: auto; }
        .crew-brief-review-bar {
            align-items: center;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
            justify-content: space-between;
            margin-top: 16px;
            padding-top: 16px;
        }
        .crew-brief-review-state { color: var(--yellow); font-size: 12px; font-weight: 700; }
        .crew-brief-review-state.reviewed { color: var(--green); }
        .event-form-subhead {
            border-top: 1px solid var(--border);
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            margin: 4px 0 14px;
            padding-top: 14px;
            text-transform: uppercase;
        }
        .people-editor { display: grid; gap: 10px; }
        .people-editor-row {
            align-items: end;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: grid;
            gap: 8px;
            grid-template-columns: 1.1fr 1fr 1fr 1.2fr 34px;
            padding: 10px;
        }
        .people-editor-row .form-group { margin: 0; }
        .people-editor-row label { font-size: 10px; margin-bottom: 5px; }
        .people-editor-remove {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-dim);
            cursor: pointer;
            height: 38px;
        }
        .people-editor-remove:hover { border-color: var(--red); color: var(--red); }

        .kit-items-editor { display: grid; gap: 8px; }
        .kit-items-row {
            align-items: center;
            display: grid;
            gap: 8px;
            grid-template-columns: 100px 1fr 34px;
        }
        .kit-items-row .kit-item-qty,
        .kit-items-row .kit-item-name {
            width: 100%;
        }
        .kit-items-remove {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-dim);
            cursor: pointer;
            height: 38px;
        }
        .kit-items-remove:hover { border-color: var(--red); color: var(--red); }

        @media (max-width: 760px) {
            .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
            .schedule-editor-row { grid-template-columns: 1fr 1fr; }
            .schedule-row-notes-input { grid-column: 1 / -1; }
            .schedule-timing-row { grid-template-columns: 1fr 1fr; }
            .schedule-timing-notes { grid-column: 1 / -1; }
            .schedule-timing-remove { grid-column: 2; justify-self: end; }
            .people-editor-row { grid-template-columns: 1fr 1fr; }
            .people-editor-remove { grid-column: 2; justify-self: end; width: 38px; }
        }

        .readiness-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .readiness-ready { background: rgba(74,222,128,0.15); color: var(--green); }
        .readiness-needs_info,
        .readiness-missing_contacts,
        .readiness-missing_operator { background: rgba(251,191,36,0.15); color: var(--yellow); }
        .readiness-missing_load_in,
        .readiness-missing_hours,
        .readiness-missing_shipping { background: rgba(248,113,113,0.15); color: var(--red); }

        .schedule-block {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 16px;
            padding: 12px 14px;
        }

        .schedule-block-header {
            align-items: center;
            color: var(--text-dim);
            display: flex;
            font-size: 11px;
            font-weight: 700;
            justify-content: space-between;
            letter-spacing: 0.06em;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .production-schedule-toggle {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: inline-flex;
            padding: 2px;
        }
        .production-schedule-toggle button {
            background: transparent;
            border: 0;
            border-radius: 6px;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 10px;
            font-weight: 700;
            min-height: 28px;
            padding: 5px 8px;
        }
        .production-schedule-toggle button[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); }
        .production-schedule-panel[hidden] { display: none; }

        .schedule-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .schedule-day-group {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 12px 12px;
        }

        .schedule-day-header {
            align-items: baseline;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            display: flex;
            font-weight: 700;
            gap: 8px;
            margin-bottom: 8px;
            padding-bottom: 6px;
        }

        .schedule-day-header .schedule-day-weekday {
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .schedule-day-rows {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .schedule-row {
            align-items: center;
            display: grid;
            font-size: 13px;
            gap: 12px;
            grid-template-columns: 140px max-content 1fr;
            padding: 4px 0;
        }
        .schedule-row.timeline { align-items: start; grid-template-columns: 140px 1fr; padding: 7px 0; }
        .schedule-moment-labels { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; }
        .schedule-moment-separator { color: var(--text-muted); font-size: 12px; }
        .schedule-element-label { color: var(--text-dim); font-weight: 700; }
        .schedule-downtime-label { color: #fbbf24; }
        .schedule-downtime-pill { background: rgba(251,191,36,0.15); color: #fbbf24; }
        .schedule-next-day { color: var(--text-muted); display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; margin-top: 2px; text-transform: uppercase; }

        .schedule-day-header { justify-content: flex-start; }
        .schedule-day-header .schedule-day-weather { margin-left: auto; }

        .weather-chip {
            align-items: center;
            background: rgba(56,189,248,0.10);
            border: 1px solid rgba(56,189,248,0.22);
            border-radius: 999px;
            color: var(--text);
            display: inline-flex;
            font-feature-settings: "tnum";
            font-size: 12px;
            gap: 6px;
            padding: 3px 9px;
            white-space: nowrap;
        }
        .weather-chip .ph { color: var(--blue); font-size: 14px; }
        .weather-chip-placeholder {
            color: var(--text-dim);
            font-size: 11px;
            font-style: italic;
        }

        .schedule-row.incomplete { color: var(--red); }
        .schedule-row.incomplete .schedule-row-hours { color: var(--red); }

        .schedule-kind-pill {
            border-radius: 999px;
            display: inline-flex;
            font-size: 10px;
            font-weight: 700;
            justify-self: start;
            letter-spacing: 0.05em;
            padding: 3px 8px;
            text-transform: uppercase;
        }

        .schedule-kind-activation { background: rgba(96,165,250,0.16); color: var(--blue); }
        .schedule-kind-load_in { background: rgba(167,139,250,0.16); color: #a78bfa; }
        .schedule-kind-load_out { background: rgba(167,139,250,0.16); color: #a78bfa; }

        .env-pill {
            align-items: center;
            border-radius: 999px;
            display: inline-flex;
            font-size: 11px;
            font-weight: 700;
            gap: 4px;
            letter-spacing: 0.04em;
            padding: 4px 8px;
            text-transform: uppercase;
        }
        /* Neutral gray for indoor/outdoor (TD-42, 2026-07-20): these are
           descriptive facts about the venue, not a status. env-outdoor used
           to share the exact same amber as .readiness-missing_* below, so a
           purely informational "this event is Outdoor" tag read with the
           same urgency as an actual "Missing Contacts" warning sitting right
           next to it. Amber/yellow/red stay reserved for genuine
           actionable-status badges (.readiness-badge). Mixed/tented keep
           distinct hues since blue/purple aren't used as status colors
           elsewhere on this row. */
        .env-indoor, .env-outdoor { background: rgba(148,163,184,0.16); color: #94a3b8; }
        .env-mixed { background: rgba(96,165,250,0.16); color: var(--blue); }
        .env-tented { background: rgba(167,139,250,0.16); color: #a78bfa; }

        .booth-pill {
            align-items: center;
            background: rgba(96,165,250,0.16);
            border-radius: 999px;
            color: var(--blue);
            display: inline-flex;
            font-feature-settings: "tnum";
            font-size: 11px;
            font-weight: 700;
            gap: 4px;
            letter-spacing: 0.04em;
            padding: 4px 8px;
            text-transform: uppercase;
        }

        .asset-pill {
            align-items: center;
            display: inline-flex;
            gap: 6px;
            text-decoration: none;
        }
        .asset-pill .asset-pill-type {
            color: var(--text-muted);
            font-feature-settings: "tnum";
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        /* Edit-modal: production-asset slot tiles (mirrors the picker UX in
           graphics-upload callers — one tile per canonical slot). */
        .asset-slot-grid {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
        .asset-slot {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
        }
        .asset-slot-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
        .asset-slot-label {
            color: var(--text);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .asset-slot-status {
            color: var(--text-muted);
            font-size: 11px;
        }
        .asset-slot-current {
            color: var(--text-dim);
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .asset-slot-current a { color: var(--blue); text-decoration: none; }
        .asset-slot-current a:hover { text-decoration: underline; }
        .asset-slot-empty { color: var(--text-muted); font-style: italic; }
        .asset-slot-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .asset-slot-actions .btn { padding: 6px 10px; font-size: 12px; }

        .schedule-row-hours {
            color: var(--text);
            font-feature-settings: "tnum";
            white-space: nowrap;
        }
        .schedule-row-notes { color: var(--text-dim); }

        .schedule-block-empty {
            color: var(--text-dim);
            font-size: 13px;
            padding: 6px 0;
        }

        .production-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        .production-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
        }

        .production-label {
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .production-value {
            color: var(--text);
            font-size: 14px;
            line-height: 1.35;
        }

        .production-notes {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 16px;
            padding: 14px;
        }

        .production-notes .production-value {
            color: var(--text-dim);
            max-width: 78ch;
            white-space: pre-wrap;
        }

        .production-warning {
            background: rgba(251,191,36,0.08);
            border: 1px solid rgba(251,191,36,0.25);
            border-radius: 8px;
            color: var(--yellow);
            font-size: 13px;
            margin-bottom: 16px;
            padding: 10px 12px;
        }

        .outstanding-card {
            background: rgba(251,191,36,0.06);
            border: 1px solid rgba(251,191,36,0.3);
            border-radius: 10px;
            margin-bottom: 16px;
            padding: 14px;
        }
        .outstanding-card.ready {
            background: rgba(74,222,128,0.06);
            border-color: rgba(74,222,128,0.3);
        }
        .outstanding-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
        .outstanding-head h4 { color: var(--yellow); font-size: 13px; margin: 0; }
        .outstanding-card.ready .outstanding-head h4 { color: var(--green); }
        .outstanding-list { display: grid; gap: 7px; list-style: none; margin: 12px 0 0; padding: 0; }
        .outstanding-list li { color: var(--text); font-size: 13px; line-height: 1.4; padding-left: 18px; position: relative; }
        .outstanding-list li::before { color: var(--yellow); content: '•'; left: 2px; position: absolute; }
        .outstanding-tag { color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
        .outstanding-subhead { color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; margin-top: 12px; text-transform: uppercase; }
        .outstanding-admin-details { border-top: 1px solid rgba(251,191,36,0.2); margin-top: 14px; padding-top: 10px; }
        .outstanding-admin-details summary { color: var(--text-dim); cursor: pointer; font-size: 12px; }

        .production-section {
            border-top: 1px solid var(--border);
            margin-top: 16px;
            padding-top: 16px;
        }

        .crew-list,
        .asset-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .crew-pill,
        .asset-pill {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-dim);
            font-size: 13px;
            padding: 8px 10px;
        }
        .crew-pill .crew-internal-badge {
            background: rgba(168,85,247,0.16);
            border-radius: 999px;
            color: #c084fc;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            margin-left: 6px;
            padding: 2px 6px;
            text-transform: uppercase;
        }

        
        /* Setups List */
        /* One tier brighter/bolder than .tg-label below (TD-42, 2026-07-20) —
           this heading is one level up (groups whole setups), .tg-label is
           nested one level down (groups tiles inside one already-open
           setup). Both were 10-12px --text-dim uppercase before, i.e. visually
           interchangeable despite the depth difference; brightness now does
           the signaling that size alone didn't. */
        .setups-label {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text);
            margin-bottom: 12px;
        }
        
        .setups-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        /* Individual Setup Card - Full Width */
        .setup-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .setup-card:hover {
            border-color: var(--accent);
            background: var(--surface-hover);
        }
        
        .setup-card-icon {
            font-size: 32px;
            flex-shrink: 0;
        }
        
        .setup-card-main {
            flex: 1;
            min-width: 0;
        }
        
        .setup-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 6px;
        }
        
        .setup-card-name {
            font-weight: 600;
            font-size: 15px;
        }
        
        .setup-card-id {
            font-family: monospace;
            font-size: 10px;
            color: var(--accent);
            background: var(--bg);
            padding: 2px 8px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .setup-card-id:hover {
            background: var(--surface-hover);
        }
        
        .setup-card-details {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: var(--text-dim);
        }
        
        .setup-card-detail {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .setup-card-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .setup-card.add-new {
            border-style: dashed;
            opacity: 0.6;
            justify-content: center;
            padding: 20px;
        }
        
        .setup-card.add-new:hover {
            opacity: 1;
            border-color: var(--green);
        }
        
        .setup-card.add-new .setup-card-icon {
            font-size: 24px;
        }
        
        .setup-card.add-new .setup-card-name {
            font-weight: 500;
            color: var(--text-dim);
        }
        
        /* ===============================================================
           ADR-011 expandable setup card (project-v2 mockup rev 6)
           Setup owns its module config; tiles are status + editor launchers.
           =============================================================== */
        /* overflow: hidden so any exp-head background (incl. the accent tint
           below) is clipped to the card's own rounded corners in every state
           — collapsed, expanded, hovered — instead of only matching them via
           a one-off border-radius on :hover. */
        .setup-exp { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
        .inactive-setups {
            border-top: 1px solid var(--border);
            margin-top: 4px;
            padding-top: 8px;
        }
        .inactive-setups > summary {
            align-items: center;
            color: var(--text-dim);
            cursor: pointer;
            display: flex;
            font-size: 12px;
            font-weight: 700;
            gap: 7px;
            list-style: none;
            min-height: 44px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .inactive-setups > summary::marker { display: none; }
        .inactive-setups-help {
            color: var(--accent);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0;
            margin-left: auto;
            text-transform: none;
        }
        .inactive-setups-list { padding-top: 4px; }
        .setup-exp.inactive { border-color: color-mix(in srgb, var(--border) 80%, transparent); }
        .setup-exp.inactive .exp-head {
            background: color-mix(in srgb, var(--surface) 65%, transparent);
            color: var(--text-dim);
        }
        .setup-exp.inactive .exp-icon { color: var(--text-dim); }
        .setup-lifecycle-badge {
            background: color-mix(in srgb, var(--text-dim) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--text-dim) 35%, transparent);
            border-radius: 999px;
            color: var(--text-dim);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
            padding: 4px 8px;
            text-transform: uppercase;
        }
        .inactive-setup-note {
            color: var(--text-dim);
            font-size: 12px;
            line-height: 1.45;
            padding: 16px;
        }
        .setup-deactivate-confirmation { color: var(--text-dim); }
        .setup-deactivate-question {
            color: var(--text);
            font-size: 15px;
            line-height: 1.5;
            margin: 0 0 8px;
        }
        .setup-deactivate-id { font-size: 12px; margin-bottom: 18px; }
        .setup-deactivate-confirmation ul {
            line-height: 1.55;
            margin: 0;
            padding-left: 20px;
        }
        .setup-reactivate-guidance {
            align-items: flex-start;
            background: color-mix(in srgb, var(--accent) 8%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
            border-radius: 9px;
            color: var(--text);
            display: flex;
            gap: 10px;
            line-height: 1.45;
            margin-top: 20px;
            padding: 12px;
        }
        .setup-reactivate-guidance i { color: var(--accent); font-size: 18px; }
        .setup-name-hint {
            color: var(--text-dim);
            font-size: 12px;
            line-height: 1.5;
            margin: 7px 0 0;
        }
        .setup-settings-form {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .setup-active-setting {
            align-items: center;
            background: color-mix(in srgb, var(--surface) 78%, transparent);
            border: 1px solid var(--border);
            border-radius: 9px;
            display: flex;
            gap: 18px;
            justify-content: space-between;
            padding: 12px;
        }
        .setup-active-setting > div { min-width: 0; }
        .setup-active-setting label { color: var(--text); font-size: 13px; font-weight: 700; }
        .setup-active-setting p {
            color: var(--text-dim);
            font-size: 11px;
            line-height: 1.45;
            margin: 4px 0 0;
        }
        .setup-active-toggle {
            align-items: center;
            cursor: pointer;
            display: inline-flex;
            flex: 0 0 auto;
            gap: 8px;
            min-height: 44px;
        }
        .setup-active-toggle input {
            height: 1px;
            opacity: 0;
            position: absolute;
            width: 1px;
        }
        .setup-active-switch {
            background: var(--surface-hover);
            border: 1px solid var(--border);
            border-radius: 999px;
            height: 24px;
            position: relative;
            transition: background 0.15s, border-color 0.15s;
            width: 42px;
        }
        .setup-active-switch::after {
            background: var(--text-dim);
            border-radius: 50%;
            content: '';
            height: 16px;
            left: 3px;
            position: absolute;
            top: 3px;
            transition: background 0.15s, transform 0.15s;
            width: 16px;
        }
        .setup-active-toggle input:checked + .setup-active-switch {
            background: color-mix(in srgb, var(--accent) 35%, var(--surface));
            border-color: var(--accent);
        }
        .setup-active-toggle input:checked + .setup-active-switch::after {
            background: var(--accent);
            transform: translateX(18px);
        }
        .setup-active-toggle input:focus-visible + .setup-active-switch {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
        }
        /* Subtle accent wash on the header bar (TD-42, 2026-07-20) — Dark
           Bento reference cards (relay/operator/src/index.css) use low-opacity
           135deg accent gradients on category surfaces so pages don't read as
           one flat monotone gray; this is the same move for the setup header,
           deliberately not tied to inferred setup type (see TD-125 — that
           inference isn't reliable enough to color-code by). */
        .exp-head {
            display: flex; align-items: center; gap: 13px; padding: 13px 16px; cursor: pointer; min-height: 44px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 100%);
        }
        .exp-head:hover { background: var(--surface-hover); }
        .exp-icon {
            width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 19px;
            background: var(--surface); border: 1px solid var(--border); color: var(--accent);
        }
        .exp-title { flex: 1; min-width: 0; }
        .exp-eyebrow {
            color: var(--text-dim);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            margin-bottom: 2px;
            text-transform: uppercase;
        }
        .exp-title .name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
        .setup-edit-button {
            align-items: center;
            background: transparent;
            border: 0;
            border-radius: 7px;
            color: var(--text-dim);
            cursor: pointer;
            display: inline-flex;
            font-family: inherit;
            font-size: 15px;
            justify-content: center;
            min-height: 44px;
            padding: 0;
            width: 44px;
        }
        .setup-edit-button:hover { background: var(--surface-hover); color: var(--text); }
        .exp-summary { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
        .exp-summary .ok { color: var(--green); }
        .exp-summary .warn { color: var(--amber, #fbbf24); }
        .exp-id { align-items: baseline; color: var(--text-dim); cursor: pointer; display: inline-flex; font-family: monospace; font-size: 11px; gap: 5px; }
        .exp-id-label { font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
        .exp-id:hover { color: var(--accent); }
        .exp-chev { color: var(--text-dim); font-size: 12px; transition: transform 0.15s; padding: 8px; }
        .setup-exp.open .exp-chev { transform: rotate(90deg); }
        .exp-body { display: none; border-top: 1px solid var(--border); }
        .setup-exp.open .exp-body { display: block; }
        
        .tile-group { padding: 0 16px; }
        /* Deliberately smaller/dimmer than .setups-label above — one level
           deeper in the hierarchy (groups tiles inside one setup, not
           setups themselves). See .setups-label comment. */
        .tile-group .tg-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 12px 2px 0; }
        .tile-group .tg-toggle {
            width: 100%; min-height: 44px; border: 0; background: none; cursor: pointer;
            display: flex; align-items: center; justify-content: space-between;
            font-family: inherit; color: var(--text-dim); text-align: left;
        }
        .tile-group .tg-toggle:hover { color: var(--text); }
        .tile-group .tg-toggle .tg-chevron { font-size: 12px; transition: transform 0.15s; }
        .tile-group.collapsed .tg-toggle .tg-chevron { transform: rotate(-90deg); }
        .tile-group.collapsed .tile-grid { display: none; }
        .tile-group .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; padding: 8px 0 6px; }
        .tile-group:last-of-type .tile-grid { padding-bottom: 14px; }

        .mod-tile {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--border); border-radius: 12px;
            padding: 13px 10px 10px; text-align: center; cursor: pointer;
            transition: border-color 0.12s, transform 0.12s; min-height: 88px;
            display: flex; flex-direction: column; align-items: center; gap: 4px;
        }
        .mod-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
        .mod-tile .ticon { font-size: 23px; color: var(--text-dim); line-height: 1; }
        .mod-tile.assigned .ticon { color: var(--accent); }
        .mod-tile .tname { font-size: 12px; font-weight: 600; }
        .mod-tile .tvalue { font-size: 11px; color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mod-tile .tvalue.warn { color: var(--warning, #ffd60a); font-weight: 600; }
        .mod-tile .tvalue.status-needs-review { color: var(--warning, #ffd60a); font-weight: 700; }
        .mod-tile .tvalue.status-authored { color: var(--purple); font-weight: 700; }
        .mod-tile .tvalue.status-internal-approved { color: var(--blue); font-weight: 700; }
        .mod-tile .tvalue.status-client-approved { color: var(--green); font-weight: 700; }
        .mod-tile .tvalue.status-not-required { color: var(--text-dim); }
        .mod-tile.pending { border-color: color-mix(in srgb, var(--yellow) 35%, var(--border)); }
        .mod-tile.pending:hover { border-color: var(--warning, #ffd60a); }
        .mod-tile.pending .ticon { color: color-mix(in srgb, var(--yellow) 55%, var(--text-dim)); }
        .mod-tile.off { border-style: dashed; border-color: var(--border); background: none; opacity: 0.55; }
        .mod-tile.off:hover { opacity: 1; border-color: var(--accent); transform: none; }
        .mod-tile.off .ticon, .mod-tile.off .tvalue { color: var(--text-dim); }
        .mod-tile.has-status-menu { cursor: pointer; }
        .module-status-menu { min-width: 178px; }
        .module-status-menu button {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .module-status-menu .current { color: var(--accent); }
        .module-status-menu .menu-section-label {
            padding: 8px 14px 5px;
            color: var(--text-dim);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .plane-corner { position: absolute; top: 7px; right: 8px; font-size: 11px; cursor: default; }
        .plane-corner.device { color: #5a7eb3; }
        .plane-corner.cloud { color: #8a6fc0; }
        
        /* Templates are primary setup configuration and remain visible whenever
           the containing setup card is expanded. */
        .tmpl-panel { padding: 2px 16px 12px; }
        .tmpl-panel-inner { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 12px; }
        .tmpl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; }
        .tmpl-panel-head h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
        .tmpl-panel-actions { display: flex; align-items: center; gap: 6px; }
        .tmpl-panel-actions button {
            min-height: 32px;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface);
            color: var(--text-dim);
            font: inherit;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .tmpl-panel-actions button:hover { border-color: var(--accent); color: var(--text); }
        .tmpl-panel-actions .primary { color: var(--accent); }
        @media (max-width: 760px) {
            .tmpl-panel-head { align-items: flex-start; flex-direction: column; }
            .tmpl-panel-actions { width: 100%; }
            .tmpl-panel-actions button { flex: 1; justify-content: center; }
            .tmpl-panel .tmpl-cards .template-card { flex-basis: 270px; }
        }
        .tmpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
        .tmpl-panel .tmpl-cards {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 2px 2px 10px;
            scroll-snap-type: x proximity;
            scrollbar-color: var(--border) transparent;
            scrollbar-width: thin;
        }
        /* Cards reuse pipeline.html's shared .template-card system from
           admin.css (thumb left, ⋮ menu, badge row). Only the dashed
           add-cards and the pool modal's Include row are local.
           Tightened for this panel: it's ~half the width of pipeline's
           full-page grid, so the ID line must clear the Default pill and
           the ⋮ button instead of relying on free space. */
        .tmpl-panel .tmpl-cards .template-card {
            flex: 0 0 300px;
            padding: 12px;
            gap: 12px;
            scroll-snap-align: start;
        }
        .tmpl-panel .template-approval-row { margin-top: 7px; }
        .tmpl-cards .template-name { padding-right: 24px; }
        .tmpl-cards .card-menu-btn { padding: 4px 6px; }
        /* Compact badges so Digital + Print + FX + AI fit one row at this
           panel's ~155px content width. */
        .tmpl-cards .template-badges { gap: 4px; }
        .tmpl-cards .badge { font-size: 10px; padding: 2px 6px; }
        .default-star { color: var(--amber, #fbbf24); font-size: 12px; margin-right: 5px; }
        .template-card.new-tmpl { border-style: dashed; background: none; align-items: center; justify-content: center; min-height: 114px; color: var(--text-dim); cursor: pointer; flex-direction: column; gap: 6px; font-size: 12px; }
        .template-card.new-tmpl:hover { color: var(--accent); border-color: var(--accent); }
        .template-card.new-tmpl i { font-size: 20px; }
        .pool-actions { display: flex; gap: 2px; margin-top: 8px; margin-left: -7px; flex-wrap: wrap; }
        .pool-actions button {
            background: none; border: none; color: var(--text-dim); font-size: 11px; font-family: inherit;
            padding: 4px 7px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
        }
        .pool-actions button:hover { background: var(--surface-hover); color: var(--text); }
        .pool-actions button.danger:hover { color: var(--red); }
        
        .exp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--border); }
        .exp-actions .spacer { flex: 1; }

        /* Dark-only: preserve the hand-tuned tile/card surfaces exactly as
           designed. Other themes fall back to the token values above. */
        html:not([data-theme]) .setup-exp,
        [data-theme="dark"] .setup-exp { background: #141416; }
        html:not([data-theme]) .mod-tile,
        [data-theme="dark"] .mod-tile { background: linear-gradient(180deg, #18181b 0%, #121214 100%); }
        html:not([data-theme]) .mod-tile.off,
        [data-theme="dark"] .mod-tile.off { background: none; }
        html:not([data-theme]) .mod-tile.pending,
        [data-theme="dark"] .mod-tile.pending { border-color: #3a3216; }
        html:not([data-theme]) .mod-tile.pending .ticon,
        [data-theme="dark"] .mod-tile.pending .ticon { color: #8a7a3a; }
        html:not([data-theme]) .tmpl-panel-inner,
        [data-theme="dark"] .tmpl-panel-inner { background: #101012; }
        html:not([data-theme]) .template-card.new-tmpl,
        [data-theme="dark"] .template-card.new-tmpl { background: none; }
        
        /* production details drawer — toggled from the event header */
        .prod-drawer { display: none; }
        .prod-drawer.open { display: block; }

        /* Slim utility row — retained for pages that still need a local back link */
        .utility-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        /* Project masthead strip */
        .project-strip { padding: 16px 24px; }
        .project-strip-hero {
            position: relative;
        }
        .project-strip-footer {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            width: 100%;
            z-index: 1;
        }
        .project-strip-footer .project-strip-row {
            width: 100%;
        }
        .project-strip-media,
        .project-strip-shade { display: none; }
        .project-strip.has-title-card {
            overflow: hidden;
            padding: 0;
        }
        .project-strip.has-title-card .project-strip-hero {
            align-items: flex-end;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 260px;
            padding: 28px 32px 14px;
        }
        .project-strip.has-title-card .project-strip-media,
        .project-strip.has-title-card .project-strip-shade {
            display: block;
            inset: 0;
            position: absolute;
        }
        .project-strip.has-title-card .project-strip-media {
            height: 100%;
            object-fit: cover;
            width: 100%;
        }
        .project-strip.has-title-card .project-strip-shade {
            background: linear-gradient(180deg, rgba(8, 8, 10, 0.05) 10%, rgba(8, 8, 10, 0.82) 100%);
        }
        .project-strip-status-corner {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
        }
        .project-strip.has-title-card .project-strip-status-corner {
            right: 28px;
            top: 20px;
        }
        .project-strip-title {
            font-size: 22px;
            line-height: 1.25;
            margin: 0;
            max-width: min(760px, calc(100% - 48px));
            text-align: center;
            width: 100%;
        }
        .project-strip:not(.has-title-card) .project-strip-footer {
            gap: 26px;
        }
        .project-strip.has-title-card .project-strip-footer {
            gap: 32px;
        }
        .project-strip.has-title-card .project-strip-title {
            color: #fff;
            font-size: clamp(22px, 3vw, 34px);
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
        }
        .project-strip.hide-project-name.has-title-card .project-strip-title {
            display: none;
        }
        .project-strip.hide-project-name:not(.has-title-card) .project-strip-title {
            display: none;
        }
        /* Standardized "info bar" (TD-42, 2026-07-20): previously this row had
           no height or background of its own — it just sat on the hero
           photo's gradient shade, so its height (and how legible it was)
           varied with how much the name/summary text wrapped. Now it's a
           self-contained bar with a fixed floor and its own subtle
           background, independent of whatever photo sits behind it. */
        .project-strip.has-title-card .project-strip-row {
            align-items: center;
            background: rgba(10, 10, 12, 0.55);
            backdrop-filter: blur(12px);
            border-radius: 12px;
            min-height: 64px;
            padding: 10px 18px;
            position: relative;
            width: 100%;
            z-index: 1;
        }
        .project-strip.has-title-card .project-strip-summary { color: rgba(255, 255, 255, 0.8); }
        .project-strip.has-title-card .project-strip-summary strong { color: #fff; }
        .project-strip.has-title-card .project-strip-meta-label { color: rgba(255, 255, 255, 0.58); }
        .project-strip.has-title-card .project-strip-row .btn {
            background: rgba(16, 16, 18, 0.78);
            border-color: rgba(255, 255, 255, 0.24);
            color: #fff;
            backdrop-filter: blur(8px);
        }
        .project-strip.has-title-card #project-drawer { padding: 0 24px 16px; }
        .project-brief-drawer {
            padding-top: 16px;
        }
        .project-brief-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .project-brief-heading {
            color: var(--blue);
            font-size: 14px;
            font-weight: 600;
        }
        .project-brief-body {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 15px;
        }
        .project-brief-body p {
            margin: 0;
            white-space: pre-wrap;
        }
        .project-brief-empty {
            color: var(--text-dim);
            font-style: italic;
        }
        .project-brief-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .project-strip.has-title-card .project-brief-body {
            background: rgba(8, 8, 10, 0.42);
            border-color: rgba(255, 255, 255, 0.12);
        }
        .project-strip.has-title-card .project-brief-empty {
            color: rgba(255, 255, 255, 0.62);
        }
        .project-strip-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .project-strip-main {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            min-width: 0;
        }
        .project-strip-actions {
            display: flex;
            flex-shrink: 0;
            gap: 8px;
        }
        .project-strip-status {
            display: inline-flex;
            align-items: center;
            align-self: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-dim);
            background: rgba(160, 160, 160, 0.12);
        }
        .project-strip-status::before {
            border-radius: 50%;
            content: '';
            flex-shrink: 0;
            height: 6px;
            width: 6px;
            background: currentColor;
        }
        .project-strip-status[data-status="draft"] {
            color: var(--orange);
            background: color-mix(in srgb, var(--orange) 14%, transparent);
        }
        .project-strip-status[data-status="active"],
        .project-strip-status[data-status="completed"] {
            color: var(--green);
            background: color-mix(in srgb, var(--green) 14%, transparent);
        }
        .project-strip-status[data-status="canceled"] {
            color: var(--red);
            background: color-mix(in srgb, var(--red) 14%, transparent);
        }
        .project-strip-status[data-status="archived"] {
            color: var(--text-dim);
            background: rgba(160, 160, 160, 0.12);
        }
        .project-strip.has-title-card .project-strip-status {
            background: rgba(8, 8, 10, 0.84);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
            color: #fff;
            padding: 5px 11px;
        }
        .project-strip.has-title-card .project-strip-status::before {
            box-shadow: 0 0 8px currentColor;
        }
        .project-strip.has-title-card .project-strip-status[data-status="draft"] {
            border-color: color-mix(in srgb, var(--orange) 45%, rgba(255, 255, 255, 0.18));
        }
        .project-strip.has-title-card .project-strip-status[data-status="draft"]::before {
            background: var(--orange);
            color: var(--orange);
        }
        .project-strip.has-title-card .project-strip-status[data-status="active"],
        .project-strip.has-title-card .project-strip-status[data-status="completed"] {
            border-color: color-mix(in srgb, var(--green) 45%, rgba(255, 255, 255, 0.18));
        }
        .project-strip.has-title-card .project-strip-status[data-status="active"]::before,
        .project-strip.has-title-card .project-strip-status[data-status="completed"]::before {
            background: var(--green);
            color: var(--green);
        }
        .project-strip.has-title-card .project-strip-status[data-status="canceled"] {
            border-color: color-mix(in srgb, var(--red) 45%, rgba(255, 255, 255, 0.18));
        }
        .project-strip.has-title-card .project-strip-status[data-status="canceled"]::before {
            background: var(--red);
            color: var(--red);
        }
        .project-strip.has-title-card .project-strip-status[data-status="archived"] {
            border-color: rgba(255, 255, 255, 0.18);
        }
        .project-strip.has-title-card .project-strip-status[data-status="archived"]::before {
            background: rgba(255, 255, 255, 0.55);
            color: rgba(255, 255, 255, 0.55);
        }
        .project-strip-summary {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 0;
            color: var(--text-dim);
            font-size: 13px;
        }
        .project-strip-meta-label {
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.03em;
            margin-right: 4px;
            text-transform: uppercase;
        }
        .project-strip-summary .sep {
            margin: 0 8px;
            opacity: 0.4;
        }
        .project-strip-summary strong {
            color: var(--text);
            font-weight: 600;
        }
        .btn.prod-active { border-color: var(--accent); color: var(--text); background: var(--surface-hover); }
        
        .btn-small {
            padding: 8px 16px;
            font-size: 13px;
            margin: 0;
        }
        
        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            width: 100%;
            max-width: 480px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 18px;
        }
        
        .modal-close {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .modal-close:hover {
            color: var(--text);
        }
        
        .modal-body {
            padding: 24px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px;
            border-top: 1px solid var(--border);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group:last-child {
            margin-bottom: 0;
        }
        
        .form-group label {
            display: block;
            font-size: 12px;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 14px;
        }
        
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--blue);
        }

        .form-group textarea {
            min-height: 120px;
            resize: vertical;
            line-height: 1.45;
        }
        
        .form-group select {
            width: 100%;
            padding: 12px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 14px;
            cursor: pointer;
        }
        
        .form-hint {
            color: var(--text-dim);
            font-size: 12px;
            margin: -2px 0 10px;
        }

        .form-readonly {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-dim);
            font-size: 14px;
            padding: 12px 14px;
        }

        .title-card-editor {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
        }
        .title-card-preview {
            align-items: center;
            aspect-ratio: 16 / 6;
            background: var(--surface);
            border: 1px dashed var(--border);
            border-radius: 8px;
            cursor: crosshair;
            display: flex;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .title-card-preview img {
            height: 100%;
            object-fit: cover;
            width: 100%;
        }
        .title-card-preview-empty {
            color: var(--text-dim);
            font-size: 12px;
            padding: 16px;
            text-align: center;
        }
        .title-card-focal-marker {
            background: rgba(10, 10, 12, 0.72);
            border: 2px solid #fff;
            border-radius: 50%;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
            height: 16px;
            pointer-events: none;
            position: absolute;
            transform: translate(-50%, -50%);
            width: 16px;
        }
        .title-card-actions {
            display: flex;
            gap: 8px;
            margin: 10px 0 12px;
        }
        .title-card-actions .btn { min-height: 44px; }
        .title-card-focal-controls {
            display: grid;
            gap: 8px;
            grid-template-columns: 1fr 1fr;
            margin-bottom: 12px;
        }
        .title-card-focal-controls label {
            color: var(--text-dim);
            font-size: 11px;
            margin: 0;
            text-transform: none;
        }
        .title-card-focal-controls input { padding: 0; }
        @media (max-width: 760px) {
            .project-strip.has-title-card .project-strip-hero {
                min-height: 220px;
                padding: 22px 20px;
            }
            .project-strip.has-title-card .project-strip-row {
                align-items: flex-start;
                flex-direction: column;
            }
            .title-card-focal-controls { grid-template-columns: 1fr; }
        }

        .schedule-editor {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .schedule-editor-empty {
            color: var(--text-dim);
            font-size: 13px;
            padding: 8px 0;
        }

        .schedule-editor-row {
            align-items: center;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: grid;
            gap: 8px;
            grid-template-columns: 140px 100px 112px 112px 1fr 32px;
            padding: 10px;
        }

        .schedule-editor-row input,
        .schedule-editor-row select {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            font-size: 13px;
            padding: 8px 10px;
            width: 100%;
        }

        .schedule-editor-row select { cursor: pointer; }

        .schedule-row-remove {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 14px;
            height: 32px;
            line-height: 1;
            width: 32px;
        }

        .schedule-row-remove:hover {
            background: rgba(248,113,113,0.1);
            border-color: rgba(248,113,113,0.4);
            color: var(--red);
        }

        .schedule-timing-editor {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 10px 0 2px;
        }
        .schedule-timing-editor:empty { display: none; }

        @media (max-width: 760px) {
            .schedule-editor-row,
            .schedule-timing-row { grid-template-columns: 1fr 1fr; }
            .schedule-row-notes-input,
            .schedule-timing-notes { grid-column: 1 / -1; }
            .schedule-row-remove,
            .schedule-timing-remove { grid-column: 2; justify-self: end; }
        }

        .schedule-editor-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .checkbox-group input[type="checkbox"],
        .checkbox-group input[type="radio"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        
        .checkbox-group label {
            margin: 0;
            cursor: pointer;
            font-size: 14px;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--text-dim);
        }
        
        .empty-state p {
            margin-bottom: 16px;
        }
/* Project production contacts — production area > company > people. */
.production-contact-panel { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; }
.production-contact-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.production-contact-head h2 { margin: 0; }.production-contact-head p { color: var(--text-dim); font-size: 12px; margin: 5px 0 0; }
.production-contact-list { display: grid; gap: 20px; margin-top: 18px; }.production-contact-group h3 { color: var(--text); font-size: 13px; margin: 0 0 8px; }
.production-contact-company-list { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.production-contact-company { padding: 14px; }.production-contact-company + .production-contact-company { border-top: 1px solid var(--border); }
.production-contact-company-head { align-items: flex-start; display: flex; gap: 8px; justify-content: space-between; }.production-contact-company-type { color: var(--text-dim); display: block; font-size: 12px; margin-top: 3px; }
.production-contact-confidential, .production-contact-public { border-radius: 999px; font-size: 10px; font-weight: 700; padding: 4px 7px; white-space: nowrap; }.production-contact-confidential { background: rgba(245, 158, 11, .15); color: #fbbf24; }.production-contact-public { background: rgba(34, 197, 94, .12); color: #86efac; }
.production-contact-people { display: grid; gap: 5px; margin: 11px 0; }.production-contact-person { align-items: center; display: flex; font-size: 12px; gap: 10px; justify-content: space-between; }.production-contact-person b { color: var(--accent); font-size: 10px; }.production-contact-empty-person, .production-contact-empty, .production-contact-actions { color: var(--text-dim); font-size: 12px; }
.production-contact-actions { align-items: center; display: flex; justify-content: space-between; }.production-contact-modal { align-items: center; background: rgba(0,0,0,.65); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 3000; }
.production-contact-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.45); max-height: 92vh; overflow: auto; padding: 20px; width: min(820px, 100%); }
.production-contact-form { display: grid; gap: 12px; margin-top: 15px; }.production-contact-form label { color: var(--text-dim); display: grid; font-size: 12px; gap: 5px; }.production-contact-form input, .production-contact-form select { min-height: 44px; width: 100%; }
.production-contact-person-heading { align-items: center; display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; margin-top: 6px; }.production-contact-person-row { align-items: center; display: grid; gap: 7px; grid-template-columns: 1fr 1fr 1fr 1fr auto auto; }.production-contact-recipient { align-items: center; display: flex !important; gap: 4px; white-space: nowrap; }.production-contact-recipient input { min-height: auto; width: auto; }.icon-btn { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; font-size: 22px; line-height: 1; min-height: 44px; min-width: 44px; padding: 4px; }.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 700px) { .production-contact-head { flex-direction: column; }.production-contact-person-row { grid-template-columns: 1fr 1fr; }.production-contact-recipient { grid-column: span 1; } }

/* Compact project-owned public origin inside Edit Project. */
.public-links-effective,
.public-links-authoring {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.public-links-message {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}
.project-public-links-setting {
    border-top: 1px solid var(--border);
    margin-top: 20px;
    padding-top: 20px;
}
.project-setting-label-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}
.project-setting-label-row label { margin: 0 0 4px; }
.project-setting-label-row a {
    color: var(--accent);
    flex: 0 0 auto;
    font-size: 12px;
}
.public-links-effective {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}
.public-links-effective > div { min-width: 0; }
.public-links-effective strong {
    display: block;
    font-size: 13px;
    margin-top: 3px;
    overflow-wrap: anywhere;
}
.public-links-effective a { color: var(--text); }
.public-links-label {
    color: var(--text-dim);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.public-links-authoring {
    align-items: end;
    gap: 10px;
    margin-top: 10px;
}
.public-links-authoring .form-group { flex: 1 1 auto; margin: 0; }
.public-links-authoring .btn { flex: 0 0 auto; margin: 0; min-height: 44px; }
.public-links-message {
    background: rgba(139, 92, 246, .08);
    border: 1px solid rgba(139, 92, 246, .2);
    border-radius: 8px;
    margin-top: 12px;
    padding: 12px;
}
.public-links-message.warning { border-color: rgba(245, 158, 11, .35); }
.public-links-message.error { border-color: rgba(248, 113, 113, .4); color: var(--red); }
.public-links-loading,
.public-links-unavailable { color: var(--text-dim); font-size: 13px; }
.public-links-loading i { margin-right: 6px; }
@media (max-width: 700px) {
    .public-links-authoring { align-items: stretch; flex-direction: column; }
    .public-links-effective { align-items: flex-start; flex-direction: column; }
    .project-setting-label-row { align-items: flex-start; flex-direction: column; }
}