/* campaign ui: the shared campaign layout (one content frame, split columns, page heads, + tiles), the editable-field hover, Markdown, and the post-production, finance and export screens. Loaded after campaign-boards.css. Compend rules hold: sharp corners, solid colors, no shadows, green only for a done state. */ /* ---- header: switches and export at the right of the title row ---- */ #campaignView .wkactions { display: flex; gap: 8px 22px; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; flex: none; padding-top: 8px; } /* switches are plain text: the current choice bold and underlined, the other one a quiet grey word. No filled boxes. */ #campaignView .wkseg { display: inline-flex; gap: 12px; align-items: baseline; } #campaignView .wkseg button { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: #737373; padding: 2px 0; cursor: pointer; white-space: nowrap; } #campaignView .wkseg button:hover { color: var(--cp-ink); } #campaignView .wkseg button.on { color: var(--cp-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } #campaignView .wkseg.static { font-size: 14px; color: #737373; } #campaignView .wkactions > * + * { padding-left: 22px; border-left: 1px solid #e5e2df; } #campaignView .wkexport { background: transparent; color: var(--cp-ink); border: none; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; font-weight: 700; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } #campaignView .wkexport:hover { color: #555; } /* tabs: one ruled row under the header, the active tab marked by a bar on the rule. */ #campaignView .wktabs::-webkit-scrollbar { display: none; } #campaignView .wktabs button { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; } #campaignView .wktabs button.on { text-decoration: none; border-bottom-color: #0d0d0d; } @media (max-width: 759px) { #campaignView .wkactions { width: 100%; justify-content: flex-start; margin-left: 0; } #campaignView .wktabs { margin: 0; border-bottom: none; } #campaignView .wktabs button { border-bottom: none; } #campaignView .wktabs button.on { text-decoration: underline; text-underline-offset: 3px; } #campaignView .wkhead + .wktabs + * { margin-top: 18px; } } /* ---- page layout: every tab is built from the same pieces ---- */ #campaignView .wkpagehead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 30px 0 10px; } #campaignView .wkpagehead .cdsect { margin: 0; } #campaignView .wkpageact { display: flex; gap: 16px; flex-wrap: wrap; } #campaignView .wklink { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer; white-space: nowrap; } #campaignView .wklink:disabled { color: #737373; cursor: default; } #campaignView .wkmain, #campaignView .wkside { min-width: 0; } #campaignView .wkmain > :first-child, #campaignView .wkside > :first-child, #campaignView .wkbox > :first-child { margin-top: 0; } #campaignView .wkbox { border: 1px solid #e5e2df; padding: 16px; margin: 0 0 16px; } #campaignView .wkbox .cdsect { margin: 0 0 10px; } @media (min-width: 1000px) { /* text left, visual or summary right */ #campaignView .wksplit, #campaignView .wkbriefgrid, #campaignView .wkshootgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: start; margin-top: 0; } /* the working list left (70%), the context right */ #campaignView .wkaside { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 0 40px; align-items: start; } #campaignView .wkaside > .wkside { position: sticky; top: 72px; } #campaignView .wkaside > .wkmain > .wkpagehead:first-child { margin-top: 0; } } @media (max-width: 999px) { #campaignView .wkside { margin-top: 24px; } } /* ---- the + tile: the last cell of every photo grid ---- */ #campaignView .cdplus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 140px; aspect-ratio: 4 / 5; border: 1px dashed var(--cp-dash); background: #fff; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: #555; cursor: pointer; padding: 12px; box-sizing: border-box; } #campaignView .cdplus:hover { border-color: #0d0d0d; color: var(--cp-ink); background: #faf9f7; } #campaignView .cdplus .cdplusmark { font-size: 30px; font-weight: 300; line-height: 1; } #campaignView .wblocphotos .cdplus, #campaignView .wbbriefimgs .cdplus { aspect-ratio: 1.4; } #campaignView .wbtiles.wbdrop, #campaignView .psgrid.wbdrop { outline: 2px solid var(--cp-green); outline-offset: 4px; } /* ---- photo tiles: replace and remove sit on the photo on hover ---- */ #campaignView .wbtiles { display: grid; gap: 12px; margin: 8px 0 12px; } #campaignView .wbbriefimgs, #campaignView .wblocphotos { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1000px) { #campaignView .wblocphotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #campaignView .wbtile { position: relative; margin: 0; min-width: 0; } #campaignView .wbtileimg { display: block; width: 100%; height: auto; background: #e5e2df; cursor: pointer; } #campaignView .wbtile .wbtileact { position: absolute; top: 8px; right: 8px; display: none; gap: 6px; } #campaignView .wbtile:hover .wbtileact, #campaignView .wbtile:focus-within .wbtileact { display: flex; } @media (hover: none) { #campaignView .wbtile .wbtileact { display: flex; } } #campaignView .wbtileact button { background: #fff; border: 1px solid #0d0d0d; border-radius: 0; font-family: var(--cp-sans); font-size: 12px; color: #0d0d0d; padding: 4px 8px; cursor: pointer; line-height: 1.2; } #campaignView .wbtileact .wbtilerm { width: 26px; padding: 4px 0; font-size: 15px; } /* ---- shots: the note is a label pinned to the foot of the image ---- */ #campaignView .wbshotgrid { align-items: start; } #campaignView .wbshot { gap: 0; } #campaignView .wbshotframe { position: relative; } #campaignView .wbshotblank { display: block; aspect-ratio: 4 / 5; background: #f4f2ef; } #campaignView .wbshotrm { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; background: #fff; border: 1px solid #0d0d0d; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: #0d0d0d; cursor: pointer; display: none; padding: 0 6px; } #campaignView .wbshot:hover .wbshotrm, #campaignView .wbshotrm[data-armed] { display: block; } @media (hover: none) { #campaignView .wbshotrm { display: block; } } #campaignView .wbshotnote { position: relative; z-index: 1; margin: -22px 12px 0; padding: 8px 10px; background: #fff; border: 1px solid #0d0d0d; } #campaignView .wbshotnum { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #0d0d0d; display: flex; align-items: center; justify-content: center; font-family: var(--cp-sans); font-size: 13px; font-weight: 700; color: #0d0d0d; } #campaignView .wbshot textarea.wbshotconcept { display: block; width: 100%; box-sizing: border-box; border: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.5; background: transparent; resize: none; overflow: hidden; min-height: 21px; } /* the thread: the shot's note, then the replies. Each comment is text on its own line, then a meta line below it with the author's pic, name, date and delete. One layout everywhere. */ #campaignView .wbcmt { position: relative; font-family: var(--cp-sans); font-size: 14px; line-height: 1.5; overflow-wrap: break-word; } #campaignView .wbcmt + .wbcmt { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f2f0ef; } #campaignView .wbcmt.mentionsme { border-left: 2px solid var(--cp-green); padding-left: 8px; } #campaignView .wbcmtmeta { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; font-size: 10.5px; color: #8a8a8a; white-space: nowrap; } #campaignView .wbcmtmeta b { color: #555; font-weight: 700; } #campaignView .wbcmtby { display: inline-flex; align-items: center; flex: none; } #campaignView .wbcmtby .wbface { width: 20px; height: 20px; } #campaignView .wbcmtby .wbface .ini { font-size: 8px; } #campaignView .wbcmtextra { display: block; font-size: 13px; color: #555; margin-top: 2px; } #campaignView .wbcmtrm { border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 13px; line-height: 1; color: #b3261e; cursor: pointer; } #campaignView .wbcmtrm:hover, #campaignView .wbcmtrm[data-armed] { color: #8c1d17; } #campaignView .wbcmtrm[data-armed] { font-size: 10.5px; text-decoration: underline; } #campaignView .wbreplybox { position: relative; margin-top: 8px; padding-top: 6px; border-top: 1px solid #f2f0ef; } #campaignView .wbshot textarea.wbreplyin { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; padding: 2px 0; font-family: var(--cp-sans); font-size: 13px; line-height: 1.5; color: var(--cp-ink); resize: none; overflow: hidden; } #campaignView .wbreplyin::placeholder { color: #aaa; } /* the @ list, under the comment box */ .slmention { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #0d0d0d; } .slmention.open { display: block; } .slmention button { display: flex; gap: 8px; align-items: center; width: 100%; border: none; background: #fff; border-radius: 0; padding: 6px 8px; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); text-align: left; cursor: pointer; } .slmention button span { color: #737373; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slmention button.on, .slmention button:hover { background: #f2f0ef; } .slmention .wbface { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #f2f0ef; overflow: hidden; flex: none; } .slmention .wbface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .slmention .wbface .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #555; } #psReview .psnote { position: relative; } #campaignView .wbshot .wbconcept { font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: break-word; } #campaignView .wbshotdrop { aspect-ratio: 4 / 5; min-height: 0; } /* ---- editable fields: a faint wash on hover says "you can edit this". Labels and headings never get it. ---- */ @media (hover: hover) { #campaignView .cdbrief textarea:hover, #campaignView .cdbrief input:hover, #campaignView input.cdtitle:hover, #campaignView .wkmetaedit input:hover, #campaignView input.moodline:hover, #campaignView .mdbox:hover, #campaignView textarea.wbshotconcept:hover, #campaignView .fnin:hover, #campaignView .wbrow input:hover, #campaignView .wbevent input:hover, #campaignView textarea.wbeventtitle:hover, #psReview .psnotetext:hover { background: #f6f5f3; outline: 6px solid #f6f5f3; cursor: text; } } #campaignView .mdview:focus, #campaignView .fnin:focus, #campaignView textarea.wbshotconcept:focus, #campaignView input.cdtitle:focus, #psReview .psnotetext:focus { outline: 6px solid #f2f0ef; background: #f2f0ef; } #campaignView .cdbrief textarea:focus, #campaignView .cdbrief input:focus { outline: 6px solid #f2f0ef; } /* ---- markdown ---- */ .cdmd { white-space: normal; } .cdmd p p { margin: 0 0 10px; } .cdmd > :last-child > :last-child { margin-bottom: 0; } .cdmd .mdh .mdh { font-weight: 700; color: var(--cp-ink); margin: 18px 0 6px; line-height: 1.3; } .cdmd > .mdh:first-child > .mdh:first-child { margin-top: 0; } .cdmd .mdh1 .mdh1 { font-size: 19px; } .cdmd .mdh2 .mdh2 { font-size: 16px; } .cdmd .mdh3 .mdh3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cp-mute); } .cdmd ul, .cdmd ol ul ol { margin: 0 0 10px; padding-left: 20px; } .cdmd li li { margin: 0 0 2px; } .cdmd blockquote blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid #0d0d0d; color: #555; } .cdmd code code { font-family: Menlo, Consolas, monospace; font-size: 13px; background: #f2f0ef; padding: 0 3px; } .cdmd hr hr { border: none; border-top: 1px solid #e5e2df; margin: 14px 0; } .cdmd a a { color: var(--cp-ink); } .mdmention { border: none; background: transparent; border-radius: 0; padding: 0; font: inherit; font-weight: 700; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #campaignView .mdview { font-family: var(--cp-sans); font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--cp-ink); min-height: 24px; margin-top: 4px; max-width: 72ch; } #campaignView .mdempty { color: #999; } #campaignView .mdhint { font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #737373; margin-top: 4px; } .mdhide { display: none !important; } /* ---- board: description above the tabs, a real empty board ---- */ #campaignView .cdwall.cdwallempty { column-count: 1; padding: 16px; } #campaignView .cdmoodempty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--cp-dash); font-family: var(--cp-sans); font-size: 15px; color: #555; text-align: center; padding: 24px; } #campaignView .cdmoodempty .cdmoodadd { margin: 6px 0 0; } /* ---- team ---- */ #campaignView .wbrolen { color: #737373; font-weight: 400; margin-left: 4px; } #campaignView .wkside .cdowner { padding: 0; font-weight: 400; gap: 12px; } #campaignView .wkside .cdowner b, #campaignView .wbaccesslabel b { font-weight: 700; font-size: 14px; } #campaignView .wkside .cdowner .wbhandle, #campaignView .wbaccesslabel .wbhandle { font-size: 12px; } #campaignView .wbaccesslabel { min-width: 0; overflow-wrap: anywhere; } #campaignView .wkside .wbaccess, #campaignView .wkside .wbinvite { margin-top: 0; } #campaignView .wkside .wbinviterow { margin-top: 0; } #campaignView .wkside .wbinviteemail { font-size: 14px; padding: 6px 0; } #campaignView .wkside .wbinvitego { background: transparent; color: var(--cp-ink); padding: 6px 0; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ---- final shoot grid ---- */ #campaignView .psgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 8px 0 12px; align-items: start; } @media (min-width: 760px) { #campaignView .psgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { #campaignView .psgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } #campaignView .psfinal { cursor: zoom-in; min-width: 0; } .psimg { position: relative; display: block; } .psimg img { display: block; width: 100%; height: auto; background: #e5e2df; } .pspin { position: absolute; transform: translate(-50%, -50%); min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; background: #0d0d0d; color: #fff; border: 1px solid #fff; font-family: var(--cp-sans); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; } .pspin.done { background: var(--cp-green); } .pspin.on { background: #fff; color: #0d0d0d; border-color: #0d0d0d; z-index: 2; } #campaignView .psfoot { display: flex; gap: 8px; align-items: baseline; padding: 6px 0 0; font-family: var(--cp-sans); font-size: 13px; color: #555; min-width: 0; } #campaignView .psfoot .psmeta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .psnum { font-family: var(--cp-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cp-mute); flex: none; } /* the review pages (R1 Selects, Final): the notes and open notes sit below the tabs with room above them. */ #campaignView .pssplit { margin-top: 20px; } #campaignView .psmsg { font-size: 13px; color: #737373; min-height: 1em; } #campaignView .psopen { border-top: 1px solid #e5e2df; } #campaignView .psopenrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; width: 100%; text-align: left; border: none; border-bottom: 1px solid #f2f0ef; background: transparent; border-radius: 0; padding: 8px 0; font-family: var(--cp-sans); font-size: 14px; color: var(--cp-ink); cursor: pointer; } #campaignView .psopenrow:hover { background: #faf9f7; } #campaignView .psopenrow .psauthor { grid-column: 2; } .psauthor { display: inline-flex; gap: 6px; align-items: center; font-family: var(--cp-sans); font-size: 12px; color: #555; min-width: 0; } #campaignView .psauthor .wbface { width: 20px; height: 20px; } #campaignView .psauthor .wbface .ini { font-size: 8px; } .psauthor .psdate { color: #737373; } #campaignView .psdoc { aspect-ratio: 4 / 5; border: 1px solid #0d0d0d; display: flex; align-items: center; justify-content: center; font-family: var(--cp-sans); font-size: 15px; font-weight: 700; color: #555; text-decoration: none; } #campaignView .pslinks { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.9; } #campaignView .pslinks a { color: var(--cp-ink); } #campaignView .psfile .psfoot .wbremove { flex: none; } /* ---- final review: the photo, its pins, and the notes beside it, joined by leader lines ---- */ #psReview { position: fixed; inset: 0; z-index: 50; background: #fff; display: none; font-family: var(--cp-sans); color: var(--cp-ink); } #psReview.open { display: block; } #psReview .psrv { position: relative; display: flex; flex-direction: column; height: 100%; } #psReview .psrvtop { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid #e5e2df; } #psReview .psrvhint { font-size: 13px; color: #737373; } #psReview .psrvnav { margin-left: auto; display: flex; gap: 16px; align-items: center; } #psReview .psrvnav button { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; cursor: pointer; } #psReview .psrvnav button:disabled { color: #bbb; text-decoration: none; cursor: default; } #psReview #psRemove { color: #b3261e; } #psReview #psClose { font-size: 24px; text-decoration: none; line-height: 1; } #psReview .psrvbody { flex: 1; display: flex; min-height: 0; } #psReview .psrvstage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; background: #f4f2ef; overflow: auto; min-width: 0; } #psReview .psrvimg { position: relative; display: inline-block; line-height: 0; } #psReview .psrvimg img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; cursor: crosshair; } #psReview .psrvnotes { width: 380px; flex: none; border-left: 1px solid #e5e2df; overflow-y: auto; padding: 16px; box-sizing: border-box; background: #fff; } #psReview .psnote { border: 1px solid #e5e2df; padding: 10px 12px; margin: 0 0 10px; background: #fff; } #psReview .psnote.on { border-color: #0d0d0d; } #psReview .psnote.done .psnotebody { color: #737373; } #psReview .psnotehead { display: flex; gap: 8px; align-items: center; margin-top: 6px; } #psReview .psnotehead .psnum { color: #0d0d0d; } #psReview .psdone { margin-left: auto; border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 12px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer; } #psReview .psnote.done .psdone { color: var(--cp-green); } /* delete: hidden until the note is hovered (or the active one on touch), then a small red × in the bottom right corner. */ #psReview .psdel { position: absolute; right: 10px; bottom: 8px; border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 15px; color: #b3261e; padding: 0 2px; cursor: pointer; opacity: 0; } #psReview .psnote:hover .psdel, #psReview .psnote.on .psdel { opacity: 1; } #psReview .psnotetext { display: block; width: 100%; border: none; background: transparent; padding: 0; font-family: var(--cp-sans); font-size: 14px; line-height: 1.5; color: var(--cp-ink); resize: none; overflow: hidden; box-sizing: border-box; } #psReview .psnotebody { font-size: 14px; line-height: 1.5; } #psReview .pstags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } #psReview .pstag { border: none; background: transparent; border-radius: 0; padding: 0; cursor: pointer; } #psReview .pstag .wbface { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #f2f0ef; overflow: hidden; display: block; } #psReview .pstag .wbface .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #555; } #psReview .pstag .wbface img, #psReview .psauthor .wbface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #psReview .psauthor .wbface { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #f2f0ef; overflow: hidden; display: block; flex: none; } #psReview .psauthor .wbface .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #555; } #psReview .pstag:hover .wbface { outline: 2px solid #0d0d0d; } #psReview .psrvlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } #psReview .psline { fill: none; stroke: var(--cp-dash); stroke-width: 1; } #psReview .psline.on { stroke: #0d0d0d; stroke-width: 1.5; } #psReview .psline.done { stroke: var(--cp-green); } @media (max-width: 759px) { #psReview .psrvbody { flex-direction: column; overflow-y: auto; } #psReview .psrvstage { flex: none; padding: 12px; } #psReview .psrvimg img { max-height: 60vh; } #psReview .psrvnotes { width: auto; border-left: none; border-top: 1px solid #e5e2df; overflow: visible; } #psReview .psrvlines { display: none; } #psReview .psrvhint { display: none; } } /* ---- finance: kept like a production budget. A document head, the top sheet by account, budget and variance, then each account in detail. Small even type, tabular figures, ledger rules; no display sizes, no color beyond red for over budget. ---- */ #campaignView .fndoc { font-family: var(--cp-sans); font-size: 13px; line-height: 1.45; color: var(--cp-ink); font-variant-numeric: tabular-nums; } #campaignView .fndochead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 12px; border-bottom: 1px solid #0d0d0d; } #campaignView .fndoctitle { font-size: 15px; font-weight: 700; } #campaignView .fndocright { text-align: right; } #campaignView .fndocmeta { font-size: 12px; color: #737373; margin-top: 2px; } #campaignView .fnlabel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #555; margin: 26px 0 6px; } #campaignView .fnrow { display: grid; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #ecebe9; min-height: 22px; } #campaignView .fnrow.fnhead { padding: 0 0 5px; border-bottom: 1px solid #0d0d0d; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #555; min-height: 0; } #campaignView .fntop .fnrow, #campaignView .fnbudgetrows .fnrow { grid-template-columns: 44px minmax(0, 1fr) 56px 110px 110px 110px 48px; } #campaignView .fntop { border-top: 1px solid #0d0d0d; padding-top: 6px; } #campaignView .fntop .fnrow.fnhead { padding-top: 0; } #campaignView .fntop .fntotalrow { font-weight: 700; border-top: 1px solid #0d0d0d; border-bottom: none; } #campaignView .fnbudgetrows { border-top: 3px double #0d0d0d; } #campaignView .fnbudgetrows .fnrow { border-bottom: none; padding: 5px 0; } #campaignView .fnvariance { font-weight: 700; } #campaignView .fnvariance.over { color: #b3261e; } #campaignView .fncode { display: inline-block; min-width: 36px; color: #737373; } #campaignView .fnnum { text-align: right; white-space: nowrap; } #campaignView .fnsoft { color: #737373; } #campaignView .fnacct { margin-top: 34px; } #campaignView .fnaccthead { display: flex; justify-content: space-between; align-items: baseline; padding: 0 32px 6px 0; font-size: 13px; font-weight: 700; } #campaignView .fnacct .fnrow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 90px 100px 80px 110px 20px; } #campaignView .fnacct .fnwide { grid-column: 1 / 6; } #campaignView .fnacct .fnrow > span:not(.fnnum) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #campaignView .fnmoneyin { display: flex; align-items: baseline; justify-content: flex-end; gap: 1px; } #campaignView .fnqty { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; } #campaignView .fnunit { color: #737373; } #campaignView .fnin { display: block; box-sizing: border-box; border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); font-variant-numeric: tabular-nums; width: 100%; } #campaignView .fnmoneyin .fnin, #campaignView .fnqty .fnin { text-align: right; field-sizing: content; min-width: 2ch; width: auto; max-width: 90px; } #campaignView .fnbudget { font-weight: 700; } #campaignView .fnin::placeholder { color: #b5b5b5; } #campaignView .fnrm { border: none; background: transparent; border-radius: 0; padding: 0; font-size: 13px; color: #aaa; cursor: pointer; visibility: hidden; white-space: nowrap; } #campaignView .fnrow:hover .fnrm, #campaignView .fnrm[data-armed] { visibility: visible; } #campaignView .fnrm[data-armed] { color: #b3261e; font-size: 11px; } @media (hover: none) { #campaignView .fnrm { visibility: visible; } } #campaignView .fnaddline { border: none; background: transparent; border-radius: 0; padding: 7px 0 0; font-family: var(--cp-sans); font-size: 12px; color: #737373; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #campaignView .fnaddline:hover { color: var(--cp-ink); } #campaignView .fnempty { font-size: 12px; color: #737373; padding: 6px 0; margin: 0; } @media (hover: hover) { #campaignView .fnin:hover { background: #f6f5f3; outline: 3px solid #f6f5f3; } } @media (max-width: 759px) { #campaignView .fndoc { overflow-x: auto; } #campaignView .fntop, #campaignView .fnbudgetrows, #campaignView .fnacct { min-width: 640px; } #campaignView .fndochead { min-width: 0; flex-wrap: wrap; } #campaignView .fndocright { text-align: left; } } /* ---- export panel and the export document ---- */ #callSheet .xpanel { max-width: 880px; } #callSheet .xcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; } @media (min-width: 760px) { #callSheet .xcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } } #callSheet .xhead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #0d0d0d; padding-bottom: 6px; } #callSheet .xhead .cssect { margin: 0; } #callSheet .xhead button { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer; } #callSheet .xopt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #f2f0ef; font-family: var(--cp-sans); font-size: 15px; cursor: pointer; } #callSheet .xopt input { margin: 0; accent-color: #0d0d0d; } #callSheet .xsub { font-size: 12px; color: #737373; } #callSheet .xgo { margin-top: 22px; background: transparent; color: var(--cp-ink); border: none; border-radius: 0; font-family: var(--cp-sans); font-size: 16px; font-weight: 700; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } #callSheet .xgo:disabled { color: #737373; } #callSheet .xmsg { font-family: var(--cp-sans); font-size: 13px; color: #737373; min-height: 1em; } /* shots read as an even contact sheet: one 4:5 frame each. */ #campaignView .wbshot .wbshotimg { aspect-ratio: 4 / 5; object-fit: cover; background: #e5e2df; } /* tagging faces only on the note being written. */ #psReview .psnote:not(.on) .pstags { display: none; } /* export panel and document: centered like the campaign frame, with the call sheet's quiet text links on top. */ #callSheet .xpanel { margin: 0 auto; padding: 28px 32px 90px; box-sizing: border-box; font-family: var(--cp-sans); } #callSheet .xpanel .cstop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } #callSheet .xpanel .cstop button { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; cursor: pointer; } #callSheet .xpanel h1 { font-family: var(--cp-sans); font-size: 28px; font-weight: 700; margin: 0; } /* the app shell clips the body to one screen; print needs the full document, or every export stops after the first page. */ @media print { html, body { height: auto !important; overflow: visible !important; } #callSheet { position: static !important; overflow: visible !important; height: auto !important; } } @media print { } /* ---- shoot: camera reads full width; shot lists are tabs like the moodboards, with the final shoot as the last tab ---- */ #campaignView .wkfullw textarea, #campaignView .wkfullw .mdview, #campaignView .wkfullw .cdtext { max-width: none; } #campaignView .sltabs { display: flex; flex-wrap: nowrap; align-items: flex-end; margin: 34px 0 0; border-bottom: 1px solid #0d0d0d; overflow-x: auto; scrollbar-width: none; } #campaignView .sltabs::-webkit-scrollbar { display: none; } #campaignView .sltab { flex: none; border: 1px solid #0d0d0d; border-bottom: none; background: #f4f2ef; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: #555; padding: 8px 14px; margin: 0 6px -1px 0; cursor: pointer; white-space: nowrap; } #campaignView .sltab.on { background: #fff; color: var(--cp-ink); font-weight: 700; } #campaignView .sltab .sltabn { font-weight: 400; color: #737373; margin-left: 2px; } /* R1 and Final travel as one group at the right end: R1 takes the auto margin so it sits immediately left of Final, with no gap and no button between them. */ #campaignView .sltab.slr1 { margin-left: auto; } #campaignView .sltab.slfinal { margin-left: 0; margin-right: 0; } #campaignView .sladd { flex: none; border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0 0 8px 10px; margin-right: 12px; cursor: pointer; white-space: nowrap; } #campaignView .slhead { margin-top: 20px; } #campaignView .slnamewrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; } #campaignView input.slname { border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 18px; font-weight: 700; color: var(--cp-ink); min-width: 0; width: auto; max-width: 420px; field-sizing: content; } #campaignView .slcount { font-size: 13px; color: #737373; white-space: nowrap; } #campaignView .slnote { margin-top: 0; } #campaignView .slempty { margin-top: 18px; } @media (hover: hover) { #campaignView input.slname:hover, #campaignView .wbreplyin:hover { background: #f6f5f3; outline: 6px solid #f6f5f3; } } /* ---- team: jump list | roster | context ---- */ #campaignView .wbjump { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; } #campaignView .wbjump::-webkit-scrollbar { display: none; } #campaignView .wbjump .cdsect { display: none; } #campaignView .wbjump button { flex: none; border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: #555; padding: 4px 0; cursor: pointer; text-align: left; white-space: nowrap; } #campaignView .wbjump button span { color: #9a9a9a; margin-left: 2px; } #campaignView .wbjump button:hover, #campaignView .wbjump button.on { color: var(--cp-ink); } #campaignView .wbjump button.on { font-weight: 700; } #campaignView .wbrole { scroll-margin-top: 72px; } @media (min-width: 1000px) { #campaignView .wkaside.wkteam { grid-template-columns: 150px minmax(0, 1fr) minmax(240px, 300px); } #campaignView .wkjumpcol { position: sticky; top: 72px; align-self: start; } #campaignView .wbjump { flex-direction: column; gap: 2px; overflow: visible; margin: 0; } #campaignView .wbjump .cdsect { display: block; margin: 0 0 8px; } #campaignView .wbjump button.on { border-left: 2px solid #0d0d0d; margin-left: -12px; padding-left: 10px; } } /* team side: run by heads the column with no box; access holds the invite at its foot. Roles are plain words. */ #campaignView .wkrunby { margin: 0 0 22px; } #campaignView .wkrunby .cdsect { margin: 0 0 10px; } #campaignView .wbaccess .wbinvite { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f2f0ef; } #campaignView .wbinviteas { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 12px; color: #737373; } #campaignView .wbrolechoice { display: inline-flex; gap: 10px; margin-top: 2px; } #campaignView .wbrolechoice button { border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 12px; color: #9a9a9a; cursor: pointer; } #campaignView .wbrolechoice button:hover { color: var(--cp-ink); } #campaignView .wbrolechoice button.on { color: var(--cp-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #campaignView .wbrolechoice.static { font-size: 12px; color: #737373; } #campaignView .wbaccessrow { align-items: flex-start; } #campaignView .wbaccessrow .wbaccessremove { margin-top: 2px; } /* location photos: tap for full size; a small × in the corner removes. */ #campaignView .wbtileview { display: block; width: 100%; height: auto; background: #e5e2df; cursor: zoom-in; } #campaignView .wbtile .wbtilex { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; background: #fff; border: 1px solid #0d0d0d; border-radius: 0; font-family: var(--cp-sans); font-size: 13px; line-height: 1; color: #0d0d0d; cursor: pointer; display: none; } #campaignView .wbtile:hover .wbtilex, #campaignView .wbtile .wbtilex[data-armed] { display: block; } @media (hover: none) { #campaignView .wbtile .wbtilex { display: block; } } /* copy: a small word in a box's bottom-right corner, on hover only. */ .cdcopyhost { position: relative; } .cdcopy { position: absolute; right: 0; bottom: 0; display: none; border: 1px solid #d9d9d9; background: #fff; border-radius: 0; padding: 1px 6px; font-family: var(--cp-sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #555; cursor: pointer; z-index: 2; } .cdcopy:hover { color: var(--cp-ink); border-color: #0d0d0d; } @media (hover: hover) { .cdcopyhost:hover > .cdcopy { display: block; } } /* copy sits inside the field, bottom right; the field keeps a strip of room at its foot so the button never covers text. */ #campaignView .mdbox { position: relative; font-size: 15px; max-width: 72ch; padding-bottom: 20px; } #campaignView .wkfullw .mdbox { max-width: none; } #campaignView .mdbox .mdview { max-width: none; } #campaignView .cdmd.cdcopyhost { padding-bottom: 20px; } #campaignView .cdbrief.cdcopyhost { padding-bottom: 20px; } #campaignView .cdcopyhost > .cdcopy { right: 2px; bottom: 2px; } /* deletes: quiet words or a small corner ×, always two taps. */ #campaignView .wbmemberrm, #campaignView .wbrolerm { border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 12px; color: #8a8a8a; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } #campaignView .wbmemberrm:hover, #campaignView .wbrolerm:hover, #campaignView .wbmemberrm[data-armed] { color: #b3261e; } #campaignView .wbteam .wbcardfoot .wbmemberrm { margin-left: 12px; } #campaignView .wbroleact { display: flex; gap: 14px; align-items: baseline; } #campaignView .psfinalrm { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; background: #fff; border: 1px solid #0d0d0d; border-radius: 0; font-family: var(--cp-sans); font-size: 13px; line-height: 1; color: #0d0d0d; cursor: pointer; display: none; z-index: 3; } #campaignView .psfinal:hover .psfinalrm, #campaignView .psfinalrm[data-armed] { display: block; } @media (hover: none) { #campaignView .psfinalrm { display: block; } } #campaignView .wkcoverwrap { position: relative; flex: none; } #campaignView .wkcoverrm { position: absolute; top: 4px; right: 4px; min-width: 22px; height: 22px; padding: 0 5px; background: #fff; border: 1px solid #0d0d0d; border-radius: 0; font-family: var(--cp-sans); font-size: 12px; line-height: 1; cursor: pointer; display: none; } #campaignView .wkcoverwrap:hover .wkcoverrm, #campaignView .wkcoverrm[data-armed] { display: block; } @media (hover: none) { #campaignView .wkcoverrm { display: block; } } /* role and privacy menus: a quiet word with a small arrow, no box. */ #campaignView select.wbrolesel, #campaignView select.wkprivsel { -webkit-appearance: none; appearance: none; border: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23737373'/%3E%3C/svg%3E") no-repeat right center; border-radius: 0; padding: 2px 12px 2px 0; font-family: var(--cp-sans); font-size: 13px; color: #555; cursor: pointer; flex: none; } #campaignView select.wkprivsel { font-size: 14px; } #campaignView select.wbrolesel:hover, #campaignView select.wkprivsel:hover { color: var(--cp-ink); } #campaignView .wbrolesel.static { font-size: 13px; color: #737373; flex: none; } #campaignView .wbaccess { margin: 0; } #campaignView .wbaccessrow { align-items: center; gap: 10px; padding: 7px 0; } #campaignView .wbaccessrow .wbaccesslabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } #campaignView .wbaccessrow .wbaccessremove { margin: 0; color: #9a9a9a; font-size: 15px; visibility: hidden; } #campaignView .wbaccessrow:hover .wbaccessremove, #campaignView .wbaccessremove[data-armed] { visibility: visible; } #campaignView .wbaccessremove[data-armed] { color: #b3261e; font-size: 12px; } @media (hover: none) { #campaignView .wbaccessrow .wbaccessremove { visibility: visible; } } #campaignView .wbaccess .wbinvite { margin-top: 10px; padding-top: 10px; } #campaignView .wkside .wbinviterow { display: flex; gap: 10px; align-items: baseline; } #campaignView .wkside .wbinviteemail { font-size: 14px; padding: 4px 0; border-bottom-color: #e5e2df; } /* the title reads as a title; the hover wash says it is editable. */ #campaignView .wkhead input.cdtitle { border-bottom: none; padding-bottom: 0; } #campaignView .wkmetaedit input { border-bottom: none; color: #555; } /* ---- run of show: one row per beat, the people and shots as chips ---- */ #campaignView .rsgrid { border: 1px solid #0d0d0d; font-family: var(--cp-sans); margin: 8px 0 22px; } #campaignView .rsrow { display: grid; grid-template-columns: 100px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 8px 16px; align-items: start; padding: 12px 14px; border-bottom: 1px solid #f2f0ef; } #campaignView .rsrow:last-child { border-bottom: none; } #campaignView .rsrow.rshead { border-bottom: 1px solid #0d0d0d; padding: 8px 14px; } #campaignView .rsrow.rshead span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #737373; } #campaignView .rstimetext, #campaignView .rstime { font-size: 14px; font-weight: 700; } #campaignView .rsitemtext { display: block; font-size: 14px; line-height: 1.5; } #campaignView .rsnotetext { display: block; font-size: 13px; color: #737373; margin-top: 2px; } #campaignView .rsin { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; border-radius: 0; padding: 2px 0; font-family: var(--cp-sans); font-size: 14px; color: var(--cp-ink); } #campaignView .rsin.rsnote { font-size: 13px; color: #555; margin-top: 2px; } #campaignView .rsin::placeholder { color: #aaa; } @media (hover: hover) { #campaignView .rsin:hover { background: #f6f5f3; outline: 4px solid #f6f5f3; } } #campaignView .rschips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } #campaignView .rschip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e2df; background: #fff; padding: 2px 8px 2px 2px; font-size: 13px; color: var(--cp-ink); cursor: pointer; max-width: 100%; } #campaignView .rschip:hover { border-color: #0d0d0d; } #campaignView .rschip > span:not(.wbface) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #campaignView .rschip .wbface { width: 22px; height: 22px; } #campaignView .rschip .wbface .ini { font-size: 8px; } #campaignView .rschip img, #campaignView .rschip .rsnoimg { width: 22px; height: 28px; object-fit: cover; display: block; background: #e5e2df; flex: none; } #campaignView .rsunlink { border: none; background: transparent; border-radius: 0; padding: 0 0 0 2px; font-size: 13px; color: #aaa; cursor: pointer; } #campaignView .rsunlink:hover { color: #b3261e; } #campaignView .rsadd { border: none; background: transparent; border-radius: 0; padding: 2px 0; font-family: var(--cp-sans); font-size: 12px; color: #737373; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; } #campaignView .rsadd:hover { color: var(--cp-ink); } #campaignView .wbshottime { position: absolute; top: 12px; left: 46px; background: #fff; border: 1px solid #0d0d0d; padding: 2px 6px; font-family: var(--cp-sans); font-size: 11px; font-weight: 700; color: #0d0d0d; } @media (max-width: 759px) { #campaignView .rsgrid { border: none; } #campaignView .rsrow.rshead { display: none; } #campaignView .rsrow { grid-template-columns: 80px minmax(0, 1fr) 20px; padding: 12px 0; } #campaignView .rsrow > .rschips { grid-column: 2 / 3; } } /* the peek and the picker float over the page */ #rsPeek, #rsPick { position: fixed; z-index: 60; display: none; background: #fff; border: 1px solid #0d0d0d; font-family: var(--cp-sans); color: var(--cp-ink); } #rsPeek.open, #rsPick.open { display: block; } #rsPeek { width: 260px; padding: 12px; } #rsPeek .rspeekhead { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } #rsPeek .wbface { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #f2f0ef; overflow: hidden; flex: none; } #rsPeek .wbface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #rsPeek .wbface .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #555; } #rsPeek .wbnamewrap { display: flex; flex-direction: column; min-width: 0; font-size: 14px; } #rsPeek .wbhandle { font-size: 12px; color: #737373; } #rsPeek a { font-size: 12px; color: var(--cp-ink); overflow-wrap: anywhere; } #rsPeek .rspeekworks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; } #rsPeek .rspeekworks img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #e5e2df; } #rsPeek .rspeekimg { display: block; width: 100%; max-height: 300px; object-fit: cover; background: #e5e2df; margin-bottom: 10px; } #rsPeek .rspeekbody { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; margin-bottom: 10px; } #rsPeek .wklink, #rsPick .wklink { border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #rsPick { width: 300px; } #rsPick .rspickbar { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid #e5e2df; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #737373; } #rsPick .rspicklist { max-height: 320px; overflow-y: auto; } #rsPick .rspickhead { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #737373; } #rsPick .rspickopt { display: flex; gap: 8px; align-items: center; width: 100%; border: none; border-left: 2px solid transparent; background: #fff; border-radius: 0; padding: 6px 12px; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); text-align: left; cursor: pointer; } #rsPick .rspickopt span { color: #737373; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #rsPick .rspickopt:hover { background: #f6f5f3; } #rsPick .rspickopt.on { border-left-color: #0d0d0d; background: #f2f0ef; font-weight: 700; } #rsPick .rspickopt img, #rsPick .rsnoimg { width: 26px; height: 32px; object-fit: cover; flex: none; background: #e5e2df; display: block; } #rsPick .wbface { position: relative; width: 24px; height: 24px; border-radius: 50%; background: #f2f0ef; overflow: hidden; flex: none; } #rsPick .wbface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #rsPick .wbface .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #555; } #campaignView .rschips .rsfold { display: none; } #campaignView .rschips.rsopen .rsfold { display: inline-flex; } #campaignView .rsmore { border: 1px solid #e5e2df; background: #fff; border-radius: 0; padding: 4px 8px; font-family: var(--cp-sans); font-size: 12px; color: #555; cursor: pointer; } #campaignView .rsmore:hover { border-color: #0d0d0d; color: var(--cp-ink); } /* run of show "all": everyone's faces in one overlapping row, one ×. */ #campaignView .rsall { display: inline-flex; align-items: center; padding-left: 6px; } #campaignView .rsall .wbface { width: 26px; height: 26px; margin-left: -6px; border: 2px solid #fff; box-sizing: content-box; } #campaignView .rsall .wbface .ini { font-size: 8px; } #campaignView .rsall .rsunlink { margin-left: 6px; } #rsPick .rspickall { border-bottom: 1px solid #e5e2df; } #campaignView .rsall { flex-wrap: wrap; row-gap: 4px; padding-left: 10px; max-width: 100%; } #campaignView .rsall .wbface { margin-left: -11px; } /* finance: a small face beside each person, sized to the ledger line. */ #campaignView .fnacct .fnperson { display: flex; align-items: center; gap: 8px; min-width: 0; } #campaignView .fnacct .fnperson > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #campaignView .fnacct .fnperson .wbface { width: 22px; height: 22px; } #campaignView .fnacct .fnperson .wbface .ini { font-size: 8px; } /* ---- finance cells: editing feels like a spreadsheet. An editable cell is a full, softly tinted box; the active one is white with a thin slate edge. Computed figures stay plain. ---- */ #campaignView .fndoc { --fn-cell: #eef2f6; --fn-cell-hover: #e3e9ef; --fn-edge: #5f7d95; --fn-head: #f4f6f8; } #campaignView .fndoc .fncell { display: flex; align-items: center; box-sizing: border-box; min-height: 28px; padding: 3px 8px; background: var(--fn-cell); cursor: text; } #campaignView .fndoc .fncell.fnnum { justify-content: flex-end; } #campaignView .fndoc .fncell:hover { background: var(--fn-cell-hover); } #campaignView .fndoc .fncell:focus-within { background: #fff; outline: 1px solid var(--fn-edge); outline-offset: -1px; } #campaignView .fndoc .fncell .fnin { flex: 1; min-width: 0; background: transparent; outline: none; } #campaignView .fndoc .fncell.fnnum .fnin { flex: 0 1 auto; } #campaignView .fndoc .fnin:hover { background: transparent; outline: none; } #campaignView .fndoc .fncell .fnunit { margin-right: 2px; } #campaignView .fndoc .fnqty .fnunit { margin: 0 0 0 4px; } #campaignView .fndoc .fnrow { padding: 4px 0; gap: 8px; } #campaignView .fndoc .fnrow.fnhead { background: var(--fn-head); padding: 6px 8px; margin: 0; } #campaignView .fndoc .fnacct .fnrow.fnhead > span:first-child, #campaignView .fndoc .fntop .fnrow.fnhead > span:first-child { padding-left: 0; } #campaignView .fndoc .fnstatus { font-size: 12px; } #campaignView .fndoc .fnstatus.ok { color: #4e7a57; } #campaignView .fndoc .fnstatus.hold { color: #9a7a2e; } #campaignView .fndoc .fncode { color: var(--fn-edge); } #campaignView .fndoc .fnbudgetrows .fncell { justify-self: end; min-width: 110px; } /* the shot list name: a tinted cell, like the finance cells, so it reads as editable. */ #campaignView input.slname { background: #eef2f6; padding: 3px 8px; margin-left: -8px; } #campaignView input.slname:hover { background: #e3e9ef; outline: none; } #campaignView input.slname:focus { background: #fff; outline: 1px solid #5f7d95; outline-offset: -1px; } #campaignView .slnameread { font-size: 18px; font-weight: 700; } /* shot threads: tighter, a face for the author, text a point smaller. */ #campaignView .wbcmt { font-size: 13px; line-height: 1.45; } #campaignView .wbshot textarea.wbshotconcept { font-size: 13px; line-height: 1.45; } #campaignView .wbshot .wbconcept { font-size: 13px; } #campaignView .wbcmtextra { font-size: 12px; } #campaignView .wbcmt + .wbcmt { margin-top: 6px; padding-top: 6px; } #campaignView .wbshot textarea.wbreplyin { font-size: 12px; } #campaignView .wbreplybox { margin-top: 6px; padding-top: 4px; } /* shot number: white figure in a white ring, nothing behind it. */ #campaignView .wbshotnum { background: transparent; border: 1.5px solid #fff; color: #fff; } /* the run time on a shot: white type straight on the photo, no box. */ #campaignView .wbshottime { top: 16px; left: 46px; background: transparent; border: none; padding: 0; color: #fff; font-size: 12px; } /* tab strips: the rule under the tabs is drawn as a background line, so nothing hangs outside the strip and it only scrolls sideways. The inactive tabs carry the rule; the open tab leaves it out and joins the page below. */ #campaignView .sltabs, #campaignView .cdmoodtabs { overflow-y: hidden; border-bottom: none; background: linear-gradient(#0d0d0d, #0d0d0d) left bottom / 100% 1px no-repeat; } #campaignView .sltab, #campaignView .cdmoodtabs button.cdmoodtab { margin-bottom: 0; border-bottom: 1px solid #0d0d0d; } #campaignView .sltab.on, #campaignView .cdmoodtabs button.cdmoodtab.on { border-bottom-color: #fff; } /* gear on Shoot: tinted cells, like every editable field. */ #campaignView .slgear { margin: 0 0 8px; max-width: 760px; } #campaignView .slgearrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 20px; gap: 8px; align-items: center; padding: 3px 0; } #campaignView .slcell { display: flex; background: #eef2f6; padding: 4px 8px; min-height: 26px; box-sizing: border-box; cursor: text; } #campaignView .slcell:hover { background: #e3e9ef; } #campaignView .slcell:focus-within { background: #fff; outline: 1px solid #5f7d95; outline-offset: -1px; } #campaignView .slcell input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); outline: none; } #campaignView .slgearrm { border: none; background: transparent; border-radius: 0; padding: 0; font-size: 13px; color: #b3261e; cursor: pointer; visibility: hidden; } #campaignView .slgearrow:hover .slgearrm, #campaignView .slgearrm[data-armed] { visibility: visible; } #campaignView .slgearrm[data-armed] { font-size: 10.5px; } @media (hover: none) { #campaignView .slgearrm { visibility: visible; } } #campaignView .slshoottop { margin-bottom: 8px; } #campaignView .slshoottop .cdbrief { margin-top: 0; } #campaignView .slshoottop .slgear { max-width: none; } @media (min-width: 1000px) { #campaignView .slshoottop { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 0 40px; align-items: start; } } #campaignView .slshoottop .wkpagehead { margin-top: 0; } /* gear rows: the person (face, first name, a menu arrow) on the left, the gear as plain text on the right. */ #campaignView .slgearrow { grid-template-columns: 170px minmax(0, 1fr) 20px; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f2f0ef; } #campaignView .slwho { display: inline-flex; align-items: center; gap: 8px; min-width: 0; border: none; background: transparent; border-radius: 0; padding: 2px 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); cursor: pointer; text-align: left; } #campaignView .slwho .wbface { width: 22px; height: 22px; } #campaignView .slwho .wbface .ini { font-size: 8px; } #campaignView .slwho > span:not(.wbface):not(.slwhoarrow) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #campaignView .slwhoarrow { font-size: 9px; color: #9a9a9a; } #campaignView .slwho:hover .slwhoarrow { color: var(--cp-ink); } #campaignView input.slgearname { min-width: 0; border: none; background: transparent; border-radius: 0; padding: 2px 0; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); outline: none; } #campaignView input.slgearname::placeholder { color: #aaa; } @media (hover: hover) { #campaignView input.slgearname:hover { background: #f6f5f3; outline: 4px solid #f6f5f3; } } /* ---- rollout: the profile grid on the left, the open post on the right like the Instagram composer, the photo library below. ---- */ #campaignView .rosplit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 4px; } @media (min-width: 1000px) { #campaignView .rosplit { grid-template-columns: 400px minmax(0, 1fr); gap: 40px; } } #campaignView .rophone { border: 1px solid #e5e2df; padding: 16px 12px 14px; } #campaignView .roprof { display: flex; align-items: center; gap: 14px; padding: 0 4px 14px; } #campaignView .roprof .wbface { width: 56px; height: 56px; } #campaignView .roprof .wbface .ini { font-size: 16px; } #campaignView .roprofwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; } #campaignView .roprofwho > span { color: #737373; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #campaignView .rohandle { display: flex; align-items: center; gap: 1px; background: #eef2f6; padding: 3px 8px; font-weight: 700; cursor: text; } #campaignView .rohandle:focus-within { background: #fff; outline: 1px solid #5f7d95; outline-offset: -1px; } #campaignView .rohandle input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; font-family: var(--cp-sans); font-size: 14px; font-weight: 700; color: var(--cp-ink); outline: none; } #campaignView .rogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } #campaignView .rotile { position: relative; aspect-ratio: 4 / 5; padding: 0; border: none; border-radius: 0; background: #f2f0ef; overflow: hidden; cursor: pointer; } #campaignView .rotile img { width: 100%; height: 100%; object-fit: cover; display: block; } #campaignView .rotile.empty:hover { background: #e8e5e1; } #campaignView .rotile .roplus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 300; color: #9a9a9a; } #campaignView .rotile.on { outline: 2px solid #0d0d0d; outline-offset: -2px; } #campaignView .rotile.rodrop, #campaignView .roslide.rodrop, #campaignView .roview.rodrop, #campaignView .roslides.rodrop { outline: 2px solid var(--cp-green); outline-offset: -2px; } #campaignView .rotile.rodragging, #campaignView .roslide.rodragging, #campaignView .rolibimg.rodragging { outline: 2px dashed #0d0d0d; outline-offset: -2px; } #campaignView .rotile .rostack { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; } #campaignView .rotile .rodate { position: absolute; left: 4px; bottom: 4px; background: #0d0d0d; color: #fff; font-family: var(--cp-sans); font-size: 10px; font-weight: 700; padding: 2px 5px; } #campaignView .rotile .rostatus { position: absolute; left: 4px; top: 4px; font-family: var(--cp-sans); font-size: 9.5px; font-weight: 700; padding: 1px 5px; color: #fff; text-transform: uppercase; letter-spacing: .04em; } #campaignView .rotile .rostatus.scheduled { background: #5f7d95; } #campaignView .rotile .rostatus.posted { background: var(--cp-green); } #campaignView .roaddrow { margin-top: 10px; } #campaignView .roeditor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } @media (min-width: 1200px) { #campaignView .roeditor { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-areas: "card form" "strip form"; gap: 14px 28px; align-items: start; } #campaignView .roeditor .ropost { grid-area: card; } #campaignView .roeditor .roslides { grid-area: strip; } #campaignView .roeditor .roform { grid-area: form; } } #campaignView .roempty { grid-column: 1 / -1; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--cp-dash); font-family: var(--cp-sans); font-size: 15px; color: #555; } /* the post card: Instagram's frame, so the plan reads as the post. */ #campaignView .ropost { border: 1px solid #dbdbdb; background: #fff; font-family: var(--cp-sans); } #campaignView .roposthead { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; } #campaignView .roposthead .wbface { width: 28px; height: 28px; } #campaignView .roposthead .wbface .ini { font-size: 9px; } #campaignView .roposthead span:last-child { margin-left: auto; color: #737373; font-size: 12px; } #campaignView .roview { position: relative; aspect-ratio: 4 / 5; background: #fafafa; display: flex; align-items: center; justify-content: center; overflow: hidden; } #campaignView .roview img { width: 100%; height: 100%; object-fit: cover; display: block; } #campaignView .roview .roph { color: #9a9a9a; font-size: 14px; } #campaignView .ronav { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: none; background: #fff; color: #0d0d0d; font-size: 18px; line-height: 1; cursor: pointer; } #campaignView .ronav.prev { left: 10px; } #campaignView .ronav.next { right: 10px; } #campaignView .ronav:disabled { display: none; } #campaignView .rocount { position: absolute; top: 10px; right: 10px; background: #0d0d0d; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; } #campaignView .rodots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 2px; } #campaignView .rodots span { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; } #campaignView .rodots span.on { background: #0095f6; } #campaignView .rocap { margin: 0; padding: 8px 12px 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; } #campaignView .rocap .roph { color: #9a9a9a; } #campaignView .roslides { display: flex; flex-wrap: wrap; gap: 6px; } #campaignView .roslide { position: relative; width: 56px; aspect-ratio: 4 / 5; padding: 0; border: none; border-radius: 0; background: #f2f0ef; overflow: hidden; cursor: grab; } #campaignView .roslide img { width: 100%; height: 100%; object-fit: cover; display: block; } #campaignView .roslide.on { outline: 2px solid #0d0d0d; outline-offset: -2px; } #campaignView .roslrm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: none; border-radius: 0; background: #fff; color: #b3261e; font-size: 12px; line-height: 1; cursor: pointer; display: none; } #campaignView .roslide:hover .roslrm { display: block; } @media (hover: none) { #campaignView .roslrm { display: block; } } #campaignView .roslide.roadd { cursor: pointer; border: 1px dashed var(--cp-dash); background: #fff; color: #737373; font-size: 20px; font-weight: 300; } #campaignView .roform { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #campaignView .rofields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #campaignView .rofield, #campaignView .rocapfield { display: flex; flex-direction: column; gap: 4px; position: relative; } #campaignView .rofield > span, #campaignView .rocapfield > span:first-child { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #555; } #campaignView .rofield input, #campaignView .rofield select, #campaignView .rocapfield textarea, #campaignView .roautodate input { box-sizing: border-box; width: 100%; border: none; border-radius: 0; background: #eef2f6; padding: 6px 8px; font-family: var(--cp-sans); font-size: 13px; color: var(--cp-ink); outline: none; } #campaignView .rofield input:hover, #campaignView .rofield select:hover, #campaignView .rocapfield textarea:hover { background: #e3e9ef; } #campaignView .rofield input:focus, #campaignView .rofield select:focus, #campaignView .rocapfield textarea:focus, #campaignView .roautodate input:focus { background: #fff; outline: 1px solid #5f7d95; outline-offset: -1px; } #campaignView .rocapfield textarea { min-height: 120px; line-height: 1.5; resize: none; } #campaignView .rocapcount { align-self: flex-end; font-size: 11px; color: #8a8a8a; } #campaignView .roacts { display: flex; gap: 18px; } #campaignView .roacts .rodanger { margin-left: auto; color: #b3261e; } #campaignView .roautodate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #555; margin: -2px 0 14px; } #campaignView .roautodate[hidden] { display: none; } #campaignView .roautodate input[type="date"] { width: 150px; } #campaignView .roautodate input[type="number"] { width: 60px; } #campaignView .rolib { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 8px 0 12px; } #campaignView .rolib.rohint { outline: 2px solid var(--cp-green); outline-offset: 4px; } #campaignView .rolibimg { position: relative; aspect-ratio: 4 / 5; padding: 0; border: none; border-radius: 0; background: #f2f0ef; overflow: hidden; cursor: grab; } #campaignView .rolibimg img { width: 100%; height: 100%; object-fit: cover; display: block; } #campaignView .rolibimg:hover { outline: 2px solid #0d0d0d; outline-offset: -2px; } #campaignView .rouses { position: absolute; right: 4px; bottom: 4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: #0d0d0d; color: #fff; font-family: var(--cp-sans); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } #campaignView .rolib .wbempty { grid-column: 1 / -1; } #campaignView .rootherfiles { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13px; margin: 4px 0 12px; } #campaignView .rootherfiles a { color: var(--cp-ink); } #campaignView .ronotes { margin-top: 26px; } /* payouts: the Finances tab section is a sheet account, same rows as the team. The standalone payee page keeps its own sheet. */ #campaignView .powrap { margin-top: 8px; } #campaignView .fnacct-payouts .fnrow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 90px 100px 60px 110px 130px; } #campaignView .fnacct-payouts .fnrow.fnhead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 90px 100px 60px 110px 130px; } #campaignView .poheadnums { display: flex; gap: 18px; align-items: baseline; } #campaignView .pobalance { color: #737373; font-weight: 400; } #campaignView .polink { border: none; background: transparent; border-radius: 0; padding: 0; font-family: var(--cp-sans); font-size: 12px; color: #0d0d0d; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; } #campaignView .polink:hover { color: #555; } #campaignView .polink:disabled { color: #a8a8a8; cursor: default; text-decoration: none; } #campaignView .poactions { display: flex; gap: 10px; justify-content: flex-end; min-width: 0; } #campaignView .fnacct-payouts .fnperson { flex-direction: column; align-items: flex-start; gap: 0; } #campaignView .fnacct-payouts .fnperson > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #campaignView .pocellstack { flex-direction: column; align-items: stretch; gap: 2px; } /* the standalone payee page: /payout/ */ #campaignView .posheet { max-width: 560px; margin: 0 auto; font-family: var(--cp-sans); font-size: 14px; line-height: 1.5; color: var(--cp-ink); } #campaignView .pomark { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #0d0d0d; } #campaignView .potitle { font-size: 24px; font-weight: 700; margin-top: 16px; } #campaignView .pometa { font-size: 13px; color: #737373; margin-top: 4px; } #campaignView .porow2 { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecebe9; } #campaignView .porow2 span { color: #737373; } #campaignView .poform2 { margin-top: 20px; display: grid; gap: 12px; } #campaignView .poform2 label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #737373; } #campaignView .poform2 input { display: block; width: 100%; margin-top: 4px; border: 1px solid #0d0d0d; border-radius: 0; background: #fff; padding: 10px 12px; font-family: var(--cp-sans); font-size: 14px; font-weight: 400; color: #0d0d0d; outline: none; box-sizing: border-box; } #campaignView .poform2 input:focus { border-color: #2E7D32; } #campaignView .pobtn { background: #0d0d0d; color: #fff; border: none; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; font-weight: 500; padding: 11px 22px; cursor: pointer; justify-self: start; } #campaignView .pobtn:disabled { background: #a8a8a8; cursor: default; } #campaignView .poerr { font-size: 13px; color: #b3261e; } #campaignView .pook { font-size: 13px; color: #2E7D32; } #campaignView .ponote { font-size: 13px; color: #737373; margin-top: 12px; } #campaignView .poob { margin-top: 20px; border: 1px solid #0d0d0d; padding: 16px; } /* Finance: sharp, monochrome, touch-friendly Budget and Payouts surfaces. */ #campaignView .fndoc { --fn-cell:#f4f4f4; --fn-cell-hover:#eee; --fn-edge:#222; --fn-head:#f4f4f4; font-family:Helvetica,Arial,sans-serif; } #campaignView .fnmetrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #222; margin:24px 0; } #campaignView .fnmetrics > div { padding:20px; border-right:1px solid #222; } #campaignView .fnmetrics > div:last-child { border:0; } #campaignView .fnmetrics span { display:block; font-size:12px; color:#666; } #campaignView .fnmetrics strong { display:block; margin-top:10px; font-size:28px; font-weight:500; } #campaignView .ponotice { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:13px; padding-bottom:20px; } #campaignView .popage .powrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } #campaignView .pocard { border:1px solid #222; padding:20px; min-width:0; background:#fff; } #campaignView .pocard header { display:flex; justify-content:space-between; align-items:start; gap:16px; } #campaignView .pocard h3 { font-size:18px; font-weight:500; margin:0; } #campaignView .pocard header strong { font-size:22px; white-space:nowrap; } #campaignView .pocard p { color:#666; margin-top:6px; overflow-wrap:anywhere; } #campaignView .pocard dl { margin:20px 0 8px; } #campaignView .pocard dl > div { display:grid; grid-template-columns:120px minmax(0,1fr); padding:10px 0; border-top:1px solid #ddd; gap:12px; font-size:14px; } #campaignView .pocard dt { color:#666; } #campaignView .pocard dd { margin:0; overflow-wrap:anywhere; } #campaignView .pocard footer { display:flex; flex-wrap:wrap; gap:8px 16px; border-top:1px solid #222; padding-top:8px; } #campaignView .polink, #campaignView .fnaddline, #campaignView .fnrm { min-height:44px; min-width:44px; opacity:1; visibility:visible; } #campaignView .polink { background:#fff; color:#111; border:0; text-decoration:underline; cursor:pointer; font-size:14px; } #campaignView .polink:focus-visible, #campaignView .fnin:focus-visible { outline:2px solid #2E7D32; outline-offset:2px; } #campaignView .poedit { grid-column:1/-1; } #campaignView .poformgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; } #campaignView .poformgrid label { display:grid; gap:8px; font-size:13px; } #campaignView .poformgrid input, #campaignView .poformgrid select { min-width:0; width:100%; min-height:44px; border:1px solid #777; padding:10px; background:#fff; border-radius:0; } #campaignView .fndoc .fnstatus.ok { color:#2E7D32; } #campaignView .fndoc .fnstatus.hold { color:#555; } #campaignView .wktabs { overflow-x:auto; flex-wrap:nowrap; border-bottom:1px solid #222; scrollbar-width:thin; scrollbar-color:#555 #eee; } #campaignView .wktabs > * { flex-shrink:0; min-height:44px; } @media(max-width:800px) { #campaignView .fnmetrics { grid-template-columns:repeat(2,minmax(0,1fr)); } #campaignView .fnmetrics > div { padding:14px; border-bottom:1px solid #222; } #campaignView .fnmetrics > div:nth-child(2) { border-right:0; } #campaignView .fnmetrics > div:nth-child(3) { border-bottom:0; } #campaignView .fnmetrics strong { font-size:23px; } #campaignView .popage .powrap, #campaignView .poformgrid { grid-template-columns:1fr; } #campaignView .pocard { padding:16px; } #campaignView .fndoc .fnacct, #campaignView .fndoc .fntop { overflow-x:auto; scrollbar-width:thin; } #campaignView .fndoc .fnacct .fnrow, #campaignView .fndoc .fntop .fnrow { min-width:680px; } #campaignView .fndoc input { min-height:44px; } } /* Compact payout ledger. Keep the sheet intact on small screens. */ #campaignView .popage .poheading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 12px; border-bottom:1px solid #222; } #campaignView .popage .fndoctitle { font-size:22px; } #campaignView .popage .fnmetrics { display:flex; flex-wrap:wrap; gap:12px 32px; border:0; border-bottom:1px solid #ddd; margin:0; padding:14px 0; } #campaignView .popage .fnmetrics > div { padding:0; border:0; min-width:100px; } #campaignView .popage .fnmetrics span { font-size:11px; } #campaignView .popage .fnmetrics strong { margin-top:4px; font-size:17px; font-variant-numeric:tabular-nums; } #campaignView .potoolbar { display:flex; align-items:center; gap:16px; min-height:46px; font-size:12px; color:#666; } #campaignView .potoolbar [data-po="balance"] { color:#222; } #campaignView .potoolbar [data-po="load-status"] { margin-left:auto; } #campaignView .popage .powrap { display:block; } #campaignView .poscroll { width:100%; overflow-x:auto; border:1px solid #ccc; scrollbar-width:thin; scrollbar-color:#777 #eee; } #campaignView .poscroll:focus-visible { outline:2px solid #2E7D32; outline-offset:2px; } #campaignView .potable { width:100%; min-width:940px; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:12px; line-height:1.35; } #campaignView .potable th, #campaignView .potable td { padding:8px 12px; text-align:left; vertical-align:middle; border-bottom:1px solid #e5e5e5; border-right:1px solid #eee; overflow-wrap:anywhere; } #campaignView .potable thead th { background:#f5f5f5; color:#666; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; padding-top:10px; padding-bottom:10px; } #campaignView .potable th:first-child { width:190px; position:sticky; left:0; z-index:1; background:#fff; border-right:1px solid #ccc; } #campaignView .potable thead th:first-child { background:#f5f5f5; z-index:2; } #campaignView .potable th:nth-child(2) { width:100px; } #campaignView .potable th:nth-child(3) { width:155px; } #campaignView .potable th:nth-child(4) { width:130px; } #campaignView .potable th:nth-child(5) { width:110px; } #campaignView .potable th:nth-child(6) { width:240px; } #campaignView .potable td:last-child, #campaignView .potable th:last-child { border-right:0; } #campaignView .potable tr:last-child > * { border-bottom:0; } #campaignView .popayeename { display:block; font-weight:500; color:#111; } #campaignView .poemailtext { display:block; color:#777; font-size:11px; font-weight:400; margin-top:3px; } #campaignView .potable .poamountcell { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } #campaignView .poactions { display:flex; align-items:center; flex-wrap:wrap; gap:2px 12px; } #campaignView .popage .polink { padding:4px 0; font-size:11px; min-height:28px; min-width:0; font-family:inherit; white-space:nowrap; } #campaignView .popage .fnaddline { min-height:34px; padding:6px 12px; font-size:12px; background:#111; color:#fff; border:1px solid #111; } #campaignView .podetails { font-size:11px; } #campaignView .podetails summary, #campaignView .pobank summary { cursor:pointer; padding:6px 0; } #campaignView .podetails dl { margin:6px 0; min-width:180px; font-size:11px; } #campaignView .podetails dt { color:#777; margin-top:6px; } #campaignView .podetails dd { margin:2px 0; overflow-wrap:anywhere; } #campaignView .pofootnote { font-size:11px; color:#777; margin:10px 0; } #campaignView .pobank { font-size:12px; border-top:1px solid #ddd; margin-top:20px; padding-top:6px; } #campaignView .pobank p { color:#666; font-size:11px; overflow-wrap:anywhere; } #campaignView .poedit { border:1px solid #ccc; padding:12px; margin:0 0 12px; } #campaignView .poedit h3 { margin:0; font-size:13px; font-weight:500; } #campaignView .poedit .poformgrid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:12px 0 4px; } #campaignView .poedit .poformgrid label { font-size:11px; gap:4px; } #campaignView .poedit .poformgrid input, #campaignView .poedit .poformgrid select { min-height:34px; padding:6px 8px; font-size:12px; } #campaignView .poedit footer { display:flex; gap:20px; } #campaignView .posr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #campaignView .potable .poempty { padding:24px 12px; color:#777; } @media(max-width:800px) { #campaignView .popage .fnmetrics { gap:14px 24px; } #campaignView .popage .fnmetrics > div { min-width:120px; } #campaignView .popage .poformgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } #campaignView .popage .polink, #campaignView .popage .fnaddline, #campaignView .podetails summary { min-height:44px; } #campaignView .popage .poformgrid input, #campaignView .popage .poformgrid select { min-height:44px; } #campaignView .potable th:first-child { width:160px; } } /* Payee invoice: document-like sections, explicit review and bank setup. */ #campaignView .posheet { max-width:840px; font-family:Helvetica,Arial,sans-serif; } #campaignView .poinvoicehead { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:2px solid #111; padding-bottom:24px; } #campaignView .poinvoicehead .potitle { font-size:28px; font-weight:500; margin:14px 0 4px; line-height:1.2; } #campaignView .poinvoicehead .pometa { margin:0; overflow-wrap:anywhere; } #campaignView .poinvoicestate { font-size:11px; padding-top:2px; white-space:nowrap; color:#666; } #campaignView .poinvoicesummary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin:0; padding:18px 0; border-bottom:1px solid #ddd; } #campaignView .poinvoicesummary dt, #campaignView .poinvoicereceipt dt { color:#777; font-size:11px; } #campaignView .poinvoicesummary dd, #campaignView .poinvoicereceipt dd { margin:4px 0 0; font-size:14px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } #campaignView .poinvoicesummary > div:last-child { text-align:right; } #campaignView .poinvoiceform { gap:24px; margin-top:24px; } #campaignView .poinvoiceform fieldset { border:0; padding:0; margin:0; min-width:0; } #campaignView .poinvoiceform legend { width:100%; padding:0 0 10px; margin-bottom:14px; border-bottom:1px solid #ddd; font-size:12px; font-weight:500; } #campaignView .poinvoicefields { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; } #campaignView .poinvoicefields .powide { grid-column:1/-1; } #campaignView .poinvoiceform label { font-size:12px; font-weight:400; color:#222; text-transform:none; letter-spacing:0; } #campaignView .poinvoiceform label span { color:#777; font-size:11px; } #campaignView .poinvoiceform textarea { display:block; width:100%; box-sizing:border-box; resize:vertical; margin-top:4px; padding:10px 12px; font:14px Helvetica,Arial,sans-serif; border:1px solid #777; border-radius:0; background:#fff; color:#111; } #campaignView .poinvoiceform input { min-height:44px; border-color:#777; } #campaignView .poinvoiceform :is(input,textarea,button):focus-visible, #campaignView .poinvoicenext button:focus-visible { outline:2px solid #2E7D32; outline-offset:2px; } #campaignView .poinvoiceform input[type=file] { border:1px dashed #aaa; padding:14px; font-size:12px; } #campaignView .poinvoiceform input::file-selector-button { border:1px solid #222; border-radius:0; padding:8px 12px; margin-right:12px; background:#fff; color:#111; font:inherit; cursor:pointer; } #campaignView .pofieldhint, #campaignView .pofilename { color:#777; font-size:11px; margin:8px 0 0; line-height:1.6; overflow-wrap:anywhere; } #campaignView .poinvoicefields .pofieldhint { align-self:center; } #campaignView .pofilename { color:#222; } #campaignView .poinvoiceform footer { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #222; padding-top:16px; } #campaignView .poinvoiceform footer p { color:#777; font-size:12px; margin:0; } #campaignView .poinvoicereceipt, #campaignView .poinvoicenext { padding:24px 0; border-bottom:1px solid #ddd; } #campaignView .poinvoicereceipt h2, #campaignView .poinvoicenext h2 { margin:0 0 10px; font-size:16px; font-weight:500; } #campaignView .poinvoicereceipt p, #campaignView .poinvoicenext p { font-size:12px; color:#666; overflow-wrap:anywhere; } #campaignView .poinvoicereceipt dl { display:grid; grid-template-columns:2fr 1fr; gap:20px; } #campaignView .poinvoicenext .pobtn { margin-top:8px; } #campaignView .poob:empty { display:none; } #campaignView .posheet .poerr { font-size:12px; } @media(max-width:600px) { #campaignView .poinvoicehead { gap:12px; flex-direction:column; padding-bottom:16px; } #campaignView .poinvoicehead .potitle { font-size:24px; } #campaignView .poinvoicesummary { grid-template-columns:1fr 1fr; gap:16px; } #campaignView .poinvoicesummary > div:last-child { grid-column:1/-1; text-align:left; } #campaignView .poinvoicefields { grid-template-columns:1fr; gap:14px; } #campaignView .poinvoiceform footer { align-items:stretch; flex-direction:column; gap:12px; } #campaignView .poinvoicereceipt dl { grid-template-columns:1fr; } #campaignView .posheet .pobtn { min-height:44px; } } /* Browsing is read-only until an existing or approved account signs in. */ body:not(.account-ready) :is(.workitem .save,#woSave,#woAddToCamp,#woAddAllToBoard,#panelAdd,.colnew,.colcard .del,#deleteColl,#cgNew,#findBar,#boardPickBar) { display:none !important; } .authslot { display:flex; align-items:center; gap:12px; } .wlfield { display:block; font-size:12px; margin:14px 0; } .wlfield .authfield { display:block; width:100%; box-sizing:border-box; margin-top:6px; } .wlfoot { display:flex; flex-wrap:wrap; gap:16px; padding-top:20px; border-top:1px solid #ddd; margin-top:20px; } .wlsuccess { font-size:18px; } .wlheading { display:flex; justify-content:space-between; align-items:center; gap:16px; } .wlheading h1 { font-size:24px; font-weight:500; } .wlscroll { overflow-x:auto; width:100%; margin-top:24px; border:1px solid #ddd; } .wltable { border-collapse:collapse; min-width:720px; width:100%; font:12px Helvetica,Arial,sans-serif; } .wltable th,.wltable td { text-align:left; padding:10px 12px; border-bottom:1px solid #ddd; overflow-wrap:anywhere; } .wltable th { font-weight:500; } .wltable thead { background:#f4f4f4; color:#666; } .wltable a { color:inherit; } .wlpages { display:flex; gap:20px; margin-top:20px; } .wlpages button:disabled { color:#999; cursor:default; } #waitlistMessage,#signupMessage,#wlStatus { font-size:12px; min-height:18px; } #waitlistForm .authgo,#approvedSignup .authgo { min-height:44px; } @media(max-width:600px) { .authslot { gap:8px; } .authslot .authbtn { font-size:11px; min-height:44px; } .wlheading { align-items:flex-start; flex-direction:column; gap:0; } .wlfield .authfield { min-height:44px; font-size:16px; } .wltable .acctlink,.wlpages .acctlink { min-height:44px; } } body:not(.account-ready) #onboard :is([data-path="board"],[data-path="campaign"]) { display:none; } /* Unified outlined actions and a quiet, consistently aligned admission form. */ #authPanel .authsheet { width:min(420px,100%); padding:28px; box-sizing:border-box; } #authPanel .authheading { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:24px; } #authPanel .authtitle { font-size:21px; line-height:1.3; font-weight:400; margin:0; } #authPanel .authclose { color:#666; font-size:13px; font-weight:400; padding:8px 0 8px 8px; } #authPanel .authnote { font-size:13px; line-height:1.6; font-weight:400; margin:0 0 22px; } #authPanel .wlfield { display:block; margin:0 0 18px; font-size:13px; line-height:1.4; font-weight:400; } #authPanel .authfield { width:100%; min-height:44px; margin:8px 0 0; padding:10px 12px; box-sizing:border-box; border:1px solid #bbb; background:#fff; font-size:16px; font-weight:400; } #authPanel .authfield:focus { outline:1px solid #222; outline-offset:1px; } #authPanel .authgo, #campaignView .pobtn, #campaignView .popage .fnaddline { background:#fff; color:#111; border:1px solid #777; font-weight:400; } #authPanel .authgo { width:100%; min-height:44px; font-size:14px; margin-top:4px; } #authPanel .authgo:hover, #campaignView .pobtn:hover, #campaignView .popage .fnaddline:hover { background:#f5f5f3; } #authPanel .authgo:disabled { color:#777; border-color:#ccc; background:#fafafa; } #authPanel .authrow { display:flex; flex-direction:column; align-items:stretch; gap:12px; } #authPanel .authlink { font-size:13px; line-height:1.4; font-weight:400; color:#333; padding:8px 0; text-align:left; } #authPanel .wlfoot { border-top:1px solid #e5e2df; padding-top:16px; margin-top:24px; display:grid; gap:4px; } #authPanel .wlfoot>div { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; color:#666; } #authPanel [role=status] { font-size:13px; line-height:1.5; margin:14px 0 0; } #authPanel [role=status]:empty { display:none; } #authPanel .wlconfirmation { padding:20px 0; } #authPanel .wlsuccess { font-size:18px; font-weight:400; margin:0 0 10px; color:#2e7d32; } #authPanel .wlconfirmation .authnote { margin:0; } #authPanel .authbottom { margin-top:8px; } body:not(.account-ready) [data-nav="network"], body:not(.account-ready) #viewNetwork { display:none !important; } @media(max-width:480px){#authPanel { padding:16px; overflow:auto; } #authPanel .authsheet { padding:24px 20px; } #authPanel .authtitle{font-size:20px;}} .demosamples { margin:24px 0 36px; max-width:620px; } .demokicker { font:12px Helvetica,Arial,sans-serif; color:#666; margin:0 0 12px; } .democard { display:flex; align-items:center; gap:20px; width:100%; padding:0 20px 0 0; border:1px solid #ddd; background:#fff; color:#111; text-align:left; cursor:pointer; } .democard>img { width:160px; height:112px; object-fit:cover; } .democard>span:nth-child(2){ flex:1; } .democard strong { display:block; font:18px Helvetica,Arial,sans-serif; margin-bottom:8px; } .democard span span { font:13px Helvetica,Arial,sans-serif; color:#666; } #demoPreview { position:fixed; inset:0; overflow:auto; z-index:110; background:#fff; color:#111; font:14px/1.5 Helvetica,Arial,sans-serif; } #demoPreview[hidden] { display:none; } body.demo-open{overflow:hidden;} .demosheet { max-width:1120px; padding:44px 32px; margin:auto; } .demoheader { display:flex; align-items:center; justify-content:space-between; gap:24px; } .demoheader h1 { font-size:28px; font-weight:400; margin:0; } #demoPreview button { border:1px solid #bbb; background:#fff; color:#111; min-height:44px; padding:8px 16px; font:13px Helvetica,Arial,sans-serif; cursor:pointer; } #demoPreview button:hover { background:#f5f5f3; } .demonote { color:#666; font-size:13px; margin:16px 0 24px; } .demotabs { display:flex; gap:24px; border-bottom:1px solid #ddd; margin:24px 0; } #demoPreview .demotabs button { border:0; border-bottom:2px solid transparent; padding:12px 0; text-transform:capitalize; } #demoPreview .demotabs button[aria-pressed=true]{border-bottom-color:#111;} .demobrief { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; margin-top:32px; } .demobrief>img { width:100%; object-fit:cover; } .demobrief h2 { font-size:28px; font-weight:400; } .demobrief dl { display:grid; grid-template-columns:1fr 2fr; gap:16px; margin-top:32px; } .demobrief dt { color:#666; }.demobrief dd { margin:0; } .demoimages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .demoimages figure { margin:0; }.demoimages img { width:100%; aspect-ratio:4/3; object-fit:cover; } .demoimages figcaption { font-size:12px; color:#666; padding:8px 0; }.demoimages a{color:inherit;} .demotable { overflow:auto; }.demotable table { width:100%; border-collapse:collapse; min-width:430px; text-align:left; }.demotable th,.demotable td { border-bottom:1px solid #ddd; padding:14px 12px; font-weight:400; white-space:nowrap; }.demotable thead { color:#666; }.demotable tfoot { border-top:1px solid #111; } @media(max-width:600px){.demosheet{padding:24px 20px;}.demoheader h1{font-size:23px;}.demobrief{grid-template-columns:1fr;gap:20px;}.demoimages{grid-template-columns:1fr;}.democard{gap:14px;padding-right:12px;}.democard>img{width:112px;height:112px;}.democard strong{font-size:16px;}.democard span span{font-size:12px;}} /* Keep all guest destinations visible instead of clipping Collections. */ @media(max-width:600px){ #discoverBar .bar,.cptopbar{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;} #discoverBar .wordmark,.cptopbar .cpwordmark{grid-column:1;grid-row:1;justify-self:start;} #discoverBar .bar>.authslot,.cptopbar>.authslot{grid-column:2;grid-row:1;justify-self:end;} #discoverBar .views,.cptopbar .cpnav{grid-column:1/-1;grid-row:2;width:100%;margin:0;display:flex;gap:20px;overflow:visible;} #discoverBar .views button,.cptopbar .cpnav button{min-height:40px;font-size:13px;} } /* Primary and selected controls keep the same outlined treatment. */ #workMore,#picker .newrow button,.cgform .btn,#panel .addBtn,.cdboardactions .btn, .cdstages button.on,.cdroles button.on,.cdvibes button.on,.slot.owner .slotstatus, .slot.confirmed .slotstatus,.slotperson.confirmed .sconfirm { background:#fff;color:#111;border:1px solid #777;border-radius:0; } /* Visual audit: short screens must retain the top of tall dialogs. */ #authPanel { overflow:auto; align-items:flex-start; } #authPanel .authsheet { margin:auto; flex-shrink:0; } #authPanel button:focus-visible,#demoPreview button:focus-visible,.demotable:focus-visible { outline:2px solid #2e7d32; outline-offset:3px; } #lightbox { box-sizing:border-box; padding:64px 16px 24px; } #lightbox #lbClose { position:absolute; top:12px; right:16px; z-index:1; min-height:44px; min-width:64px; padding:8px 12px; border:1px solid #aaa; border-radius:0; background:#fff; color:#111; font:14px Helvetica,Arial,sans-serif; cursor:pointer; } #lightbox img { max-width:100%; max-height:calc(100dvh - 112px); } #lightbox img[hidden] { display:none; } #lbStatus { color:#fff; font:14px Helvetica,Arial,sans-serif; } #lbStatus:empty { display:none; } #campaignView .postate { max-width:560px; padding:32px 0; } #campaignView .postate h1 { margin:24px 0 12px; font-size:28px; line-height:1.2; font-weight:400; } #campaignView .postate p { font-size:14px; color:#555; line-height:1.5; } #campaignView .postateactions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:28px; } #campaignView .postateactions a { color:#111; font-size:14px; text-underline-offset:4px; padding:12px 0; } .demotablehint { display:none; font-size:12px; color:#666; } @media(max-width:600px){.demotablehint{display:block;}.demotable th:first-child,.demotable td:first-child{position:sticky;left:0;background:#fff;z-index:1;}} /* Authenticated visual audit: one scroll container per sheet. */ #campaignView .wktabs, #campaignView .poscroll { overflow-y:hidden; } #campaignView .wktabs { align-items:center; } .fnscrollhint { display:none; } @media(max-width:800px) { #campaignView .fndoc { overflow:visible; } #campaignView .fndoc .fntopscroll, #campaignView .fndoc .fnacct { min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; } #campaignView .fndoc .fntop, #campaignView .fndoc .fnbudgetrows { min-width:680px; overflow:visible; } #campaignView .fndoc .fnaccthead { min-width:680px; } .fnscrollhint { display:block; margin:12px 0 6px; color:#777; font-size:11px; } } @media(max-width:759px) { .ui { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 8px; overflow:visible; padding:8px 14px; } .ui .ctlM { display:contents; } .ui .wordmark { grid-column:1; grid-row:1; } .ui .ctlM #resetViewM { grid-column:2; grid-row:1; } .ui .ctlM #toggleLabelsM { grid-column:3; grid-row:1; } .ui .ctlM .authslot { grid-column:4; grid-row:1; justify-self:end; } .ui .ctlM [data-nav] { grid-row:2; min-width:0; min-height:44px; padding:8px 0; } .ui .ctlM [data-nav="work"] { grid-column:1; } .ui .ctlM [data-nav="network"] { grid-column:2; } .ui .ctlM [data-nav="campaigns"] { grid-column:3; } .ui .ctlM [data-nav="collections"] { grid-column:4; } } #authAccount .acctpage:has(.wlheading) { max-width:1000px; } #authAccount .wlpages button:disabled { color:#999; cursor:default; text-decoration:none; } /* Payee request: bank workflow left, invoice and request details right. */ #campaignView .posheet { max-width:1120px; } #campaignView .poplatformmark { display:inline-block; color:var(--cp-ink); text-decoration:none; font-family:"Arial Rounded MT Bold","Helvetica Rounded",var(--cp-sans); font-size:21px; font-weight:700; letter-spacing:-.035em; text-transform:lowercase; line-height:1; } #campaignView .poplatformmark::before { content:"\2733\FE0E"; display:inline-block; margin-right:.3em; font-size:.9em; letter-spacing:0; color:var(--cp-green); -webkit-text-stroke:.067em currentColor; vertical-align:-.05em; } #campaignView .popayeegrid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:start; } #campaignView .popayeegrid > * { min-width:0; } #campaignView .poinvoicenext { margin:0; border:1px solid #ccc; padding:24px; } #campaignView .poinvoicenext h2,#campaignView .porequestinfo h2 { margin:0 0 20px; font-size:20px; font-weight:400; } #campaignView .poinvoicenext h3,#campaignView .poreview h3 { margin:20px 0 8px; font-size:14px; font-weight:600; } #campaignView .poinvoicenext p,#campaignView .porequestinfo p,#campaignView .poreview p { font-size:13px; line-height:1.6; color:#555; } #campaignView .poinvoicenext .polink { display:inline-block; margin:12px 0 12px 16px; font:13px Helvetica,Arial,sans-serif; color:#111; background:#fff; border:0; text-decoration:underline; min-height:44px; cursor:pointer; } #campaignView .ponextsteps { border-top:1px solid #ddd; margin-top:24px; padding-top:4px; } #campaignView .porequestcolumn .poinvoicesummary { grid-template-columns:1fr 1fr; margin:0 0 20px; padding:0 0 20px; } #campaignView .porequestcolumn .poinvoicefields { grid-template-columns:1fr; } #campaignView .porequestcolumn .poinvoicefields .powide { grid-column:auto; } #campaignView .porequestcolumn .poinvoiceform { margin-top:24px; } #campaignView .potestnotice { border-left:2px solid #777; padding-left:12px; } #campaignView .poreview { border:1px solid #888; padding:24px; margin:0 0 24px; scroll-margin-top:110px; } #campaignView .poreview header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } #campaignView .poreview h2 { margin:0; font-size:22px; font-weight:400; } #campaignView .poreview header > .polink { flex-shrink:0; } #campaignView .poreviewdetails { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; } #campaignView .poreview dt { color:#777; font-size:11px; margin-bottom:6px; } #campaignView .poreview dd { margin:0; font-size:14px; overflow-wrap:anywhere; white-space:pre-line; } #campaignView .poreview section { border-top:1px solid #ddd; margin-top:20px; padding-top:4px; } #campaignView .poreviewblock { border-left:2px solid #777; padding-left:12px; } #campaignView .poreview .pobtn:disabled { color:#777; border-color:#bbb; cursor:not-allowed; } #campaignView .poreviewaction { font-weight:700; } @media(max-width:800px){ #campaignView .popayeegrid { grid-template-columns:1fr; gap:24px; } #campaignView .poinvoicenext,#campaignView .poreview { padding:18px; } #campaignView .poreviewdetails { grid-template-columns:1fr 1fr; } #campaignView .poreview header { flex-wrap:wrap; } } @media(max-width:400px){#campaignView .poreviewdetails{grid-template-columns:1fr;}} #campaignView .porequestcolumn .poinvoicesummary > div { text-align:left; } #campaignView .porequestcolumn .poinvoicesummary > div:last-child { grid-column:1/-1; } #campaignView .poob:empty { margin:0; min-height:0; } /* Compact payout review: the decision stays visible; reference detail folds away. */ #campaignView .poreview { padding:20px; border-color:#d3d3d3; } #campaignView .poreview h2 { font-size:15px; font-weight:500; } #campaignView .poreviewsummary { display:flex; justify-content:space-between; gap:20px; margin:20px 0 10px; } #campaignView .poreviewsummary strong { display:block; font-size:22px; font-weight:500; line-height:1.3; overflow-wrap:anywhere; } #campaignView .poreviewsummary span { display:block; margin-top:5px; font-size:12px; color:#666; } #campaignView .poreviewamount { text-align:right; flex-shrink:0; } #campaignView .poreview p.poreviewstatus { margin:0 0 16px; font-size:12px; line-height:1.5; } #campaignView .poreviewinvoice { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; } #campaignView .poreviewinvoice > div { min-width:0; } #campaignView .poreviewinvoice span { display:block; font-size:11px; color:#777; margin-bottom:4px; } #campaignView .poreviewinvoice strong { font-size:13px; font-weight:400; overflow-wrap:anywhere; } #campaignView .poreviewinvoice button { flex-shrink:0; } #campaignView .poreviewnext { margin:16px 0; } #campaignView .poreview p.poreviewlabel { font-size:12px; font-weight:500; color:#333; margin:0 0 6px; } #campaignView .poreviewblockers { margin:0; padding-left:17px; color:#666; font-size:12px; line-height:1.6; } #campaignView .poreviewmore { border-top:1px solid #e5e5e5; padding-top:12px; } #campaignView .poreviewmore summary { font-size:12px; color:#555; cursor:pointer; padding:4px 0; } #campaignView .poreviewdetails { grid-template-columns:1fr 1fr; margin:16px 0; gap:14px; } #campaignView .poreview .pobtn { background:transparent; color:#222; font-weight:500; border:1px solid #888; } #campaignView .poreview .pobtn:hover { background:#f5f5f5; } @media(max-width:480px){ #campaignView .poreview { padding:16px; } #campaignView .poreviewsummary { gap:12px; } #campaignView .poreviewsummary strong { font-size:19px; } #campaignView .poreviewdetails { grid-template-columns:1fr; } #campaignView .poreview .pobtn { width:100%; min-height:44px; } } /* Explicit photo comments: compact controls, usable on touch screens. */ #psReview .pscomposehint { font-size: 12px; line-height: 1.5; color: #737373; margin-top: 8px; } #psReview .pscomposeactions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 10px; } #psReview .pscomposeactions button, #psReview .psedit { background: transparent; color: inherit; border: 1px solid #d9d5d1; border-radius: 4px; padding: 8px 12px; font: inherit; cursor: pointer; min-height: 36px; } #psReview .pscomposeactions button:disabled { opacity: .45; cursor: default; } #psReview .slmention { position: relative; top: auto; max-height: 200px; overflow-y: auto; margin-top: 8px; } .slmention .slmentionat { flex: none; font-size: 16px; } #psReview .psnotebody { overflow-wrap: anywhere; } #psReview .psnotehead { flex-wrap: wrap; } @media (hover: none) { #psReview .psdel { opacity: 1; } #psReview .pscomposeactions button, #psReview .psedit { min-height: 44px; } } .csrlaunch { margin-left: 8px; border: 0; background: transparent; text-decoration: underline; color: inherit; font: inherit; cursor: pointer; } .csroverlay { position: fixed; inset: 0; z-index: 200; background: #0005; overflow: auto; padding: 24px; box-sizing: border-box; font: 14px/1.5 var(--cp-sans,Arial,sans-serif); color: #242424; } .csrpanel { max-width: 920px; margin: auto; background: white; padding: 24px; border: 1px solid #ddd; border-radius: 8px; } .csrpanel header { display: flex; justify-content: space-between; align-items: start; gap: 16px; } .csrpanel h2 { font-size: 20px; margin: 0; font-weight: 500; } .csrpanel header p { margin: 4px 0; color: #666; } .csrpanel button { background: white; border: 1px solid #cfcac4; border-radius: 4px; padding: 10px 14px; font: inherit; color: inherit; cursor: pointer; min-height: 44px; } .csrpanel button:disabled { opacity: .45; cursor: default; } .csrpanel fieldset { border: 1px solid #ddd; margin: 16px 0; padding: 12px; min-width: 0; } .csrcompare { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; } .csrcompare label { min-width: 0; } .csrcompare pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; font: 13px/1.5 var(--cp-sans,Arial,sans-serif); background: #f5f3f0; padding: 12px; } .csrpanel footer { display:flex; flex-wrap:wrap; gap:8px; } .csrnote { color: #666; } @media(max-width:600px) { .csroverlay { padding: 10px; } .csrpanel { padding: 16px; } .csrcompare { grid-template-columns: minmax(0,1fr); gap: 4px; } .csrpanel footer button { width:100%; } } .csrnotice { position: fixed; bottom: 16px; right: 16px; z-index: 190; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; color: #242424; padding: 12px 16px; border: 1px solid #d9d2c8; border-radius: 6px; box-shadow: 0 3px 16px #0001; font: 13px/1.5 var(--cp-sans,Arial,sans-serif); } .csrnotice button { background: transparent; border: 1px solid #cfcac4; border-radius: 4px; padding: 8px 12px; font: inherit; color: inherit; min-height: 44px; cursor: pointer; } .csrchoose { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px; } .csrchoose select { max-width:100%; font:inherit; padding:8px; border:1px solid #ccc; background:#fff; } /* Scroll the review container below the fixed navigation, including after async load. */ #campaignView [data-po="review-panel"] { scroll-margin-top:110px; } @media(max-width:700px){ .csrnotice { bottom:calc(76px + env(safe-area-inset-bottom,0px)); } } .agentnotes { max-width:800px; } .agentnotes > h2 { font-size:20px; font-weight:500; } .agentnote { border-top:1px solid #ddd; padding:20px 0; } .agentnote h3 { font-size:16px; font-weight:500; margin:0 0 6px; overflow-wrap:anywhere; } .agentnote time { font-size:12px; color:#666; } .agentnote p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; } .agentnotes button { background:transparent; color:inherit; border:1px solid #aaa; padding:10px 14px; min-height:44px; } .agentchoice { display:flex; align-items:flex-start; gap:10px; padding:10px 0; line-height:1.5; overflow-wrap:anywhere; } .agentchoice input { flex:none; margin-top:4px; } #authAccountBody fieldset { border:1px solid #ddd; padding:12px 16px; margin:20px 0; } /* P1-P4 campaign features, Nov 11 2026: calendar, pitch, video, variants. Merged from work/css-*.css. */ /* campaign calendar: the month grid, the event list, and the meeting mail on create. wbTimelineHtml has no live call site, so the list here is the editable one; the Brief keeps its own read-only rendering through wbEventLine. Copy strings stay at most 4 words. No native prompt or confirm. */ #campaignView .calnav { display: flex; align-items: baseline; gap: 16px; margin: 8px 0 12px; } #campaignView .calmonth { font-size: 16px; font-weight: 700; } #campaignView .calprev, #campaignView .calnext { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; color: #111; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #campaignView .calgrid { width: 100%; border-collapse: collapse; table-layout: fixed; } #campaignView .calgrid th { text-align: left; font-size: 12px; color: #737373; font-weight: 400; padding: 4px 6px; border-bottom: 1px solid #111; } #campaignView .calgrid td { vertical-align: top; height: 84px; padding: 4px 6px; border: 1px solid #e5e2df; background: #fff; border-radius: 0; } #campaignView .calgrid td.calblank { background: #faf9f7; } #campaignView .calgrid td.caltoday { outline: 2px solid #2E7D32; outline-offset: -2px; } #campaignView .caldbtn { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; font-weight: 700; color: #111; padding: 0; cursor: pointer; display: block; } #campaignView .calev { display: block; font-size: 12px; line-height: 1.4; color: #111; overflow-wrap: anywhere; margin-top: 2px; } #campaignView .caldead { color: #b3261e; } #campaignView .callist { margin: 16px 0; } #campaignView .calevent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid #e5e2df; } #campaignView .caldate { font-weight: 700; font-size: 14px; } #campaignView .caltime { color: #555; font-size: 14px; } #campaignView .caltitle { font-size: 14px; } #campaignView .calkind { color: #737373; font-size: 12px; } #campaignView .calpeople { color: #555; font-size: 12px; } #campaignView .callink { color: #111; font-size: 12px; } #campaignView .caledit { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 12px; color: #111; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #campaignView .calremove { border: none; background: transparent; border-radius: 0; font-family: var(--cp-sans); font-size: 16px; color: #b3261e; padding: 0; cursor: pointer; } #campaignView .calform { border: 1px solid #e5e2df; padding: 16px; margin: 16px 0; background: #fff; border-radius: 0; } #campaignView .calrow { display: flex; gap: 12px; align-items: baseline; margin: 8px 0; } #campaignView .calrow > span:first-child { width: 64px; flex: none; color: #737373; font-size: 13px; } #campaignView .calrow input, #campaignView .calrow select { border: 1px solid #bbb; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; padding: 6px 8px; background: #fff; color: #111; } #campaignView .calrow input { flex: 1; min-width: 0; } #campaignView .calpeoplepick { display: flex; flex-wrap: wrap; gap: 4px 16px; } #campaignView .calperson { font-size: 13px; color: #111; } #campaignView .calformact { display: flex; gap: 16px; align-items: baseline; margin-top: 12px; } #campaignView .calmsg { font-size: 13px; color: #b3261e; } #campaignView .calmsg a { color: #111; } @media (max-width: 759px) { #campaignView .calgrid td { height: 56px; padding: 2px 4px; } #campaignView .calev { font-size: 11px; } /* pitch styles: sharp corners, black white grey plus green only. Red only for the revoke link. Merged into campaign-ui.css by the coordinator; this file holds the pitch snippet only. */ .pitchview { max-width: 860px; margin: 0 auto; padding: 16px; } .pitchhead { border: 1px solid #111; padding: 16px; margin-bottom: 16px; background: #fff; } .pitchword { font-size: 15px; letter-spacing: .14em; } .pitchkicker { font-size: 12px; letter-spacing: .14em; color: #737373; } .pitchhead h1 { margin: 8px 0; font-size: 26px; } .pitchby { font-size: 13px; color: #555; margin: 4px 0; } .pitchnote { font-size: 15px; line-height: 1.6; margin: 8px 0; } .pitchcover img { width: 100%; display: block; } .pitchpeople { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .pitchperson { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e2df; padding: 4px 8px 4px 4px; font-size: 13px; background: #fff; } .pitchperson .wbface { width: 24px; height: 24px; } .pitchstatus { color: #2E7D32; } .pitchnav { display: flex; gap: 0; margin-top: 12px; border-top: 1px solid #e5e2df; padding-top: 12px; } .pitchnav button { background: #fff; border: 1px solid #111; border-radius: 0; padding: 6px 12px; font-size: 13px; cursor: pointer; margin-right: 8px; } .pitchnav button.on { background: #2E7D32; border-color: #2E7D32; color: #fff; } .pitchbody { background: #fff; } .pitchanswer { border: 1px solid #2E7D32; padding: 12px; margin: 12px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pitchanswer button { background: #2E7D32; color: #fff; border: 0; border-radius: 0; padding: 8px 16px; font-size: 14px; cursor: pointer; } .pitchanswerdone { color: #2E7D32; font-size: 14px; } .pitchfoot { margin-top: 16px; } .pitchhome { background: #fff; border: 1px solid #111; border-radius: 0; padding: 8px 12px; font-size: 13px; cursor: pointer; } .pitchbox { border: 1px solid #111; padding: 12px; margin-top: 16px; background: #fff; } .pitchrow { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .pitchrow button { background: #2E7D32; color: #fff; border: 0; border-radius: 0; padding: 6px 12px; font-size: 13px; cursor: pointer; } .pitchfield { display: block; margin: 8px 0; } .pitchfield span { display: block; font-size: 12px; color: #737373; } .pitchfield input { width: 100%; border: 1px solid #111; border-radius: 0; padding: 8px; font-size: 14px; box-sizing: border-box; } .pitchlinkrow { display: flex; gap: 8px; margin: 8px 0; } .pitchlinkrow input { flex: 1; border: 1px solid #111; border-radius: 0; padding: 8px; font-size: 13px; min-width: 0; } .pitchlinkrow button { background: #fff; border: 1px solid #111; border-radius: 0; padding: 6px 12px; font-size: 13px; cursor: pointer; } .pitchlinkrow .pitchrevoke { color: #b3261e; border-color: #b3261e; } .pitchbox .pitchpeople { display: block; margin: 12px 0 0; } .pitchbox .pitchperson { display: flex; margin-bottom: 8px; } .pitchemail { border: 1px solid #111; border-radius: 0; padding: 6px; font-size: 13px; margin-left: auto; } .pitchnudge { background: #fff; border: 1px solid #111; border-radius: 0; padding: 6px 12px; font-size: 13px; cursor: pointer; margin-left: 8px; } #pitchMsg { font-size: 13px; color: #2E7D32; } /* video review styles, to merge into campaign-ui.css. Compend rules: sharp corners, black, white and grey plus green #2E7D32 only, red #b3261e only for delete, solid colors, no shadows, no fading. */ #campaignView .vdgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 8px 0 12px; align-items: start; } @media (min-width: 760px) { #campaignView .vdgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { #campaignView .vdgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } #campaignView .vdgrid.wbdrop { outline: 2px solid #2E7D32; outline-offset: 4px; } #campaignView .vdcard { cursor: pointer; min-width: 0; } #campaignView .vdframe { position: relative; background: #0d0d0d; aspect-ratio: 16 / 9; } #campaignView .vdframe video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d0d0d; } #campaignView .vdframe .vdtime { position: absolute; right: 6px; bottom: 6px; background: #0d0d0d; color: #fff; font-size: 12px; padding: 2px 6px; } #campaignView .vdfoot { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding-top: 6px; font-size: 13px; } #campaignView .vdname { font-weight: 700; overflow-wrap: anywhere; } #campaignView .vdmeta { color: #737373; } #campaignView .vdwarn { color: #b3261e; } #campaignView .vdmsg { font-size: 13px; color: #737373; min-height: 1em; } #campaignView .vdplus { aspect-ratio: 16 / 9; min-height: 0; } /* timeline strip: 44px tall, markers are 44px touch targets. */ #vdReview .vdtimeline { position: relative; height: 44px; margin: 8px 0 4px; border-top: 1px solid #e5e2df; border-bottom: 1px solid #e5e2df; cursor: pointer; } #vdReview .vdmark { position: absolute; top: 0; width: 44px; height: 44px; margin-left: -22px; padding: 0; background: transparent; border: none; border-radius: 0; cursor: pointer; } #vdReview .vdmark span { display: block; width: 10px; height: 10px; margin: 17px auto; background: #0d0d0d; } #vdReview .vdmark.done span { background: #2E7D32; } #vdReview .vdmark.on span { background: #2E7D32; outline: 2px solid #0d0d0d; outline-offset: 2px; } /* review overlay: player and timeline on the left, notes on the right. */ #vdReview { display: none; position: fixed; inset: 0; z-index: 60; background: #fff; overflow: auto; } #vdReview.open { display: block; } #vdReview .vdrev { min-height: 100%; padding: 16px; box-sizing: border-box; } #vdReview .vdrevtop { display: flex; gap: 16px; align-items: baseline; margin-bottom: 12px; } #vdReview .vdrevhint { color: #737373; font-size: 13px; } #vdReview .vdrevtop .psrvnav { margin-left: auto; display: flex; gap: 16px; align-items: baseline; } #vdReview .vdrevtop button { border: none; background: transparent; border-radius: 0; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #0d0d0d; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #vdReview .vdrevtop button:disabled { color: #737373; cursor: default; text-decoration: none; } #vdReview .vdrevtop #vdClose { text-decoration: none; font-size: 20px; line-height: 1; } #vdReview .vdrevbody { display: grid; gap: 24px; align-items: start; } @media (min-width: 1000px) { #vdReview .vdrevbody { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } #vdReview .vdstage { position: relative; background: #0d0d0d; } #vdReview .vdstage video { display: block; width: 100%; max-height: 70vh; background: #0d0d0d; } #vdReview .vdpin { position: absolute; transform: translate(-50%, -50%); display: none; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; background: #0d0d0d; color: #fff; border: 1px solid #fff; border-radius: 0; font-family: Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; } #vdReview .vdpin.near { display: block; } #vdReview .vdrevacts { display: flex; gap: 16px; align-items: baseline; margin-top: 8px; } #vdReview .vdrevacts .wklink { border: none; background: transparent; border-radius: 0; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #0d0d0d; text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer; } #vdReview .vdnote { border: 1px solid #e5e2df; padding: 10px 12px; margin: 0 0 10px; background: #fff; } #vdReview .vdnote.on { border-color: #0d0d0d; } #vdReview .vdnote.done .vdnotebody { color: #737373; } #vdReview .vdnotetext { display: block; width: 100%; border: none; background: transparent; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #0d0d0d; resize: none; overflow: hidden; box-sizing: border-box; } #vdReview .vdnotebody { font-size: 14px; line-height: 1.5; } #vdReview .vdnotehead { display: flex; gap: 8px; align-items: center; margin-top: 6px; } #vdReview .vdnotehead .vdtime { border: none; background: transparent; border-radius: 0; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; color: #0d0d0d; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #vdReview .vdnote.done .vddone { color: #2E7D32; } #vdReview .vdnotehead .vddone, #vdReview .vdnotehead .vddel { border: none; background: transparent; border-radius: 0; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #0d0d0d; padding: 0; cursor: pointer; } #vdReview .vdnotehead .vddel { color: #b3261e; font-size: 16px; line-height: 1; } #vdReview .vdtags { display: none; margin-top: 6px; } #vdReview .vdnote.on .vdtags { display: block; } #vdReview .vdtag { border: none; background: transparent; border-radius: 0; padding: 0; margin-right: 4px; cursor: pointer; } @media (max-width: 999px) { #vdReview .vdrevnotes { margin-top: 8px; } } /* P4 deliverables variants. Sharp corners, black white grey plus green #2E7D32 only. Coordinator merges this into campaign-ui.css. */ #campaignView .vxsec { border-top: 1px solid #ddd; margin-top: 24px; padding-top: 12px; } #campaignView .vxsrc { border: 1px solid #ddd; padding: 12px; margin: 12px 0; } #campaignView .vxfocus { position: relative; max-width: 420px; border: 1px solid #ddd; cursor: crosshair; } #campaignView .vxfocus img, #campaignView .vxfocus video { display: block; width: 100%; } #campaignView .vxcrop { position: absolute; border: 2px solid #2E7D32; pointer-events: none; } #campaignView .vxdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #2E7D32; pointer-events: none; } #campaignView .vxname { font-weight: bold; margin-top: 8px; } #campaignView .vxhint { color: #737373; font-size: 13px; display: block; margin-top: 4px; } #campaignView .vxpresets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } #campaignView .vxpreset { border: 1px solid #000; background: #fff; color: #000; padding: 6px 10px; border-radius: 0; cursor: pointer; } #campaignView .vxpreset.on { background: #2E7D32; border-color: #2E7D32; color: #fff; } #campaignView .vxpreset:disabled { border-color: #ddd; color: #737373; cursor: default; } #campaignView .vxrows { margin-top: 12px; } #campaignView .vxrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid #ddd; padding: 8px 0; } #campaignView .vxrat { font-weight: bold; } #campaignView .vxpx { color: #737373; } #campaignView .vxstatus.ready { color: #2E7D32; } #campaignView .vxstatus.stale { color: #737373; } #campaignView .vxdl { color: #2E7D32; } #campaignView .vxall { margin-top: 8px; } #campaignView .vxmsg { font-size: 13px; color: #737373; min-height: 1em; } @media (max-width: 640px) { #campaignView .vxsrc { padding: 8px; } #campaignView .vxrow { gap: 8px; } } /* P3/P4 phase 2, Nov 11 2026: video still labels and time input. */ #campaignView .vxstill { color: #737373; font-size: 12px; } #campaignView .vxstillat { font-size: 13px; color: #555; } #campaignView .vxstilltime { width: 56px; border: 1px solid #bbb; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; padding: 6px 8px; background: #fff; color: #111; } /* Keyboard focus for campaign controls. */ #campaignView .vdcard:focus-visible, #campaignView .vxfocus:focus-visible { outline: 2px solid #2E7D32; outline-offset: 3px; } @media (max-width: 640px) { .pitchlinkrow, .pitchbox .pitchperson { flex-wrap: wrap; } .pitchlinkrow input { flex-basis: 100%; } .pitchemail { margin-left: 0; min-width: 0; max-width: 100%; } .pitchnudge { margin-left: 0; } }