/* Caller-owned approval details compose the existing sample card, dialog,
   native playback controls, status icon, and ActionArrow owners. */
.tasks-section .sample-card h3{align-items:flex-start}
.tasks-section .sample-card h3>svg{margin-top:4px;flex:none}
.tasks-section .sample-card p{min-height:0;margin-bottom:0}
.tasks-section .sample-count{flex-wrap:wrap;row-gap:2px;margin-top:auto}
.tasks-section .task-foot>.pill{background:var(--green);color:var(--ink);border-color:transparent;min-height:48px;flex:none}
.tasks-section .task-foot>.pill:hover{background:var(--green-hover)}
.tasks-section .task-foot>.pill:focus-visible{outline-color:var(--green)}
.tasks-section .task-foot{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:24px}
.tasks-section .task-foot :is([data-cta="tasks_test_video"],[data-cta="tasks_earnings"]){width:100%;min-height:48px;padding:12px 22px;font-size:15px;line-height:22px;gap:10px;justify-content:center;white-space:nowrap}
.task-guidance{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding-top:24px;border-top:1px solid #ffffff30}
.task-guidance>div{min-width:0}
.task-guidance h3{font:500 20px/28px var(--font-ui);letter-spacing:-.025em;margin:0}
.tasks-section .task-foot .task-guidance p{font:400 14px/22px var(--font-ui);color:#B9BABF;max-width:780px;margin:8px 0 0;text-wrap:pretty}
.task-guidance>.pill{flex:none;white-space:nowrap;color:white}
.task-guidance>.pill:hover{background:#ffffff12}
/* Use the site's shared side gutters; condense only the vertical layout. */
@media(min-width:1000px){
 .tasks-section{padding-block:calc(var(--header-height) + 48px) 48px}
 .tasks-section .section-top{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:32px;row-gap:0;align-items:center}
 .tasks-section .section-top>div:first-child{display:contents}
 .tasks-section .section-top .eyebrow{grid-column:1;grid-row:1}
 .tasks-section .rotating-heading{grid-column:1;grid-row:2}
 .tasks-section .section-top-side{grid-column:2;grid-row:2;justify-self:end;align-self:center}
 .tasks-section .section-top-side>p{max-width:320px;margin:0}
 .tasks-section>.task-track{height:clamp(380px,44svh,480px)}
}
.task-dialog #task-dialog-content{border-radius:24px;height:min(680px,calc(100svh - 64px));max-height:calc(100svh - 64px);grid-template-rows:minmax(0,1fr);min-width:0}
.task-dialog .task-dialog-media{min-height:0;overflow:hidden}
.task-dialog .task-dialog-media>video{height:0;min-height:0}
.task-dialog .task-dialog-copy{align-self:stretch;justify-content:space-between;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px}
.task-detail-heading{display:grid;gap:8px;padding-right:36px}
.task-detail-heading>.eyebrow{color:var(--ui-brand-ink);font:500 13px/20px var(--font-ui)}
.task-detail-heading>p{margin:0;color:var(--ui-muted);font:400 13px/20px var(--font-ui)}
.task-approval h3{font:500 14px/20px var(--font-ui);margin:0 0 16px}
.task-approval ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.task-approval li{display:flex;gap:12px;align-items:flex-start;font:400 14px/22px var(--font-ui)}
.task-approval .icon{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ui-brand-ink)}
.task-dialog .task-dialog-rate{gap:8px;padding:20px 0;border-color:var(--ui-line)}
.task-dialog-rate>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.task-dialog-rate>div>span{font:400 13px/20px var(--font-ui);color:var(--ui-muted)}
.task-dialog .task-rate-note{font:400 12px/18px var(--font-ui);color:var(--ui-muted)}
.task-rate-note>strong{display:block;font:500 13px/20px var(--font-ui);color:var(--ui-brand-ink);margin-bottom:8px}
.task-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.task-dialog-actions>.ui-secondary{min-height:48px;text-align:center}
@media(max-width:999px){
 .task-guidance{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;width:100%}
 .tasks-section .task-foot :is([data-cta="tasks_test_video"],[data-cta="tasks_earnings"]){max-width:320px}
 .tasks-section .task-foot .task-guidance p{max-width:640px}
}
@media(max-width:700px){
 .task-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);overflow:auto;overscroll-behavior:contain}
 .task-dialog #task-dialog-content{display:flex;flex-direction:column;height:auto;max-height:none;border-radius:24px}
 .task-dialog .task-dialog-media{height:clamp(260px,40svh,360px);flex:none}
 .task-dialog .task-dialog-copy{justify-content:flex-start;overflow:visible;padding:24px;gap:24px}
 .task-detail-heading{padding-right:0}
 .task-dialog>.dialog-close{position:sticky;display:flex;top:12px;right:auto;margin:12px 12px -44px auto}
}