.wss-photo-source{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0;
  font:13px/1.45 var(--mono,'Fragment Mono',ui-monospace,'SFMono-Regular',Menlo,Monaco,monospace);
  letter-spacing:0;
}
.pc-tray-source-mount,
.ps-tray-source-mount,
.zs-tray-source-mount,
.so-tray-source-mount,
#mgTraySource{
  position:relative;
  z-index:1200;
  display:inline-flex;
  align-items:center;
  min-width:0;
  margin-left:2px;
  margin-right:auto;
  overflow:visible;
}
.wss-photo-source-button{
  border:0;
  border-bottom:1px solid var(--line,rgba(96,88,80,.24));
  background:transparent;
  padding:2px 14px 4px 0;
  color:var(--ink-quiet,var(--ink,#3d3d39));
  font:inherit;
  letter-spacing:0;
  text-transform:lowercase;
  white-space:nowrap;
  cursor:pointer;
}
.wss-photo-source-button::after{
  content:'⌄';
  position:absolute;
  right:0;
}
.wss-photo-source-menu{
  position:absolute;
  z-index:1200;
  left:0;
  top:auto;
  bottom:calc(100% + 6px);
  width:240px;
  max-width:min(240px,calc(100vw - 32px));
  padding:5px;
  border:1px solid var(--line,rgba(96,88,80,.24));
  background:var(--paper-soft,#eceae6);
  box-shadow:0 10px 24px rgba(61,61,57,.12);
}
.wss-photo-source-collections{
  max-height:216px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(85,84,76,.32) transparent;
}
.wss-photo-source-collections::-webkit-scrollbar{width:7px}
.wss-photo-source-collections::-webkit-scrollbar-track{background:transparent}
.wss-photo-source-collections::-webkit-scrollbar-thumb{
  background:rgba(85,84,76,.32);
  border:2px solid transparent;
  background-clip:padding-box;
}
.wss-photo-source-option{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  padding:7px 8px;
  color:var(--ink,#3d3d39);
  font:inherit;
  letter-spacing:0;
  line-height:1.45;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.wss-photo-source-option:hover,
.wss-photo-source-option:focus-visible{
  background:rgba(255,255,255,.5);
}
.wss-photo-source-option-open{
  margin-top:4px;
  border-top:1px solid var(--line-soft,rgba(96,88,80,.14));
}
.zs-phototray,
.zs-phototray-head{
  position:relative;
  overflow:visible;
}
#trayDock.zs-phototray{
  z-index:1200;
  overflow:visible;
}
.wss-library-strip{
  display:flex;
  align-items:flex-start;
  gap:0;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  /* The selection line reaches 4px beyond the white mat. Six pixels above it
     keeps the complete line visible with a quiet 2px of breathing room. */
  padding:6px 0 4px;
}
/* Shift-click belongs to tray selection. Safari otherwise starts its own blue
   text-selection range across the photographs before the click arrives. */
.wss-local-strip,
.wss-local-strip *,
.wss-library-strip,
.wss-library-strip *{
  -webkit-user-select:none;
  user-select:none;
}
.wss-local-strip[hidden],
.wss-library-strip[hidden]{
  display:none !important;
}
.is-collapsed .wss-library-strip,
.is-collapsed .wss-library-status{
  display:none !important;
}
.wss-library-family{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:flex-start;
  min-width:0;
  margin-right:max(var(--kk-tt-gap,10px),10px);
}
.wss-library-family-items{
  display:inline-flex;
  align-items:flex-start;
  /* 8px left only 2px of air once both prints are matted. */
  gap:14px;
}
.wss-library-version{
  display:inline-flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:0;
}
.wss-library-family:not(.is-expanded) .wss-library-version:not(.is-active){
  display:none;
}
.wss-library-thumb-shell{
  position:relative;
  display:block;
}
.wss-library-thumb{
  position:relative;
  display:block;
  width:auto;
  height:var(--kk-tt-h,84px);
  aspect-ratio:var(--wss-thumb-ratio,.8);
  padding:0;
  overflow:hidden;
  border:1px solid var(--line,rgba(96,88,80,.24));
  background:var(--paper-soft,#eceae6);
  /* The white mat is the resting look now: every print is matted. Selection is
     the fine line OUTSIDE the mat, added below. */
  box-shadow:0 0 0 3px #fff;
  cursor:pointer;
}
.wss-library-thumb:focus-visible{
  outline:1px solid var(--cta,var(--ink,#3d3d39));
  outline-offset:2px;
}
.wss-library-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.wss-library-thumb.is-graphic img{
  object-fit:contain;
  object-position:50% 50%;
}
/* `is-active` still says only which VERSION of a family is showing. The fine
   outside line belongs exclusively to the shared `is-selected` state below. */
.wss-library-family-count{
  /* White paper with an ink number, sized from the thumbnail. The dark chip
     it replaces vanished into a dark photograph, which is most of them. */
  --wss-count-badge:clamp(12px,calc(var(--kk-tt-h,84px) * 0.19),18px);
  position:absolute;
  z-index:2;
  left:3px;
  bottom:3px;
  min-width:var(--wss-count-badge);
  width:var(--wss-count-badge);
  height:var(--wss-count-badge);
  padding:0;
  border:1px solid rgba(61,61,57,.22);
  border-radius:0;
  background:#fff;
  color:var(--ink,#3d3d39);
  font-family:var(--mono,monospace);
  font-size:max(7px,calc(var(--wss-count-badge) * .5));
  line-height:calc(var(--wss-count-badge) - 2px);
  cursor:pointer;
}
.wss-library-family-count:hover{
  background:#f2efea;
}
.wss-library-family-count:focus-visible{
  outline:1px solid #fff;
  outline-offset:1px;
}
.wss-library-version-label{
  display:none;
  min-height:14px;
  max-width:112px;
  padding:0 3px;
  overflow:hidden;
  color:var(--ink-soft,#6b6b66);
  font:10px/1.35 var(--mono,monospace);
  letter-spacing:.02em;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:lowercase;
  white-space:nowrap;
}
.wss-library-family.is-expanded .wss-library-version-label{
  display:block;
}
.wss-library-status{
  margin:5px 0 0;
  color:var(--muted,#807d78);
  font:10px/1.5 var(--mono,monospace);
}
@media (max-width:720px){
  .wss-library-family-items{gap:7px}
}

/* ------------------------------------------------ the Studio tray, everywhere

   Kim, after Edit was done: the same selection is invisible in every other
   tool. It was, and the reason is that each tool drew its ring in its OWN
   accent — Postcard #9E8378, Social #6E7B83, Zine #6f7160, Proof #7D6A5D,
   Frame #55544C. Those are mid-tones sitting a few steps from the paper.
   Edit's #403128 was the only one dark enough to read, which is exactly why
   Edit was the only tool where it worked.

   So one language for all of them: every print rests in a white mat, and the
   one in play gains a fine INK line outside that mat. Outside the mat it never
   touches the photograph, so it cannot be lost in a dark print — the failure
   the old rings had — and ink is the one colour every tool already shares.

   These are deliberate overrides. This sheet loads before each tool's own
   <style>, so the resting mat needs no weight, but the in-play line has to
   beat rules the tools already own. The !important is confined to box-shadow:
   transforms, lifts and the arrival animations stay with their tools. */
.mg-tt,.pc-tt,.zs-tt,.ps-tt,.so-tt{
  box-shadow:0 0 0 3px #fff;
}
@media (hover:hover){
  /* Several tools swap the shadow out on hover, which dropped the mat. */
  .mg-tt:hover,.pc-tt:hover,.zs-tt:hover,.ps-tt:hover,.so-tt:hover{
    box-shadow:0 0 0 3px #fff!important;
  }
}
/* Declared after hover on purpose, so hovering the chosen print keeps its line.
   Social has no selected state at all — `is-placed` is its only signal that a
   photograph is in the design, so that is the one that earns the line. */
.wss-library-thumb.is-selected,
.mg-tt.is-selected,.pc-tt.is-selected,.zs-tt.is-sel,.zs-tt.is-armed,
.ps-tt.is-sel,.ps-tt.is-selected,.so-tt.is-placed{
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ink,#3D3D39)!important;
}
/* Kim chose Zine's production haze for "on my design": white at 55%. It is
   independent of the outside selection line, so a print can show either state
   or both. The badges and remove controls sit above it. */
.wss-library-thumb.is-used::before,.mg-tt.is-used::before,.ps-tt.is-used::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:rgba(255,255,255,.55);
  pointer-events:none;
}
/* Zine drew its selection INSIDE the print (outline-offset:-2px), the worst
   possible place for it on a dark photograph. Proof drew its just outside.
   Both are replaced by the line above; the shared veil owns Proof's used state. */
.zs-tt.is-sel,.ps-tt.is-sel,.ps-tt.is-selected{outline:none!important;}
/* Every strip clips: overflow-y:hidden over 2-4px of vertical padding, so the
   mat and the line were cut off top or bottom. This is what Kim saw in Edit. */
.mg-tray-strip,.pc-tray--photos .pc-tray-strip,.so-tray-strip,.ps-tray-strip{
  padding-top:8px!important;padding-bottom:8px!important;
}

/* The order badge, made one thing. Kim: "gah. it's all so inconsistent."

   It was. Frame drew an 18px CIRCLE hanging off the corner at -7px,-7px in
   #55544C with a white number. Postcard drew a 17px rounded PILL tucked inside
   at 3px,3px in #9E8378 with a white number. Zine, Social and Proof drew no
   number at all. Same idea, three answers, two of them invisible.

   One answer: the white square with an ink number the family badge already
   uses, in the top-left, so the two can sit on one print without collision.
   Show and hide stay with the tools — this sets no display and no opacity, so
   Frame's `display:block` and Postcard's `opacity:1` still do their own work.
   Specificity, not !important, since these load after us. */
.wss-library-thumb .mg-tt-sel,.mg-tt .mg-tt-sel,.pc-tt .pc-tt-sel,.ps-tt .mg-tt-sel{
  --wss-order-badge:clamp(12px,calc(var(--kk-tt-h,84px) * 0.19),18px);
  left:3px;
  top:3px;
  right:auto;
  bottom:auto;
  min-width:var(--wss-order-badge);
  width:var(--wss-order-badge);
  height:var(--wss-order-badge);
  padding:0;
  border:1px solid rgba(61,61,57,.22);
  border-radius:0;
  background:#fff;
  color:var(--ink,#3D3D39);
  font-family:var(--mono,monospace);
  font-size:max(7px,calc(var(--wss-order-badge) * .5));
  line-height:calc(var(--wss-order-badge) - 2px);
  text-align:center;
}
.wss-library-thumb .mg-tt-sel,.ps-tt .mg-tt-sel{
  position:absolute;
  z-index:4;
  display:none;
  pointer-events:none;
}
.wss-library-thumb.is-selected .mg-tt-sel,.ps-tt.is-selected .mg-tt-sel{display:block;}

/* 2026-08-23 — Save to Library: the collection picker.
   It borrows the source menu's own box and options wholesale, because it IS
   that grammar: the same shelves, drawn the same way. Only the three things
   the source menu has no use for are new — the current-shelf mark, the
   `+ new collection` field, and its width. It opens UPWARD like the source
   menu, and for the same reason the send menu does: the row that anchors it
   sits low, and a 13-inch rail has nothing to spare below it. */
.wss-save-menu{
  width:220px;
  max-width:min(220px,calc(100vw - 32px));
}
.wss-save-menu .wss-photo-source-option.is-current{
  background:rgba(255,255,255,.55);
}
.wss-save-menu .wss-photo-source-option.is-current::after{
  content:'✦';
  margin-left:6px;
  opacity:.55;
}
.wss-save-new{
  margin-top:4px;
  border-top:1px solid var(--line-soft,rgba(96,88,80,.14));
}
/* The `hidden` attribute has to WIN here. `.wss-photo-source-option` and the
   name field below both set an author `display`, and any author display rule
   beats the browser's own `[hidden]{display:none}` — so `+ new collection` and
   its field would both show at once, the field inviting a name nobody asked
   to give. This is the same fault as the 2026-08-19 `.mg-yf-fam{display:block}`
   one, which made the Your Fonts search reorder without ever filtering. */
.wss-save-new-open[hidden],
.wss-save-new-input[hidden],
.wss-save-new-note[hidden]{display:none!important;}
.wss-save-new-input{
  display:block;
  width:100%;
  margin:6px 0 2px;
  border:0;
  border-bottom:1px solid var(--line,rgba(96,88,80,.24));
  background:transparent;
  padding:5px 2px;
  color:var(--ink,#3d3d39);
  font:inherit;
  letter-spacing:0;
}
.wss-save-new-input:focus{
  outline:none;
  border-bottom-color:var(--ink,#3d3d39);
}
.wss-save-new-note{
  margin:2px 2px 4px;
  color:var(--ink-quiet,rgba(61,61,57,.62));
  font:inherit;
  font-size:.86em;
  line-height:1.4;
}