/* One project index, four arrangements. The comparison controls are local only. */
.wo .work-preview-controls[hidden]{display:none}
.wo .work-preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:36px;padding:18px 0;border-block:1px solid var(--s-stroke,var(--v-line))}
.work-preview-label{font-size:13px;color:var(--v-muted)}
.work-preview-options{display:flex;flex-wrap:wrap;gap:6px}
.work-preview-options button{display:flex;gap:8px;align-items:center;min-height:42px;padding:0 15px;border:1px solid var(--v-line);border-radius:8px;background:transparent;color:var(--v-ink);font:inherit;font-size:14px;cursor:pointer}
.work-preview-options button span{font-size:11px;color:var(--v-muted)}
.work-preview-options button[aria-pressed=true]{background:var(--v-ink);border-color:var(--v-ink);color:var(--v-paper)}
.work-preview-options button[aria-pressed=true] span{color:inherit;opacity:.7}
.work-preview-options button:focus-visible,.wo .wi-index a:focus-visible{outline:2px solid var(--v-blue);outline-offset:4px}
.work-depth-toggle{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--v-muted)}
.work-depth-toggle input{width:17px;height:17px;accent-color:var(--v-blue)}
.wo.work-opening .wo-top{justify-content:flex-end}
.wo .wi-index{margin-top:32px;border-top:0;border-color:var(--s-stroke,var(--v-line));counter-reset:none}
.wo .wi-index>li{border-color:var(--s-stroke,var(--v-line))}
.wo .wi-index>li:last-child{border-bottom:0}
.wo .wi-index a{display:grid;grid-template-columns:32px minmax(0,1fr) 170px 24px;gap:24px;align-items:center;min-height:128px;padding:26px 8px}
.wo .wi-index a::before{opacity:.035}
.wo .wi-index .wo-name{display:block;font-size:clamp(22px,2vw,30px);font-weight:550;line-height:1.16;letter-spacing:-.03em}
.wi-main{min-width:0}
.wi-summary{display:block;max-width:47ch;margin-top:8px;font-size:15px;line-height:1.5;color:var(--v-muted)}
.wi-focus{font-size:14px;line-height:1.5}
.wi-focus small{display:block;margin-top:4px;font-size:12px;color:var(--v-muted)}
.wo[data-work-layout=overview] .wi-focus{display:none}
.wi-status{font-size:12px;line-height:1.4;color:var(--v-muted)}
.wi-status::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:2px}
.wi-live{color:oklch(.43 .08 155)}
.wi-image,.wi-category,.wi-table-head{display:none}
.wi-arrow{justify-self:end}
.wo .wi-index .wi-arrow .icon{width:20px;height:20px}

/* 02: thumbnails supply recognition; short descriptions supply context. */
.wo[data-work-layout=visual] .wi-index a{grid-template-columns:32px 168px minmax(0,1fr) 150px 24px;min-height:150px;gap:24px}
.wo[data-work-layout=visual] .wi-image{display:flex;align-items:center;justify-content:center;width:168px;height:108px;padding:6px;background:var(--s-l1,var(--v-paper));border-radius:8px;border:1px solid var(--s-stroke,var(--v-line))}
.wi-image img{display:block;width:100%;height:100%;object-fit:contain}
.wi-image{position:relative}
.wi-image-note{position:absolute;right:8px;bottom:8px;padding:4px 6px;border-radius:4px;background:var(--v-paper);font-size:12px;color:var(--v-muted)}
.wo[data-work-layout=visual] .wi-image-note{display:none}
.wo[data-work-layout=visual] .wi-focus{display:none}
.wo[data-work-layout=visual] .wi-category{display:block;margin-top:10px;font-size:12px;color:var(--v-muted)}

/* 03: scan ownership and maturity down stable columns. */
.wo[data-work-layout=compare] .wi-table-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.7fr) 160px;gap:32px;padding:18px 40px 18px 48px;margin-top:32px;font-size:12px;color:var(--v-muted);border-bottom:1px solid var(--s-stroke,var(--v-line))}
.wo[data-work-layout=compare] .wi-index{margin-top:0;border-top:0}
.wo[data-work-layout=compare] .wi-index a{grid-template-columns:24px minmax(0,1fr) minmax(210px,.7fr) 160px 16px;gap:24px;min-height:122px}
.wo[data-work-layout=compare] .wi-summary{max-width:38ch;font-size:14px}
.wo[data-work-layout=compare] .wi-focus{font-size:15px}

/* 04: compact evidence cards, with the actual interfaces fully visible. */
.wo[data-work-layout=cards] .wi-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;border:0}
.wo[data-work-layout=cards] .wi-index>li{border:0;min-width:0;position:relative}
.wo[data-work-layout=cards] .wi-index a{display:grid;grid-template-columns:1fr auto;gap:0;align-content:start;height:100%;padding:20px;background:var(--s-l1,var(--v-paper));border:1px solid var(--s-stroke,var(--v-line));border-radius:16px;overflow:clip}
.wo[data-work-layout=cards] .wi-index a::before{display:none}
.wo[data-work-layout=cards] .wi-image{display:flex;align-items:center;justify-content:center;grid-column:1/-1;grid-row:1;aspect-ratio:16/10;padding:10px;margin-bottom:24px;background:oklch(.945 .008 95);border-radius:8px}
.wo[data-work-layout=cards] .wo-num{grid-row:2;align-self:center}
.wo[data-work-layout=cards] .wi-status{grid-row:2;justify-self:end}
.wo[data-work-layout=cards] .wi-main{grid-column:1/-1;grid-row:3;margin-top:12px}
.wo[data-work-layout=cards] .wo-name{max-width:22ch;font-size:clamp(24px,2.6vw,36px)}
.wo[data-work-layout=cards] .wi-summary{font-size:15px;max-width:46ch;min-height:3em}
.wo[data-work-layout=cards] .wi-focus{grid-column:1;grid-row:4;margin-top:22px;padding-top:16px;border-top:1px solid var(--s-stroke,var(--v-line))}
.wo[data-work-layout=cards] .wi-arrow{grid-column:2;grid-row:4;align-self:end;padding-bottom:4px}
.wo[data-work-layout=cards] .wi-index a:hover{border-color:var(--v-blue)}
.wo[data-work-layout=cards] .wi-index a:hover .wo-name{transform:none}

@media(max-width:1050px){
  .wo .wi-index a{grid-template-columns:24px minmax(0,1fr) 130px 20px;gap:16px}
  .wo[data-work-layout=overview] .wi-focus{display:none}
  .wo[data-work-layout=visual] .wi-index a{grid-template-columns:24px 128px minmax(0,1fr) 110px 20px;gap:16px}
  .wo[data-work-layout=visual] .wi-image{width:128px;height:90px}
  .wo[data-work-layout=compare] .wi-table-head{grid-template-columns:minmax(0,1fr) minmax(150px,.65fr) 110px;gap:16px;padding-inline:48px 40px}
  .wo[data-work-layout=compare] .wi-index a{grid-template-columns:24px minmax(0,1fr) minmax(150px,.65fr) 110px 16px;gap:16px}
}
@media(max-width:760px){
  .wo .work-preview-controls{gap:14px;margin-top:28px}
  .work-preview-label{width:100%}
  .work-preview-options{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .work-preview-options button{justify-content:center;padding-inline:10px}
  .work-depth-toggle{margin-left:0}
  .wo .wi-index a{grid-template-columns:22px minmax(0,1fr) 18px;gap:12px;min-height:120px;padding:22px 0}
  .wo .wi-index .wo-name{font-size:23px}
  .wo .wi-index .wi-main{grid-column:2;grid-row:1}
  .wo .wi-index .wo-num{align-self:start;padding-top:4px}
  .wo .wi-index .wi-status{grid-column:2;grid-row:2;margin-top:3px}
  .wo .wi-index .wi-arrow{grid-column:3;grid-row:1}
  .wi-summary{font-size:14px;margin-top:7px}
  .wo[data-work-layout=visual] .wi-index a{grid-template-columns:82px minmax(0,1fr) 18px;gap:14px;padding-block:24px}
  .wo[data-work-layout=visual] .wo-num{display:none}
  .wo[data-work-layout=visual] .wi-image{width:82px;height:78px;grid-column:1;grid-row:1/3;padding:3px}
  .wo[data-work-layout=visual] .wi-index .wo-name{font-size:21px}
  .wo[data-work-layout=visual] .wi-category{display:none}
  .wo[data-work-layout=compare] .wi-table-head{display:none}
  .wo[data-work-layout=compare] .wi-index{margin-top:28px;border-top:0}
  .wo[data-work-layout=compare] .wi-index a{grid-template-columns:22px minmax(0,1fr) 18px;gap:12px}
  .wo[data-work-layout=compare] .wi-summary{display:none}
  .wo[data-work-layout=compare] .wi-focus{grid-column:2;grid-row:2;margin-top:8px}
  .wo[data-work-layout=compare] .wi-focus::before{content:"My contribution";display:block;margin-bottom:4px;font-size:11px;color:var(--v-muted)}
  .wo[data-work-layout=compare] .wi-index .wi-status{grid-row:3;margin-top:10px}
  .wo[data-work-layout=cards] .wi-index{grid-template-columns:1fr;gap:18px}
  .wo[data-work-layout=cards] .wi-index a{grid-template-columns:1fr auto;padding:16px}
  .wo[data-work-layout=cards] .wi-index .wi-main{grid-column:1/-1;grid-row:3}
  .wo[data-work-layout=cards] .wi-index .wo-num{grid-row:2;align-self:center;padding:0}
  .wo[data-work-layout=cards] .wi-index .wi-status{grid-column:2;grid-row:2;margin:0}
  .wo[data-work-layout=cards] .wi-index .wi-arrow{grid-column:2;grid-row:4}
  .wo[data-work-layout=cards] .wi-index .wo-name{font-size:28px}
  .wo[data-work-layout=cards] .wi-image{margin-bottom:20px}
}

/* Cards preview their content at every width, before the next card arrives. */
@media screen{
  html .motion-lab :is(.ph-mask>span,.ph-index>span,.ph-line,.ph-meta li,.ph-copy>*,.wo-top>*,.wo-foot>*,.ph-ready .wo-index li,.fw-head>*,.fw-row,.reveal.is-pending):not([data-depth-card]){
    opacity:1!important;transform:none;transition:none!important;
  }
}

/* Native scrolling drives compositor-friendly transforms and opacity. Later
   panels paint in front, so outgoing panels can turn down behind their successor. */
@media screen and (prefers-reduced-motion:no-preference){
  html.depth-scroll:not(.motion-paused) main{overflow:clip}
  html.depth-scroll:not(.motion-paused) [data-depth-card]{
    transform-origin:50% 50%;
    position:relative;z-index:0;contain:paint;
    box-shadow:0 14px 34px -10px rgb(25 27 28 / .18),0 3px 9px -3px rgb(25 27 28 / .10);
    /* No animated gradient mask, changing origin, or scroll-time layer toggles. */
  }
  html.depth-scroll [data-depth-card]:focus-within{transform:none!important;opacity:1!important;filter:none!important;z-index:200!important}
}
@media print{.work-preview-controls{display:none!important}[data-depth-card]{transform:none!important;opacity:1!important;filter:none!important;box-shadow:none!important}}