.campaign-view { --campaign-border: #e0e7e1; }
.campaign-view h2 { font-size: 17px; }
.campaign-notice { display: flex; align-items: center; gap: 14px; padding: 17px 0 22px; border-bottom: 1px solid var(--campaign-border); margin-bottom: 22px; }
.campaign-notice > svg { width: 23px; height: 23px; color: var(--green); }
.campaign-notice > div { flex: 1; min-width: 0; }
.campaign-notice strong { display: block; font-size: 14px; font-weight: 600; }
.campaign-notice span:not(.demo-pill) { display: block; color: #7a887e; font-size: 12px; margin-top: 4px; }
.demo-pill { font-size: 11px; color: #8b7846; background: #f1e9d5; border-radius: 4px; padding: 4px 9px; white-space: nowrap; }
.work-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
.work-metric { display: flex; gap: 13px; align-items: center; border-right: 1px solid var(--campaign-border); }
.work-metric:last-child { border-right: 0; }
.work-metric > svg { width: 23px; height: 23px; color: #458667; }
.work-metric span { display: block; font-size: 12px; color: #7f8b82; }
.work-metric strong { display: block; font-size: 27px; font-weight: 600; color: #274d37; margin-top: 3px; font-variant-numeric: tabular-nums; }
.work-toolbar, .work-tools, .section-toolbar, .earnings-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.work-tools { margin-bottom: 0; }
.work-tools select, .section-toolbar select { border: 1px solid #d7e2d9; background: white; padding: 9px 10px; border-radius: 6px; font-size: 12px; color: #637b69; }
.work-tabs, .earnings-tabs { display: flex; gap: 18px; flex-wrap: wrap; }
.work-tabs button, .earnings-tabs button { background: transparent; color: #8a948c; padding: 11px 0; font-size: 12px; border-bottom: 2px solid transparent; white-space: nowrap; }
.work-tabs button.active, .earnings-tabs button[aria-selected="true"] { border-bottom-color: var(--green); color: var(--green); font-weight: 700; }
.task-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.campaign-task { background: white; border: 1px solid var(--campaign-border); padding: 20px; border-radius: 8px; min-width: 0; display: flex; flex-direction: column; }
.task-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 22px; }
.facebook-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #eaf0fc; color: #3974cd; font-size: 26px; font-weight: 800; font-family: Arial, sans-serif; flex-shrink: 0; line-height: 1; padding-top: 4px; }
.campaign-badge { display: inline-flex; align-items: center; justify-content: center; background: #edf2ed; color: #708274; border-radius: 4px; font-size: 10px; font-weight: 600; padding: 4px 7px; white-space: nowrap; }
.campaign-badge.open, .campaign-badge.approved, .campaign-badge.paid { background: #e7f3eb; color: #3c855a; }
.campaign-badge.pending, .campaign-badge.requested { background: #fbf1d9; color: #a48031; }
.campaign-badge.rejected { background: #f9e8e5; color: #ac6c62; }
.campaign-name { color: #829089; font-size: 11px; margin-bottom: 6px; overflow-wrap: anywhere; }
.campaign-task h2 { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.task-excerpt { color: #8b9690; font-size: 12px; line-height: 1.7; margin: 11px 0 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 61px; overflow-wrap: anywhere; }
.task-reward { display: flex; align-items: baseline; gap: 7px; margin-top: auto; flex-wrap: wrap; }
.task-reward strong { color: var(--green); font-size: 22px; font-variant-numeric: tabular-nums; }
.task-reward span { color: #9aa39c; font-size: 10px; }
.task-card-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 10px; color: #8b988e; padding: 16px 0; }
.task-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.task-card-meta svg { width: 13px; height: 13px; }
.task-card-actions { display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf1ee; padding-top: 15px; }
.task-card-actions .button { flex: 1; justify-content: space-between; }
.campaign-empty { padding: 50px 20px 65px; }
.campaign-empty p { max-width: 350px; margin-left: auto; margin-right: auto; }
.work-footnote { display: flex; align-items: flex-start; gap: 8px; color: #929d95; font-size: 11px; line-height: 1.7; padding: 22px 0; margin-top: 15px; border-top: 1px solid var(--campaign-border); }
.work-footnote svg { width: 15px; height: 15px; margin-top: 2px; }
.section-caption { color: #8a978e; font-size: 12px; font-weight: 400; }
p.section-caption { margin-top: 6px; }
.campaign-table { width: 100%; background: white; border-collapse: collapse; text-align: left; font-size: 12px; }
.campaign-table th { padding: 13px 14px; font-size: 11px; color: #7e8d83; font-weight: 600; background: #eaf0e9; white-space: nowrap; }
.campaign-table td { padding: 15px 14px; border-bottom: 1px solid #edf1ed; overflow-wrap: anywhere; max-width: 260px; }
.campaign-table td strong { font-size: 12px; font-weight: 600; display: block; }
.campaign-table td small { display: block; font-size: 10px; color: #90a097; margin-top: 3px; }
.money-cell { font-variant-numeric: tabular-nums; font-weight: 700; color: #386449; white-space: nowrap; }
.campaign-table .button { font-size: 11px; padding: 8px 10px; }
.work-summary-toolbar, .work-summary-caption { flex-wrap: wrap; }
.work-summary-caption { display: flex; justify-content: space-between; gap: 8px 20px; margin-bottom: 12px; }
.work-summary-table { min-width: 660px; }
.work-summary-table th small { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; color: var(--muted); }
:root .work-summary-table tbody th { background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; min-width: 160px; max-width: 260px; padding: 15px 14px; }
.work-summary-table td { font-variant-numeric: tabular-nums; }
.work-summary-table .summary-approved { font-weight: 700; color: var(--accent-text); }
.earnings-heading { border-bottom: 1px solid var(--campaign-border); padding-bottom: 13px; }
.earnings-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 28px; }
.earning-stat { background: white; border: 1px solid var(--campaign-border); border-radius: 8px; padding: 19px; min-width: 0; }
.earning-stat:first-child { background: var(--green); color: white; border-color: var(--green); }
.earning-stat > div { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.earning-stat > div svg { width: 16px; height: 16px; }
.earning-stat > strong { display: block; font-size: 26px; font-weight: 600; line-height: 1.3; margin: 21px 0 9px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.earning-stat p { color: #8a998e; font-size: 10px; }
.earning-stat:first-child p { color: #b2d2bd; }
.earnings-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr); gap: 30px; padding: 5px 0 26px; border-bottom: 1px solid var(--campaign-border); }
.earnings-activity { min-width: 0; }
.earning-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 205px; gap: 14px; padding-top: 15px; }
.earning-day { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; font-size: 11px; color: #8c9b90; }
.earning-day-value { font-size: 9px; white-space: nowrap; }
.earning-bar-pair { height: 140px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid #d7e0d7; background: repeating-linear-gradient(to top, transparent 0, transparent 34px, #e8eee7 34px, #e8eee7 35px); }
.earning-bar { width: 18px; min-height: 2px; border-radius: 5px 5px 0 0; }
.earning-bar.approved { background: #25825b; }
.earning-bar.pending { background: #dcbb74; }
.legend-dot.amber { background: #dcbb74; }
.earning-legend { font-size: 10px; margin-top: 13px; }
.payout-summary { border-left: 1px solid var(--campaign-border); padding: 7px 0 7px 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.payout-summary > svg { color: #538267; width: 23px; height: 23px; margin-bottom: 13px; }
.payout-summary > span { color: #8a988e; font-size: 12px; }
.payout-summary > strong { font-size: 34px; font-weight: 600; color: var(--green); margin: 5px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; }
.payout-summary > p { color: #8c9a8e; font-size: 11px; line-height: 1.7; margin-bottom: 18px; }
.payout-summary .button { width: 100%; }
.ledger-heading { margin: 24px 0 18px; }
.rate-label { font-size: 11px; color: #648c6f; }
.earnings-empty-line { min-height: 110px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #87968b; border-bottom: 1px solid var(--campaign-border); }
.earnings-empty-line .text-link { margin: 0 0 0 auto; white-space: nowrap; }
.demo-finance-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: #929a8f; line-height: 1.7; margin: 24px 0 15px; }
.demo-finance-note svg { width: 15px; height: 15px; margin-top: 2px; }
.campaign-modal { width: min(640px, calc(100% - 32px)); }
.campaign-detail-modal { width: min(940px, calc(100% - 32px)); }
.import-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.connection-label { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; color: #8a958b; }
.connection-label .status-dot { background: #d3b37e; }
.input-action { display: flex; align-items: center; gap: 9px; }
.field textarea { font: inherit; color: #3f5949; border: 1px solid #d7e1d8; border-radius: 6px; padding: 11px 12px; width: 100%; min-width: 0; resize: vertical; font-size: 13px; font-weight: 400; line-height: 1.6; }
.field textarea[readonly] { background: #f4f7f2; color: #63796b; }
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-hint { color: #8b978e; font-size: 11px; font-weight: 400; line-height: 1.65; overflow-wrap: anywhere; }
.posting-note { margin: 10px 0 23px; }
.fixed-reward { display: flex; flex-direction: column; padding: 0 0 18px; }
.fixed-reward span { font-size: 12px; font-weight: 600; }
.fixed-reward strong { font-size: 26px; color: var(--green); }
.fixed-reward small { font-size: 10px; color: #8a978d; }
.check-field { display: flex; align-items: flex-start; gap: 10px; color: #708274; font-size: 12px; line-height: 1.7; margin: 12px 0 20px; }
.check-field input { accent-color: var(--green); flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; }
.form-error { background: #fcf1ee; color: #ac5a48; border-left: 2px solid #c47760; padding: 10px 13px; font-size: 12px; margin: 14px 0; line-height: 1.7; }
.task-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.post-detail { min-width: 0; padding-right: 24px; border-right: 1px solid var(--line); }
.post-author { display: flex; gap: 11px; align-items: center; margin-bottom: 20px; }
.post-author > div { min-width: 0; }
.post-author strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.post-author span:not(.facebook-mark) { display: block; color: #97a197; font-size: 10px; margin-top: 3px; }
.post-detail p { white-space: pre-wrap; overflow-wrap: anywhere; color: #6f8175; font-size: 13px; line-height: 1.85; margin: 10px 0 20px; }
.post-detail h3, .contribution-detail h3 { font-size: 14px; font-weight: 600; }
.post-detail hr { border: 0; border-top: 1px solid var(--line); margin: 25px 0; }
.task-detail-meta { display: grid; gap: 7px; font-size: 12px; color: #819489; }
.task-detail-meta strong { color: var(--green); font-weight: 600; }
.contribution-detail { min-width: 0; }
#work-admin-detail p { font-size: 13px; color: #809183; line-height: 1.8; margin: 13px 0 20px; }
.submission-feedback { padding: 13px; background: #eef4e9; border-radius: 5px; color: #688357; font-size: 12px; line-height: 1.7; margin-bottom: 20px; }
#review-detail-meta p { color: #8a978e; font-size: 12px; margin-bottom: 5px; }
#review-detail-meta .campaign-badge { margin-top: 8px; }
#review-comment { padding: 16px; background: #f4f7f3; border-left: 3px solid #9bb9a4; margin: 20px 0; font-size: 13px; line-height: 1.8; color: #597362; white-space: pre-wrap; overflow-wrap: anywhere; }
#review-checks { border: 0; padding: 0; margin: 24px 0 18px; }
#review-checks legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
#review-checks .check-field { margin-bottom: 10px; }
.payout-dialog-amount { display: block; font-size: 36px; color: var(--green); font-weight: 600; margin-bottom: 8px; }
/* Participant work stays in one column, with the reward and next action together. */
.participant-nav { display: none; }
#proof-link-check { display: block; min-height: 4.5em; }
.campaign-badge { gap: 5px; }
.campaign-badge svg { width: 12px; height: 12px; }
.resume-task { display: flex; align-items: center; gap: 14px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.resume-task > svg { color: var(--accent-text); }
.resume-task > div { min-width: 0; flex: 1; }
.resume-task span { display: block; color: var(--muted); font-size: 11px; }
.resume-task strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
body[data-role="user"] .task-work-grid { grid-template-columns: 1fr; gap: 0; }
:root .campaign-task.task-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px 24px; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 22px 0; border-radius: 0; }
.task-row-main { min-width: 0; }
.task-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 9px; }
.task-row-meta .campaign-name { margin: 0; font-size: 12px; }
.task-row-main h2 { font-size: 16px; overflow-wrap: anywhere; }
.task-row-brief { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-row-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.task-row-side strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.task-row-side small { color: var(--muted); font-size: 11px; margin-bottom: 12px; }
.task-row-side .button { width: 100%; }
.task-row-footer { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); font-size: 11px; grid-column: 1 / -1; }
.task-row-footer span { display: flex; align-items: center; gap: 6px; }
.task-row-footer svg { width: 13px; height: 13px; }
.my-submissions-list { display: grid; }
.submission-row { border-bottom: 1px solid var(--line); padding: 22px 0; min-width: 0; }
.submission-row-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.submission-row-heading > div { min-width: 0; }
.submission-row h3 { font-size: 15px; overflow-wrap: anywhere; }
.submission-row-note { color: var(--secondary); font-size: 12px; margin: 12px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.submission-row-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.submission-row-footer > span { color: var(--muted); font-size: 11px; }
.submission-confirmation { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.submission-confirmation > svg { color: var(--accent-text); }
.submission-confirmation > div { flex: 1; min-width: 0; }
.submission-confirmation strong { font-size: 13px; }
.submission-confirmation p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.task-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 0 18px; margin: 0 0 22px; border-bottom: 1px solid var(--line); gap: 8px; }
.task-steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.task-steps li > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--strong-border); border-radius: 50%; flex-shrink: 0; }
.task-steps li[aria-current] { color: var(--accent-text); font-weight: 700; }
.task-steps li[aria-current] > span { color: var(--action-ink); background: var(--action); border-color: var(--action); }
.task-steps li.complete > span { background: var(--tint); color: var(--accent-text); border-color: var(--accent-text); }
.participant-task { width: min(680px, calc(100% - 32px)); }
.participant-task .task-detail-layout { display: block; }
.participant-task .post-detail { padding: 0; border: 0; }
.participant-task .modal-heading h2 { overflow-wrap: anywhere; font-size: 20px; }
.participant-task .modal-heading > div { min-width: 0; }
.task-flow-footer { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 16px 0 0; margin-top: 22px; background: var(--white); }
.task-flow-footer > div { display: flex; gap: 8px; margin-left: auto; }
.task-flow-footer > span { color: var(--muted); font-size: 10px; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.comment-actions .button { flex: 1; }
.proof-comment-preview { margin: 16px 0; font-size: 12px; }
.proof-comment-preview summary { cursor: pointer; color: var(--secondary); padding: 7px 0; }
.proof-comment-preview p { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 0; line-height: 1.7; }
:root #proof-link-check.valid { color: var(--accent-text); }
:root #proof-link-check.invalid { color: var(--error-ink); }
:root .field input[aria-invalid="true"] { border-color: var(--error-ink); }
@media (max-width: 760px) {
  body[data-role="user"] main { padding-bottom: calc(95px + env(safe-area-inset-bottom)); }
  .participant-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
  .participant-nav a { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 10px; text-align: center; }
  .participant-nav a.active { color: var(--accent-text); font-weight: 700; }
  .participant-nav svg { width: 20px; height: 20px; }
  body[data-role="user"] .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  :root .campaign-task.task-row { grid-template-columns: 1fr; gap: 14px; }
  .task-row-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .task-row-side small { grid-column: 1; margin-bottom: 0; }
  .task-row-side .button { grid-column: 2; grid-row: 1 / 3; min-width: 135px; }
  .task-row-footer { font-size: 10px; }
  .resume-task { gap: 8px; }
  .resume-task > svg { display: none; }
  .submission-row-heading { flex-direction: column; gap: 8px; }
  .submission-row-footer { flex-wrap: wrap; }
  .task-flow-footer > div { width: 100%; }
  .task-flow-footer .button { flex: 1; white-space: normal; min-height: 44px; padding: 9px; }
  .task-steps li { font-size: 11px; gap: 5px; }
  .task-steps li > span { width: 24px; height: 24px; }
  .comment-actions .button { min-width: 140px; white-space: normal; }
}
#payout-dialog-summary p { font-size: 13px; color: #8b988d; margin-bottom: 22px; }
@media (max-width: 1280px) {
  .task-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earning-stat { padding: 15px; }
  .earning-stat > div { align-items: flex-start; font-size: 11px; }
  .earning-stat > strong { font-size: 23px; }
}
@media (max-width: 1000px) {
  .work-toolbar, .earnings-heading { align-items: flex-start; flex-wrap: wrap; }
  .work-tools { margin-left: auto; }
  .earnings-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earnings-layout { grid-template-columns: 1fr; gap: 20px; }
  .payout-summary { border-left: 0; border-top: 1px solid var(--campaign-border); padding: 22px 0 0; }
  .payout-summary .button { width: auto; min-width: 220px; }
  .earning-bars { gap: 9px; }
}
@media (max-width: 700px) {
  .task-detail-layout { grid-template-columns: 1fr; }
  .post-detail { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 23px; }
  .work-metrics { gap: 10px; }
  .work-metric { gap: 7px; }
  .work-metric > svg { width: 18px; height: 18px; }
  .work-metric span { font-size: 10px; }
  .work-metric strong { font-size: 23px; }
  .earnings-empty-line { flex-wrap: wrap; padding: 22px 0; }
  .earnings-empty-line .text-link { margin-left: 0; }
  .campaign-table { min-width: 620px; }
  .campaign-notice { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .task-work-grid { grid-template-columns: 1fr; }
  .work-tools { margin-left: 0; width: 100%; }
  .work-tools .button { flex: 1; }
  .work-metric { display: block; }
  .work-metric > svg { margin-bottom: 8px; }
  .campaign-notice > svg { width: 19px; }
  .campaign-notice .demo-pill { margin-left: 32px; }
  .earnings-heading > .button { width: 100%; }
  .earnings-stats { gap: 10px; }
  .earning-stat > strong { font-size: 25px; }
  .earning-stat p { font-size: 10px; }
  .earning-stat > div { font-size: 11px; gap: 5px; }
  .earning-stat > div svg { width: 14px; height: 14px; }
  .earning-bars { gap: 8px; }
  .earning-day-value { font-size: 8px; }
  .section-toolbar { flex-wrap: wrap; }
  .import-toolbar { align-items: flex-start; flex-direction: column; }
  .campaign-detail-modal { padding: 18px; }
  .campaign-modal .modal-actions { flex-wrap: wrap; }
  .campaign-modal .modal-actions .button { flex: 1; }
}
/* Stable countdowns do not resize task controls as seconds change. */
.task-countdown { font-variant-numeric: tabular-nums; min-width: 155px; font-size: 12px; }
.task-countdown-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; margin-bottom: 12px; border-block: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.task-countdown-bar > svg { width: 16px; height: 16px; }
.task-countdown-bar > button { margin-left: auto; }
.duration-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(95px, 1fr); gap: 12px; }
.duration-fields input, .duration-fields select { min-width: 0; width: 100%; }
.availability-panel #availability-countdown { display: block; font-size: 25px; line-height: 1.5; min-height: 38px; margin: 12px 0; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.availability-panel #availability-task { overflow-wrap: anywhere; min-height: 32px; }
.availability-panel .button { margin-top: 10px; width: 100%; background: var(--field); color: var(--ink); }
.availability-panel .panel-heading { gap: 6px; flex-wrap: wrap; }
.work-tabs { flex-wrap: wrap; }
.work-tools { flex-wrap: wrap; justify-content: flex-end; }
.work-tools [data-tooltip]::after, .work-filter-panel > [data-tooltip]::after { left: auto; right: 0; transform: none; }
.work-filter-panel { display: grid; grid-template-columns: minmax(0, 230px) 38px; gap: 14px; align-items: end; padding-bottom: 20px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.work-filter-panel .field { min-width: 0; margin: 0; }
.work-filter-panel select { width: 100%; min-width: 0; }
#work-filter-toggle { position: relative; }
#work-filter-toggle[aria-expanded="true"] { color: var(--accent-text); background: var(--tint); border-color: var(--accent-text); }
#work-filter-count { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--action); color: var(--action-ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.staff-identity-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; margin: 10px 0; border-block: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.staff-reference-links { display: flex; flex-wrap: wrap; gap: 12px; }
.staff-reference-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: underline; }
.staff-reference-links svg { width: 14px; height: 14px; }
.staff-list-heading { margin-top: 24px; font-size: 15px; }
.staff-appointment { display: flex; flex-direction: column; gap: 9px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.staff-appointment small { color: var(--muted); }
.staff-appointment .button { align-self: flex-start; }
.work-tools > .icon-button { flex: 0 0 38px; width: 38px; height: 38px; }
.work-tools select { max-width: 100%; min-width: 0; }
.platform-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 600; min-height: 28px; }
.platform-tag svg, .platform-mark svg { width: 18px; height: 18px; flex-shrink: 0; }
.platform-tile { display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; flex: 0 0 32px; border-radius: 6px; background: var(--field); color: var(--ink); }
.platform-tile[data-platform="facebook"] { background: #eaf0fc; color: #3974cd; }
:root[data-theme="dark"] .platform-tile[data-platform="facebook"] { background: #334461; color: #a8c8fe; }
.task-row-footer .platform-tag { min-height: 0; font-size: inherit; font-weight: 400; color: inherit; }
.task-row-footer .platform-tag svg { width: 13px; height: 13px; }
.platform-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--field); }
.task-category { color: var(--muted); font-size: 12px; margin: 0 0 12px; overflow-wrap: anywhere; }
.task-card-heading { gap: 8px; flex-wrap: wrap; }
.task-steps li > b { font-weight: inherit; }
.campaign-modal select { max-width: 100%; min-width: 0; }
.campaign-task h2, #work-detail-kind, #review-detail-kind, #review-comment, #proof-comment-summary { overflow-wrap: anywhere; }
#review-comment { white-space: pre-wrap; }
@media (max-width: 520px) {
  .work-tools select { flex: 1 1 130px; }
  .work-tools > .button { flex: 1 1 120px; }
  .work-filter-panel { grid-template-columns: minmax(0, 1fr) 38px; }
  .work-filter-panel .field { grid-column: 1; }
  .work-filter-panel > button { grid-column: 2; grid-row: 1; }
  #campaign-task-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .task-countdown-bar > button { margin-left: 0; } }