/* Task-specific layouts on the shared paper theme. */
.work-offer { margin: 20px 0 24px; padding: 24px; border: 1px solid var(--line); border-radius: 18px 14px 19px 15px; background: var(--blue-soft); background-image: var(--paper-grain); }
.work-service { background-color: var(--yellow-soft); }
.work-offer-heading, .work-detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.work-offer-heading > span:first-child { letter-spacing: .08em; font-weight: 650; color: var(--green); }
.work-offer h2 { margin: 18px 0; font: 650 19px/1.5 var(--display-font); }
.work-facts, .work-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.work-facts small, .work-parties small, .work-request-note small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.work-facts strong { font-size: 16px; overflow-wrap: anywhere; }
.work-steps { display: flex; justify-content: space-between; gap: 10px; list-style: none; counter-reset: step; padding: 18px 0; margin: 0 0 14px; border-top: 1px solid #45634920; }
.work-steps li { flex: 1; color: var(--muted); font-size: 11px; line-height: 1.7; }
.work-steps li::before { display: block; counter-increment: step; content: '0' counter(step); margin-bottom: 4px; color: var(--green); font-size: 13px; font-weight: 650; }
.work-primary, .work-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: 12px 10px 13px 9px; font: 600 14px/1.5 var(--body-font); cursor: pointer; text-decoration: none; }
.work-primary { color: var(--surface); background: var(--green); background-image: var(--paper-grain); }
.work-secondary { color: var(--green); background: var(--surface); border-color: var(--line); }
.work-primary:hover { background-color: var(--blue-dark); }
.work-primary:disabled { opacity: .5; cursor: default; }
.work-offer > .work-primary { width: 100%; }
.work-offer-actions { display: flex; flex-direction: column; gap: 10px; }
.work-offer-actions .work-primary, .work-offer-actions .work-secondary { width: 100%; }
.work-helpers { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--ink); }
.work-contact { margin: 16px 0; }
.work-contact .work-primary { width: 100%; }
.work-hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.8; }
.work-status { display: inline-flex; border-radius: 7px; padding: 5px 10px; color: var(--green); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; }
.work-status-active, .work-status-helping { background: var(--blue-soft); color: #365339; }
.work-status-pending, .work-status-awaiting-confirmation { background: var(--yellow-soft); color: #775c25; }
.work-status-completed { background: #dceadb; color: #365339; }
.work-status-cancelled, .work-status-declined, .work-status-closed { background: #ece9e3; color: #736a62; }
.work-dialog, .work-detail, .work-center { color: var(--ink); padding: 48px 36px 30px; }
.work-dialog h1, .work-detail h1, .work-center h1 { font: 700 26px/1.5 var(--display-font); margin: 18px 0; overflow-wrap: anywhere; }
.work-dialog > p, .work-intro { color: var(--muted); font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.work-dialog form { display: grid; gap: 14px; margin-top: 26px; }
.work-dialog label { font-size: 14px; }
.work-dialog textarea { width: 100%; font: 16px/1.7 var(--body-font); background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: 14px; resize: vertical; }
.work-error { color: #a33930; font-size: 13px; }
.work-detail-heading { margin-top: 24px; }
.work-parties { padding: 22px 0; border-block: 1px solid var(--line); }
.work-parties a { font-size: 16px; font-weight: 600; color: var(--green); text-decoration: none; overflow-wrap: anywhere; }
.work-budget { font-size: 14px; color: var(--muted); }
.work-budget strong { display: block; color: var(--ink); font-size: 20px; margin-top: 8px; }
.work-request-note { padding: 18px; background: var(--paper); border-radius: 12px; }
.work-request-note p, .work-timeline p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.work-next { padding: 22px 0; border-block: 1px solid var(--line); margin: 18px 0 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.work-next h2 { flex-basis: 100%; margin: 0 0 5px; font-size: 17px; }
.work-timeline-title { font-size: 18px; }
.work-timeline { list-style: none; padding: 0 0 0 14px; margin-left: 5px; border-left: 1px solid var(--line); }
.work-timeline li { position: relative; padding: 12px 0 18px 10px; }
.work-timeline li::before { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: -18px; top: 18px; background: var(--green); }
.work-timeline strong { font-size: 14px; }
.work-timeline time { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.work-list { display: grid; gap: 14px; padding-top: 12px; }
.work-record { display: block; position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 15px 12px 16px 13px; background: var(--surface); text-decoration: none; color: var(--ink); }
.work-record > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.work-record h2 { font: 650 17px/1.6 var(--display-font); margin: 15px 0 8px; overflow-wrap: anywhere; }
.work-record p { color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.work-record time { color: var(--muted); font-size: 11px; }
.work-record-link { display: block; margin-top: 18px; color: var(--green); font-size: 13px; }
.work-record:hover { border-color: var(--green); }
.work-unread { background-color: #e6edda55; }
.work-unread-dot { color: #af6246; font-size: 9px; }
.work-message { display: block; margin: 14px 18px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; }
.work-message strong { font-size: 15px; }.work-message p { font-size: 14px; line-height: 1.7; }.work-message small { color: var(--muted); font-size: 11px; }
.crayon-web .modal-card:has(.work-detail), .crayon-web .modal-card:has(.work-center) { width: min(800px,100%); }
.social-home-footer { gap: 20px; flex-wrap: wrap; }
#service-inbox[hidden] { display: none; }
.crayon-h5 .work-offer { margin: 20px 0; padding: 20px; }
.crayon-h5 .work-dialog, .crayon-h5 .work-detail, .crayon-h5 .work-center { padding: 20px; }
.crayon-h5 .work-center h1 { display: none; }
.crayon-h5 .work-offer h2 { font-size: 18px; }
.crayon-h5 .work-primary, .crayon-h5 .work-secondary { text-decoration: none; }
.crayon-h5 .work-record, .crayon-h5 .work-message { text-decoration: none; }
.crayon-h5 .work-dialog h1, .crayon-h5 .work-detail h1 { font-size: 23px; }
@media(max-width:600px) { .work-dialog,.work-detail,.work-center { padding: 44px 22px 24px; }.work-offer { padding: 18px; }.work-offer h2 { font-size: 17px; } }