/* Relay's personal workspace shares the client's quiet editorial language. */
#freelance-app h1{font-size:39px;letter-spacing:-1.2px;margin:10px 0 14px}
#freelance-app .section-intro{margin:0 0 26px;font-size:15px}
#freelance-app p{overflow-wrap:anywhere}
.f-home-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px}
.f-priority-top{display:flex;align-items:center;gap:12px}
.f-priority-top>div{min-width:0;flex:1}
.f-priority-top img{width:112px;height:105px;object-fit:contain;flex-shrink:0}
.f-priority h2{font-size:27px;line-height:1.2;max-width:330px}
.f-priority>p,#f-project-next,.f-draft-delivery>p{font-size:14px;line-height:1.8;color:var(--muted);margin:14px 0 21px}
.f-next-meeting h2{font-size:24px;margin:17px 0 9px}
.f-next-meeting p{font-size:14px;line-height:1.7;margin:0 0 5px}
.f-next-meeting small{font-size:12px;color:var(--secondary);display:block}
.f-text-link{display:inline-flex;align-items:center;padding:6px 0;min-height:44px;border:0;border-radius:6px;background:transparent;font-size:13px;text-decoration:underline;text-underline-offset:5px;text-align:left;color:#7c4632}
.f-text-link:hover{background:transparent;color:#5e3525}
.f-next-meeting>.f-text-link{margin-top:17px}
.f-dashboard-projects{margin:25px 0 20px}
.f-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.f-section-heading h2{font-size:25px;line-height:1.25;margin:0}
.f-project-row{display:flex;align-items:center;gap:17px;width:100%;padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px;text-align:left}
.f-project-monogram{font-family:'Times New Roman',Times,serif;font-size:26px;letter-spacing:-2px;display:grid;place-items:center;flex-shrink:0;width:55px;height:55px;border-radius:13px;background:#efede7;color:#4b5049}
.f-project-name{min-width:0;flex:1}
.f-project-name strong{display:block;font-family:'Times New Roman',Times,serif;font-weight:400;letter-spacing:-.4px;font-size:26px;line-height:1.2}
.f-project-name small{display:block;font-size:12px;color:var(--secondary);margin-top:7px;line-height:1.5}
.f-project-row .pill{max-width:200px;flex-shrink:0}
.f-project-row>span:last-child{color:#7c4632}
.f-task-panel{margin-top:20px}
.f-task-row,.f-availability-day{display:flex;align-items:flex-start;gap:13px;min-height:64px;padding:15px 0;border-top:1px solid var(--line);cursor:pointer}
.f-task-row input,.f-availability-day input{width:20px;height:20px;min-height:20px;flex-shrink:0;display:inline-block;margin:3px 0 0;padding:0;accent-color:#565e4c}
.f-task-row span,.f-availability-day span{min-width:0}
.f-task-row strong,.f-availability-day strong{font-size:14px;font-weight:500;display:block;line-height:1.5}
.f-task-row small,.f-availability-day small{display:block;font-size:13px;line-height:1.65;color:var(--secondary);margin-top:3px}
.f-task-row:has(input:checked) strong{text-decoration:line-through;text-decoration-color:#b2b5aa}
.f-private-caption{font-size:12px;line-height:1.7;color:var(--secondary);margin:15px 0 0}
.f-project-card{display:flex;align-items:center;gap:27px;background:#fff;border:1px solid var(--line);border-radius:21px;padding:27px}
.f-project-card>img{display:block;width:180px;height:190px;object-fit:contain;flex-shrink:0}
.f-project-card>div{min-width:0}
.f-project-card h2{font-size:31px;margin:6px 0 14px}
.f-project-card p{font-size:14px;line-height:1.8;color:var(--muted);margin:16px 0}
.f-project-card p.meta{font-size:12px}
.f-project-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
.f-project-heading>div{min-width:0}
.f-project-tabs{display:flex;gap:9px;flex-wrap:wrap;padding:0 0 20px;margin:10px 0 22px;border-bottom:1px solid var(--line)}
.f-project-tabs button{border:1px solid transparent;background:transparent;font-size:14px;padding:8px 14px;border-radius:12px}
.f-project-tabs button[aria-pressed=true]{background:#fff;border-color:var(--line);color:#713f2e}
.f-production-roadmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;border-top:1px solid var(--line);padding-top:21px;margin-top:25px}
.f-production-roadmap>div{border-left:2px solid #dedfd7;padding-left:13px}
.f-production-roadmap strong{font-size:14px;font-weight:500;display:block}
.f-production-roadmap .meta{font-size:12px;display:block;margin-top:5px}
.f-shared-delivery{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px}
.f-shared-delivery h2{font-size:27px;margin:5px 0 13px}
.f-shared-delivery h2 span{color:var(--secondary);font-size:23px}
.f-shared-delivery p{margin:10px 0 0}
.f-client-feedback{margin:20px 0 24px;padding:0 0 13px;border-bottom:1px solid var(--line)}
.f-client-feedback>summary{cursor:pointer;min-height:44px;font-size:14px;list-style:inside}
.f-client-feedback .document-feedback p{font-size:14px}
.f-draft-delivery{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.f-draft-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.f-draft-heading h2{font-size:27px}
#f-draft-ready>img{display:block;width:100%;max-width:400px;height:auto;border:1px solid var(--line);border-radius:8px}
#f-draft-ready>.meta{font-size:13px;line-height:1.7}
.f-draft-delivery p.demo-note{font-size:12px;line-height:1.65;margin:18px 0 0}
.f-note-heading{font-family:'Times New Roman',Times,serif;font-size:27px;line-height:1.3;display:block}
#f-note{min-height:230px;font-size:16px;line-height:1.8;padding:20px}
#f-note-notice,#f-reply-notice,#f-delivery-notice,#f-agenda-notice{font-size:13px;color:var(--secondary);line-height:1.7}
#f-note-notice:empty,#f-reply-notice:empty,#f-delivery-notice:empty,#f-agenda-notice:empty{display:none}
.f-conversation-context{display:none}
@media(max-width:700px){.f-conversation-context{display:block}}
.f-mail-caption{font-size:12px;letter-spacing:.03em;color:var(--secondary);padding:18px 16px;margin:0;border-bottom:1px solid var(--line)}
#f-reply-form{margin-top:23px}
#f-reply-form label{font-size:14px}
#f-reply{font-size:16px;min-height:110px}
#f-appointments-page .upcoming-meetings{margin-top:0}
.f-availability>h2{font-size:26px}
#f-availability-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 23px}
#f-storage-notice{font-size:13px;line-height:1.7;color:#894a34}
.f-preview-dialog{max-width:850px;padding:0;background:#fcfcf8}
.f-preview-body{padding:24px}
#f-preview-page{display:block;width:100%;height:auto;aspect-ratio:1200/867;object-fit:contain;border:1px solid var(--line);border-radius:8px}
@media(max-width:1050px){.f-home-grid{grid-template-columns:minmax(0,1fr)}.f-next-meeting{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:15px}.f-next-meeting>.label{grid-column:1/-1}.f-next-meeting h2{margin-top:7px}.f-next-meeting>.f-text-link{align-self:center;margin:0}.f-project-row{flex-wrap:wrap}.f-project-row .pill{margin-left:72px}.f-project-row>span:last-child{margin-left:auto}.f-project-card{gap:18px}.f-project-card>img{width:125px;height:150px}}
@media(max-width:700px){
 #freelance-app h1{font-size:35px}
 .f-priority-top img{width:83px;height:85px}
 .f-priority h2{font-size:25px}
 .f-priority>p{font-size:15px}
 .f-next-meeting{grid-template-columns:minmax(0,1fr)}
 .f-next-meeting>.f-text-link{justify-self:start;margin-top:10px}
 .f-project-row{display:grid;grid-template-columns:46px minmax(0,1fr) 15px;gap:12px;padding:17px}
 .f-project-monogram{width:46px;height:48px;font-size:24px}
 .f-project-name strong{font-size:25px}
 .f-project-name small{font-size:13px}
 .f-project-row .pill{grid-column:2/-1;grid-row:2;margin:0;justify-self:start;max-width:100%;flex-shrink:1}
 .f-project-row>span:last-child{grid-column:3;grid-row:1;margin:0}
 .f-section-heading h2{max-width:none;font-size:25px}
 .f-task-row strong,.f-availability-day strong{font-size:15px}
 .f-project-card{display:grid;grid-template-columns:minmax(0,1fr);padding:20px;gap:12px}
 .f-project-card>img{width:125px;height:100px;justify-self:start}
 .f-project-heading{flex-direction:column;align-items:flex-start;gap:0}
 .f-project-heading .pill{margin-bottom:8px}
 .f-project-tabs{gap:4px}
 .f-project-tabs button{padding:8px 10px;font-size:14px;white-space:normal}
 .f-production-roadmap,#f-availability-days{grid-template-columns:minmax(0,1fr);gap:18px}
 #f-availability-days{gap:0}
 .f-shared-delivery{flex-wrap:wrap;padding:20px}
 .f-shared-delivery>div{min-width:0}
 .f-shared-delivery>button{width:100%}
 .f-draft-delivery{padding:20px}
 .f-draft-heading h2{font-size:25px}
 .f-text-link{font-size:14px}
 dialog.f-preview-dialog{padding:0;width:calc(100% - 20px)}
 .f-preview-body{padding:19px}
 #f-preview .delivery-top{position:sticky;top:0;background:#fcfcf8;z-index:2}
}
/* Small controls for personal tasks; project sharing remains a separate action. */
.f-task-panel .f-section-heading{column-gap:12px;row-gap:0}
.f-task-panel .f-section-heading h2{flex:1}
.f-task-panel .f-section-heading>.f-text-link{font-size:13px}
.f-task-row>label{display:flex;align-items:flex-start;gap:13px;flex:1;min-width:0;cursor:pointer}
.f-task-row>label>span{min-width:0}
.f-task-edit{min-height:44px;flex-shrink:0;border:0;background:transparent;font-size:12px;padding:5px 7px;color:#7c4632;text-decoration:underline;text-underline-offset:4px}
.f-task-row small{white-space:pre-wrap;overflow-wrap:anywhere}
.f-task-row small.f-task-date{font-size:12px;color:#714631;margin-top:7px}
.f-task-row small.f-task-source{font-size:12px;margin-top:5px}
.f-task-dialog{max-width:590px}
.f-task-dialog h2{font-family:'Times New Roman',Times,serif;font-size:29px;font-weight:400;margin:0}
.f-task-dialog label{display:block;font-size:14px}
.f-task-dialog input,.f-task-dialog textarea{font-size:16px}
#f-task-detail{min-height:110px}
#f-task-error{font-size:13px;color:#894a34}
#f-task-error:empty{display:none}
.f-task-notice{margin-top:20px}
#f-task-notice{font-size:13px;color:var(--secondary);margin:0}
#f-task-notice:empty,#f-sync-notice:empty,#client-sync-notice:empty{display:none}
@media(max-width:700px){
 .f-task-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .f-task-edit{justify-self:start;margin-left:33px;font-size:14px;padding:4px 0}
 .f-task-panel .f-section-heading>.f-text-link{font-size:14px}
 .f-task-panel .f-section-heading>.meta{font-size:13px}
 .f-task-dialog .actions button{width:100%}
 .f-task-dialog .brief-top{position:static}
}
/* Attachments: one quiet action, with the selected files visible before sending. */
.attachment-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:10px 0 12px}
.attachment-tools .attach-button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 12px;font-size:14px;background:transparent;border:1px solid var(--line)}
.attach-button>span{font-size:23px;font-weight:400;line-height:1}
.attachment-tools>span{font-size:12px;color:var(--secondary)}
.attachment-drafts,.message-attachments{display:grid;gap:8px;min-width:0;margin:0 0 12px}
.attachment-drafts:empty{display:none}
.attachment-chip,.attachment-download{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:#fafaf7}
.attachment-copy{display:block;min-width:0;text-align:left}
.attachment-copy strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere;line-height:1.5}
.attachment-copy small{display:block;font-size:12px;color:var(--secondary);margin-top:2px}
.remove-attachment{border:0;background:transparent;padding:3px;min-width:44px;min-height:44px;flex-shrink:0;font-size:24px;color:var(--secondary)}
.message-attachments{margin:14px 0 0}
.attachment-download{width:100%;cursor:pointer;min-height:54px}
.attachment-arrow{font-size:22px;flex-shrink:0;color:#7c4632}
.attachment-notice,.mail-message p.attachment-notice{font-size:12px;line-height:1.6;color:var(--secondary);margin:5px 0 12px;overflow-wrap:anywhere}
.attachment-notice:empty{display:none}
/* A client request, its version, then the freelancer's next action. */
.f-client-feedback{margin:24px 0;padding:0 0 23px;border-bottom:1px solid var(--line)}
.f-client-feedback>h2{font-family:inherit;font-size:15px;font-weight:500;margin:0 0 16px}
.f-client-feedback .document-feedback,.f-feedback-history .document-feedback{padding:0;margin:16px 0 0;border:0;background:transparent}
.f-client-feedback .document-feedback:first-child{margin-top:0}
.f-feedback-quote{border-left:2px solid #c48b72;padding-left:16px;font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0 16px}
.document-feedback .f-feedback-task{font-size:13px;line-height:1.6;color:var(--secondary);margin:0 0 5px}
.f-feedback-history{margin:24px 0 12px;border-top:1px solid var(--line);padding-top:10px}
.f-feedback-history>summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-size:13px;color:var(--secondary)}
.f-conversation-link{margin-top:8px}
@media(max-width:700px){
 .attachment-tools{gap:5px 10px}
 .attachment-tools>span{font-size:13px}
 .attachment-copy strong{font-size:14px}
 .attachment-chip,.attachment-download{padding:8px 10px}
 .attachment-notice,.mail-message p.attachment-notice{font-size:13px}
 .f-client-feedback>h2{line-height:1.5;font-size:16px}
 .f-client-feedback .mail-meta,.f-feedback-history .mail-meta{gap:4px 12px}
 .f-client-feedback .f-text-link,.f-conversation-link{white-space:normal;text-align:left;line-height:1.5}
 .f-draft-heading .pill{white-space:normal}
}
/* Portfolio navigation sits above the app, and is visible from both roles. */
.demo-role-bar{max-width:1240px;margin:16px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--secondary);font-size:12px}
.demo-role-label{color:#75776f}
.demo-role-links{display:flex;align-items:center;gap:3px;padding:3px;background:#f7f7f480;border:1px solid #deded8;border-radius:24px;flex-shrink:0}
.demo-role-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:86px;padding:6px 14px;border-radius:20px;text-decoration:none;font-size:13px;line-height:1.5;color:var(--secondary)}
.demo-role-links a:hover{background:#f7f7f4}
.demo-role-links a[aria-current=page]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #252a300a}
.demo-role-bar~#client-app>header,.demo-role-bar~#freelance-app>header{margin-top:12px}
@media(max-width:1000px){.demo-role-bar{margin-inline:16px}}
@media(max-width:700px){
 .demo-role-bar{margin:12px 20px 0;align-items:center;gap:10px}
 .demo-role-bar>span{font-size:12px;line-height:1.5}
 .demo-role-label{display:block}
 .demo-role-links a{min-width:70px;padding:6px 10px;font-size:13px}
}