/* Owner: compare. Approved direction, scoped so the other pieces keep their own styles. */
/* Section padding, the head grid, eyebrow, heading and lead come from the page rhythm in sections/shell.css. */
#work { background:#000; color:var(--text); }
#work .cmp-word { display:inline-block; }
html.js-motion #work .words-ready .cmp-word { opacity:.12; transform:translateY(.12em); }
html.js-motion #work .words-ready.words-in .cmp-word { opacity:1; transform:none; transition:opacity 620ms var(--ease),transform 620ms var(--ease); transition-delay:calc(var(--word-index)*42ms); }
html.js-motion #work [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity 720ms var(--ease),transform 720ms var(--ease); }
html.js-motion #work [data-reveal].is-in { opacity:1; transform:none; }
#work .cmp { position:relative; }
/* Each header sits on its panel's column; on a phone these become the switch. */
#work .vs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 14px; }
#work .vs-side { display:flex;align-items:center;justify-content:flex-start;height:44px;padding:0 4px 12px;border:0;border-bottom:2px solid #70757F;border-radius:0;background:none;color:#fff;font:500 16px/1.2 var(--font);text-align:left;cursor:pointer; }
#work .vs-side[data-side="after"] { border-bottom-color:var(--violet-bright);color:var(--violet-bright); }
#work .vs-side:hover { color:#fff; }
#work .vs-side:disabled { cursor:default;opacity:1; }
#work .cmp-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:32px; margin:0 0 10px; }
#work .cmp-example { font-size:12px; color:var(--text-2); }
#work .vs-side:focus-visible { outline:2px solid var(--violet-bright); outline-offset:4px; }
#work .cmp-panels { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#work .cp { position:relative; display:flex; flex-direction:column; min-width:0; border-radius:24px; padding:12px; overflow:hidden; }
#work .cp-b { background:var(--row); border:1px solid var(--hair); color:#fff; }
#work .cp-a { --rule:#EFF0F3; --foot:#F5F6F8; background:#fff; color:var(--ink); border:1px solid #fff; }
#work .cp ul { list-style:none; margin:0; padding:0; }
#work .cp-a ul { flex:1 1 auto; display:flex; flex-direction:column; }
#work .jr { position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:14px; row-gap:2px; align-items:center; min-height:68px; padding:12px 16px; border-radius:12px; }
#work .jr + .jr::before { content:""; position:absolute; left:54px; right:16px; top:0; height:1px; background:var(--rule,rgba(255,255,255,.07)); }
#work .jr .work-icon { width:22px; height:22px; grid-row:1 / span 2; color:var(--text-2); }
#work .cp-a .jr { flex:1 1 auto; }
#work .cp-a .jr .work-icon { color:var(--ink-2); transition:color 280ms ease; }
#work .cp-a .jr.is-on .work-icon { color:var(--violet-ink); }
#work .jr p { margin:0; font-size:16px; line-height:1.3; letter-spacing:-.012em; }
#work .cp-b .jr p { color:#D5D8DE; }
#work .res { display:flex; align-items:center; gap:7px; font-size:13.5px; line-height:1.2; transition:opacity 280ms ease,transform 420ms var(--ease); }
#work .cp-b .res { color:#fff; }
#work .cp-a .res { color:var(--ok); font-weight:500; }
#work .w-ic { display:grid; place-items:center; width:17px; height:17px; flex:none; }
#work .w-ic svg { width:17px; height:17px; }
#work .jr.is-on { background:rgba(255,255,255,.05); }
#work .cp-a .jr.is-on { background:rgba(139,92,246,.07); }
#work .cmp.armed .jr:not(.is-in) .res { opacity:0; transform:translateX(-8px); }
#work .cmp.armed .jr:not(.is-in) p { opacity:.7; }
#work .cp-foot { flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:136px; margin-top:6px; padding:14px 16px; border-radius:12px; background:var(--foot,#151517); }
#work .cp-foot p { margin:0; font-size:14px; color:var(--text-2); max-width:10em; line-height:1.3; }
#work .cp-a .cp-foot p { color:var(--ink-2); }
/* Six flat documents build up with the six jobs, in the row-icon style: same card, 1px stroke, 1px lines, no shadow.
   Fanned loose on the left, squared up and ticked on the right, so the two feet read as a pair. */
#work .pile { position:relative; flex:none; width:17em; height:6em; font-size:13.333px; }
#work .ps { position:absolute; left:var(--x); top:.2em; display:grid; align-content:start; gap:.42em; width:4em; height:4.8em; padding:.6em .5em; border:1px solid #AEB4BE; border-radius:.3em; background:var(--foot,#151517); transform-origin:50% 100%; transform:translateY(var(--y)) rotate(var(--r)); transition:opacity 280ms ease,transform 460ms var(--ease); }
#work .ps i, #work .ts i { display:block; height:1px; background:#70757F; }
#work .ps i:nth-child(2), #work .ts i:nth-child(2) { width:72%; }
#work .ps i:nth-child(3), #work .ts i:nth-child(3) { width:86%; }
#work .cmp.armed .ps:not(.is-in) { opacity:0; transform:translateY(-2.4em) rotate(0); }
#work .tray { display:flex; gap:.5em; font-size:13.333px; flex:none; max-width:100%; min-width:0; }
#work .ts { position:relative; display:grid; align-content:start; gap:.42em; flex:0 1 3.9em; min-width:0; width:3.9em; height:4.8em; padding:.6em .5em; border:1px solid #AEB4BE; border-radius:.3em; background:#fff; transition:opacity 280ms ease,transform 460ms var(--ease); }
#work .ts i { background:#AEB4BE; }
#work .mk { display:grid; place-items:center; flex:none; border-radius:50%; background:var(--ok); color:#fff; }
#work .ts .mk { position:absolute; right:-.4em; bottom:-.4em; width:1.5em; height:1.5em; }
#work .ts .mk svg { width:.92em; height:.92em; }
#work .cmp.armed .ts:not(.is-in) { opacity:0; transform:translateY(.8em); }
#work .res-ok { justify-content:flex-end; }
#work .res-ok .mk { width:20px; height:20px; }
#work .res-ok .mk svg { width:12px; height:12px; }
#work .jr:has(.res-ok) { grid-template-columns:24px minmax(0,1fr) auto; }
#work .jr:has(.res-ok) .work-icon { grid-row:auto; }
#work .cmp.is-moving .res, #work .cmp.is-moving .ps, #work .cmp.is-moving .ts { will-change:transform,opacity; }
#work .cmp-close { margin:var(--sp-after) 0 0; text-align:center; font-size:clamp(20px,2vw,26px); font-weight:450; line-height:1.25; letter-spacing:-.025em; }
#work .cmp-close .dim { color:var(--text-2); }
@media (min-width:861px) and (max-width:1150px) {
  #work .cp-foot { flex-direction:column;align-items:flex-start;gap:14px; }
  #work .cp-foot p { max-width:none; }
  #work .pile, #work .tray { align-self:flex-end; }
}
@media (min-width:861px) {
  #work .jr { grid-template-columns:24px minmax(0,1fr) auto; }
  #work .jr .work-icon { grid-row:auto; }
  #work .res { justify-content:flex-end; text-align:right; }
}
/* Without script both panels remain visible. The enhanced phone view occupies one stable grid cell. */
@media (max-width:860px) {
  #work .vs { gap:12px;margin-bottom:12px; }
  #work .vs-side { min-height:44px;height:auto;padding:12px 8px;font-size:14px; }
  #work .has-switch .vs-side { color:var(--text-2);border-bottom-color:#444851; }
  #work .has-switch .vs-side[aria-pressed="true"] { color:#fff;border-bottom-color:var(--violet-bright); }
  #work .cmp:not(.has-switch) .vs { display:none; }
  #work .cmp:not(.has-switch) .cp h3 { position:static;width:auto;height:auto;margin:6px 8px 8px;overflow:visible;clip-path:none;white-space:normal;font-size:15px;font-weight:500; }
  #work .cmp-panels { grid-template-columns:minmax(0,1fr); gap:12px; }
  #work .has-switch .cp { grid-area:1 / 1; transition:opacity 340ms ease,visibility 340ms; }
  #work .has-switch[data-side="before"] .cp-a, #work .has-switch[data-side="after"] .cp-b { opacity:0; visibility:hidden; }
  #work .jr { min-height:0; padding:10px 8px; column-gap:10px; }
  #work .jr + .jr::before { left:42px; right:8px; }
  #work .jr p { font-size:15px; }
  #work .res { font-size:13px; grid-column:2; }
  #work .jr .work-icon { width:20px; height:20px; }
  #work .jr:has(.res-ok) .res { grid-column:auto; }
  #work .cp-a .jr { min-height:62px; }
  #work .cp-foot { min-height:136px; padding:12px; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  #work .cp-foot p { font-size:13px; max-width:none; }
  #work .cp-foot .pile, #work .cp-foot .tray { justify-self:end; }
  #work .pile, #work .tray { font-size:13.333px; }
  #work .cmp-close { font-size:19px; }
}
@media (max-width:360px) {
  #work .cp-foot { gap:8px; padding-inline:8px; }
  #work .tray { gap:.35em; }
  #work .ts { width:3.4em; }
}
@media (prefers-reduced-motion:reduce) {
  #work .cmp *, #work .cmp-word { transition:none!important; }
  html.js-motion #work .words-ready .cmp-word, html.js-motion #work [data-reveal] { opacity:1; transform:none; transition:none; }
  #work .cmp.is-moving .res, #work .cmp.is-moving .ps, #work .cmp.is-moving .ts { will-change:auto; }
}

/* Selected Work queue footer, progress lines and status colors, 6 November. */
#work .vs-side{position:relative;border-bottom:0;gap:10px;min-height:52px;height:auto;padding:8px 4px 16px;color:#e7e9ed}
#work .vs-side[data-side="after"]{color:var(--violet-bright)}
#work .progress-track{position:absolute;bottom:0;left:0;right:0;height:3px;overflow:hidden;background:#35343c}
#work .progress-track i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(var(--progress,1));transform-origin:left;transition:transform 220ms ease-out}
#work .vs-side[data-side="after"] .progress-track i{background:var(--violet-bright)}
#work .cp-b .w-ic{color:#f2b84b}
#work .cp-foot{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;padding:18px;min-height:156px}
#work .cp-foot p{max-width:none;font-size:13px;line-height:1.2}
#work .job-visual{display:grid;gap:8px}
#work .job-unit{display:flex;align-items:center;gap:7px;min-width:0;font-size:10.5px;line-height:1.25;color:#d5d8de;transition:opacity 200ms ease,transform 220ms ease,border-color 220ms ease}
#work .job-unit>.work-icon{width:16px;height:16px;flex:none;color:#b3b7c0}
#work .job-unit>span:not(.unit-status){flex:1;min-width:0}
#work .unit-status{display:grid;place-items:center;flex:none;width:13px;height:13px;color:#f2b84b}
#work .unit-status svg{width:100%;height:100%}
#work .cp-a .job-unit{color:var(--ink-2);border-color:#dddfe4;background:#fff}
#work .cp-a .job-unit>.work-icon{color:#646971}
#work .cp-a .unit-status{color:var(--ok)}
#work .job-visual.queue{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 20px}
#work .queue .job-unit{position:relative;min-height:25px;padding:2px 0;background:transparent}
#work .queue .job-unit>.work-icon{width:14px;height:14px}
#work .cmp.armed .job-unit:not(.is-in){opacity:.22;transform:translateY(3px)}
#work .cmp.armed .job-unit:not(.is-in) .unit-status{opacity:0}
@media(max-width:860px){#work .vs-side{font-size:13px;min-height:58px;padding-inline:3px}#work .cp-foot{min-height:170px;padding:16px;gap:14px}#work .job-unit{font-size:11px}#work .has-switch .vs-side[aria-pressed="false"]{color:#a3a5ad}#work .has-switch .vs-side[aria-pressed="true"]{color:#fff}}
@media(max-width:360px){#work .cp-foot{padding:12px}#work .job-visual.queue{column-gap:12px}#work .job-unit{font-size:10px}#work .job-unit>.work-icon{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){#work .progress-track i,#work .job-unit{transition:none;transform:none}}
@media(max-width:1150px) and (min-width:861px){#work .cp-foot{min-height:176px}}