/* The Press Finder, living inside the archive rather than beside it.

   Every rule answers to #finder-view, so this stylesheet and the site's own
   cannot reach into each other -- which matters, because the window chrome
   wants tokens named --ink and --rule that the archive already uses for
   other things. The Lion typeface is scoped to .win alone: the room around
   the windows keeps the site's face, its gutter and its theme, and only the
   windows speak Mac. */
#finder-view{display:none;position:fixed;top:var(--fx-top,73px);left:0;right:0;bottom:0;
  z-index:40;overflow:hidden;font-family:var(--font);
  /* a ground of its own: the blurred frame is decoration, and when it fails
     to paint the page behind must not show through it */
  background:var(--bg)}
#finder-view.on{display:block}
#finder-view .win,#finder-view .win *{font-family:"Lucida Grande","Segoe UI",system-ui,
  -apple-system,"Helvetica Neue",Arial,sans-serif}
body.fx-open{overflow:hidden}
#finder-view{
  --win:#fff; --winw:1020px; --winh:468px;
  --bar1:#E8E8E8; --bar2:#CBCBCB; --barline:#A8A8A8; --bartext:#4A4A4A;
  --side:#DCE1E8; --sidetext:#31363E; --sidehead:#78818F;
  --hdr1:#F7F7F7; --hdr2:#E2E2E2; --hdrline:#C3C3C3;
  --row:#FFFFFF; --rowalt:#EDF3FB; --sel1:#5B9BEA; --sel2:#2C6FD6; --seltext:#fff;
  --text:#1E1E1E; --rule:#B7AF9C; --mark:#E2680F;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------------ *
 * A Finder window of the Lion era, one per collection, stacked the way
 * Time Machine stacked them. The chrome is deliberately of its period:
 * brushed titlebar, blue-grey sidebar, striped list, disclosure
 * triangles. It stays light in both themes -- the window is a quotation,
 * and a dark one would be a different quotation.
 * ------------------------------------------------------------------ */





/* The desktop behind: the wave, as it came on the machine these windows are
   quoting. Barely blurred -- it is a desktop picture, not a mood -- and pulled
   down so the windows keep their contrast against it. */
#finder-view .fxwall{position:absolute;inset:-40px;
  background:#0B2436 url('../img/timemachine-wall.jpg') 50% 50%/cover no-repeat;
  filter:blur(2px) saturate(.95) brightness(.88);transform:scale(1.04)}

/* only enough darkening at the edges to keep the year strip and the arrows
   legible; the middle of the picture is left alone */
#finder-view .fxvignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 40%,transparent 48%,rgba(0,12,24,.42) 100%)}










#finder-view .fxlede{position:absolute;top:0;left:0;right:0;z-index:65;padding:0 24px;pointer-events:none;
  transform:translateY(-50%)}

#finder-view .fxlede p{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.5);letter-spacing:.005em;
  text-align:center}


/* ---- the stack ---------------------------------------------------- */
#finder-view .fxdeck{position:absolute;top:58px;left:0;right:0;bottom:92px;perspective:1700px;perspective-origin:50% 42%}

#finder-view .win{position:absolute;left:50%;top:50%;width:var(--winw);height:var(--winh);
  margin:calc(var(--winh) / -2) 0 0 calc(var(--winw) / -2);
  background:var(--win);border:1px solid #6E6E6E;border-radius:6px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  transform-origin:50% 100%;will-change:transform,opacity;
  transition:transform .46s cubic-bezier(.24,.72,.28,1),opacity .46s}

#finder-view .win.ghost{cursor:pointer}

#finder-view .win.gone{opacity:0;pointer-events:none}


#finder-view .tbar{height:36px;background:linear-gradient(to bottom,var(--bar1),var(--bar2));
  border-bottom:1px solid var(--barline);display:flex;align-items:center;gap:8px;padding:0 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}

#finder-view .lights{display:flex;gap:8px;margin-right:4px}

#finder-view .lights i{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.24);
  cursor:pointer}

#finder-view .lights i:hover{filter:brightness(1.2)}

#finder-view .lights i:nth-child(1){background:radial-gradient(circle at 34% 30%,#FF9A92,#EE5049)}

#finder-view .lights i:nth-child(2){background:radial-gradient(circle at 34% 30%,#FFD98A,#E9A315)}

#finder-view .lights i:nth-child(3){background:radial-gradient(circle at 34% 30%,#9BEB8E,#28A722)}

#finder-view .tbar .title{position:absolute;left:0;right:0;text-align:center;pointer-events:none;
  font-size:13px;font-weight:700;color:var(--bartext);text-shadow:0 1px 0 rgba(255,255,255,.7)}

#finder-view .tbar .title svg{vertical-align:-2px;margin-right:5px}


#finder-view .fxtools{height:38px;background:linear-gradient(to bottom,#EDEDED,#DADADA);
  border-bottom:1px solid #B6B6B6;display:flex;align-items:center;gap:9px;padding:0 10px}

#finder-view .seg{display:flex;border:1px solid #9A9A9A;border-radius:4px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6)}

#finder-view .seg button{width:29px;height:21px;border:0;border-right:1px solid #9A9A9A;cursor:default;
  background:linear-gradient(to bottom,#FDFDFD,#E3E3E3);display:grid;place-items:center;padding:0}

#finder-view .seg button:last-child{border-right:0}

#finder-view .seg button.on{background:linear-gradient(to bottom,#A9A9A9,#C6C6C6);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}

#finder-view .seg svg{display:block;opacity:.72}

#finder-view .arrows{display:flex;border:1px solid #9A9A9A;border-radius:4px;overflow:hidden;margin-right:2px}

#finder-view .arrows button{width:30px;height:21px;border:0;border-right:1px solid #9A9A9A;cursor:pointer;
  background:linear-gradient(to bottom,#FDFDFD,#E3E3E3);color:#5A5A5A;font-size:11px;padding:0}

#finder-view .arrows button:last-child{border-right:0}

#finder-view .arrows button:hover{background:linear-gradient(to bottom,#F0F0F0,#D6D6D6)}

#finder-view .arrows button:disabled{color:#B4B4B4;cursor:default}

#finder-view .srch{margin-left:auto;width:210px;height:22px;border-radius:11px;border:1px solid #A9A9A9;
  background:#fff;font:inherit;font-size:12px;padding:0 10px 0 24px;color:#333;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:7px 50%}

#finder-view .srch:focus{outline:0;border-color:#5B9BEA;box-shadow:0 0 0 3px rgba(91,155,234,.3)}


#finder-view .body{display:flex;height:calc(var(--winh) - 36px - 38px - 23px)}

#finder-view .side{width:178px;background:var(--side);border-right:1px solid #B9BFC8;
  padding:8px 0;overflow-y:auto;font-size:12px;color:var(--sidetext)}

#finder-view .side h4{margin:9px 0 3px;padding:0 10px;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sidehead);text-shadow:0 1px 0 rgba(255,255,255,.6)}

#finder-view .side button{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;
  padding:3px 10px;font:inherit;font-size:12px;color:var(--sidetext);text-align:left;cursor:pointer;
  text-shadow:0 1px 0 rgba(255,255,255,.5)}

#finder-view .side button:hover{background:rgba(255,255,255,.4)}

#finder-view .side button.on{background:linear-gradient(to bottom,#A8BCD8,#8FA6C6);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.22)}

#finder-view .side .ct{margin-left:auto;font-size:10px;color:var(--sidehead)}

#finder-view .side button.on .ct{color:rgba(255,255,255,.85)}


#finder-view .list{flex:1;overflow:auto;background:var(--row)}

#finder-view .lhead{position:sticky;top:0;z-index:2;display:flex;height:19px;align-items:center;
  background:linear-gradient(to bottom,var(--hdr1),var(--hdr2));border-bottom:1px solid var(--hdrline);
  font-size:11px;color:#3B3B3B;text-shadow:0 1px 0 rgba(255,255,255,.7)}

#finder-view .lhead div{padding:0 8px;border-right:1px solid #CFCFCF;overflow:hidden;white-space:nowrap}

#finder-view .lhead div:last-child{border-right:0}

#finder-view .lhead .c1{flex:1}
#finder-view .lhead .c2{width:180px}
#finder-view .lhead .c3{width:140px}
#finder-view .lhead .c4{width:92px}

#finder-view .lhead .c1{background:linear-gradient(to bottom,#DCE6F4,#C4D4EC);color:#243A57}


#finder-view .r{display:flex;align-items:center;height:20px;font-size:12px;color:var(--text);cursor:default;
  border-bottom:1px solid transparent}

#finder-view .r:nth-child(odd){background:var(--rowalt)}

#finder-view .r.sel{background:linear-gradient(to bottom,var(--sel1),var(--sel2));color:var(--seltext)}

#finder-view .r.sel .c2, #finder-view .r.sel .c3, #finder-view .r.sel .c4, #finder-view .r.sel .fxtag{color:rgba(255,255,255,.92)}

#finder-view .r > div{padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

#finder-view .r .c1{flex:1;display:flex;align-items:center;gap:5px}

#finder-view .r .c2{width:180px;color:#4C4F53}
#finder-view .r .c3{width:140px;color:#4C4F53}

#finder-view .r .c4{width:92px;color:#4C4F53}

#finder-view .r.open .tw{transform:rotate(90deg)}

#finder-view .tw{width:11px;height:11px;flex:0 0 11px;display:grid;place-items:center;cursor:pointer;
  transition:transform .12s}

#finder-view .tw svg{display:block}

#finder-view .r.file .c1{padding-left:0}

#finder-view .ind{display:inline-block;flex:0 0 auto}

#finder-view .r .nm{overflow:hidden;text-overflow:ellipsis}

#finder-view .r.fold{cursor:pointer}

#finder-view .r.here > .c1 .nm{font-weight:700}

#finder-view .win.past, #finder-view .win.deep{pointer-events:none}

#finder-view .win.past{transition:transform .95s cubic-bezier(.42,0,.32,1)}

#finder-view .r.fold{cursor:pointer}

#finder-view .r.here > .c1 .nm{font-weight:700}

#finder-view .win.past, #finder-view .win.deep{pointer-events:none}

#finder-view .r.link{cursor:pointer}

#finder-view .r.link:hover .nm{text-decoration:underline}

#finder-view .fxtag{font-size:10px;border:1px solid #C4C4C4;border-radius:2px;padding:0 3px;color:#7A7D81;margin-left:6px}


#finder-view .status{height:23px;background:linear-gradient(to bottom,#EFEFEF,#DEDEDE);border-top:1px solid #BDBDBD;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11px;color:#5D5F63;text-shadow:0 1px 0 rgba(255,255,255,.6)}


/* ---- deck navigation ---------------------------------------------- */
#finder-view .fxnav{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:70;width:46px;height:78px;
  border:0;border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:22px;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .2s,opacity .2s}

#finder-view .fxnav:hover{background:rgba(255,255,255,.22)}

#finder-view .fxnav:disabled{opacity:.2;cursor:default}

#finder-view .fxnav.fxprev{left:18px}
#finder-view .fxnav.fxnext{right:18px}


/* the chronology along the foot: every year stays on the strip, the one in
   hand is lit and the rest sit back */
#finder-view .fxtime{position:absolute;left:0;right:0;bottom:0;height:92px;z-index:70;
  background:linear-gradient(to top,rgba(8,8,9,.92),rgba(8,8,9,0));
  display:flex;align-items:flex-end;padding:0 26px 14px;gap:0;user-select:none}












#finder-view .fxboot{position:absolute;inset:0;display:grid;place-items:center;z-index:90;background:#171719;
  color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .5s}

#finder-view .fxboot.gone{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){#finder-view .win{transition:none}}
@media (max-width:1120px){#finder-view :root{--winw:92vw}#finder-view .fxnav.fxnext{right:18px}#finder-view .rail{display:none}}


/* the last year should not sit under the theme button */
#finder-view .fxtime{padding-right:78px}

/* the last of a departing window goes as it clears the foot of the frame */
#finder-view .win.past{opacity:0;transition:transform .95s cubic-bezier(.42,0,.32,1),
  opacity .5s ease-in .45s}

/* ======================================================================
   PLATINUM
   Mac OS 9 rather than Lion: square corners, a pinstriped title bar, the
   close and zoom boxes as little squares in the corners, chunky bevels and
   Geneva. Everything below overrides the Aqua-era chrome above it, so the
   earlier rules stay readable as the thing being replaced.
   ====================================================================== */
#finder-view{
  --plat:#DDDDDD; --plat-lo:#AAAAAA; --plat-hi:#FFFFFF; --plat-mid:#CCCCCC;
  --plat-line:#000000; --plat-sel:#3B5FA8; --plat-text:#000000;
  --plat-font:"Lucida Grande","Lucida Sans Unicode","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#finder-view .win,#finder-view .win *{font-family:var(--plat-font)}

/* ---- the window ---- */
#finder-view .win{
  background:var(--plat);border:1px solid var(--plat-line);border-radius:0;
  box-shadow:2px 2px 0 rgba(0,0,0,.34),0 18px 34px -14px rgba(0,0,0,.5)}

/* ---- title bar: six pinstripes, a close box left, zoom and collapse right ---- */
/* the pinstripes: a light line and a grey one, all the way across */
#finder-view .win .tbar{
  position:relative;height:22px;padding:0 5px;gap:5px;border-bottom:1px solid var(--plat-line);
  background:repeating-linear-gradient(to bottom,#FFFFFF 0 1px,#C8C8C8 1px 2px);
  box-shadow:inset 0 1px 0 #fff}
/* the close box sits left, the collapse and zoom boxes right, with the title
   on a plaque between them so the stripes do not run under the type */
#finder-view .win .tbar .title{
  position:static;order:1;flex:1;text-align:center;font-size:11.5px;font-weight:700;
  letter-spacing:.01em;color:var(--plat-text);line-height:1;white-space:nowrap;overflow:hidden}
#finder-view .win .tbar .title>span{background:none}
#finder-view .win .tbar .title svg{vertical-align:-2px;margin-right:4px}
#finder-view .win .tbar .title::before,#finder-view .win .tbar .title::after{
  content:'';display:inline-block;width:0}
#finder-view .lights{display:flex;gap:8px;order:0;margin:0 4px 0 2px}
/* round, and lit from the top left, as they were */
#finder-view .lights i{
  width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.34);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1px rgba(0,0,0,.18)}
#finder-view .lights i:nth-child(1){background:radial-gradient(circle at 34% 28%,#FF9B92,#E24B41)}
#finder-view .lights i:nth-child(2){background:radial-gradient(circle at 34% 28%,#FFDB8A,#E0A016)}
#finder-view .lights i:nth-child(3){background:radial-gradient(circle at 34% 28%,#A6EC96,#27A721)}
#finder-view .lights i:hover{filter:brightness(1.12)}
#finder-view .lights i:active{filter:brightness(.82)}

/* ---- the button strip below it ---- */
#finder-view .fxtools{
  height:30px;background:var(--plat);border-bottom:1px solid var(--plat-lo);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 var(--plat-hi);gap:6px}
#finder-view .arrows,#finder-view .seg{border:0;border-radius:0;box-shadow:none;gap:2px;display:flex}
#finder-view .arrows button,#finder-view .seg button{
  border:1px solid var(--plat-line);border-radius:3px;height:19px;
  background:linear-gradient(to bottom,#fff,var(--plat));
  box-shadow:inset -1px -1px 0 var(--plat-lo);color:#000}
#finder-view .arrows button:hover,#finder-view .seg button:hover{background:#EFEFEF}
#finder-view .arrows button:active,#finder-view .seg button:active,
#finder-view .seg button.on{background:var(--plat-lo);box-shadow:inset 1px 1px 2px rgba(0,0,0,.4)}
/* the rounded field, with the glass sitting inside it at the left */
#finder-view .srch{
  height:21px;border:1px solid #9B9B9B;border-radius:11px;background:#fff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);font-size:11.5px;color:#000;
  padding:0 10px 0 25px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.6-4.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:8px 50%}
#finder-view .srch::placeholder{color:#9A9A9A}
#finder-view .srch:focus{outline:0;border-color:#5B8FD6;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 0 0 3px rgba(91,143,214,.28)}
#finder-view .srch::-webkit-search-cancel-button{-webkit-appearance:none;height:12px;width:12px;
  border-radius:50%;background:#B4B4B4;cursor:pointer;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E")}

/* ---- sidebar ---- */
#finder-view .side{
  width:172px;background:var(--plat);border-right:1px solid var(--plat-lo);
  box-shadow:inset -1px 0 0 #fff;color:#000;font-size:11px}
#finder-view .side h4{color:#555;text-shadow:none;font-size:9px;letter-spacing:.06em}
#finder-view .side button{color:#000;text-shadow:none;font-size:11px;padding:3.5px 10px}
#finder-view .side button:hover{background:#CFCFCF}
#finder-view .side button.on{background:var(--plat-sel);color:#fff;text-shadow:none}
#finder-view .side .ct{color:#666}
#finder-view .side button.on .ct{color:#D6E0F5}

/* ---- the list ---- */
#finder-view .list{background:#fff}
#finder-view .lhead{
  height:18px;background:linear-gradient(to bottom,#fff,var(--plat));
  border-bottom:1px solid var(--plat-line);font-size:10.5px;color:#000;text-shadow:none}
#finder-view .lhead div{border-right:1px solid var(--plat-lo)}
#finder-view .lhead .c1{background:linear-gradient(to bottom,#fff,#C9D6EA);color:#000}
#finder-view .r{height:19px;font-size:11px;letter-spacing:0;color:#000}
#finder-view .r:nth-child(odd){background:#F2F2F2}
#finder-view .r.sel{background:var(--plat-sel);color:#fff}
#finder-view .r .c2,#finder-view .r .c3,#finder-view .r .c4{color:#333}
#finder-view .fxtag{border:1px solid var(--plat-lo);color:#555;border-radius:0}

/* ---- status bar ---- */
#finder-view .status{
  height:20px;background:var(--plat);border-top:1px solid var(--plat-lo);
  box-shadow:inset 0 1px 0 #fff;font-size:10.5px;color:#000;text-shadow:none}
/* the title sits straight on the stripes; a white halo keeps it readable
   without putting a panel behind it */
#finder-view .win .tbar .title .plaque{
  background:none;padding:0;
  text-shadow:0 1px 0 #fff,0 -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff}

/* ---- the timeline ------------------------------------------------------
   One circle a year, sized by how much the archive holds for it, so the run
   of the work is legible before anything is clicked. Years the filter
   excludes stay on the strip rather than vanishing from it. */
#finder-view .fxtime{height:112px;padding:0 30px 14px;align-items:flex-end;gap:0}
/* Nineteen four-digit years will not divide into a phone. Below the width
   where the labels stop fitting, the strip scrolls instead of pushing its
   last years out past the edge. */
@media(max-width:760px){
  #finder-view .fxtime{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:0 16px 14px}
  #finder-view .fxtime::-webkit-scrollbar{display:none}
  #finder-view .fxtime .yrbox{flex:0 0 38px}
  #finder-view .fxtime .axis{left:16px;right:16px}
}
#finder-view .fxtime .axis{position:absolute;left:30px;right:30px;bottom:37px;height:1px;
  background:rgba(255,255,255,.22);pointer-events:none}
#finder-view .yrbox{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:9px;border:0;background:none;padding:0 0 6px;
  cursor:pointer;font-family:var(--font);transition:opacity .2s}
#finder-view .yrbox .orb{display:block;border-radius:50%;transform-origin:50% 100%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.55));
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .11s cubic-bezier(.3,.7,.3,1),background .2s,box-shadow .2s;
  will-change:transform}
#finder-view .yrbox .n{font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;transition:color .2s}
/* the label brightens with the swell rather than only on the one hovered */
#finder-view .yrbox .n{opacity:calc(.62 + var(--near,0) * .38);
  transition:color .2s,transform .11s}
#finder-view .yrbox:hover .n{color:#fff}
#finder-view .yrbox.on .orb{background:radial-gradient(circle at 34% 30%,#9FD0FF,#3B7BD4);
  box-shadow:0 0 0 3px rgba(94,158,232,.35),0 2px 6px rgba(0,0,0,.5)}
#finder-view .yrbox.on .n{color:#fff;font-weight:700}
#finder-view .yrbox.off{opacity:.34}
#finder-view .yrbox.off:hover{opacity:.7}

/* ---- the info panel, on a right-click ---- */
#finder-view .fxinfo{position:absolute;z-index:120;min-width:250px;max-width:340px;
  background:var(--plat);border:1px solid var(--plat-line);
  box-shadow:3px 3px 0 rgba(0,0,0,.34),0 12px 28px -10px rgba(0,0,0,.5);
  font-family:var(--plat-font);font-size:11px;color:#000;padding:0 0 4px}
#finder-view .fxinfo-h{font-weight:700;font-size:11.5px;padding:8px 12px 2px;line-height:1.3}
#finder-view .fxinfo-s{color:#555;padding:0 12px 7px;border-bottom:1px solid var(--plat-lo);
  box-shadow:0 1px 0 #fff}
#finder-view .fxinfo-r{display:flex;gap:10px;padding:4px 12px;align-items:baseline}
#finder-view .fxinfo-r span{flex:0 0 78px;color:#555}
#finder-view .fxinfo-r b{font-weight:400;color:#000}
#finder-view .fxinfo-a{display:block;padding:5px 12px;color:#1A4FA0;text-decoration:none;
  border-top:1px solid var(--plat-lo);box-shadow:0 -1px 0 #fff;margin-top:3px}
#finder-view .fxinfo-a:hover{background:var(--plat-sel);color:#fff}

/* ---- the toolbar, as Aqua had it --------------------------------------
   A labelled Back button, the view picker, a dotted rule, then the places
   bar. Back and View work; the places are furniture and say so by not
   responding to the pointer. */
#finder-view .fxtools{height:56px;padding:0 10px;gap:14px;align-items:center}
#finder-view .tb{display:flex;flex-direction:column;align-items:center;gap:3px;
  border:0;background:none;padding:0;cursor:pointer;font-family:var(--plat-font)}
#finder-view .tb .lb{font-size:10.5px;color:#1A1A1A;line-height:1}
#finder-view .tb .ic{display:flex;align-items:center;justify-content:center;height:24px}
#finder-view .tb:hover .lb{color:#000}
#finder-view .tb[disabled]{opacity:.4;cursor:default}
#finder-view .tb.deco{cursor:default;opacity:.92}
#finder-view .tbdiv{width:1px;align-self:stretch;margin:9px 2px;
  background:repeating-linear-gradient(to bottom,#9A9A9A 0 1px,transparent 1px 3px)}
#finder-view .viewpick .seg{display:flex;border:1px solid #8C8C8C;border-radius:5px;
  overflow:hidden;height:22px;box-shadow:inset 0 1px 0 #fff}
#finder-view .viewpick .seg button{width:28px;height:100%;border:0;border-right:1px solid #8C8C8C;
  background:linear-gradient(to bottom,#FCFCFC,#DCDCDC);display:grid;place-items:center;
  cursor:pointer;padding:0}
#finder-view .viewpick .seg button:last-child{border-right:0}
#finder-view .viewpick .seg button:hover{background:linear-gradient(to bottom,#fff,#EDEDED)}
#finder-view .viewpick .seg button.on{
  background:linear-gradient(to bottom,#7FB4E8,#4E8FD8);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
#finder-view .viewpick .seg button.on svg{filter:brightness(0) invert(1)}
#finder-view .fxtools .srch{margin-left:auto;width:200px}

/* ---- icon view ---- */
#finder-view .list.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  align-content:start;gap:8px;padding:14px;background:#fff}
#finder-view .ico{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;
  background:none;padding:8px 4px;cursor:pointer;font-family:var(--plat-font);border-radius:4px}
#finder-view .ico .ig{transform:scale(2.6);display:block;margin-bottom:9px}
#finder-view .ico .il{font-size:11px;color:#000;text-align:center;line-height:1.25;
  padding:1px 5px;border-radius:3px;max-width:112px}
#finder-view .ico .ic2{font-size:10px;color:#666}
#finder-view .ico:hover .il{background:#E8E8E8}
#finder-view .ico.on .il{background:var(--plat-sel);color:#fff}
#finder-view .ico.on .ic2{color:#444}

/* ---- column view ---- */
#finder-view .list.cols{display:flex;background:#fff;overflow:hidden}
#finder-view .list.cols .col{flex:1;min-width:0;overflow-y:auto;
  border-right:1px solid var(--plat-lo);padding:2px 0}
#finder-view .list.cols .col.last{border-right:0}
#finder-view .cr{display:flex;align-items:center;gap:5px;width:100%;border:0;background:none;
  padding:3px 6px;font-family:var(--plat-font);font-size:11px;color:#000;text-align:left;
  cursor:pointer}
#finder-view .cr span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#finder-view .cr i{font-style:normal;color:#888}
#finder-view .cr:hover{background:#EDEDED}
#finder-view .cr.on{background:var(--plat-sel);color:#fff}
#finder-view .cr.on i{color:#D6E0F5}

/* the pane sits under a taller toolbar now */
#finder-view .body{height:calc(var(--winh) - 22px - 56px - 20px)}

/* a jump of more than a step or two is placed, not animated */
#finder-view .fxdeck.nofx .win{transition:none !important}

/* the icons are cut out properly, so they need no blend mode to sit on the
   platinum -- or on anything else */
#finder-view .tb .aq{height:26px;width:auto;display:block}
#finder-view .tb.deco .aq{height:26px}
#finder-view .tb[data-nav] .aq{height:23px}
#finder-view .ico.up .ig{opacity:.55}
#finder-view .ico.up .il{font-style:italic;color:#444}

/* the folder icon at each of the sizes it is used */
#finder-view .aqf{height:15px;width:auto;display:inline-block;vertical-align:-3px;flex:0 0 auto}
#finder-view .win .tbar .title .aqf{height:14px;vertical-align:-3px}
#finder-view .cr .aqf{height:14px;vertical-align:-3px}
#finder-view .ico .ig{transform:none;margin-bottom:6px;display:block}
#finder-view .ico .ig .aqf{height:48px;vertical-align:0}
#finder-view .ico .ig svg{width:44px;height:44px}

/* the text document, at each size it appears */
#finder-view .aqd{height:15px;width:auto;display:inline-block;vertical-align:-3px;flex:0 0 auto}
#finder-view .cr .aqd{height:14px;vertical-align:-3px}
#finder-view .ico .ig .aqd{height:46px;vertical-align:0}

/* the runway film, at each size it appears */
#finder-view .aqv{height:15px;width:auto;display:inline-block;vertical-align:-3px;flex:0 0 auto}
#finder-view .cr .aqv{height:14px;vertical-align:-3px}
#finder-view .ico .ig .aqv{height:46px;vertical-align:0}

/* The publisher's own abstract, in the Get Info box. */
.fxinfo-abs{margin:.55rem 0 .5rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.82rem;line-height:1.5;color:var(--ink);max-width:46ch}
.fxinfo-abs-src{display:block;margin-top:.4rem;font-size:.72rem;color:var(--muted);
  letter-spacing:.02em;text-transform:uppercase}